choosing the right front-end framework - javacro conference · choosing the right front-end...

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

Which JSF framework?- popularity, showcases, extensions...

- we chose Primefaces

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

Summary

- what we measured?

- why we measured it?

- how we measured it?

- what we omitted?

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


Images:15 KB / avg. 236 msScripts:~836 KB / avg. 849 ms

Push:125 KB/min


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 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


Images:17.5 KB / avg. 81 msScripts: 294.5 KB / avg. 181 ms

Push:1.7 MB/min


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 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

choosing the right front-end framework - javacro conference · choosing the right front-end...

Documents