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

• Customer • Developer • Team • Team leader

The purpose was to understand the factors that influence the choice of one JavaScript framework with respect to another. The outcome was that the factors had a great impact on the choice of a JavaScript framework and not necessarily the actors. In addition, the authors emphasise the fact that the factors

4 mentioned in the research are only the tip of the iceberg, and therefore they lead up to that many addi- tional factors can play a big role regarding adoption of frameworks.

Another relevant study is within comparison of Frameworks, written by Hjelm[19]. The research has its main purpose of evaluating an open-source JavaScript framework which is Backbone.js and a frame- work under development internally in a company. In the research it is investigated the advantages and disadvantages of using framework and secondly com- paring the company framework with an open-source framework. Some necessary points from the study are that a framework can optimise the development process regarding time and complexity, but learning a new framework can be difficult. The research was based on an inductive method where the author observed and took use of the qualitative methodology by conducting interviews with the developers that were creating the company framework. The overall conclusion from the research was that developing a new framework is time consuming and that it was mostly used in-house. The framework did also not provide an online communication corner where developers could help each other. They had a forum where developers could ask questions, but feedback and a response were not as easy to receive. In many open-source projects they have big com- munities where users can ask, share experience and ask questions whenever challenges occur.

The interviewed developers of the company pointed out that they would prioritise/choose developers’ experience with the framework over performance of the framework/application in the browser. The research concluded that an open-source framework gives better advantages due to fast access to docu- mentation and online community to network for quicker problem-solving.

Graziotin and Abrahamsson [15] go further with a study about which JavaScript framework is most suitable to a given situation. This study has the aim of helping developers identifying existing frame- works and their relevance. The research is a comparative analysis of JavaScript frameworks, which identifies the typical needs a framework may satisfy when a developer uses it. The main statement in the research is that there is a small area within the research world that has the purpose of helping developers in choosing the relevant JavaScript framework. Via their study, a bench- marking of articles that compare Javascript frameworks are presented where a comparison is conducted via frameworks’ existence, the size of the framework, presence of features i.e. AJAX, JSON, data retrieval and browser support. However, in this research they realise that developers are more interested in other aspects. The authors contacted four web-developers to obtain their view-points of what they focus on when choosing a Javascript framework. Three criteria were pointed out by the developers: How well is the Javascript framework documented, is there a big community that are participating, and the statement "code less, do more". To measure the relevance and discover what is important to look after, the study makes use of a metrics method to represent the developers’ preferences and concerns. At last, Graziotin and Abrahamsson conclude that it was necessary to make a Todo application that can measure the documentation in the validation phase, the size of the community as quality and the statement "code less, do more" factor as a performance.

Another related example of previous mentioned research within JavaScript is found via a grey literature from an experienced developer called James Bennett[1]. He writes on his website about the necessary factors to take into consideration before you can acknowledge a framework as a framework. The developer first of all talks about the importance of using open-source projects that are easily acces- sible if it is build with high-quality. In addition the frameworks have to be well-documented otherwise

5 even the greatest framework would fail, if the only way to learn it is through reading the code. Bennett points out four relevant parts before a framework can be considered useful: (1) A normalized event model, including attaching/removing listeners, automatic scope correction and access to the event itself; (2) A normalized wrapper around XMLHttpRequest, including the ability to specify callbacks to fire when the request finishes; (3) A set of normalized utilities for working with the DOM, especially for getting/setting styles and managing class names; (4) Facilities for creating visual animations, whether pre-defined or custom, which handle cross-browser timing quirks.

At last, The research study conducted by Gizas et al.[14] "Comparative Evalution of JavaScript frameworks", compares different JavaScript frameworks via their quality, performance and validation tests. The authors compared these components on six different JavaScript frameworks: Dojo, ExtJs, Jquery, MooTools, Prototype, YUI. To Compare and evaluate the frameworks, the authors defined core set of functions as the following:

• DOM-manipulation

• Selectors

• Ajax functionalities

• Basic elements of forms

• Functions for base event-handling, which each framework should include in order to code these functionalities

Furthermore, they tested the frameworks using seven different browsers and four different operating systems. Quality test was based on lines of code, size measurement, complexity and maintainability using for instance one tool called JSMeter. The outcome of the research showed differences in each framework and some of them performed better than the others in a given situation. However, if the research should have been more accurate, they must improve the code to perform better quality test, and for the validation test they must modify the structure of the code in order to harmonize with the browser continuous evolvement.

1.3 Problem definition

An investigation about which factors to use when comparing frameworks is necessary. Such investigation will contribute in giving an overview of what to compare in frameworks and in the end, a suggestion on how to compare before relying on a framework. Therefore, this thesis will conduct an analysis of two popular client-side web applications frameworks based on chosen factors which are evaluated by applying the frameworks on a Todo-list application. In the end, a comparison of the most dominant factors within the chosen frameworks will be conducted. The comparison will lead to a discussion of the chosen factors’ ability to caption the frameworks’ development process, the choice of ratings and whether the evaluated level of complexity for Angular and React require specific levels of experience by the target group. In addition, the prerequisites a developer should be aware of before settling on a framework.

6 1.4 Research question

This thesis will have its main purpose on which factors to be aware of when choosing a JavaScript frame- work together with an outline on how to compare frameworks before choosing the one that will be applied. When having a proposal of what to look for when comparing frameworks and making sure the correct one is chosen from the beginning, a great amount of time and effort will be saved for a developer. In addition, the main framework and library adopted to this thesis will each have a hypothesis that will be either confirmed or denied. An evaluation of the efforts in learning each framework’s structure and attributes will be outlined to give a deeper understanding on the prerequisites of a framework and thereby what framework to choose depending on experience and knowledge. Therefore, the aim of the analysis is to conclude with a suggestion on how to investigate frameworks before adopting it in a project. The following research question will be answered by the conducted analysis:

How can JavaScript frameworks be evaluated and compared by the analysis of the dominant factors?

1.4.1 Hypothesis

1. Angular: Angular has a steep learning curve with a high complexity level and the developer needs to adhere to the framework’s provided structure. Full-stack developer and teams will prefer Angular for its development structure and separations of concern, where each section addresses to a component that has its own part in the web application.

2. React: React also has a steep learning curve but it is not strict in its structure and the developer does not need to adhere to a specific structure. It is open for including other libraries. Students will prefer React for its less complex structure.

1.5 Scope and limitations

The analysis takes point of departure in two web-applications developed during the thesis period. The Todo-list applications are developed in both Angular and React. Angular and React are chosen for this thesis due to the fact that they are the most popular open-source Javascript framework and library within client-site applications. Therefore, it is of great interest to have an insight of which factors are evident when developing in Angular and React, but also learning about the required effort to master them. In order to compare the two frameworks, a number of relevant factors have been evaluated before settling on the ones being applied to the analysis. The relevant factors that are chosen, evaluate on the under- standability, learnability and complexity of a framework. These are the main parameters developers are concerned about according to a survey conducted in a research made by Hjelm[19, p12]. Nevertheless, I as a developer have a personal interest in exploring how to best compare frameworks and what to be aware of in terms of complexity and usefulness of a framework in my further career. Due to the focus around each framework’s understandibility and the learning efforts associated to them, a factor such as performance is not considered in the analysis which is also confirmed by developers. In Hjelm’s research developers state that their main concern is how easy it is to understand and implement a framework and less on its performance. Therefore this thesis will further elaborate on each framework’s learning efforts and attributes around complexity and obtaining correct knowledge to implement the desired web application.

7 According to the survey from StackOverflow[25], Angular and React are one of the most chosen and used framework/library that have been used in 2019 after JQuery. This survey has been answered by 63,585 people including professional developers. Beside that, Angular and React are released by major well known technology companies. Google released Angular and Facebook released React. Robin Wieruch[31, p.2] says that React is the best choice for building web applications and further says that React is surrounded with such a flexible ecosystem that it can be considered as a framework. Angular and React grow equally fast and are often spoken about in the same context.

Figure 1.1: Survey retrieved from https://stackoverflow.com/

8 1.6 Target group

The target group who would obtain relevant knowledge and information from this thesis are mostly developers that are considering JavaScript frameworks in their work, but are not aware of the framework’s level of complexity and how much effort is needed in order to efficiently adopt to the framework. By analysing Angular and React, a suggestion is presented on how to compare frameworks and which factors to take into consideration. Such insights and knowledge about Angular and React but also how to compare in general, can be beneficial for developers when exploring new frameworks. Developers will be able to match their own experience, available resources and required efforts with the framework’s assets and thereby knowing whether a framework is matching their expectations before applying it.

9 Chapter 2

The concept of JavaScript in this study

This chapter is defining JavaScript and the relevant frameworks. These will be explained to give a fully insight of how this study understands them. JavaScript is a dynamically typed language where variables can change during its run-time e.g. a string variable could easily be assigned to a number. The simplicity that JavaScript serves, makes the language more interesting. JavaScript is the language that gives the ability to easily interact with a browser where DOM-manipulation is nothing but simple such as event-handling for interacting with a button, hiding and showing elements as it desires and binding attributes to the HTML tags via its ID- or class-element to dynamically change during its lifetime. JavaScript libraries are build to Code-less and Do-more when developing via JavaScript. Including library for Ajax calls, surrounds XMLHttpRequest to interact with the server for reducing the complexity of the language. The easiness of the language lead to self-assurance and makes the coding more adventurous in the language to grow further.

2.1 JavaScript

JavaScript’s first version has been written by Brendan Eich in 10 days in 1995 [28]. JavaScript was a language which was added to web pages, and has since been adopted to all web browsers. JavaScript is made for web browsers so that users can interact with the JavaScript functionalities without a page reload action. Javascript is known as a client-side scripting language, which means that the source code is processed by the client’s web browser and not the web server. This means that JavaScript can run after it is loaded up to the clients’ web browser without having any communication to the web server. Not only web browsers are using JavaScript, some databases as MongoDB and CouchDB are using JavaScript as scripting and query language. Also Nodejs, which is the server-side program for JavaScript is also providing an environment for JavaScript outside the web browser[17]. Brendan Eich worked at Netscape when he developed JavaScript. JavaScript became trademark licensed and the Netscape’s (now Mozilla’s) implementation of the language is described and submitted the lan- guage for standardisation to ECMA(the European Computer Manufacturer’s Association). Due to the trademark, the name ended up being stuck as ECMAScript. ECMAScript has since been implemented in all web browsers, and currently React makes practical and efficient use of ECMAScript version 6 (ES6)[13].

10 2.1.1 DOM-element

DOM (document object model) is an API that renders and interacts with HTML (Hypertext markup language) and XML (Extensible Markup Language) documents. HTML is a document with a head and body. The head contains information about the document where as the body contains the document itself[16, p.218]. The HTML document have two children which are ’’ and "". Inside the children the objects will appear, which are all the tags that are owned by the HTML for instance

tag. At last, head tag configures how the document is structured. XML is similar to HTML however a developer can define its tags. The DOM is a document that is loaded to the browser to represent as a node tree, where each node is represented by the DOM. DOM is one of the most used API’s since it runs on the browser to access and interact with the nodes in the document. DOM was not specified until JavaScript was implemented. It is made in order to make the programming languages manipulative in its content, structure and style. The document can be displayed in the browser window or HTML, which is the same document. A DOM is made of nodes and objects and also in the same time an object-oriented representation of the web pages, which can be modified with a scripting language as JavaScript[7]. Basically the DOM is a document that is for instance the HTML document with its object inside it. Another tag in HTML is the .

2.1.2 Scripting

Script or Scripting language is a file with commands and instructions that have been written by a developer, which can be executed without being compiled.[9] Besides Scripting language, JavaScript is also an interpreted language, and not a compiled language. For example programming languages like Java and CSharp are compiled before executed. This means that the source code is passed through a program called compiler that will translate the code into bytecode where the given machine can understand and execute it. In JavaScript, the browser interprets each line of the code and runs it, which makes the code executed. If there is an error, the code before the error will not be affected but the following code implemented, will break. More modern browsers use the technology JIT (Just in time ) compilation, which compiles JavaScript to executable JavaScript.

2.1.3 CSS

