1

Making Sense out of a Jungle of JavaScript Frameworks

Towards a Practitioner-friendly Comparative Analysis

Daniel Graziotin and Pekka Abrahamsson

Free University of Bozen-BolzanoPROFES 2013, 12-14 June, Paphos, Cyprus

2

A New Era for Web Development

3

Where we are heading to

‣ Websites‣ Desktop

Applications‣ Mobile

Applications

Where we are heading to

4

‣ Websites‣ Web

Applications‣ (Webtops)

‣ Websites‣ Desktop

Applications‣ Mobile

Applications

Where we are heading to

5

‣ Websites‣ Web

Applications‣ (Webtops)

‣ Web/Cloud OS

‣ Websites‣ Desktop

Applications‣ Mobile

Applications

An Example

6

Unreal Engine 3 in Firefox (https://www.youtube.com/watch?v=BV32Cs_CMqo)

7Picture Credits

Industry Reaction

8

JavaScript

‣ Most popular programming language for the browser (Yue & Wang, 2009)

‣ Practically, the only one (CoffeeScript, TypeScript, .., compile to JavaScript)

9

JavaScript Issues

Verbose Complex Boring

10

JavaScript Issues

Verbose Complex Boring

var request; try { request = new XMLHttpRequest();} catch (e) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { request = new ActiveXObject("Microsoft.XMLHTTP"); } } request.open("GET", "test.txt",true); request.onreadystatechange=function() { if (request.readyState == 4) { alert(request.responseText) }}request.send(null);

11

JavaScript Issues

Verbose Complex Boring

var request; try { request = new XMLHttpRequest();} catch (e) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { request = new ActiveXObject("Microsoft.XMLHTTP"); } } request.open("GET", "test.txt",true); request.onreadystatechange=function() { if (request.readyState == 4) { alert(request.responseText) }}request.send(null);

$.get('test.txt', function(request){ alert(request);});

Frameworks

12

JavaScript Frameworks

‣ Abstract long, complex operations

‣ Cross-browser compatibility

‣ Speed up comprehension

‣ Choose one ASAP(Gizas et al., 2012)

‣ jQuery‣ Backbone.js‣ YUI

13

JavaScript Frameworks

‣ jQuery‣ Backbone.js‣ YUI‣ Other 1000+

Momentum???

Selecting a JavaScript Framework

Researchers Practitioners

Researchers vs. Practitioners

15

Selecting a JavaScript Framework

Researchers Practitioners

Researchers vs. Practitioners

Metrics on the JSF

16

Selecting a JavaScript Framework

Researchers Practitioners

Researchers vs. Practitioners

Metrics on the JSF‣Complexity

‣ LOC, McCabe, ..

‣Quality‣ Halstead, Maintainability

Idx

‣Performance‣ Benchmarks

17

Selecting a JavaScript Framework

Researchers Practitioners

Researchers vs. Practitioners

Metrics on the JSF WAT??‣Complexity

‣ LOC, McCabe, ..

‣Quality‣ Halstead, Maintainability

Idx

‣Performance‣ Benchmarks

18

Selecting a JavaScript Framework

Researchers Practitioners

Researchers vs. Practitioners

Metrics on the JSF

‣Adequacy of Documentation

‣Community Participation

‣Code less, do more

WAT??‣Complexity‣ LOC, McCabe, ..

‣Quality‣ Halstead, Maintainability

Idx

‣Performance‣ Benchmarks

19

Not again… Picture Credits

20

Research AgendaTowards a Practitioner-friendly Comparative Analysis of JSF

21

Research Agenda

‣ Nothing wrong with metrics‣ Let’s make something

meaningful also for practitioners

Towards a Practitioner-friendly Comparative Analysis of JSF

Selecting a JavaScript FrameworkSuggestions from Practitioners

Questions / Answers on Community Participation

21

Selecting a JavaScript FrameworkSuggestions from Practitioners

Questions / Answers on Community Participation

Frequency of commitsIssue fixing time

Community Participation “Freshness”

22

Selecting a JavaScript Framework

24

Suggestions from Practitioners

Questions / Answers on Community Participation

Frequency of commitsIssue fixing time

Community Participation “Freshness”

Syntax of basic operations

(e.g., selector, local storage)

