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
A New Era for Web Development
Where we are heading to • Websites • Desktop Applications • Mobile Applications
Where we are heading to • Websites • Desktop Applications • Mobile Applications • Websites • Web Applications • (Webtops)
Where we are heading to • Websites • Desktop Applications • Mobile Applications • Websites • Web Applications • (Webtops) • Web/Cloud OS
An Example Unreal Engine 3 in Firefox (https://www.youtube.com/watch?v=BV32Cs_CMqo)
Industry Reaction Picture Credits
JavaScript • Most popular programming language for the browser (Yue & Wang, 2009) • Practically, the only one (CoffeeScript, TypeScript, .., compile to JavaScript)
JavaScript Issues Verbose Complex Boring
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);
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
JavaScript Frameworks • Abstract long, complex operations • Cross-browser compatibility • Speed up comprehension • jQuery • Backbone.js • YUI • Choose one ASAP(Gizas et al., 2012)
JavaScript Frameworks Momentum??? • jQuery • Backbone.js • YUI • Other 1000+
Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners
Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners Metrics on the JSF
Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners Metrics on the JSF • Complexity • LOC, McCabe, .. • Quality • Halstead, Maintainability Idx • Performance • Benchmarks
Selecting a JavaScript Framework Researchers vs. Practitioners Researchers Practitioners WAT?? Metrics on the JSF • Complexity • LOC, McCabe, .. • Quality • Halstead, Maintainability Idx • Performance • Benchmarks
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
Not again… Picture Credits
Research Agenda Towards a Practitioner-friendly Comparative Analysis of JSF
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 Framework Suggestions from Practitioners Questions / Answers on Community Participation
Selecting a JavaScript Framework Suggestions from Practitioners Questions / Answers on Community Participation Frequency of commits Community Participation “Freshness” Issue fixing time
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)
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
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
TodoMVC Same app developed with different JSF YUI Dojo Backbone
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 Towards a Practitioner-friendly Comparative Analysis of JSF Interviews Surveys Sense making Report Measurement • Criteria from • Practitioners • JS Gurus • In-field observations
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
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)
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
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
Comparison Framework ..so far
There will never be the best JSF. There will be the best one for you.
Thank you for your attention Daniel Graziotin daniel.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).