CSS (Cascading Style Sheet) is used for specifying the visual presentation of the HTML documents. It allows the designer to precisely specify font, colors, margins and borders. CSS is also interesting for JavaScript developers, as CSS styles can be scripted which enables the HTML to animate. For instance a document content could slide into the DOM from a chosen angle.[13, p.413] CSS specifies how the elements should be rendered on the screen. CSS offers styling the layout for a web page e.g. edit the font, color, size, spacing for text and other contents, split the content into row and columns and adding animation to your static elements. CSS is most likely used to style HTML documents. To reduce the time for learning and practising for styling, there are some libraries like Bootstrap or Angular Material that make life easier for server side developers. The libraries offer styling to HTML elements, that can be shown in a user-friendly and with proper aesthetics.

11 2.1.4 XMLHttpRequest, Ajax and fetch

XMLHttpRequest is the most important API that is used to interact with a server. It is possible to retrieve data from a server by an URL. It is integrated in all modern browsers and has the ability to update a web-application without a reload. It is possible to request and receive data from a server and also send data to a server without page reload. The following makes the user experience more simple while it lets the user work as the data are being send and received[10]. So XMLHttpRequest is the browser object that JQuery wraps into a simplified form. Practitioners can make HTTP request called AJAX. AJAX uses the XMLHttpRequest to communicate with servers. It can send and receive information from a server as JSON, XML, HTML and text files. The primary usage of AJAX offers request and receives information via the interaction with the server without page reload[8].

2.1.5 JavaScript library

The complexity of developing new applications threatens practitioners to develop in programming lan- guages. One of the goals as a developer is to reduce code and have reusable code instead of redundant code everywhere. Practitioners develop libraries that can decrease the complexity and also write less code when developing the programming of web applications. A JavaScript Library is a code made in JavaScript that aims to develop the functional and aesthetic features within web development. The primary goal for a library is to ease the development and develop faster, produce code in less time and code less.[22]. For instance when manipulating the DOM-element, event handling for button click, possibility to show and hide elements based on an event or Ajax call for retrieving data from a server up to the client[4]

2.1.6 JavaScript Framework

Libraries are typically gathered in a group according to their functionalities or they can serve a purpose as part of a skeleton that is commonly referred to as a framework[26, p.2]. A framework is build to ease developers time in developing web-applications by performance. It is meant to ease both in time to build the application but also the way of building the web-application, which need to be developed after a specific JavaScript framework’s structure. The framework makes the code maintainable by other developers. When you develop with a framework you are forced to develop in the way the framework want you to, so you need to follow some specific rules and structure to comply with the framework. Most JavaScript frameworks are based on open-source, which means there are a community who is constantly helping to improve the framework and fixing bugs that can occur. JavaScript frameworks contain set of utilities, functions, and high-level abstractions. Frameworks give user-friendly functionalities such as visual design, animation, drag and drop and event handling. The increasing use of frameworks relying on JavaScript have resulted in an increased number of open source communities. In recent years many new JavaScript frameworks have been developed and existing have been expanded with new functionalities[14]

2.2 Angular

Angular is a component based framework and its structure is a tree structure, which means that the application is build with components. Each Angular application has a root component which is the parent component and there are children components that have their own children and siblings. Parent components can send value to children components by binding its value to the children where as a child does not know where the data comes from, so if the children want to send data to its parent it is done by

12 the emit event. This makes the components reusable and self-contained because if you already have build the functionality for a pop-up dialog box, you can reuse it in different components in your application, which makes programming a lot faster. [11, p.4]

2.2.1 Angular CLI

Angular command-line interface(CLI) is a management tool for Angular actions. It can generate appli- cations with one-liner commands and also generate components, services, directives, modules and routes. The Angular CLI can also build bundles for both development and production build. When you want to create a new project with Angular CLI, it will install the Angular framework and all its dependencies that are required using the command[11, 20-21] Angular create application:

ng new

2.2.2 Components

A Component is a class that is decorated as the following: @Component. It belongs to one module and consists of three separate files, which is of type .ts, .css and .html.

Figure 2.1: Component structure

This structure will make the code and understandability more efficient and it is possible to navigate through the code faster, instead of looking through several hundred lines of code in one file. This compo- nent structure is responsible for one piece of the web-application e.g. a popup dialog box. Components are reuseable. It is possible to use the same component in both parent and children components. Via the Angular CLI, it is possible to create a component by using the command-line with this specific command [11, 20-21]

Angular CLI command for generating component:

ng g c

A component has a life-cycle. The life-cycle will first start whenever the component is rendered to the view. When a component’s constructor is instantiated then the life-cycle method will run. When the component is gone from the view, the life-cycle will be destroyed and the rendered template will be removed from the DOM.

13 Figure 2.2: Component example

The above code illustrates a component with a constructor and the most common lifecycle component i.e. ngOnInit(). The ngOnInit is a lifecycle method that runs whenever a component is instantiated.

2.2.3 Services

A service is a class, which has the purpose of doing/serving something specific. Angular distinguishes a component from a service via the user. A component should present properties and methods for data- binding to connect to the view template, where services are a injectable class that keeps track of a specific functionality that can be used by a component. According to the given case, a service is used for fetching data from the server with Angular’s build in HTTP-client. A service can be injected to a component with the @Injectable decorator() as a dependency.[6]

14 Figure 2.3: Angular service

The above figure shows a part of the task service. The service imports injectable to be injected in any other components that are in the projects. The HttpClient serves a module for creating methods to communicate with the server via the http protocols http-request -response methods. The service contains two methods for returning all the tasks and return for a single task by its ID via an argument that can be passed into the method from the instantiated component. The Angular CLI provides the opportunity to generate service like the following command in the command line[11, 23]. The shared/ is the sub-folder task service live in. Angular generates @service command:

ng g s shared/task

2.2.4 Directives

In Angular, directives are a class that can be attached to a component. This means that it can be con- sidered as a "helper-Class" that has some functionalities, which can help improving your development by using it and also help your static HTML to be smart. Single directives can be attached to every HTML page in your web-application. For instance there are two types of directives; the structured and attribute based directives. If an input- field in a web application needs to be automatically focused on the input-field as soon as it is visible on the screen, you can use an attribute directive. Furthermore, there are the structural directives that help iterate over HTML DOM-element with a given array on a structural directive called ngFor. If you want to hide and show an element you can use the structural directive ngIf. [11, p.24]

15 Figure 2.4: Angular directive

The above figure shows a selection of a Structured directive. The Structural directives can be recog- nized via the ’*’ asterisk that is added in front of ngFor. Looping over the task list elements and adding interpolation: {{}} having task elements values in it, will give a result of each task with its ID, title and category name. The routerlink that is added next to the *ngFor directive, makes the div element clickable. The clickable div can navigate to a single directive and passes the taskId as a parameter.

2.2.5 Pipes

Pipes that Angular provides, is a value that can be transformed in the DOM-element using the pipe "|" that takes the value and the transformation you want it to transform it into. It is possible to customise your own pipe where you can manipulate your DOM-element with your own code as well as using built- in pipes. There are different kinds of built-in pipes e.g. UpperCasePipe, LowerCasePipe, DatePipe, CurrencyPipe, AsyncPipe[11, p.25]. For instance it can take a birthday and it gives the date of a default date format like HTML using pipes:

Figure 2.5: Angular Pipe

2.2.6 Modules

Angular module is a class that is annotated as @NgModule. The module is a container that takes related components, services, directives and pipes in a group. The framework itself is split into modules. For example if you plan to make use of Angular forms module or want to make HTTP-request, you should add @angular/forms or @angular/common/http. Angular module describes how to compile and how to create injector in run-time[11, p.26].

16 Figure 2.6: Angular modules

The above figure illustrates a snippet of the NgModuleClass. First, there is a need to import the Angular modules that is necessary to use in order to import the required modules that are needed for the project. @ngModules have the surveillance over the declared components that can be used in the project. Imports show the modules that have been instantiated to the project. The RouterModule is for example setting the path-name and path-URL for each component to be retrieved whenever it is needed.

17 2.2.7 Typescript

Typescript is a programming language that is build on JavaScript. It is called a typed superset of JavaScript which means that Typescript contains everything from JavaScript plus a collection of use- ful features like static typing, classes and interfaces. Typescript compiles to plain JavaScript in any JavaScript engine that supports at least ECMAScript3[12]. The use of Typescript in Angular gives an advantage i.e. in JavaScript, if a developer writes a function that takes a ’string’ as an argument, but the developer mistakenly invoke it with a numeric value, this error will only be caught in run-time. It is caught in run-time due to JavaScript being a dynamically typed language and the type of a given variable can change during the run-time environment. In contrast, Typescript is a static typed language that IDE’s also support. If you pass a wrong parameter or type to a function, your IDE will display the error in red[11, p.3].

2.3 React.js

React is a library for rendering interfaces in single-page and mobile applications. React’s ecosystem intro- duces JSX, a syntax for React and reactDOM [31, p.1]. React was released by Facebook’s development team in 2013 as a view library. React has become increasingly popular the recent years like frameworks: Angular, Ember and Backbone. The view represents the V in MVC. As a view it gives you the ability to render components as viewable elements in a browser. React is used to build the view layer while its ecosystem lets you build single page application. The view is compose-able components, which means you can combine components in one page. According to Robin Wieruch[31, p.2], React is one of the best choices for building modern web applications. It only delivers the view, but the surrounding ecosystem makes it flexible and an interchangeable framework. React has a slim API that is robust, a evolving ecosystem and a great community. React uses Node and Npm for package management. For installing external node packages, you need Npm to do it. External node packages can be libraries or frameworks. Installing and creating a React project:

Npm i n s t a l l −g create −react −app create −react −app

React works on a component structure. After declaring the component, it can be instantiated in any part of the project and ready to be used. Components are made of elements and everything that is inside the render(), will be returned from the component. Components can be instantiated in your JSX:

2.3.1 ReactDOM

ReactDOM.render() uses a DOM node in html to place it with JSX. ReactDOM.render helps integrating React in any application. ReactDOM.render can be used in multiple places in an application. In plain React application you will only use ReactDOM.render once to bootstrap the component tree. React- DOM.render takes two arguments i.e. JSX to render it and a HTML DOM-element ID that is the root element in the HTML where the JSX will be rendered.

18 Figure 2.7: ReactDOM

Above figure shows the ReactDom that takes the App component as the first argument, and a HTML div element by its ID to serve the component in the DOM node.

2.3.2 React ES6 class component using JSX

The below figure shows an example of how a React ES6 Class component looks like without a constructor. The returned element of the component is defined in the render() method. The content of the render() method looks like HTML, but it is actually JSX. JSX allows mixing HTML and JavaScript, which is very powerful, but can also lead to confusion.

Figure 2.8: React JSX

Figure 2.8 shows a ES6 map-function that loops over an array that is declared in the state of the component. While looping over each element, every element will get a place in the DOM with a List tag. Another remarkable element is the onClick() button with a click Event-handling that has a method specified, which takes a task as an input. Whenever an element in the list is clicked, the clicked element value will be send within the method.

2.3.3 Props vs State

React introduces variables like Props and State that are necessary to know for developing with the component structure as React asks for. State and Props are built-in objects in React. The purpose of State is to store values that can belong to the component and live in the component’s life-time. The state can change during its life-time, therefore whenever a state changes, the component re-renders. As an

19 opposite, there are Props that can be set from a parent/sibling component to send props objects into a child component. Thereby the overall difference, is that State can be set during a component’s life-time, while Props are passed into the component whenever it is instantiated.

Figure 2.9: React Props and State

Figure 2.9 shows a task component with a constructor that has props in its parameter to interact with the data sent from the parent component. Next there is a taskSelected button that has to be bind to the state before it can be used to interact with the JSX page. Lastly, there is a state object that sets all the variables, which should be used during the component’s life-time.

2.3.4 React ES6 class and function components

JavaScript ES6 introduces classes, which is commonly used in object-oriented-programming. A class has a constructor method. The constructor method is called each time a class is initiated. A class has a constructor to make it instantiated. The constructor takes an argument and assign it to the class instance. React uses ES6 classes for ES6 class components. When declaring a React component, it extends from a ES6 class component, which refers to the inheritance principle. This means the class can be passed from one class to another. ES6 class components have all the functionalities that React needs, including definition of function in a class, which is also called class methods and render method. A further explanation about constructor and render methods, will be elaborated on in the section for life-cycle methods[31, p.24-25]. React functional component is a pure JavaScript function that accepts a props as an argument. One of the main difference in React class component and functional component, is the return value that returns the React element i.e. JSX pages. Where class components require the extension of the render function within the class component. Another example is the constructor method that is used in class component to allocate the initial state. Functional component allocates the state via useState that has to be imported separately to make use of it. The same approach goes for the other life-cycle method that has to be imported separately in order to make use of them[32].

