wso2con usa 2015: building web apps with reusable ui components and composition
TRANSCRIPT
WSO2 UI Framework
Manu Perera Team lead ES/DS team
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
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
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
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
Design Principles behind UUF
• Open/closed principle • Liskov subsCtuCon principle • Dependency inversion principle • Single responsibility principle
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
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>
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}" ] }
Overriding
Thank You