Implementation - Primefaces. - environment setup. - easy design: one view/action
subset – one backing bean. - great to use with Twitter Bootstrap. - easy to ...
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 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
Requires development license
No but some components do
No
No
Yes
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 realtime 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
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(110)
N/A
2
# of Java classes
11
8
Overall impression(1-10)
7
6
The data we got Browser memory usage
Network usage
Vaadin
JSF - Primefaces
24.4 – 73.3 MB
75.8-116 MB
CSS:38.6 KB / avg. 77 ms CSS:24.2 KB / avg. 43 ms Images:17.5 KB / avg. 81 ms Images:45.1 KB / avg. 167 ms Scripts:294.5 KB / avg. 181 ms Scripts:540 KB / avg. 276 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's performance for usage over 50 chart records, so Server side CPU usage was poorMax Maxmeasurements usage : 16.4% : 28.1% 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
Network usage
CSS:38.9 KB / avg. 207 ms Images:15 KB / avg. 236 ms Scripts:~836 KB / avg. 849 ms Push:125 KB/min
CSS:123.3 KB / avg. 85 ms Images:12.7 KB / avg. 34 ms Scripts:449.9 KB / avg. 101 ms 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
Network usage
CSS:38.6 KB / avg. 77 ms Images:17.5 KB / avg. 81 ms Scripts: 294.5 KB / avg. 181 ms Push:1.7 MB/min
CSS:123.3 KB / avg. 85 ms Images:12.7 KB / avg. 34 ms Scripts:449.9 KB / avg. 101 ms 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