2.3.5 Life-cycle methods

Each component has its own life-cycle methods. The life-cycle methods are only available using ES6 class components, and not in functional stateless components. In a common React component life-cycle, there are four methods that will be invoked during the components’ life-cycle. The following methods are invoked in the following order[31, p.78].

20 1. constructor(props):

2. getDerivedStateFromProps(props, state)

3. render()

4. componentDidMount()

The constructor() method will be created whenever a component is instantiated and inserted in the DOM. The constructor has the functionality to save current state variable and binding buttons and class methods during its lifetime. getDerivedStateFromProps()’s purpose is to return an object to update the state. The object can be null in any case. It is used in rare use cases, but it is still important to know, because the life-cycle method can change a component’s state via the props value from an earlier component. render() is a mandatory method that requires the component to return an output from its elements. It is also the method where JSX code is written. componentDidMount() is called whenever a component is mounted. This method is suitable for asynchronously calls. Whenever there is a need for a fetch from an API call, the fetch will run in the componentDidMount method and the callback data can be stored in the given component’s state to be displayed in the render method. Several other life-cycle methods exist, but the most common methods are the above presented methods[31, p.79].

2.3.6 External libraries

React uses external libraries that make the use of React as a framework. This section gives a guiding explanation of the libraries that will be integrated to the React application in the experiment.

Axios

For requesting and receiving data from the server, React recommends the Axios library. Axios is a library that offers asynchronous request to remote servers. Axios is a promise-based HTTP-client for JavaScript, where the promise will deal with the asynchronous data handling. Axios is used by React because of the ease of asynchronous HTTP request[31, p.111]. Axios takes the URL as an argument and returns a promise back to the client. With Axios it is not necessary to transform the received data to JSON object, as Axios wraps it into a JavaScript data object. Installing Axios via Npm:

Npm install axios

React-dom-router for routing

React router is a library that offers navigational components. With react-dom-router it is possible to navigate through components easily. The React router offers the history.push() method that can push data through one component to another component within React’s props variable. The sibling component that receives the props variable, can modify and use the variable during the state variable that is offered by the sibling component. With React router it is also possible to navigate back and forth during the components, where the last visited component will be remembered whenever it is necessary to navigate back to the earlier component[27]. Installing React router via Npm:

Npm install react −router −dom

21 React Bootstrap

React Bootstrap is a copy of Bootstrap. Bootstrap is a library that can be included in projects to ease the development and not focusing on how to design a button or a list, in a user-friendly way. Bootstrap also serves the alignment of your website with the flexible responsiveness. React Bootstrap is only made for React to satisfy the requirement for being easy and quick to integrate with the JSX page, and how to import individual bootstrap components like a Button or a Table[2]. Installing React router via Npm:

Npm install react −bootstrap bootstrap

22 Chapter 3

Theory

The theoretical foundation is presented during this chapter where the comparative analysis will aim to solve the presented problem statement. The following section will present two layers of theoretical under- standings when analysing frameworks. The first layer will present the theories that give the fundamental understanding of the underlying learning process when conducting an experiential study. In addition, several elements and functionalities are expected from a framework, which the web-applications in this research will aim to cover and apply. The second layer will give an insight on the factors to consider when comparing different frameworks to each other, and thereby a deeper knowledge and overview on what to expect from a framework, when applying it in programming projects.

3.1 Kolb’s learning cycle theory

David Kolb published his experiential learning theory on two levels i.e. A four-stage learning cycle and four separate learning styles. Kolb’s theory is based on learner’s internal cognitive process i.e. obtaining knowledge and understanding through watching, thinking, doing and feeling[20]. He states that prereq- uisites for learning is experience: "Learning is the process whereby knowledge is created through the transformation of experience"[21] From the two learning styles by Kolb, this research will undertake the four-stage learning style. The four separate learning style is not chosen due to its restriction on people’s ability to learn through one view-point e.g. using one type of resource to obtain knowledge, which can be difficult for the research in Angular and React, as this research assumes that several factors are influencing the frameworks and different actors will be affected.

3.1.1 The four stage learning cycle

The learning cycle begins its process with an actor that has a here and now experience, which then is followed by a data collection and observation phase about that specific experience. The actor then analyses the collected data and the results and conclusions will then be part of the actor’s behavior and understanding of the experience. Since the learning experience is now fed back to the actor and is implemented in his behaviour, new experiences will be specifically chosen to match the already obtained experiences. This cycle of experience is divided into four stages with the following titles: ’Concrete experience’, ’Observations and reflections’, ’Formation of abstract concepts and generalizations’, ’Testing implications of concepts in new situations’.

23 Figure 3.1: The experiential learning model

Concrete experience The experience you already have gained from existing experience i.e. work tasks, school assignments or earlier projects that you have been involved in.

Observations and reflections In this stage there must be obtained some experience about the specific task or area you are working on. This experience can be build by reading a book, execute a tutorial or reading the documentation.

Formation of abstract concepts and generalizations The collected data and new knowledge about the task are analysed and filtered in a conclusion, which you can utilise and make it part of your experience.

Testing implications of concepts in new situations The gathered experience from former stages can now be modified and applied into one’s behavior and building the foundation to choose the new experiences. This stage gives the overall insights on how the obtained knowledge and experience have affected your skills and behavior. After this stage, if you need further knowledge, you will be able to start from the beginning of concrete experience as the life-cycle is an iterative process.

3.2 The necessary elements and functionalities to undertake

In the research of Gizas et al[14] they compared six different frameworks with different factors. The rele- vant findings will give benefit for the comparison of Angular and React from the core set of functionalities that the authors defined. These findings should be implemented and used in both environments. The core sets of functionalities help the comparison of Angular and React to identify if these exist and also, how high the complexity is when working with them in different environments. The evaluation and compari- son of the frameworks will be based on the core set of functions the frameworks hold. The functions that will be evaluated during the programming period are the following: DOM Manipulation, Selectors, Ajax functionalities, basic elements of forms, functions for base event handling that each framework should have to code these functionalities, browser compatibility.

24 3.3 Comparative evaluations

Several studies have concluded that certain factors chosen by developers are more important to consider in order to be sure that the relevant framework is applied to the projects. Hjelm’s [19] research had its purpose to analyse why it is necessary to use a JavaScript framework when you develop a web application. First, the study claims that the purpose of using frameworks is due to the fact that developing with frame- works makes it less time-consuming. Second, via the research and by the interviewees’ answers, it was concluded that having big communities are necessary in order to receive assistance and to knowledge- share, since developers often run into complexities with tasks they undertake. Third, each developer looked more into experience and understandability of the framework as necessities for which framework they would apply and not necessarily prioritising the performance of the framework. Therefore, the re- search helps this thesis to find the right factors that are needed to satisfy a developer. Nevertheless, it is emphasised that communities and their sizes are important to consider. Other important factors are complexity and learnability of the frameworks. With the help of Hjelm’s study, it has been clarified which factors to undertake in the evaluation of Angu- lar and React in order to meet the requirements the developers see relevant in the choice of a framework. The following theories will be based on Hjelm’s findings when looking into which factors to examine in the evaluation and comparison of Angular and React.

Graziotin and Abrahamsson [15] conduct a research about the comparative analysis of JavaScript frame- works in a given situation. They point out some factors that are necessary to look into when finding the suitable framework for a given situation. By measuring and comparing with these factors, developers will gain better knowledge to identify typical needs for a framework. The interviewed developers pointed out the following criteria for choosing the relevant framework: Is the framework well documented?; Does the framework have a big community that are participating?; And the statement "code less, do more" does it appear in the framework? In this thesis, these factors will be taking into account, when evaluating Angular and React. The factors such as documentation, the community and also developing a To-do list application will aim to give the impression about which framework lives up to the statement "code less, do more".

Pano et al.[26] worked on a research that aims to understand what is important when choosing a frame- work. During their research, they found several factors that have a big influence when deciding on which JavaScript framework to undertake. Therefore, Pano et al.’s research is relevant in this thesis, since it gives an insight on how to compare Angular and React. Through their data collection via numerous interviews with IT developers, it is evident that the underlying reason for choosing one framework over another, relates to how easy it is to learn a framework and if there is a big community on the web relating to the given framework. For the analysis that will aim to compare Angular and React, following factors from the findings of Pano et al. will be applied(p.18-24):

• Effort expectancy contains the factors Learnability, Complexity and Understandability. This category indicates the degree of ease linked with the chosen framework[26, p.18].

• The social influence includes Community size, which indicates the degree of other developers’ opinion and experiences that can influence the developer’s use and choice of a framework[26, p.19].

• Facilitating conditions evaluates factors like Suitability and Updates. The importance of what a framework offers in terms of its characteristics to be relevant for a project’s requirements and integration potential[26, p.22].

25 The following will give a deeper definition of what each category’s factors entail: Learnability: The time and effort it takes to learn the framework. It can take long time or less time de- pending on your skills and experience already obtained. Depending on the deadline of the project given, you can consider how much time it takes to learn the basics of a framework. Therefore, a developer should consider experience, time-frame and a project’s scale and purpose in order to choose a framework where the learning process is taking into consideration.

Complexity: Avoiding complex system i.e. the frameworks contribute to reducing the complexity of the language when programming. Frameworks to integrate easily to existing code. Can the framework give the developer more freedom to include more functionalities to a project without the need and former experience within the language itself? The statement "Code less, Do more" gives a good indication on this factor’s purpose when looking into frameworks.

Understandability: Understandablility of the attributes and the recognition of easiness to apply and use the JavaScript framework. A well-documented framework is easy to recognise existing functionality and easy to use to quickly start the project. A base skeleton of the framework could help. Furthermore, if there is a tutorial built for this base skeleton that is easy to understand, developers would choose the framework, otherwise they will leave the website and look for another framework that looks less complex. The clear structure of the code gives a developer a good intention to use it, because it looks easier to learn and become familiar with.

Community size: A bigger community leads to the framework living longer and will be improved continuously because of the developers that have a need for using it. Community is the heart of open- source projects due to the community being the reason for coming with new ideas and implementation of new features. Especially with knowledge-share within finding more bugs to fix and quicker response on issues. Such a community develops the framework to be modern and follow the new trends. If the framework is still used and has existed for a long time, it gives an indication that it is popular and thus will last for a longer period. A long lifetime of the framework leads to its extendablity.

Suitability: The framework has the functionalities that a developer requires for building their ap- plication. If not, they will have to explore other libraries that can do the work for them. Libraries will however make a framework meaningless to choose, since it is better to only use libraries if the framework does not full-fill the requirements for the developer.

Updates: Stands for how frequently is the framework updated. If the framework is not updated fre- quently it will not be competing in the market. this means other open-source projects will be prioritised on a longer term, because of their up-to-date functionalities. A framework should be able to run in different browsers. Updates ensure the compatibility of a framework.

From above factors, the comparison of the two frameworks will be conducted via developing two Todo-list applications. While developing these Todo-lists, the factors will give an overview of what to evaluate. This will aim to answer the problem statement regarding how to evaluate frameworks and what factors one can expect to be dominant while developing with the frameworks.

When looking into the two areas of research described above, it is evident when analysing each framework, it is important to understand and explore how they are created and again therefore important attributes

26 and elements should be known and looked into to know the functionality and purpose of the framework. While developing the Todo-list applications, above factors will be evaluated and rated, which will give the basis of conducting the comparative analysis of Angular and React.

27 Chapter 4

Method

This chapter will describe the methodology and the tools that have been applied to investigate the research question. The touch point will imply the paradigm that have been chosen to characterise the study’s worldview. To learn Angular and React there has been applied an iterative learning cycle. Necessary server-side program and database have been used to understand how the frameworks will interact with the server to exchange information. There will be a requirements list for the Todo-list applications and a mockup to describe how the applications should more or less look like. lastly, an introduction to the created evaluation table that will be applied for rating and analysing Angular and React via chosen factors is presented together with the adopted rating scale.

