1 / 37

Making Sense out of a Jungle of JavaScript Frameworks

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.

noura
Télécharger la présentation

Making Sense out of a Jungle of JavaScript Frameworks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

More Related