Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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)
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.
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).
