Choosing the right Choosing the right front-end framework
Janko Ulaga, Tomislav Nakić-Alfirević
May 2013
Introduction
- needed to upgrade our UI- 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 * 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- 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 Faces
Angular JS ExtJS
Popularity(# of Google searches/
month)
246,000 1,220,000 110,000 1,000,000
Learning( # of books on Amazon)
~20 ~220 ~50 ~40
Amazon)
Requires development
license
No but some components do
No No Yes
Java Server FacesBasics
- component-driven UI design model, XML templates
- requests processed by the FacesServlet which does
all the heavy lifting
- convention over configuration
- inversion of control- inversion of control
*great for rapid development, but lacks “shiny” components
Vaadin
BasicsBasics
- 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*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
Comparison tableVaadin JSF-Primefaces
Convention over Convention over configuration N Y
Inversion of control Y Y
Client side validation Y N(Y with JavaScript)
Client size 28.6 MB 3.7 MB
# of plugins used 2 1
Additional coding needed N Y
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 - PrimefacesVaadin JSF - Primefaces
Browser memory usage 24.4 – 73.3 MB 75.8-116 MB
Network usageCSS:24.2 KB / avg. 43 ms
Images:45.1 KB / avg. 167 msScripts:540 KB / avg. 276 ms
Push:1.7 MB / min( 3.7 KB/push)
CSS:38.6 KB / avg. 77 msImages:17.5 KB / avg. 81 ms
Scripts:294.5 KB / avg. 181 msPush:1.7 MB / min( 3.7 KB/push)
DOM rendering 996 ms 577 ms
Total time to load page 2.49 s 655 msTotal time to load page 2.49 s 655 ms
Server-side heap consumption Max used heap : 236 MB Max used heap : 197 MB
Server side CPU usage Max usage : 28.1% Max usage : 16.4%* Vaadin's performance was poor for over 50 chart records, so measurements 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 AngularJSExtJS AngularJS
Browser memory usage 204 - 244MB 12.3 – 33.1 MB
Network usageCSS:38.9 KB / avg. 207 ms
Images:15 KB / avg. 236 msScripts:~836 KB / avg. 849 ms
Push:125 KB/min
CSS:123.3 KB / avg. 85 msImages:12.7 KB / avg. 34 ms
Scripts:449.9 KB / avg. 101 msPush: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 AngularJSJSF - Primefaces AngularJS
Browser memory usage 75.8 – 116 MB 12.3 – 33.1 MB
Network usageCSS:38.6 KB / avg. 77 ms
Images:17.5 KB / avg. 81 msScripts: 294.5 KB / avg. 181 ms
Push:1.7 MB/min
CSS:123.3 KB / avg. 85 msImages:12.7 KB / avg. 34 ms
Scripts:449.9 KB / avg. 101 msPush: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%