4.1 Constructivism

The aim of this thesis is to obtain and recognise new knowledge concerning how to evaluate and compare frameworks through factors that can be important for developers. The study’s purpose with building the applications and evaluating each framework, is based on my own perception and interpretation of JavaScript as a language and the experience with the frameworks I obtain throughout the development and evaluation process. Constructivism is a paradigm that build on the thought that humans build their own knowledge and the reality is constructed via the learners own experience[24]. In Constructivism humans have personal construction of learning via experience e.g new knowledge or new events[23]. Where passive learning is being seen as an empty vessel that have to be filled up with knowledge, Constructivism recognises that learning is an active process where learners construct meaning through active engagement i.e. real world experiments or real world problem solving. For this research, the paradigm Constructivism has the relevant approach to solve the problem state- ment. The paradigm is build around the fact that there is not one objective reality, but there is a reality for subjective opinions. Therefore the research is an active process where gaining knowledge is by us- ing sources such as books, documentation, but also former obtained knowledge together with reviews and opinions from other practitioners. The gained knowledge will be applied on a problem solving case where two Todo-list applications will be developed via each framework, and in parallel each factor will be evaluated during the development process. This evaluation will give an understanding of which factors influenced the experience of developing in Angular and React and a clarification of which factors that are dominant within each framework when executing this thesis’ experiment.

28 4.2 Comparative design

The suitable research design for this thesis is comparative design, as the main purpose and analysis will be based on a comparative analysis of Angular and React. The reason for choosing this research design is to have a better insight of the capabilities and attributes of a framework. Therefore, a comparison of two or more cases will give a clearer result of each framework. When analysing a framework alone, there can be a loss of knowledge that indicates what a framework really can contribute with and what it lacks. That is why it is beneficial to compare with other cases, in this case, two frameworks within JavaScript in order to have a clear understanding of the differences and what they both have as necessary factors for using and learning them.[3, p.68]

4.2.1 Applying the comparative design on the two applications

The two Todo-list applications are build on the same base elements. This is to gain a result that is comparative and accurate for the analysis. The applications use a database that holds data for the Todo- list applications, which will be retrieved to the client application via a NodeJs server. Both Angular and React should be able to retrieve data to their client application via the server. The same requirement list is used for both applications, as these need to meet the same elements. For the learning process of Angular and React, knowledge will be collected via books and each framework’s official website where the official documentation and tutorials are applied to the learning process. In addition, communities within each framework will be explored whenever necessary for more details and workarounds during the programming of the applications. As these resources are also the base for some of the factors used in the analysis, they will be investigated thoroughly for the evaluations of the frameworks, whenever they are used during the development of the Todo applications. During the creation of the applications, notes will be written for each period. All the actions taken will be written in the table, which will be presented below in this chapter in section 4.8 Table for framework evaluation. The timeline for each application is 14 days. this timeline includes the phases, where I learn about the frameworks, designing the applications, and the building of the applications with requirement list as the agenda for what to develop. Furthermore, it is expected that after building each project, it will be possible to confirm or deny the hypothesis that are set for the research, and also finish the requirement lists that each project should contain.

4.3 Qualitative method

The research strategy that unfold the purpose of this study is the qualitative strategy through a com- parative study about evaluations of the factors dominating in Angular and React. The majority of the data collected comes from books, documentation, tutorials and communities. Another source of data is webinars and presentations about JavaScript frameworks. The strength of combining literature with first-hand experiences from developers and practitioners, is the ability to address descriptive and ex- ploratory concerns while developing and evaluating the frameworks. It is also necessary to be able to use different data to uncover new and different angles of the analysis. My own perception and experience will determine the evaluation and the outcome of the analysis. Therefore this study is based on subjective experience, which will be uncovered as the development of each application takes places.

29 4.4 Applying Kolbs four stage learning cycle in this research

In this research, Kolbs learning cycle will be considered as a technique to study and learn from a framework and apply it in practice. The learning cycle will give the ability to evaluate each framework, where the findings will be summed up and be compared in order to find the similarities and differences. It is worthy to mention, that there are no experience gained for Angular or React from former experience in the utilisation of JavaScript. The knowledge that will be gained during the learning cycle will be new and inexperienced. This implication gives a better evaluation for each framework where no biased opinion can twist the judgement for any of the following frameworks.

• Concrete experience: During this stage I will present the knowledge I already have obtained from earlier experiences i.e school assignments, work tasks and freelance programming.

• Observations and reflections: During this stage, I will make use of the necessary books from Angular[11] and React[31]. I expect from both books to learn about the concepts of the frameworks and the necessary attributes that are used in the frameworks. These books should help me find the necessary vocabulary that is used in each framework, so it can easily be applied when actively practising the tutorials in each frameworks’ documentation web site.

• Formation of abstract concepts and generalizations: From the knowledge that is collected via the books and the tutorials, there will be reflection on old knowledge and newer knowledge for the comparison and observation of whether there is something, which has not been clear. If there is something that is unclear, this stage investigates on the specific lack of understanding or confusion to obtain the necessary knowledge and clarify it with yourself.

• Testing implications of concepts in new situations: This stage gives the opportunity to apply the new knowledge in practise with the Todo-list applications. This is also the stage where one realises whether or not the obtained knowledge is correctly understood and enough for the task. Since this life-cycle is an iterative cycle, it is possible to iterate over the life-cycle whenever it is necessary.

4.5 Todo-list requirements and Mockup

To have the best overview of what Angular and React can serve, it is decided to make two similar projects with a requirement of developing a Todo-list web-application where the user interface will more or less look similar. For these two projects, some requirements are listed for both projects. As seen in the Mockup for the Todo-list web-applications, the purpose is to add tasks for your daily needs in order to remember them and also keep track of them. In the Todo-list applications it is expected that they are able to create, read, update and delete tasks. In order to increase the severity level of the application, it should be able to assign a category to the task, where it should be possible to manage the category by creating, updating, editing and deleting a category. For example a Task called "Remember to buy groceries for dinner" can be assigned to a category called "Food". There will be a requirement list where all the functionality for the web application is broken down into smaller pieces.

30 Figure 4.1: Mockup for Todo-list application

4.5.1 Requirement list

In order to follow the purpose of each web-application, a requirement list is created in order to control the phases during the development and end up with the desired functionalities for the Todo-lists. The requirement list is divided into three sections; Requirements necessary to apply and observe, Mandatory functionalities in the task list and Mandatory functionalities in the category list.

1. Requirements necessary to apply and observe

• How easy is it to manipulate DOM-elements? • How easy is it to use event-handlers? • How easy is it to send data and receive via XMLHttpRequest? • How easy is it to apply external libraries including Bootstrap and Angular Material? • Both projects should visually and functionally be the same • Using the framework or library as much as possible without finding any workarounds and respecting the given structure for the framework and library • Write down the process when implementing the Todo-list applications • Use the knowledge that are gained from the books, documentations and tutorials before search- ing for a solution on the internet • The ability to use Angular Material and bootstrap for designing the user interface • Be honest with myself and not plausible, be able to provide self criticism when coding and only take the easiest way if it makes sense for the framework structure

31 • Understand the fundamental principles of the language

2. Mandatory functionalities in the task list

• Add a new task • Edit a existing task • Delete a existing task • Observe if a task belongs to a category • See if information consists of title, added text, and date regarding task

3. Mandatory functionalities in the category list

• Add a new category • Edit an existing category • Delete an existing category • See all categories

4.6 Node.js with Express.js framework

Nodejs is a cross-platform server-side environment that is written in JavaScript. It is an environment that does not need a browser to run in. Nodejs is usually used for developing server-side programs[18]. For testing the functionality of the http-client service that is build inside the frameworks, a web-server is created using Nodejs and Express.js framework. Express.js gives the opportunity to develop in Nodejs and use the high-level http utilities[5]. With the Express.js framework integrated to the Nodejs server, it will be easier to develop a http-server that can communicate with the web-applications http-client requests. This will lead to faster development of the server and easier save and serve the data via http-request and http-response concerning the database[11].

The figure below illustrates a table of the http-requests that are reachable via the client-side. The server is capable of doing operations such as CREATE, READ, UPDATE, DELETE that corresponds to the HTTP method i.e POST, GET, PUT, DELETE. These Http-methods are ready to use for manipulation of data in the database for tasks and categories.