Perceived code less, do more factor

Selecting a JavaScript Framework

25

Suggestions from Practitioners

Questions / Answers on Community Participation

Frequency of commitsIssue fixing time

Community Participation “Freshness”

Syntax of basic operations

(e.g., selector, local storage)

Perceived code less, do more factor

Benchmark same app developed with different JSF

Performance

26

TodoMVC

‣ Compare MV* (Model-View-Anything) JSF through source-code inspection of the same TODO-list

‣ Rigorous set of requirements, HTML/CSS templates, coding style and other specifications

‣ “Peer-reviewed”

Same app developed with different JSF

27

TodoMVCSame app developed with different JSF

YUI Dojo Backbone

28

Research Agenda

‣ Take best from both worlds• Metrics on JavaScript framework (Gizas et al.,

2012)• Metrics (Gizas et al., 2012) on same JavaScript

application• Metrics / Measurements meaningful for

practitioners

Towards a Practitioner-friendly Comparative Analysis of JSF

Research Agenda

29

Interviews ReportSurveys Sensemaking

Measurement

‣ Criteria from

‣ Practitioners

‣ JS Gurus

‣ In-field observations

Towards a Practitioner-friendly Comparative Analysis of JSF

Research Agenda

30

Interviews ReportSurveys Sensemaking

Measurement

‣ Criteria from

‣ Practitioners

‣ JS Gurus

‣ In-field observations

‣ Filter criteria

‣ “Order” of importance of criteria

Towards a Practitioner-friendly Comparative Analysis of JSF

Research Agenda

31

Interviews ReportSurveys Sensemaking

Measurement

‣ Criteria from

‣ Practitioners

‣ JS Gurus

‣ In-field observations

‣ Filter criteria

‣ “Order” of importance of criteria

‣ Determine

‣ Metrics

‣ Measurements

‣ GQM (Basili & Weiss, 1984)

Towards a Practitioner-friendly Comparative Analysis of JSF

Research Agenda

32

Interviews ReportSurveys Sensemaking

Measurement

‣ Criteria from

‣ Practitioners

‣ JS Gurus

‣ In-field observations

‣ Filter criteria

‣ “Order” of importance of criteria

‣ Determine

‣ Metrics

‣ Measurements

‣ GQM (Basili & Weiss, 1984)

‣ Software Metrics on JSF

‣ Software Metrics on TodoMVC Apps

‣ Metrics/Measurements practitioners

Towards a Practitioner-friendly Comparative Analysis of JSF

Research Agenda

33

Interviews ReportSurveys Sensemaking

Measurement

‣ Criteria from

‣ Practitioners

‣ JS Gurus

‣ In-field observations

‣ Filter criteria

‣ “Order” of importance of criteria

‣ Determine

‣ Metrics

‣ Measurements

‣ GQM (Basili & Weiss, 1984)

‣ Software Metrics on JSF

‣ Software Metrics on TodoMVC Apps

‣ Metrics/Measurements practitioners

‣ Dynamic Website

‣ Articles

Towards a Practitioner-friendly Comparative Analysis of JSF

34

Comparison Framework

Validation Quality Performance

Documentation PragmaticsCommunity

JavaScriptFramework

TODO application

Gizas et al.,2012

This study

..so far

35

There will never be the best JSF.

There will be the best one for you.

36

Thank you for your attention

Daniel Graziotindaniel.graziotin@unibz.it

References

Basili, V., Weiss, D.: A methodology for collecting valid software engineering data. IEEE Transactions on Software Engineering. SE-10, 6, 728–738 (1984).Gizas, A.B. et al.: Comparative evaluation of javascript frameworks. Proceedings of the 21st international conference companion on World Wide Web. pp. 513–514 (2012).Osmani, A.: Learning JavaScript Design Patterns. O’Reilly Media (2012).Ratanaworabhan, P. et al.: JSMeter: Comparing the behavior of JavaScript benchmarks with real web applications. Proceedings of the 2010 USENIX conference on Web application development. pp. 3–3 (2010).Yue, C., Wang, H.: Characterizing insecure javascript practices on the web. Proceedings of the 18th international conference on World wide web - WWW  ’09. p. 961 ACM Press, New York, New York, USA (2009).