Choosing the right front-end framework Janko Ulaga, Tomislav Naki ć-Alfirevi ć May 2013 Introduction - needed to upgrade our UI - choosing the right framework: a challenge! - currently around 30 Java frameworks - not a simple process, many different criteria to consider * certain frameworks suggest or encourage certain technologies...not so good, right? UI prototype description - monitor & control system - table showing real time device state changes - graph showing parameter updates - form to set device parameter values Criteria - technical vs. business - in-house knowledge is great, but... - analyze & consider everything: in-house procedures, development, HTML5, licensing, testing, integration... Criteria - JSF & Vaadin for Java - ExtJS & AngularJS for JavaScript Vaadin Java Server Angular JS ExtJS Faces Popularity(# of 246,000 1,220,000 110,000 1,000,000 Google searches/ month) Learning( # of ~20 ~220 ~50 ~40 books on Amazon) Requires No but some No No Yes development components do license Java Server Faces Basics - component-driven UI design model, XML templates - requests processed by the FacesServlet which does all the heavy lifting - convention over configuration - inversion of control *great for rapid development, but lacks “shiny” components Which JSF framework? - popularity, showcases, extensions... - we chose Primefaces Vaadin Basics - code in Java - uses GWT for web page rendering - extensible components set - server side application logic Implementation - Primefaces - environment setup - easy design: one view/action subset – one backing bean - great to use with Twitter Bootstrap - easy to combine JavaScript *push component cannot connect to remote URL - quick solution with PE Extensions - high network traffic Implementation - Vaadin - environment setup - two additional plugins, charts and push - nice API - works great on all browsers - no need for JavaScript *not so good performance-wise, bad choice for real- time apps. *hard to combine with other technologies or resources Summary - what we measured? - why we measured it? - how we measured it? - what we omitted? Comparison table Vaadin JSF-Primefaces Convention over configuration NY Inversion of control YY Client side validation Y N(Y with JavaScript) Client size 28.6 MB 3.7 MB # of plugins used 2 1 Additional coding needed NY Aditional code complexity(1- 10) N/A 2 # of Java classes 11 8 Overall impression(1-10) 7 6 The data we got Vaadin JSF - Primefaces Browser memory usage 24.4 – 73.3 MB 75.8-116 MB CSS :24.2 KB / avg. 43 ms CSS :38.6 KB / avg. 77 ms Images :45.1 KB / avg. 167 ms Images :17.5 KB / avg. 81 ms Network usage Scripts :540 KB / avg. 276 ms Scripts :294.5 KB / avg. 181 ms Push :1.7 MB / min( 3.7 KB/push) Push :1.7 MB / min( 3.7 KB/push) DOM rendering 996 ms 577 ms Total time to load page 2.49 s 655 ms Server-side heap consumption Max used heap : 236 MB Max used heap : 197 MB * Vaadin'sServer side performance CPU usage was poorMax for usageover 50: 28.1% chart records, soMax measurements usage : 16.4% were made for 20 data pairs JavaScript finalists - right choice: compare Java with JS - Primefaces will be compared to the JS match-up winner - compare same measurement parameters JavaScript frameworks duel ExtJS AngularJS Browser memory usage 204 -244MB 12.3 –33.1 MB CSS :38.9 KB / avg. 207 ms CSS :123.3 KB / avg. 85 ms Images :15 KB / avg. 236 ms Images :12.7 KB / avg. 34 ms Network usage Scripts :~836 KB / avg. 849 ms Scripts :449.9 KB / avg. 101 ms Push :125 KB/min Push :125 KB/min DOM rendering 1.7 s 433 ms Total time to load page 1.7 s 494 ms Server-side heap consumption Max used heap : 139 MB Max used heap : 139 MB Server side CPU usage Max usage : 11.2% Max usage : 11.2% JavaScript vs Java- side by side JSF - Primefaces AngularJS Browser memory usage 75.8 –116 MB 12.3 –33.1 MB CSS :38.6 KB / avg. 77 ms CSS :123.3 KB / avg. 85 ms Images :17.5 KB / avg. 81 ms Images :12.7 KB / avg. 34 ms Network usage Scripts : 294.5 KB / avg. 181 ms Scripts :449.9 KB / avg. 101 ms Push :1.7 MB/min Push :125 KB/min DOM rendering 577 ms 433 ms Total time to load page 655 ms 494 ms Server-side heap consumption Max used heap : 197 MB Max used heap : 139 MB Server side CPU usage Max usage : 16.4% Max usage : 11.2% Final result - Primefaces – really easy to use - Angular JS – fast + a great prospect Q & A Session.