32 What Request Method Request URL (https://localhost:8080) Request Body Get all tasks GET / None Get one task GET /:id None {"title": "", "description": "", Save new task POST /createTask "createdDate":"", "categoryId":"" } {"tasksId":"", "title": "", Edit existing task PUT /editTask "description": "", "createdDate":"", "categoryId":""} Delete a task DELETE /deleteTask/:id None Show all categories GET /categories/showCategories/ None Save a category POST /categories/addCategory {"name":""} Edit existing category PUT /categories/editCategory/id {"name":""} Delete a Category DELETE /categories/deleteCategory/:id None

4.7 ER-diagram

An entity relational model is a high-level overview of a database’s relation, where its entities are placed and how they are related to each other. This model gives a good overview of how the entities are related and how the database is designed.[29] For the Todo-list application a database is designed and created with two entities i.e. task and categories. The categories entity is added to the database concerning this study’s web-application, which will give a clear understanding of the life-cycle of Angular and React’s further framework complexities. The Mapping cardinalities for the ER-diagram is Many-to-one. A Task entity is related with one entity in Categories. A category entity is related with any number zero or more of the entities in Tasks. More precisely, a category can be assigned to any tasks where a task can have only one or zero categories.

Figure 4.2: ER-Diagram

33 4.8 Table for framework evaluation

In order to have a fully overview of the developing period for each framework and thereby the ability to evaluate the dominant factors in both frameworks, an evaluation table is created. The table is divided into four periods during the two week timeline on the horizontal line and each factor will be considered and rated in every period on the vertical line. For each day, reporting about accomplishments and experience will be conducted in order to shed light on the factors’ visibility and their role when solving or carrying out a task in every period. In connection to the table, a scale is created for the ability to rank how much a factor is influencing the experience and development process in the frameworks. The scale has points from 0-15 and is divided into five intervals.

Factors/Period day 1-3 day 4-7 day 8-11 day 12-14 What have been done ? How is it accomplished ? Effort Expectancy: - Learnability - Complexity - Understandability The social influence: - Community size Facilitating conditions: - Suitability - Updates

Scale Very High 13-15 High 10-12 Moderate 7-9 Low 4-6 Very low 1-3

Each factor is rated in all four periods, unless the factor was not applicable and therefore did not receive a score. When a factor did not receive a score, the statement "N/A" was marked under that period [Appendix B]. For each period the factor received a score, the average will be calculated in order to have an insight of which factor was dominant through out the development process. Below are two examples of the calculation of average for the factors: Angular - learnability Period 1 + Period 2 + Period 3 + Period 4 / Number of periods rated = Average 13 + 12 + 6 + 12 / 4 = 10.75

React - Updates Period 1 + Period 2 + Period 3(N/A) + Period 4 / Number of periods rated = Average 7 + 15 + 8 / 3 = 10

34 Chapter 5

Analysis

This chapter will aim to answer the proposed problem statement via conducting an analysis based on the two web application programs build via Angular and React. First, each framework will be evaluated separately. The analysis will start by listing the pre-expectations for each factor before developing the web-application. Second, the experiences during development will be presented, where each factor’s dominance is evaluated. Third, an overall average of each period’s evaluation of the factors and their scores will be analysed for Angular and React. Nevertheless, the findings from the evaluations of both frameworks will lead to a comparative analysis of the two frameworks. A discussion of the findings in the comparative analysis will take place in the end, together with the confirmation or denial of the hypothesis proposed.

5.1 Web-application via Angular

5.1.1 Pre-expectations to Angular

Effort expectancy(Learnability, complexity, understandability)

Learnability: The expectations to learnability is that it will be difficult to learn the framework, because this is a big framework and has several functionalities and a structure that is strict. The framework will not be easy to understand via looking at the tutorials and reading the book. It will probably be necessary to search for many online tutorials and online help for the understanding. It is expected that it will be necessary to search for videos on Youtube where practitioners give their inputs and experience. Complexity: In the beginning the understanding of the framework and the user ability will have its severity, but the longer period the framework is used, the easier it will be as one gets familiar with its attributes and thus is easier to make us of instead of coding in plain JavaScript. Understandability: It will be challenging to understand the attributes, as I think there are several at- tributes. In the beginning, understanding the attributes and methods will have a high-level of complexity, but once knowledge and hands on practice are gained, it will be easier to navigate in the framework and attributes will be more reachable. It is expected that the documentation will be well described and with a user-friendly detailing of tutorials, which will be easy to make use of in practise. The structure will be clear but difficult to understand and to work with it, since the framework might have a big tool list. However, the more time that will be spend on the framework, the easier it will become.

35 The social influence(Community size)

Community size: Community size will help in terms of solving bugs. I expect that the popularity of the framework is at a very high level, which means the necessity to ask questions and wait for responses are not expected, due to the fact that the community is that popular and big that the bugs and problems I meet are already been experienced and solved by the community. Therefore, I will need to search and scroll for the answers and solutions. Overall, the popularity of the framework and the community size will ease the programming challenges and make these challenges less time-consuming.

Facilitating conditions(Suitability, updates)

Suitable: The framework will be considered suitable for smaller and bigger projects. The framework should be able to support all the functionalities that are needed for every application, but as it contains a great amount of attributes, it is assumed to be overwhelming when developing smaller projects. If the project is too simple, the time to setup a project will be more time consuming, compared when choosing smaller libraries, and pure JavaScript. In the end, it is expected that the framework will have a high suitability as it includes everything from event handling, DOM-selection and interacting with elements. According to browser compatibility, all big browsers would probably support the framework. Thus, it should be able to develop with the framework and that it will be able to work in production for big browsers. It will be hard to integrate other libraries as the framework should provide all the functionality that is needed for developing a complete application. Updates: The framework will probably have a lot of updates during its life time, because the framework is popular and many people are using it. In order to make sure developers keep using the framework, it should be updated often, to satisfy their needs. Thereby also fixing bugs when discovered.

5.1.2 Developing Todo-list with Angular

Period 1 (day 1-3)

This period has its focus on reading the book called Angular Development with typescript[11]. First, the book explained the key concept of the main attributes i.e Components, Services, Directives, Pipes, Mod- ules, Data bindings, Binding properties and events. It also gave a clear insight of how to generate a new project via Angular CLI, and how to generate necessary files and folders whenever these were necessary to use. For every time I read a section about the key concepts, I had enough information to proceed to the official documentation page. On the official website there was a tutorial that Angular recommended to follow. The tutorial was about a minimal e-commerce application with products, products detail page and a checkout form. I accomplished a deep insight of how to instantiate dependencies for components, routers, and elements. The tutorial gave an overall knowledge of how the cycle worked together with a practical experience of the framework. Learnability: It has been easy to read the book for Angular and understand the key concepts of the main attributes and the component based way of programming. Rating: Learning about Angular through the book and documentation was easy to comprehend and therefore the rating is 13. Complexity: It was a bit challenging when importing the necessary dependencies e.g. when using a router, or creating a component. These should be instantiated in the app.module.ts to be available to use in the whole application. If this was done in plain JavaScript it would not be necessary to use imports. In JavaScript it is not necessary to use components, and therefore it is possible to separate the code in JavaScript HTML and CSS files. Even though the degree of severity increases in Angular, it is still beneficial to have a structure when working with separation of concerns.

36 Rating: Since there was some knowledge to obtain and practice the rate for Angular’s complexity in this period lands on 8. Understandability: The documentation page was easy to read and makes continuing to the next step straightforward instead of being stock after applying one functionality. The documentation led me to the tutorial where it was explained on a user-friendly level. Executing the tutorial gave the opportunity to gain practical experience and trying out how the dependencies was connected to each other. The tutorial gave a better understanding of the life cycle on how to develop in the app. Rating: The Understandability of Angular was user-friendly and the tutorials gave a good first-hand insight on the frameworks attributes. Therefore the rate is 15. Community size: Since the documentation, book and tutorial gave the necessary knowledge and details about Angular, it was not required to visit the communities during this period. Rating is not applicable in this period. Suitability: The framework has the required functionalities and attributes for this period. Therefore, the need to use and implement other libraries has not been a requisite. Rating: The necessity to apply other libraries has not been applicable, which makes the suitability of the framework very high and therefore the rating is 15. Updates: Angular has the required updates for the tutorials during this period. Rating: This factor lands on 15.

Period 2 (day 4-7)

After using the first period for pure learning and studying the framework, it is time to begin with the Todo-list application. In the second period, I used the Angular CLI to generate the application. Using the tutorial from the official website, it has been easy to refer to the tutorial on how the setup uses the dependencies e.g. HttpClientModule for http-request and response, creating components and importing it to the app.module.ts to specify the components. As the Angular structure recommends creating services for communication with the server, following the tutorial I created the task service, and also the following dependencies for http, so I could inject the service in any component that would use the service. The first two components I created were TaskListComponent and TaskDetailComponent. To navigate through the components, I used the tutorial to setup the necessary dependencies for declaring Router- Module for routing, and path for navigation. For the taskListComponent, I first created the service and established the connection to the Nodejs server in order to have all tasks’ data. Second, I injected the taskService to the components to loop through the elements via ngFor Directive and show the list in the chosen order. To list the tasks in a user-friendly design, I installed the Angular Material design as Angular is recom- mending it for a better and faster design. Whenever one specific component was needed from the Angular Material, it was necessary to import it in the app.module.ts file. to use it throughout the project. The next component that was created was TaskDetailComponent. Almost the same procedure was applicable for this component. Using the TaskService to return one task, run through each element in the object and show the list in the TaskDetails page. Referring to the tutorial from the official website, I already learned how to use NgModel for interacting live with variables, Interpolation for showing data in the html, Directives as ngFor to loop through the list of object and pipes for showing the data in a nice dataformat. Learnability: The tutorial was useful in the case for developing a Todo-list application. There were many practices from the tutorial I could use. Therefore, whenever it was necessary and the tutorial had

37 that feature, I tried to do the same. One thing I was worried about, was if the routing system was complicated, but it turned out to be manageable and quick to understand. Rating: Since the tutorial was useful during this period and had the needed elements and details for this phase of programming, this factor is rated with 12. Complexity: Simple Http method POST was hard to identify. I needed to use ’subscribe’ to send data with a POST request. First time I tried to use HttpClient with GET-request, it turned out to be easy. However, I ran into a cross-origin problem that took me a while to figuring out where the problem was. The problem was that I did not include http:// before writing the URL for the server. Whenever there was a new component or something that was necessary to use, it should always be imported via the app.module.ts. For instance, whenever it was needed to fill out a form modal, you would not know how to use it without searching for the relevant answer first. For filling out a form modal, you need to instantiate formBuilder for storing the data in the form’s inputfield. Therefore, there was some severity in the beginning. Rating: Since Angular is new to me, it has its complexity in practising its functionalities especially when using common functionalities in JavaScript world that needs to be imported with another name convention in the framework. Whenever there was a need to use the other functionalities, which were a requirement to solve Tasklist and TaskDetail, the import of these were not mandatory, as they could be used and applied right away. Therefore the rating lands on 10. Understandability: I used the tutorial as a help across the development process. I wanted to create the Service and whenever another component needed the service, I had to import the service and also inject it to the constructor of the component class. This was a bit challenging to understand in the beginning. After the service was created and could retrieve data from the http-service, it was time to populate the list in the HTML template via the data that were retrieved from the server. Creating the list and populate it was easy, as the tutorial showed how to execute it and I could relate it to what was used in the tutorial to take some advantage from it. The tutorial was beneficial in many ways, because the Todo-list application was similar to the e-commerce application. Since iterating over a list, which was one of the goals in this period, it was beneficial to see an example in the tutorial. Whenever a need occurred to edit or add a new task I was navigated back to the list of task overview to see the update. It was not clear to see how it was done and the documentation did not directly serve this information. Since it was not straightforward to search for this functionality in the documentation, I therefore decided to speed up the process and look on the Internet to find a quick solution. To navigate back to the taskList I needed to use: this.router.navigate([’/heroes’]);. This line was found via a google search, which pointed back to the documentation page. Importing the Angular Material was easy and the documentation was clear about how to import it. It was still complicated to use the attributes for instance mat-grid-list for making a suitable list that fit to the centre of the page. After practising several times, I decided to search on the internet for a mat-grid-list in order to have more clearer information about it. On the internet, the practitioners from the community had some simple and not relevant examples, since my intention of using the mat-grid-list was to loop through elements and show it in a user-friendly, structured and as an easy overview. Rating: For this phase in the period it turned out to have an overload of information, but also several complications which made the understandability of Angular more sever. The rating is 7. Community size: During the centering of the taskList, I had to search for the mat-grid-list. The community for Angular did not have a satisfying answer and therefore I made a workaround for this task. As the community was not as helpful for this matter, the rate for this factor is 4. Suitability: The functionalities of Angular were satisfying, since I have not reached the advanced level.

38 I only needed to search for guidance. Rating: The rating is 8. Updates: Since the Understandability had its severity and the community did not have all the answers, I would recommend them to make some updates on faster and easier usage of advanced task solving. Rating: This factor lands on 8.

Period 3 (day 8-11)

In this period I have been working further with the task components where the Task service now has the methods CreateTask, EditTask, DeleteTask and also it is possible to create, edit and delete a task. The edit page is created with a special feature using cross component functionality that sends data to children and emit the parent again using @Input and @output. For the inputs, FormBuilder has been used for retrieving the necessary data from the inputs to create a data object. The routing has since been extended and Angular Material has been used for adding styling to the components. Nevertheless, the buttons have event listener with event-binding as it is possible to listen to a custom function. Learnability: According to http request response, I did not feel it was clear enough in the documentation when trying to create a POST request. Therefore I had to look in the community to find a working example. Rating: Since the first Http-request was made with GET request and it was used in the tutorial, I expected that the Post request also was easy to use. This was not the case, since the tutorial was not clear about it. Therefore I had to search outside the documentation. I give this a 6. Complexity: Since the documentation was not clear enough for the POST request and the FormBuilder were also challenging in this period. Rating: Rating is 6. Understandability: HTTP-request and -response were difficult to learn, since these where not clear in the documentation. Exploring new features for learning purposes, I decided to make the edit component as a component that is instantiated in the taskDetails component. The reason for that was to have the ability to send data back and forth to the components.Therefore, I was faced with some challenges using the @Input, as it did not work in the beginning. I did not understand how the value could be injected from a parent component and then be declared in the child component, which then was reflected to the HTML. Dropdown for category items in the Edit Task component was challenging. I tried to look for the NgModel to see if that could help or if the value could be saved in a variable. In addition to this, I tried to see if Angular Material had a solution for this issue. The Angular Material had good examples of the design they use for the HTML attributes. A dropdown does not take the first category item as the selected value from the http-request. The issue occurred according to the category item in the dropdown as an already selected value in edit page. After practising and searching for videos via the practitioners I found the solution. The solution is the following: [value]="category.category_id". The square brackets made the difference. In the Youtube video, the developer made a mistake, which made me realise that I also was missing the square-brackets in the Todo-list application. Rating: As there were many things that were unclear in this phase, I would rate this as 6. Community size: The necessary information about POST request was not in the documentation for sending data within the body when sending a request. Therefore, it was necessary to search in the community. A quick search on the internet gave the necessary information to solve it. Again for the dropdown value, I had to look on the internet for some necessary information. Rating: As the community helped to identify the missing element, the rate is 12. Suitability: For this period, the framework was suitable for the given requirements. Rating: The framework had the needed functionalities in order to undertake the planned tasks. The rating lands on

39 a 12. Updates: The framework had the necessary updates. Some documentation could be more clear using HTTP-methods. Rating: The rating lands on 9.

Period 4 (day 12-14)

During the last period, I worked with the category functionalities. The requirement was to show a list of categories, edit and create a category. For sending data back and forth from the server, the category service was created. Besides that, the Angular Material was used for styling. Learnability: All the functionalities for each of the similar components, were already tried out. There- fore, the needed knowledge and experience were already gained. The Angular documentation refers to the Angular material styling as a choice to make when designing your web application. The Angular Material is well documented on their website, when it comes to importing attributes from the library to the Angular project. However, it was very complicated if there was a need to change the color, height, or its appearance of the layout in general. Rating: Since the required knowledge was acquired in former periods, it was easy to navigate through the documentation and find the relevant details for this period’s tasks. Therefore the rating is 12. Complexity: The complexity of the given tasks for this period would have been much more severe if I would develop those in plain JavaScript. Here Angular lessens the difficulty and therefore is helping to solve the requirements efficiently. Rating: The framework makes the severity low and therefore the rating lands on 13. Understandability: The appliance of the attributes ended up being easy to understand. It is however necessary to mention that there were places, where I forgot to instantiate or import some build-in libraries in the app.modules.ts. This led to the application not compiling, which made me realise that I forgot to import them. Rating: For this period, the understandability lands on 12, since the attributes were enough to solve the required tasks. Community size: As the needed insights were gathered in period 3, the community was not used and therefore the rating is not applicable. Suitability: There was no need to explore other libraries for the given tasks. Rating: The framework had sufficient functionalities to solve the tasks. The rating is therefore very high on a 15. Updates: Since the required knowledge was obtained from earlier phases to build the category list, there was no need to look for updates. The developed tasks were suitable to the chosen browser. Rating: The rating for updates is not applicable.

5.2 Web application via React

5.2.1 Pre-expectations to React

Effort expectancy(Learnability, complexity, understandability)

Learnability: It is expected that it will be hard to learn React fast. It would probably require hands on experience when understanding and developing in the library. There will not be a strict structure when developing in the language. Therefore, it will be easy to make workarounds or develop the required tasks differently compared to other practitioners’ work. It would probably not be necessary to look for videos on Youtube. Complexity: As React is a library in itself, even though many developers perceive it as a framework, it should not be difficult to integrate other libraries and use it together with React.Therefore, React will

40 reduce the complexity if one was to program in plain JavaScript. Understandability: I think there are few attributes to recognize, but to understand these few attributes, it is necessary to read and practice in the same time. Therefore, I think the structure is simple and clear, and there will not be a big restriction due to a loose structure. The library should allow developing in it straight forward. I expect the documentation and tutorials to be thorough and sufficient.

The social influence(community size)

Community size: React has become very popular in a few years and it is evident when looking up the community that it is popular and a lot of activity takes place. Therefore, if there is a need for assistance, it should not be a big issue to search and find it.

Facilitating conditions(Suitability, updates)

Suitable: As React is a library I assume it is limited to work with DOM-manupulation and event- handling. Whenever I need to interact with the server, It would be required to look for other libraries to integrate. Therefore, React may not be suitable for anything other than the view of the web-application. Updates: As stated, React is a popular library that benefits in big companies, therefore it would be necessary to update its libraries, and fix bugs whenever it is needed. If not having React up-to-date, it can result in losing its popularity, community and the companies that applies the library.

5.2.2 Developing todolist with React

Period 1 (day 1-3)

The first period of the developing process for React aimed to study the library from the book called The Road to learn React[31]. The book started out with code examples and showed examples of key attributes. In the book, I looked in to Node and Npm when setting up a project. I also focused on learning about JSX, ES6 Arrow function, ES6 Classes, Basic React, Component State, Bindings and Event. After these chapters, I decided to look at the documentation in the official reactjs.org’s website. The documentation provides two tutorials that can be followed. The first tutorial can be followed practically. The second tutorial is related to the main concept and attributes that were necessary to learn in order to have the ability to use the structure of React. Learnability: Following the book gave a good insight of the necessary content of key attributes that were used when building an app in React. Learning about React via the book was easy because there were a lot of EcmaScript6 included, which is plain JavaScript and not advanced details about the React library. Therefore, it was easy to understand and not necessary to adopt a lot from the new library concept. React’s documentation was also easy to understand in the beginning, where it navigates you effortlessly to a tutorial for both practical and theoretical experience. For the practical guide, React serves a tutorial where it is possible to build a game called Tic-tac-toe. Rating: The sources to learn about React is straightforward and easy to comprehend. There were no difficulties in reading about the library. The rating is therefore 13. Complexity: When practising the given tutorials from React’s website, I faced challenges from the beginning. The tutorial starts with explaining the steps to create a React application via the Npm. Following the guideline, it should serve me a project with a structure that has a starting point with a source folder. A command "Npm start" should give the ability to start the application and run in the browser. Doing the necessary step resulted in a node_modules file and a package.json without a Start script. Thus, there were no source and no script to start the program. Afterwards, I had to follow the tutorial via CodePen (an online website to develop Javascript programs). Later, I found a bug and had

41 to search for help via the community. Overall, the tutorial was able to cover many aspects, but it was still confusing when following the guideline for the tutorial. When attempting to write the code in the editor, it was difficult as the tutorial did not separate the game in different JavaScript files and instead was developed all in one. It contained many lines of code, where I needed to scroll up and down in order to see where to insert the code. Instead, it could be suggested that the project is split into multiple JavaScript files in order to learn the library faster and navigate in it better. Because of this confusion in the tutorial, I had to follow the theoretical guide where the documentation gave a clear guideline. It did provide with simple and good examples that were necessary in the given situation e.g. when creating an event-handling for a button from the HTML interaction to the programmatic-ally part in the function that was created. Rating: The first-hand experience with the tutorials of React did not serve well for learning and practis- ing the library. The examples were confusing and made the tutorial advanced due to the choice of not separating the files. Therefore, the library did not live up to its expectation of ease in the start phase of learning it. The rating ends up with a 3. Understandability: The overall understandability of the attributes was easy to recognise because the React programming lays on ES6. Even though ES6 was used, the concept was still not completely clear to me. I had many questions in order to know how "props" and "state" worked despite the fact that the tutorial explained it. Rating: Even though I looked into two tutorials, it did not satisfy my needs for the Todo-list application. The rating lands on a very low score i.e. 2. Community size: As described in the complexity section there were problems creating a React ap- plication and see it working in the browser. A quick search on the internet gave me results from the developers’ community, where they explained how to delete the global variable "Create-react-app" and install it again. By applying the recommended solution from the community, this worked. Rating: In this period, the community turned out to be a necessity in order to overcome the challenges faced. Therefore the rating score is 13. Suitability: The tutorials has not yet given a great overview and therefore it is not clear whether the library is a suitable choice when developing a whole application from scratch. Rating: The rating is low with a 6. Updates: The first tutorial where the purpose was to develop a game is confusing and overwhelming. React should consider updating the tutorial so it has a simple example that can be followed. Rating: Since React should consider to update its documentations, the rating lands on 7.

Period 2 (day 4-7)

For this period, I could finally start creating a React project. I added a library called ’React-Bootstrap’ for the design, and then I used a library for routing and navigation. The first step was to create a task-list component and task-detail component. Since there was no structure in the documentation for coding, I decided to put each component in its own JavaScript file. To request data from the server, I had to include a library called Axios that React recommended. To integrate the http-method in to the com- ponent, React recommends using the life-cycle method "componentDidMount" to run the http-request after the JSX page has been loaded. Learnability: First component was with the navigation for header to navigate it between category and task. Here I had to include the library React-router-dom. It has a steep learning curve and thereby I needed to learn more about the new library to get an insight of how it worked. Further, I needed to watch videos for understanding and comprehend on how it worked. When completing the above knowledge and details, it ended up being easy to make use of the navigation.

42 The React-Bootstrap is a special edition and customised only for React. In addition, the way React renders the library’s components is clear and straightforward. Everything worked as expected and the documentation for this part was well written. React-Bootstrap was easy to include in React’s project with a great ability to render the components perfectly. Axios for http-request and -response was surprisingly easy to include and apply. Since I have experience with http-methods, it did not require much learning. Even the documentation directly served the neces- sary knowledge for requesting for data. Rating: Since there was a need to implement other libraries, the time it took to comfortably navigating through React was longer than expected. Therefore this factor lands on 8. Complexity: The complexity increased the more libraries I implemented. This made the process of using React more sever, as I also needed to learn and navigate the additional libraries. The additional libraries were however necessary in order to have a fully running framework. Rating: The complexity of including more libraries had its difficulties. Therefore the rating lands on 9. Understandability: Understanding React’s components for class and function was not clear. Both class and function components were doing the same but in different ways. Besides that, the React class component includes a constructor, where a function for the React component does not. I had to watch videos for understanding the differences between them and which one to use for which scenario. React recommends using class whenever you need to get data from another component as everything will be stored in the props. Rating: Since the differences were not clear, the rating lands on 6. Community size: To understand the libraries that I had to use, the only way to gain knowledge was to search on the internet. The community was helpful when I needed to know the differences between function and class components. Rating: The community was the source that resolved my challenges during this period and therefore the score lands on 15. Suitability: Adding the recommended libraries to the existing project was compatible and fast to inte- grate. It fitted very well to the existing React project. Rating: The needed integration was successfully implemented and with ease. The score is 13. Updates: The needed updates from the library and the external libraries integrated fit well with the purpose of this period and are up-to-date for the given project. Rating: Every library served its purpose with no complexities in terms of the adoption to the application. The rating lands on 15.

Period 3 (day 8-11)

In this period I worked on the Task component, where it should be able to do the operations i.e. cre- ate, edit and delete a task. For the mentioned operations there was a need to interact with the forms modal. To be able to interact with the inputfields via the onChange event, the functionality had to be implemented in the JSX page. The routing has been extended. It is possible to send data from one com- ponent to another component. The created functionality for the task are a router and HTTP-Requests i.e. POST, PUT and DELETE. Furthermore, the routing library has been used for navigation via the library react-router-dom. Learnability: From a Youtube video I watched for routing, I found out there was a History.goBack() function. This function could be added to a button for navigating back to the last page you visited. I would not have found this function if I only searched in the documentation. Using this:()=> before a function in the JSX will trigger the button to be clicked only once. If this feature is not found, you will end up getting your button clicked on as soon as your browser has loaded

43 the page. Rating: It took time to learn and figure out how the things worked together, and if I did not see some functionalities accidentally, I would not have the knowledge via the documentations that are served. Therefore, the rating lands on 6. Complexity: In the taskCreateComponent you need to add a dropdown functionality that shows all the category you want the task to belong to. Creating this functionality was complex. I made a workaround for this functionality to work. I selected the category and then found the ID of that category via another Ajax-call for storing the category with the task I was about to create. Rating: Using a framework instead of plain JavaScript was not beneficial for this case. Therefore the rating lands on 6. Understandability: I had some complications regarding the use of props and state between details and edit components and regarding sending and receiving data between the component. The application should be able to use props and state to push data to edit component and in the same time show the edit component and hide the details component. Whenever the editing was finished and the save button was clicked, there should be a redirection to the detail component. This functionality did not work for me, and I could not find enough information via the documentation or through the community. Delete had some problems I could not solve. Sometimes when deleting an element, it will not redirect to the main list. Otherwise it worked as expected most of the time. When retrieving data from the server side via the library Axios- it was working fine. Rating: Due to the complexities in redirection and not sufficient information from the documentation, this factor has a score of 8. Community size: The community helped a lot regarding understanding how the attributes and func- tionalities worked. Especially in terms of the implemented libraries, the community gave a good expla- nation and examples of how these are connected easily with the existing application. Rating: The community once again was helpful and gave the necessary solutions in order to develop and continue to the next step in the application. The score is therefore 15. Suitability: The framework needed to integrate other libraries to have its full functionality to support a web-application. However, it is a fact that when applying React as a library, it is needed to implement other libraries as well in order to have the full advantage of React. Rating: The rating is based on the fact that it was already given that React needs other libraries and therefore the suitability is still considered high with a rating of 12. Updates: The libraries are updated and can easily be synchronised with each other and within React. There were no new functionalities integrated in this period. The libraries integrated were rated in previ- ous period. Rating: The rating lands on not applicable.

Period 4 (day 12-14)

In this last period I had obtained knowledge from previous periods where I created the category com- ponent, with the functionalities as List of categories, category detail and edit category. Hereby also interacting with the server via the Axios to make http-requests and also designing the application via React-Bootstrap. During this period, I tried to send data to a component via the react-router-dom that has a history method, which holds the current state from a component to send it to another component via props method. This makes it possible to get data via components, instead of a new Ajax-call. Learnability: After working with the task components, the life-cycle methods, JSX and ES6, I obtained enough experience to be more clear when developing the rest in the category components. Suddenly, I

44 realised that React had a Cross component functionality that I could make use of, and when this life-cycle method was deprecated, I had to use the new method that ended up being complex: getDerivedState- FromProps(). Rating: In this phase, the learnability was complex and not as straightforward even though I have been working with the library intensively for some time. The rating is 6. Complexity: The life-cycle hooks were difficult to understand and I ended up using many hours to clarify this challenge. Therefore the rating lands on 7. Understandability: Using Cross component functionality does not work for my purpose. Thus, I used the react-router-dom history method to send data to the edit component. Whenever the data was sent, the edit component should receive the information in its props method. For accessing the prop method, it was found to be difficult. I used many hours on getDerivedStateFromProps() Life-cycle method while this was a required feature after the updates from React. Rating: Since I had to find a workaround for Cross component functionalities, the rating is 8. Community size: The community helped during every requirement in this period. The answers were available and easy to find. Rating: The rating is 15. Suitability: The integrated libraries from former period were enough and worked for the requirements throughout this period. Rating: 13. Updates: The React library had some updates regarding receiving data via the component props’ func- tionality. The library updated the method called getDerivedStateFromProps(), that made the learning more complex. Rating: For this factor, rating is 8.

5.3 Comparative analysis of Angular and React’s development processes

The two Todo-list applications are developed and evaluated separately on each relevant factor. In order to accomplish a deeper understanding of the factors dominating in Angular and React when applying them to a application project, a comparative analysis of the findings from previous chapter will be conducted.

45 Figure 5.1: Comparison of Angular and React

Learnability Rating: Angular: 10.75 | React: 8.25

Looking at Learnability for both Angular and React, it is evident from the findings during the develop- ment of the Todo-list applications that learning Angular is easier through out the development process than learning React. This is due to the fact that the book and the official documentation are serving the necessary details about the framework. Nevertheless the details from the book and documentation corresponds to the tutorial’s content, which is relevant for this project. During the process of learning React, the experience was that the library became more complex for each requirement that was added in the application. The first period gave a good insight and knowledge about React, but as the project went along and the need for additional libraries occurred, the insights that were accomplished in the earlier periods were not sufficient later in the project. Even though React uses ES6 class and mapping functionality, there was still a need to learn more in order to complete the requirements listed for the application.

Complexity Rating: Angular: 9.25 | React: 5.5

In terms of complexity in both frameworks, the framework that compliments the projects’ requirements by giving attributes that make the development of the application straightforward, is Angular. Angular contains a relevant structure and components that make the framework easy to integrate and it reduces the complexity of the language. React also has the component structure, but it does not strict your coding style to separate the component in layers. Angular’s importing can be tricky and overwhelming, but as soon as you have imported some dependencies a couple of times, it becomes easier. The tutorial for Angular gave a rich understanding, but whenever I had to search for a feature that was not in the tutorial, it became complex, as the findings were not as applicable in practice and had their severity. Examples of such severity is HTTP POST-method and the imports for the formBuilder. The complexity in React is rated lower than Angular due to the fact that React does not serve as many functionality for developing while it is a lightweight UI component library. Such a library needs other libraries to fulfill the requirement for becoming a framework. Therefore, when reading about React, it was not enough for developing a suitable application. It is required to include other libraries.

46 Additional complexities that can be stated are cross component functionality i.e. sending data back and forth via components and using Props and states. The tutorials do not offer a separation of concern when developing in React.

Understandability Rating: Angular: 10 | React: 6

From the average rating of the understandability for the project that applies Angular, the framework is experienced to be well documented and the given tutorials are helpful when developing throughout the project. The documentation are on a user-friendly level, which makes the adoption of the framework fast. During the usage of the framework, some missing details about the dependency injection regarding HTTP POST-method led to a necessity of searching for information about this functionality. This search did not give the needed results easily, and the documentation did not serve it in a user-friendly manner compared to other descriptions about Angular’s functionality. Another point to emphasise is Angular Material. Angular Material was easy to implement, but whenever a customisation was needed, it had its challenges and even the community was lacking the desired information. Angular can contribute with a structured skeleton that makes it possible to focus on more advanced tasks and therefore the statement Code-less Do-more gives a good indication of what the framework can contribute with. In contrast, React’s documentation was not as well described when compared to Angular. It is lacking in its tutorial and the game that is developed during the tutorial is overwhelming with many functions in one JavaScript file. since the ES6 is included in the library as a way to develop, which makes it easy to understand the overwhelming information. React’s components can be used in a ES6 class or function that gives challenges when deciding which one to use while both functionalities give the same output. Other severity challenges occurred during the understanding of Props, States and cross functionalities. Nevertheless, usage of several external libraries for making React as a complete web-application gave a higher level of complexity in understanding the library. In the beginning React did not confirm the statement Code-less Do-more by its own. But when implementing external libraries it gave room to expand the functionalities. community size Rating: Angular: 8 | React: 14.25

Angular received an average score of 8 for this factor as the experience of the framework was that it was well documented and thereby all the challenges that occurred were easily resolved by checking the tutorials and documentation. The need to search in the community did only appear for Angular Material as an external library and for the HTTP POST-method. When searching for the above the answers were not satisfying. The overall experience of the dependency on the community was that it was low, the documentation served a better detailing and information. In contrast React was very dependent on its community as challenges came from the beginning due to the documentation was not sufficient. In the first period of the development process, I faced challenges for creating a project for React. Creation of a React project via the node package manager did not serve the project with the necessary files that could kick-start a project to work in the browser. Even the related tutorial was not easy to follow and use, as the example had a complicated structure. In general, the tutorials were based on theoretical knowledge-sharing and not as practical as the tutorial of Angular. As mentioned, React needed several external libraries to be implemented, and here the community was a necessary source to have the required information about how to utilise the full functionality of the libraries.

47 Suitability Rating: Angular: 12.5 | React: 11

The framework of Angular includes most of the relevant attributes for making use of a framework in a project. It was only necessary to apply another library once when designing the web-application i.e Angular Material. The framework gave the ability to create a full example of a web application. Its attributes gave the ability to import elements, DOM-manipulation, Event-handling and send data back and forth via a server. With React it was necessary to include other libraries i.e. React-router-dom, Axios and React-bootstrap. The implementation of libraries was expected, however the number of libraries needed was surprising. Due to the necessity of adopting external libraries, React could have ended up with a low rating in suitability, but since the external libraries could easily be adapted and imported in the React library, these considerations gave a higher rating.

Updates Rating: Angular: 10.66 | React: 10

Angular and React are rated almost equally since they are both up to date with today’s requirements in web-technology. The reason for such similar ratings is due to both frameworks served the necessary func- tionalities when developing. Both frameworks’ functionalities could be found in their documentations as well as their communities that served the necessary knowledge. The only update both framework would need is their documentation page. The update needed for React, is the description of its examples on each functionality and also its tutorials that could give a better overview with a more structural coding standard. Such update in React’s documentation can serve a better tutorial service that inexperienced but also experienced practitioners could take advantage of. For Angular, it could for instance be to add some extra clarifications on how its HTTP methods are working.

Looking at the pre-expectations presented above for each framework, the experience during the devel- opment process with the frameworks, partially confirm the pre-expectations and hypothesis. The effort expectancy for Angular was expected to be difficult in the sense that the framework’s attributes would make the experience and use more complicated. Nevertheless, it was not expected that it was sufficient to only read the documentation and practice the tutorials about Angular. However, the evaluation above made it clear that Angular has a well-articulated description of its functionalities and life-cycle. It was also surprising that the community was not as much needed. In terms of the suitability of Angular, it is confirmed that the framework offers many functionalities that makes the process of developing application in the framework completed. It was not difficult to include external libraries as Angular Material, as the Angular Material documentation offered a comprehensive detailing of how to include the library to a existing project. Angular is considered being up-to-date which is also expected because of its popularity among its community that also includes greater companies. Therefore, it is crucial that Angular always is up-to-date and satisfies the clients’ needs.

When looking at the pre-expectations for React and the evaluation of the development process, the Learnability factor was experienced as complex in its documentation and the given tutorials. The process showed that there is a need for some experience with the library in order to fully utilise its functionalities. The documentation could not be considered to be understood at a beginner-level and thereby it is assumed that inexperienced developers like students might have a difficult time learning the library primarily from the documentation. React became easier to develop in when including the necessary libraries, which are recommended by React itself in order to obtain a fully functioning framework. Whenever a challenge occurred, the community was the most helpful source, since the documentation did not present fully ex- tended examples that could easily be implemented to the code. React is surrounded by practitioners that have extended the tutorials with their own experience with the library through Youtube videos. These

48 videos are meant to give inexperienced developers a feasible development process. The recommendation from React was to implement some external libraries, which turned out to be compatible with the React library and thereby suitable for the application. The necessary updates for React to be modern and on track with today’s expectations and solutions can be considered very high, as Facebook is making use of the library exactly due to its in sync functionalities.

49 Chapter 6

Discussion

The findings drawn from the comparative analysis of Angular and React, give the indication that the chosen factors for comparing the framework and library were relevant and gave evidence of what to expect in terms of their abilities and each framework’s content when applying them in an application project. Angular and React are dominated by different factors, and have their different styles in their ap- proaches of fulfilling the requirements of being suitable frameworks and libraries for web-development projects. Looking into the comparative analysis, two factors are rated similarly both in Angular and React; Suitability and Updates. Suitability is rated within Angular by 12.5 and React 11. Both of them are highly rated because their attributes and interactions with the HTML DOM-elements are easy to implement after a few attempts. Angular is a bit higher as the framework has suited well into the purpose of the Todo-list application. It can be argued that React has more complex variables and functionalities that a developer needs to understand before applying them. However, since ES6 is part of React, it gives the indication that the coding is not complex to work with. In addition, when the need to apply external libraries, there are relevant documentation in the community, which ease the process. In the factor Updates, Angular scored 10.66 and React scored 10, because they both have a need to be kept in track for today’s necessities in web-development and also live up to the communities’ requirements for them. Nevertheless, there are small-medium sized companies that rely on the frameworks and have their businesses and client-side offerings build in the frameworks, which makes it crucial for the frameworks to satisfy its stakeholders’ needs. If the framework does not offer the needed updates, the companies are forced to adopt another framework or make workarounds, which can also be time-consuming and can lead to bad-coding. It can be discussed, whether the ratings would be similar if the adapted scale has a broader spread. As this study gives a proposal of how to evaluate via the chosen factors and with one subjective experi- ence, the scale adapted to the study serves the purpose. However, if the study should be replicated and embracing the target group with its involvement in order to end up with a broad and general result of the influential factors of the frameworks, it can be applicable to make use of a larger scale i.e. points from 0-100. Other factors such as performance and their ability to develop more advanced features would be appropri- ate to evaluate for Angular and React. Examples of advanced features are validation checks, localisation and security providing. If such factors were applied and evaluated in the research, the findings might have been more varied instead of having very similar ratings on each factor. The applications built for this study did serve the purpose of discovering each framework’s attributes and how well the relevant knowledge sources such as their documentation, communities and tutorials assist while developing via the frameworks. Nevertheless, the findings imply that Angular has a steep learning curve and its complex-

50 ity was not experienced as high due to it being well-documented with relevant knowledge sources. The structure makes the adoption of the framework more likely as it can do separation of concerns and each component has its own part in the application. Therefore, the hypothesis regarding Angular is confirmed. It is assumed that practitioners will apply this framework due to the findings that confirms its stability and suitability for application projects. React served its purpose for the application, however the knowledge source was dominant in the commu- nity size factor. The fact that it had ES6 included gave the impression that it was easy to implement, which the findings also confirmed. However, the need to apply other libraries made the severity for developing the required tasks more complex than expected. Its loose structure however made the imple- mentation of these libraries less difficult. Therefore, React has the space and ability to include external libraries and customise the library for the needs and level of experience and complexity the developer may have. Whether students would prefer React as the main library to choose while studying depends on the size and purpose of the given projects. it can be argued that both frameworks can be expanded to bigger projects. Where React can be injected to already existing projects, Angular is restricted to only follow its own path of its offerings. This makes the second hypothesis partially confirmed as well since it is argued that both React and Angular have their advantages for upcoming developers as well.

51 Chapter 7

Conclusion

JavaScript is one of the most adopted languages within web-development. Over the years practitioners have committed themselves to make JavaScript easy to adopt and expand the development opportunities within the language. This expansion has led to several frameworks being developed both as open-sourced and in-house frameworks. Great companies have discovered the assets of JavaScript frameworks and utilised them throughout their businesses. Due to the popularity and the ongoing use of JavaScript frameworks, which also contributes to new developed frameworks, practitioners can be challenged when deciding on which framework serves the required functionalities for the given projects. Research within JavaScript has presented a suggestion on how to identify the content of a framework de- sired by practitioners. It is evident that a developer is more concerned about how easy it is to understand and learn together with the frequent questions and solutions provided by the framework’s community, rather than the actual performance or which company or organisation have adopted the framework. The area I found was missing within the research of JavaScript, is concerned about how to evaluate a frame- work and thereby have an overview of the factors that influence the experience and development process when adopting a framework. After such evaluation, developers can compare the frameworks they are considering, and thereby make a more experience-based decision on which framework is relevant for their work. The study presented by Pano et al. gives a clearer indication on what developers prefer from frameworks and what factors influence the choice of one framework compared to another. The purpose of this thesis was to evaluate Angular and React via the created evaluation table that takes point of departure in the chosen factors. Via the evaluation, the dominant factors were identified and it is thereby clear which factors are present during the development process of a web application. This research was based on developing two To-do list applications, where each application was built with the same requirements.

The thesis aimed to answer the following research question: How can JavaScript frameworks be evaluated and compared by the analysis of the dominant factors?

Throughout the development process of the two To-do list applications, an evaluation table was filled out with the experience of each chosen factor for a given period. The evaluation is based on factors that are identified by several research articles and are considered to be areas developers compare with when they need to decide on a framework to make use of. The factors taken into account in the evaluations of the frameworks were Effort expectancy (Learnability, Complexity and Understandability), Social influence (Community size) and Facilitating conditions (Suitability, Updates). The factors were rated based on the requirements listed for the applications in each period, which then gave an average of how much they dom-

52 inate in the framework. The evaluations of each framework based on the factors, resulted in the following as the dominant factors and hereby what to expect from the frameworks when adopting them to a project:

Angular is dominated by four factors that are rated within the category High according to the rating scale. The framework makes the experience of the development process user-friendly and reachable. These fac- tors are Learnability, Understandability, Suitability and Updates. With a good base of knowledge from the documentation and tutorials, the framework is easy to work in and a developer can comprehend its attributes fast. This uncomplicated learning of Angular is therefore reflected in the scoring of Lernability, where it lands on 10.75. The easiness of the framework is due to it having a well-written documentation and relevant tutorials to make use of, which makes the Understandability straight-forward with a reflected scoring of 10. With its structure and attributes it is evaluated to be sufficient to undertake Angular as an inclusive and well-build framework that does not need external libraries to complete a large-scaled web application, which Suitability also reflects by having a score of 12.5. With an up-to-date framework that fulfills and satisfies a practitioner’s needs while developing fullstack applications, the framework is dominated by the factor Updates which scores 10.66.

React is dominated by Community size, Suitability and Updates, which fall under the categories in the scale as High and Very High. The library does not have a strict-structure and therefore it is easy to modify and apply your own structure when developing web applications with React. Its community provides both hands-on examples via videos and well-described articles. It is evident that the community is necessary for React due to its less comprehensive documentation. React has a relevant and strong community, where the lack of description and information in its documentation are reflected in its com- munity. Therefore, the community size is very dominant and falls under the category Very High due to its score of 14.5. Due to its less strict structure, it gives room for customising its functionalities as you desire throughout the development process. Therefore Suitability reflects the easiness of the structure, which gives the scoring of 11. Nevertheless, React is up-to-date with the required attributes for today’s use of web applications. Implementing external libraries are recommended by the documentation and the process of applying these is not complex. Since the external libraries fulfill React as a compact framework and suits well with the structure of React, which makes React very updated in today’s needs and thereby the score of Updates is rated to be 10.

The findings of this research makes it clear that the chosen factors are relevant when evaluating and comparing frameworks. When choosing a framework, the same evaluation can be replicated in order to know where to look for information and details about the framework, how much these sources provide knowledge about the framework and how easy the framework can be applied in terms of its elements and how much effort it takes to learn and have a deeper understanding of its content. These findings also lead to answering the hypotheses presented in this study. It can be argued that learn- ing Angular and adopting it to applications are not as complex as expected due to its strict structure, but as it has a well-documented description, it serves the purpose of learning its abilities fast and on a beginner-level. Therefore both experienced developers but also beginners can adopt Angular, which confirms the first hypothesis. React is not provided with a strict structure and is open to more customisation. However, because it is not comprehensive in itself but is dependent on all the other external libraries that can fulfill the purpose of the given application, it can be argued to be exhausting to adopt for a beginner. The developer would need to realise the missing elements, which makes it necessary to practice in a period before you ob- tain moderate experience and getting familiar with it.Therefore the hypothesis which states React would

53 be preferred by students due to its less complex structure is partially confirmed in this study’s evaluation.

The evaluation process and method presented in this research implies for future research. This thesis is build on the constructivism’s subjective world-view with an experiment that has a qualitative research strategy, which served the purpose of finding a possible suggestion on how to evaluate and compare frame- works. The experiment gave an opportunity to analyse this type of evaluation with factors, but another angle that could be useful when evaluating frameworks is through a quantitative study. If we want to get closer to a study that indicates a general view on what the frameworks’ hold of factors and their dominance, a statistical and measurable approach is relevant where the research strategy is objective and with surveys targeted the relevant groups. Nevertheless, it can also be relevant to compare different and more frameworks in order to obtain a broader overview of what frameworks have as dominant factors whenever they are applied. The purpose and the analysis of this thesis presents a proposal of how the target group can evaluate frameworks and compare them before relying and settling on one specific framework. With the relevant factors, practitioners can decide on what framework serves the purpose of their needs, if it compiles with the experience they already have obtained and the level of complexity they are capable of handling.

54 Bibliography

[1] J. Bennett. Choosing javascript library, 2007. URL https://www.b-list.org/weblog/2007/jan/ 22/choosing-javascript-library/. [Accessed 2020-04-13].

[2] R. bootstrap contributers. Introduction to react bootstrap, 2020. URL https://react-bootstrap. github.io/getting-started/introduction. [Accessed 2020-05-31].

[3] A. Bryman and E. Bell. Business Research Methods 3e. OUP Oxford, 2011. ISBN 9780199583409. URL https://books.google.dk/books?id=YnCcAQAAQBAJ.

[4] J. Chaffer and K. Swedberg. jQuery Reference Guide: A Comprehensive Exploration of the Popular JavaScript Library. Packt Publishing, 2007.

[5] E. community. Node.js web application framework, 2020. URL https://expressjs.com/.

[6] A. Contributer. Introduction to services and dependency injection, 2020. URL https://angular. io/guide/architecture-services.

[7] M. contributors. Introduction to the dom, 2020. URL https://developer.mozilla.org/en-US/ docs/Web/API/Document\_Object\_Model/Introduction. [Accessed 2020-05-01].

[8] M. contributors. What’s ajax, 2020. URL https://developer.mozilla.org/en-US/docs/Web/ Guide/AJAX/Getting\_Started. [Accessed 2020-05-25].

[9] M. contributors. The script element, 2020. URL https://developer.mozilla.org/en-US/docs/ Web/HTML/Element/script. [Accessed 2020-05-12].

[10] M. contributors. Xmlhttprequest, 2020. URL https://developer.mozilla.org/en-US/docs/Web/ API/XMLHttpRequest. [Accessed 2020-05-25].

[11] Y. Fain and A. Moiseev. Angular Development with Typescript. Manning Publications; 2nd edition, December 17, 2018.

[12] S. Fenton. Pro TypeScript. Apress; 1 edition (September 17, 2014), 2014.

[13] D. Flanagan. JavaScript: The Definitive Guide. O’Reilly Media; 6th edition (May 13, 2011), 2013.

[14] A. Gizas, S. P. Christodoulou, and T. S. Papatheodorou. Comparative evaluation of javascript frameworks. In A. Mille, F. L. Gandon, J. Misselis, M. Rabinovich, and S. Staab, editors, Proceedings of the 21st World Wide Web Conference, WWW 2012, Lyon, France, April 16-20, 2012 (Companion Volume), pages 513–514. ACM, 2012. doi: 10.1145/2187980.2188103. URL https://doi.org/10. 1145/2187980.2188103.

55 [15] D. Graziotin and P. Abrahamsson. Making sense out of a jungle of javascript frameworks - towards a practitioner-friendly comparative analysis. In J. Heidrich, M. Oivo, A. Jedlitschka, and M. T. Baldassarre, editors, Product-Focused Software Process Improvement - 14th International Confer- ence, PROFES 2013, Paphos, Cyprus, June 12-14, 2013. Proceedings, volume 7983 of Lecture Notes in Computer Science, pages 334–337. Springer, 2013. doi: 10.1007/978-3-642-39259-7\_28. URL https://doi.org/10.1007/978-3-642-39259-7\_28.

[16] M. Haverbeke. Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press, 2018, 3, illustreret edition, 2018. URL https://eloquentjavascript.net.

[17] M. Haverbeke. Eloquent JavaScript. No Starch Press; 3 edition (December 4, 2018), 2018. URL https://eloquentjavascript.net.

[18] D. Herron. Node.js Web Development: Server-side development with Node 10 made easy. Packt Publishing; 4th Revised edition edition, 30 May 2018.

[19] S. Hjelm. Evaluation of javascript frameworks : Why should you use them? In Evaluation of JavaScript frameworks : Why should you use them?, 2015.

[20] . F. R. Kolb, D. A. Toward an applied theory of experiential learning. in c. cooper (ed.), 1975. URL https://insights.stackoverflow.com/survey/2019\#technology. [Accessed 2020-05-14].

[21] D. A. Kolb. Experiential learning: Experience as the source of learning and development, 1984. [Accessed 2020-05-14].

[22] J. Lennon. Compare javascript frameworks, 2010. URL https://www.ibm.com/developerworks/ library/wa-jsframeworks/index.html. [Accessed 2020-04-05].

[23] S. A. McLeod. Constructivism as a theory for teaching and learning, 2019. URL https://www. simplypsychology.org/constructivism.html. [Accessed 2020-04-21].

[24] C. Nygaard. Samfundsvidenskabelig analysemetoder. Samfundslitteratur, 2012.

[25] S. Overflow. Stack overflow developer survey 2019, 2020. URL https://insights.stackoverflow. com/survey/2019\#technology. [Accessed 2020-05-02].

[26] A. Pano, D. Graziotin, and P. Abrahamsson. Factors and actors leading to the adoption of a javascript framework. Empirical Software Engineering, 23(6):3503–3534, 2018. doi: 10.1007/s10664- 018-9613-x. URL https://doi.org/10.1007/s10664-018-9613-x.

[27] R. router contributors. React traning / react router, 2020. URL https://reacttraining.com/ react-router/. [Accessed 2020-05-26].

[28] C. Saternos. Client-Server Web Apps with JavaScript and Java: Rich, Scalable, and RESTful. O’Reilly Media; 1 edition (April 14, 2014), 2014. URL https://books.google.dk/books?id= 3b40AwAAQBAJ.

[29] A. Silberschatz, H. F. Korth, and S. Sudarshan. Database System Concepts. McGraw-Hill Education; 6 edition, January 27, 2010.

[30] W3Techs. Usage statistics of client-side programming languages for websites, 2020. URL https: //w3techs.com/technologies/overview/client\_side\_language. [Accessed 2020-04-21].

[31] R. Wieruch. The Road to Learn React: Your Journey to Master Plain Yet Pragmatic React.Js. Independently Published, 2018, 2018. URL https://eloquentjavascript.net.

56 [32] R. WIERUCH. React function components, 2019. URL https://www.robinwieruch.de/react- function-component. [Accessed 2020-05-28].

57 Appendices

58 59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74