Making Sense out of a Jungle of JavaScript Frameworks

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-Bolzano PROFES 2013, 12-14 June, Paphos, Cyprus

2. A New Era for Web Development

3. Where we are heading to • Websites • Desktop Applications • Mobile Applications

4. Where we are heading to • Websites • Desktop Applications • Mobile Applications • Websites • Web Applications • (Webtops)

5. Where we are heading to • Websites • Desktop Applications • Mobile Applications • Websites • Web Applications • (Webtops) • Web/Cloud OS

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

7. Industry Reaction Picture Credits

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 • jQuery • Backbone.js • YUI • Choose one ASAP(Gizas et al., 2012)

13. JavaScript Frameworks Momentum??? • jQuery • Backbone.js • YUI • Other 1000+

14. Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners

15. Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners Metrics on the JSF

16. Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners Metrics on the JSF • Complexity • LOC, McCabe, .. • Quality • Halstead, Maintainability Idx • Performance • Benchmarks

17. Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners WAT?? Metrics on the JSF • Complexity • LOC, McCabe, .. • Quality • Halstead, Maintainability Idx • Performance • Benchmarks

18. Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners WAT?? Metrics on the JSF • Complexity • LOC, McCabe, .. • Quality • Halstead, Maintainability Idx • Performance • Benchmarks • Adequacy of Documentation • Community Participation • Code less, do more

19. Not again… Picture Credits

20. Research Agenda Towards 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

22. Selecting a JavaScript Framework Suggestions from Practitioners Questions / Answers on Community Participation

23. Selecting a JavaScript Framework Suggestions from Practitioners Questions / Answers on Community Participation Frequency of commits Community Participation “Freshness” Issue fixing time

24. Selecting a JavaScript Framework Suggestions from Practitioners Questions / Answers on Community Participation Frequency of commits Community Participation “Freshness” Issue fixing time Perceived code less, do more factor Syntax of basic operations (e.g., selector, local storage)

25. Selecting a JavaScript Framework Suggestions from Practitioners Questions / Answers on Community Participation Frequency of commits Community Participation “Freshness” Issue fixing time Perceived code less, do more factor Syntax of basic operations (e.g., selector, local storage) 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. TodoMVC Same 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

29. Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report Measurement • Criteria from • Practitioners • JS Gurus • In-field observations

30. Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report Measurement • Criteria from • Practitioners • JS Gurus • In-field observations • Filter criteria • “Order” of importance of criteria

31. Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report Measurement • Criteria from • Practitioners • JS Gurus • In-field observations • Filter criteria • “Order” of importance of criteria • Determine • Metrics • Measurements • GQM (Basili & Weiss, 1984)

32. Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report 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

33. Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report 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

34. Comparison Framework ..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 Graziotin daniel.graziotin@unibz.it

37. 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).