MASTER THESIS JavaScript Frameworks A qualitative evaluation and comparison of the dominant factors in Angular and React Abdul Kadir Yorulmaz MSc. in Computer Science & Informatics Supervised by Anders Lassen Department of Computer Science & Informatics June 2, 2020 Abstract The rising number of JavaScript libraries and frameworks that have been developed during the years, gives the experienced and inexperienced practitioners complexity when wanting to commit to a frame- work. Today, a more concrete and analysed evaluation process is lacking for developers in order to make sure a framework fit their needs for the given project’s purpose and size. This thesis explores an evaluation process that can help practitioners determine which framework or library fit their needs for their project, but also choosing the framework that fits best with their experience and preferences when building applications. This study is build on an experiment, where two Todo-list applications were developed via Angular and React. Based on the development process of each application, the framework and library were evaluated via relevant factors that give insights to what to expect from the framework and library in terms of how fast one can learn it, the quality of the documentation, the helpfulness of their communities and the frequency of updates. Through the evaluations, the dominant factors were found for Angular and React, which gave the base for doing the comparative analysis in order to find the differences and similarities between them. By conducting the comparative analysis of the dominant factors within Angular and React, this study gives the indication that Angular gives clear directions when developing and therefore can be well-suited to both experienced developers but also beginners. React has a strong community and a flexibility in adopting external libraries and can therefore be both beneficial for beginners if they preference a less-strict library yet it requires practice for its understandability. The proposed evaluation process offers practitioners a way of distinguishing between frameworks. The evalu- ation also gives an insight of which framework fits with a developer’s experience and preferences in terms of information sources e.g. documentation, tutorials and communities, where they can find examples and detailed suggestions towards developing their projects. Keywords: JavaScript Frameworks · Angular · React · Todo-list applications · Evaluation process of dominant factors · Comparative analysis · Qualitative experiment Contents 1 Introduction 3 1.1 Background . .3 1.2 Related work . .4 1.3 Problem definition . .6 1.4 Research question . .7 1.4.1 Hypothesis . .7 1.5 Scope and limitations . .7 1.6 Target group . .9 2 The concept of JavaScript in this study 10 2.1 JavaScript . 10 2.1.1 DOM-element . 11 2.1.2 Scripting . 11 2.1.3 CSS . 11 2.1.4 XMLHttpRequest, Ajax and fetch . 12 2.1.5 JavaScript library . 12 2.1.6 JavaScript Framework . 12 2.2 Angular . 12 2.2.1 Angular CLI . 13 2.2.2 Components . 13 2.2.3 Services . 14 2.2.4 Directives . 15 2.2.5 Pipes . 16 2.2.6 Modules . 16 2.2.7 Typescript . 18 2.3 React.js . 18 2.3.1 ReactDOM . 18 2.3.2 React ES6 class component using JSX . 19 2.3.3 Props vs State . 19 2.3.4 React ES6 class and function components . 20 2.3.5 Life-cycle methods . 20 2.3.6 External libraries . 21 3 Theory 23 3.1 Kolb’s learning cycle theory . 23 3.1.1 The four stage learning cycle . 23 3.2 The necessary elements and functionalities to undertake . 24 1 3.3 Comparative evaluations . 25 4 Method 28 4.1 Constructivism . 28 4.2 Comparative design . 29 4.2.1 Applying the comparative design on the two applications . 29 4.3 Qualitative method . 29 4.4 Applying Kolbs four stage learning cycle in this research . 30 4.5 Todo-list requirements and Mockup . 30 4.5.1 Requirement list . 31 4.6 Node.js with Express.js framework . 32 4.7 ER-diagram . 33 4.8 Table for framework evaluation . 34 5 Analysis 35 5.1 Web-application via Angular . 35 5.1.1 Pre-expectations to Angular . 35 5.1.2 Developing Todo-list with Angular . 36 5.2 Web application via React . 40 5.2.1 Pre-expectations to React . 40 5.2.2 Developing todolist with React . 41 5.3 Comparative analysis of Angular and React’s development processes . 45 6 Discussion 50 7 Conclusion 52 Appendices 58 A Github projects 59 A.1 Database instance . 59 A.2 NodeJs project . 60 A.3 Angular project . 60 A.4 React project . 60 B Evaluation tables 61 B.1 Table for evaluation of framework - Angular . 61 B.2 Table for evaluation of framework - React . 68 B.3 Table of rating Angular and React . 74 2 Chapter 1 Introduction In recent years it is evident that JavaScript is the fundamental programming language in websites, which has led to an increase in its popularity and an interest in its learnability when it comes to making use of its frameworks and libraries. This interest is also shown in several research papers, where analyses of JavaScript frameworks’ level of adoption and comparison of frameworks and libraries are conducted. According to earlier research about JavaScript frameworks conducted by Pano et al.[26], a survey from 2018 showed that 88.2 percent of one billion websites relies on JavaScript programming language. in 2020 this number increased to 94.6 percent[30]. As JavaScript is becoming the lead programming language of web applications, an interest in outlin- ing the frameworks’ most dominant factors are necessary. This outline helps to prepare developers’ expectations when applying a framework or library within JavaScript, but also to make sure that the chosen framework is suitable and fulfills the project goals. Such comparison and analysis of frameworks and libraries are beneficial for several actors such as beginners e.g. students, but also more experienced developers that want to efficiently implement a web application via the relevant framework or teachers and team leaders in businesses that want to enhance knowledge and adopt to optimised web technologies and solutions in their work. The main aim of this thesis is to explore how to evaluate frameworks and compare them. Therefore, an experiment of building two Todo-list applications will give the base for the evaluation and comparative analysis of the chosen frameworks. 1.1 Background Why is the subject necessary and interesting? JavaScript is famous to developers due to its offerings of many frameworks and libraries created by the developers themselves. Usage of frameworks and libraries makes the process of developing in client-side web-applications easier with clean and structured coding. Therefore, it is important to investigate the different frameworks’ contents in order to utilise them in the right setting and purpose. When being aware of the differences of the frameworks, we avoid wasting time in adopting to a framework or library which might not meet the criteria for the given project. Another advantage of outlining the factors influencing a framework is the fact that a developer has an insight of the required knowledge and the framework’s complexity before choosing it. As a developer, my interest stems from a personal experience where I discovered that there is a lack 3 of an overview, which outlines a framework’s requirements and content. After working with several frameworks within JavaScript, I gained an interest in understanding why some frameworks are more preferred than others. In this case I want to investigate what Angular and React contain in terms of complexity and the required experience when adopting them in web application. Are these choices inves- tigated and thoroughly tested before a decision fall on one specific framework? Or are decisions based on personal interest and simply the knowledge that one already obtains? Therefore, this Master thesis will have its point of departure around the question on which factors are dominant in a specific framework and library within JavaScript. When analysing each framework’s assets and requirements, such analysis can prepare the relevant actors of what to expect when applying specific frameworks. It is also relevant to share insights of how to best analyse and compare different frameworks before settling on one. 1.2 Related work An area within research of JavaScript frameworks identifies the need to discover factors that a framework can hold, but also in the end influence the choice of which framework to choose. Related research about JavaScript frameworks and libraries have been focused on specific factors e.g. performance within speed in the browser and developers wishes to a framework to satisfy their needs. An insightful research that goes beyond these concerns and rather focuses on frameworks’ content that lead to adoption is the work from Pano et al. [26] that gives an insightful view on why JavaScript frameworks are important to know, but also what factors influence a developer’s adoption of a JavaScript framework. The authors state the following as their main question for the research: "Which factors and actors lead to the adoption of a JavaScript Framework?". In order to investigate this research question, the authors built the case study within qualitative method by conducting interviews with 18 actors that are part of a company and also are decision-makers in that company. These actors are therefore identified as developers having a general knowledge and are users of JavaScript. The classification of factors and actors are as follows: 1. Factors • Performance expectancy( Performance, Size) • Effort expectancy( Automation, Learnability, Complexity, Understandability) • Social influence(Competitor analysis, Collegial advice, Community size, Community respon- siveness) • Faciliting conditions(Suitability, Updates, Modularity, Isolation, Extensibility) • Price 2.