Build responsive enterprise-grade web apps with OpenUI5
OpenUI5 is a very comprehensive web UI library that is now Open Source. Watch this presentation to learn about its unique feature set and to see many code examples and live demos. You will see how to easily develop powerful web apps that run on any device, from smartphone to desktop browsers, adapting to screen size and touch/mouse interaction. Declarative UIs, HTML templating, Model-View-Controller support, two-way data binding to models supporting various data formats like JSON, XML, and OData are some of the main features that make life for app developers easier. Add more than 200 responsive UI controls on top, ranging from simple buttons to complex tables with built-in virtual scrolling and back-end paging, and you have a mighty tool set at hand. SAP, one of the biggest business software companies in the world, relies on OpenUI5 to build mission-critical applications this is why many enterprise-grade features are built-in: accessibility, theming, extensibility, internationalization, support for right-to-left languages, special tools for debugging, and a consistent, well-researched UI design. And the best thing about it: with OpenUI5 you get all of this for free. If you havent heard about OpenUI5, no problem: it had initially been developed as closed-source software and has only been open-sourced recently, accepting contributions at GitHub since October. So this is the perfect time to learn about it!
Build responsive enterprise-grade web apps with OpenUI5
- 1. Build responsive enterprise-grade web apps with OpenUI5 Andreas Kunz (SAP) . @aku_dev http://www.openui5.org
- 2. OpenUI5 Whats that? JavaScript UI library 200+ UI controls MVC, data binding, templating, Most current browsers and devices Responsive design Enterprise-grade Is Open Source, uses Open Source
- 5. Hello Fluent! <!DOCTYPE html> <html><head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello Fluent</title> <script id='sap-ui-bootstrap' type='text/javascript' src=/slideshow/build-responsive-enterprisegrade-web-apps-with-openui5/48103373/& data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script> <script> new sap.ui.ux3.Shell({ content: new sap.ui.commons.Button({text:'Hello Fluent!'}) }).placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html> Try it live at JS Bin: http://jsbin.com/wocuxo/5/edit
- 6. MVC Model JSON, XML, OData ControllerView JS, XML, HTML, JSON Data Binding Interaction Updates Different view and model types to meet everyones needs
- 7. Digging deeper The Documentation Project homepage: http://openui5.org - The developer guide - The API documentation - The demo apps - The Explored app
- 8. Custom Controls Controls can be defined on-the-fly in JS Data binding etc. out of the box A simple control: http://jsbin.com/openui5-control/2/edit A Google Map control: http://jsbin.com/tapuwu/2/edit Note the two-way data binding!
- 9. HTML Templating Powered by Handlebars.js Plus UI5 model and data binding Can also be used to define new controls <div id="simpleTemplate" data-type="text/x-handlebars-template"> <div>{{text path="/name"}}:</div> <ul> {{#each path="/players"}} <li> {{text path="first"}} {{text path="last"}} </li> {{/each}} </ul> </div>
- 10. ?
- 11. Enterprise-grade Internationalization and right-to-left support Accessibility Extra quality assurance Debugging support (e.g. Ctrl-Alt-Shift-S popup) API stability over time Theming
- 12. Theming Uses LESS to generate CSS files Predefined themes (including High Contrast Black) Visual Theme Designer to edit themes
- 13. Theming
- 18. Bangalore Football Club Fan App BangaloreFCFanApp
- 21. Not an official 温沿沿
- 22. You are in good company SAS uses UI5 for all new web development and contributes to UI5 Many companies write UI5 apps: Danone, adidas, Geberit, Bilfinger Chemserv, National Center for Tumor Diseases (Germany), Vivid community: 2000+ posts per month at SCN forum, stackoverflow, Code Jams and other meetups all over the world GitHub project has 5000+ commits in the last six months
- 23. Thank you! Web: http://openui5.org GitHub: https://github.com/SAP/openui5 Docs & Demos: https://openui5.hana.ondemand.com Come to our booth for more! . @OpenUI5