Making Sense out of a Jungle of JavaScript Frameworks
description
Transcript of Making Sense out of a Jungle of JavaScript Frameworks
![Page 1: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/1.jpg)
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
![Page 2: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/2.jpg)
2
A New Era for Web Development
![Page 3: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/3.jpg)
3
Where we are heading to
‣ Websites‣ Desktop
Applications‣ Mobile
Applications
![Page 4: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/4.jpg)
Where we are heading to
4
‣ Websites‣ Web
Applications‣ (Webtops)
‣ Websites‣ Desktop
Applications‣ Mobile
Applications
![Page 5: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/5.jpg)
Where we are heading to
5
‣ Websites‣ Web
Applications‣ (Webtops)
‣ Web/Cloud OS
‣ Websites‣ Desktop
Applications‣ Mobile
Applications
![Page 6: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/6.jpg)
An Example
6
Unreal Engine 3 in Firefox (https://www.youtube.com/watch?v=BV32Cs_CMqo)
![Page 8: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/8.jpg)
8
JavaScript
‣ Most popular programming language for the browser (Yue & Wang, 2009)
‣ Practically, the only one (CoffeeScript, TypeScript, .., compile to JavaScript)
![Page 9: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/9.jpg)
9
JavaScript Issues
Verbose Complex Boring
![Page 10: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/10.jpg)
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);
![Page 11: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/11.jpg)
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
![Page 12: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/12.jpg)
12
JavaScript Frameworks
‣ Abstract long, complex operations
‣ Cross-browser compatibility
‣ Speed up comprehension
‣ Choose one ASAP(Gizas et al., 2012)
‣ jQuery‣ Backbone.js‣ YUI
![Page 13: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/13.jpg)
13
JavaScript Frameworks
‣ jQuery‣ Backbone.js‣ YUI‣ Other 1000+
Momentum???
![Page 14: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/14.jpg)
Selecting a JavaScript Framework
Researchers Practitioners
Researchers vs. Practitioners
![Page 15: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/15.jpg)
15
Selecting a JavaScript Framework
Researchers Practitioners
Researchers vs. Practitioners
Metrics on the JSF
![Page 16: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/16.jpg)
16
Selecting a JavaScript Framework
Researchers Practitioners
Researchers vs. Practitioners
Metrics on the JSF‣Complexity
‣ LOC, McCabe, ..
‣Quality‣ Halstead, Maintainability
Idx
‣Performance‣ Benchmarks
![Page 17: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/17.jpg)
17
Selecting a JavaScript Framework
Researchers Practitioners
Researchers vs. Practitioners
Metrics on the JSF WAT??‣Complexity
‣ LOC, McCabe, ..
‣Quality‣ Halstead, Maintainability
Idx
‣Performance‣ Benchmarks
![Page 18: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/18.jpg)
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
![Page 19: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/19.jpg)
19
Not again… Picture Credits
![Page 20: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/20.jpg)
20
Research AgendaTowards a Practitioner-friendly Comparative Analysis of JSF
![Page 21: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/21.jpg)
21
Research Agenda
‣ Nothing wrong with metrics‣ Let’s make something
meaningful also for practitioners
Towards a Practitioner-friendly Comparative Analysis of JSF
![Page 22: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/22.jpg)
Selecting a JavaScript FrameworkSuggestions from Practitioners
Questions / Answers on Community Participation
21
![Page 23: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/23.jpg)
Selecting a JavaScript FrameworkSuggestions from Practitioners
Questions / Answers on Community Participation
Frequency of commitsIssue fixing time
Community Participation “Freshness”
22
![Page 24: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/24.jpg)
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
![Page 25: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/25.jpg)
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
![Page 26: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/26.jpg)
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
![Page 27: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/27.jpg)
27
TodoMVCSame app developed with different JSF
YUI Dojo Backbone
![Page 28: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/28.jpg)
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
![Page 29: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/29.jpg)
Research Agenda
29
Interviews ReportSurveys Sensemaking
Measurement
‣ Criteria from
‣ Practitioners
‣ JS Gurus
‣ In-field observations
Towards a Practitioner-friendly Comparative Analysis of JSF
![Page 30: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/30.jpg)
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
![Page 31: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/31.jpg)
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
![Page 32: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/32.jpg)
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
![Page 33: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/33.jpg)
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
![Page 34: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/34.jpg)
34
Comparison Framework
Validation Quality Performance
Documentation PragmaticsCommunity
JavaScriptFramework
TODO application
Gizas et al.,2012
This study
..so far
![Page 35: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/35.jpg)
35
There will never be the best JSF.
There will be the best one for you.
![Page 37: Making Sense out of a Jungle of JavaScript Frameworks](https://reader036.fdocuments.us/reader036/viewer/2022081515/5681642f550346895dd5f8f6/html5/thumbnails/37.jpg)
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).