Choosing the right Choosing the right front-end framework

yrekazzyzxamuckInternet and Web Development

Dec 4, 2013 (3 years and 8 months ago)

106 views

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
VaadinJava Server
Faces
Angular JSExtJS
Popularity(# of
Google searches/
month)
246,0001,220,000110,0001,000,000
Learning( # of
books on
Amazon)
~20~220~50~40
Amazon)
Requires
development
license
No but some
components do
NoNoYes
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
-
inversion of control
*great for rapid development, but lacks “shiny”
components
Which JSF framework?
-popularity, showcases, extensions...
-we chose Primefaces
Vaadin
Basics
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
*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
VaadinJSF-Primefaces
Convention over
Convention over
configuration
NY
Inversion of controlYY
Client side validationYN(Y with JavaScript)
Client size28.6 MB3.7 MB
# of plugins used21
Additional coding neededNY
Aditional code complexity(1-
10)
N/A2
# of Java classes118
Overall impression(1-10)76
The data we got
Vaadin
JSF
-
Primefaces
Vaadin
JSF
-
Primefaces
Browser memory usage
24.4 –73.3 MB
75.8-116 MB
Network usage
CSS:24.2 KB / avg. 43 ms
Images:45.1 KB / avg. 167 ms
Scripts:540 KB / avg. 276 ms
Push:1.7 MB / min( 3.7 KB/push)
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( 3.7 KB/push)
DOM rendering
996 ms
577 ms
Total time to load page
2.49 s
655 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
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
AngularJS
ExtJS
AngularJS
Browser memory usage204 -244MB12.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
JSF
-
Primefaces
AngularJS
Browser memory usage75.8 –116 MB12.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