WSO2Con USA 2015: Building Web Apps with Reusable UI Components and Composition
•
1 j'aime•1,002 vues
This session will discuss how the reusable UI component framework is transforming ad-hoc web development into an efficient yet pragmatic practice. The same principles and best practices that we follow when creating well-designed backend applications are applied in the context of UI design. With this new framework, cohesive units of UI code with back-end logic will come together to create a complete app only at build time. This allows UI components to be shared across apps without compromising the look and feel of the apps. It adheres to the ‘open/closed principle’ by letting the final app to be modified by you without changing the original app’s code, and thereby minimizing the migration and patching cost.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à WSO2Con USA 2015: Building Web Apps with Reusable UI Components and Composition
Similaire à WSO2Con USA 2015: Building Web Apps with Reusable UI Components and Composition (20)
Plus de WSO2
Plus de WSO2 (20)
Dernier
Dernier (20)
WSO2Con USA 2015: Building Web Apps with Reusable UI Components and Composition
- 1. WSO2 UI Framework Manu Perera Team lead ES/DS team
- 2. Agenda • Problems with ad-‐hog UI creaCon • Journey to find a beGer way • WSO2 UI framework as a soluCon • Beyond basic componenCzaCon • Design Principles behind UUF
- 3. Ad-‐hog UI creaCon Advantages • Unlimited customizability • Less learning curve for the UI/UX designers Disadvantages • RepeCCve tasks, adding to development and maintenance cost • Each UI needs special knowledge to maintain • Each customizaCon of the UI is a separate branch
- 4. Disadvantages (cont.) • No way to smoothly patch part of the applicaCon • Customer maintained customizaCons make it unpatchable • Customers who has customized have a hard Cme migraCng the UI • UX Design is only involved in the beginning
- 5. Journey to find a beGer way Block model (in WSO2 APIM and WSO2 AppFactory) Caramel model (In WSO2 ES/WSO2 Greg 5) solved issues -‐ CustomizaCons now can share code( such as ES and Greg) Easier migraCons between versions for customized UIs downside -‐ This turned out to be bit more complex than we expected
- 6. Design Principles behind UUF • Open/closed principle • Liskov subsCtuCon principle • Dependency inversion principle • Single responsibility principle
- 7. WSO2 UI Framework • Component -‐ a reusable element that can be brought in at build Cme. (think of this as jar) A Component has – Layouts -‐ layout is the base structure. – Unit -‐ is a cohesive collecCon of html/css/js. (think of this as a class) – Page -‐ Special type of a unit, that is responsible for whole page
- 8. Layout <!DOCTYPE html> <html> <head> {{defineZone "js"}} </head> <body> <div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="navbar-brand">{{defineZone "brand"}}</div> {{defineZone "upperRight"}} </div> </div> <div id="wrap"> <div class="container-fluid"> <div class="row"> {{defineZone "content"}} </div> </div> <!-- /container --> </div> </body> </html>
- 9. Unit example.unit.logo |----------------------logo.hbs | |----------------------logo.json | |----------------------public |-------------my-logo.png | |-------------my-logo.css {{#zone "brand"}} <a href="{{#defineZone "productUri"}}{{@app.uri}}{{/defineZone}}"> <img src="{{@unit.publicUri}}/img/logo.png" alt="{{defineZone "productName"}}" title="{{defineZone "productName"}}" class="logo" /> <h1>{{#defineZone "productName"}}WSO2 Template App{{/defineZone}}</h1> </a> {{/zone}} { "version": "1.0.0", "index": 1, "pushedUris": [ "/", "/{+any}" ] }
- 10. Overriding
- 11. Thank You