Bachelor Thesis Project

Maintainability Evaluation of
Single Page Application
Frameworks- Angular2 vs. React

Author: Seyed Amirhossein Mousavi

Supervisor: Dr. Rüdiger Lincke
Examiner: Dr. Johan Hagelbäck
Semester: HT 2016
Subject: Computer Science 1
 Abstract
Web applications are subject to intense market forces, fast delivery and
rapid requirement and code change. These are the factors that make
maintainability a significant concern in any and especially web application
development. In this report we develop a functional equivalent prototype
from an existing Angular app, using ReactJs and afterward compare their
maintainability as defined by ISO/IEC 25010. The maintainability
comparison is made by calculating maintainability index for each of the
applications using Plato analysis tool.
The results do not show a significant difference in the calculated value of
the final products. Source code analysis shows that changes in data flow need
more modification in the Angular app, but with the objective oriented
approach provided by Angular, we can have smaller chunks of code and thus
higher maintainability per file and respectively a better average value.
We conclude that regarding the lack of research and models in this area,
MI is a consistent measurement model and Plato is a suitable tool for
analysis. Though maintainability is highly bounded to the implementation,
functionalities which are provided by the Angular framework as a bundle is
more appropriate for large enterprises and complex products where React
works better for smaller products.

Keywords: Angular, React, maintainability, software quality, single page

applications, ISO 25010, maintainability index, cyclomatic complexity,
Halstead.
Preface
This report has been written to fulfill the graduation requirements of the
Software Technology Bachelor Programme at Linnaeus University Växjö,
Sweden. The bachelor thesis was conducted during the fall semester of 2016.
I would like to express my profound gratitude to Dr. Rüdiger Lincke, the
CTO at Softwerk AB and the supervisor for this thesis.
I would like to express my special thanks to Dr. Johan Hagelbäck, the
examiner for this thesis.
Finally, I would like to thank my family for their moral support and
encouragement they had given me to reach my goals.
Contents
GLOSSARY .................................................................................................................................. 1
1. INTRODUCTION .............................................................................................................. 2
1.1. BACKGROUND ............................................................................................................................. 2
1.2. PROBLEM FORMULATION ......................................................................................................... 6
1.3. MOTIVATION ............................................................................................................................... 6
1.4. RESEARCH QUESTIONS .............................................................................................................. 7
1.5. LITERATURE REVIEW ................................................................................................................ 7
1.6. SCOPE/LIMITATION................................................................................................................... 9
1.7. TARGET GROUP ........................................................................................................................... 9
1.8. OUTLINE ...................................................................................................................................... 9
2. THEORY .......................................................................................................................... 10
2.1. SOFTWARE QUALITY CHARACTERISTIC MEASUREMENT ................................................. 10
2.2. MAINTAINABILITY INDEX (MI) ............................................................................................ 12
3. METHOD ........................................................................................................................ 15
3.1. SCIENTIFIC APPROACH ........................................................................................................... 15
.................................................................................................................................................................... 15
3.2. METHOD DESCRIPTION .......................................................................................................... 15
3.3. RELIABILITY AND VALIDITY .................................................................................................. 16
4. IMPLEMENTATION ..................................................................................................... 20
4.1. INTRODUCTION TO ANGULAR ................................................................................................ 20
4.2. INTRODUCTION TO REACT ..................................................................................................... 21
4.3. PROTOTYPE IMPLEMENTATION ............................................................................................ 22
5. RESULTS ......................................................................................................................... 25
6. ANALYSIS ....................................................................................................................... 28
6.1. ANGULAR APP ANALYSIS ........................................................................................................ 28
6.2. REACT APP ANALYSIS ............................................................................................................. 29
7. DISCUSSION................................................................................................................... 30
7.1. LITERATURE REVIEW DISCUSSION....................................................................................... 30
7.2. IMPLEMENTATION DISCUSSION ............................................................................................ 30
7.3. RESEARCH QUESTION ............................................................................................................. 32
8. CONCLUSION ................................................................................................................. 34
8.1. FUTURE RESEARCH ................................................................................................................. 34
REFERENCES .......................................................................................................................... 36
APPENDIX A - CODEBLOCKS ................................................................................................. I
APPENDIX B – IMPLEMENTATION ............................................................................... IV
Glossary
SPA: Single Page Application
ECMAScript [1]: A language specification that JavaScript is implementing.
DOM: Document Object Model, Representation of objects and structure
within an HTML or XML document.
SQuaRE: Systems and software Quality Requirements and Evaluation
IDE: Integrated development Environment
MI: Maintainability Index
CC: Cyclomatic Complexity

1
1. Introduction
There is a large number of libraries and frameworks available for
developing single-page web applications. For implementing applications
from simple and small to large and complex ones, developers often use one or
several frameworks and libraries [2].
Choosing a suitable framework can reduce the development time and
increase the performance and quality of the application. Most of the IT
companies are using agile methodologies for software development. In agile
frameworks like Scrum, small teams consist of 3 to 9 developers work on
developing requirements, therefore creating a maintainable product is an
essential quality attribute [3].
In this project, we are comparing two software products, one developed
with Angular and the other with React. The comparison is respective to
maintainability with a focus on modifiability. The goal is to define how these
two approaches relate to maintainability and indicate general differences
between Angular and React.
In the following sections in this chapter, we describe the concept of quality
in software development, maintainability as a quality attribute, quality model
for evaluating the implementation, research done in this field and formulating
the problem.

1.1. Background
Web applications are subject to the same risks as involved in any other
applications, but the rapid pace of delivery, great challenging market, and fast
requirements change, pushed the quality attributes to the background. The
result is that web applications usually do not follow well-known practices,
have poor or no documentation and disordered architectures [4].

1.1.1. Single Page Application (SPA)

High demand for better functionality and usability in web applications, did
put new techniques into operation. The latest and yet best approach is to
abandon browser plugins (such as Adobe Flash and Microsoft Silverlight)
and make applications with pure JavaScript or its subsets, so-called SPA. The
most important technique in SPAs is to fetch data asynchronously and update
the page content or entire component without refreshing it. This update can
be a partial component update or a complete replacement of a component
with another component [5].
Currently, two famous and widely used frameworks and libraries for SPA
development are AngularJs1 and React [6]. Table 1.1 shows the popularity of
Angular and React in GitHub.

1
AngularJs (Angular.js) is referring version 1.x of the framework and version 2.x is just
called Angular.

2
 Github
Watchers Stars Forks Contributors
React 3,995 56,775 10,235 882
Angular.js 4,468 54,130 26,852 1,553
Angular 2,202 19,353 5,025 387

Table 1.1 popularity of React and Angular on Github by December of 2016

It has been a few months since Angular officially was released. By a

search on the Internet, we find in most of the seminars and conferences that
AngularJs is about to be replaced by Angular. The community is releasing
practices of migrating from AngularJs to Angular. Though Angular currently
has less popularity, it is in the center of attention of developers.

1.1.2. Quality
Ian Sommerville [3] describes the quality as a concept with a different
meaning for the various actors, and they are related to the system. Glain in [7]
describes the primary purpose of quality attributes in end-user satisfaction
when classifying requirements.
One of the quality landscapes is the expected software lifetime. It means a
software system has a long-lifetime if it is maintainable [3].

1.1.3. Maintainability
Maintainability is a quality attribute that defines how easy a software
system can improve its components or how adapts to requirements and
environment changes. This quality attribute is highly related to how
developers experience software, and it will be hard to measure them
objectively, so we need to make some characteristics. Here we follow the
grouping by Sommerville [3] and divide maintainability into internal
attributes as the depth of inheritance tree, cyclomatic complexity and program
size in lines of code.
Also from an industrial perspective, changes in requirements and
developing a maintainable product is cost effective. In the lifecycle of
development administration processes, maintainability is one of the key
software quality metrics, and most of the development process cost is to
improve functionality and change management [8]. Therefore, choosing
frameworks and libraries that help to develop a maintainable software system
is essential.

1.1.4. Quality Model

There are many models and standards proposed to reach a common
meaning of quality in software development. Most of the models provide an
abstract level of assessment and do not go into details and do not provide a
direct measurement [9].

3
 Descriptive models give a standard meaning of quality, classifies them and
map each attribute of the project. The defined quality attributes can then later
be measured by evaluation models [10].
One of these standards is the ISO/IEC 25000 SQuaRE series [11] which
consists of five main divisions and extensions.
ISO/IEC 2501n is the quality model division where its extension, ISO/IEC
25010 [12], proposes a quality reference model for software products. Figure
1.1, shows the organization of SQuaRE.

Figure 1.1 Organization of SQuaRE series of International Standards [11]

The product quality model proposed by ISO/IEC 25010, combines the

internal and external quality models of ISO/IEC 9126-1 into one product
quality model. This model divides product quality into eight characteristics;
functional suitability, reliability, performance efficiency, usability, security,
compatibility, maintainability, and portability. This model defines
maintainability as the degree to which a software product can be modified.
The modification can include any change, correction or improvement in the
code regarding the environment or requirement change [12]. Figure 1.2 shows
these characteristics in a diagram.

Figure 1.2 Software Product Quality Model [12]

4
1.1.5. Measurement Model
ISO/IEC 2502n is the Quality Measurement Division and the extension,
ISO/IEC 25022 [13] and ISO/IEC 25023 [14], proposes measurements for the
product quality model provided by 25010. Figure 1.3 shows the organization of
measurement models.

Figure 1.3 Structure of The Quality Measurement Division [13]

This extension provides quality measure elements by applying methods to

attributes or combines them via a measurement function. The target attribute
should be a product or behavior of the system [15].

5
1.2. Problem Formulation
JavaScript (JS) is used by 94.4% of all client-side web applications. This
amount of usage makes JavaScript the most common programming language
in this area [16].
There are plenty of JS frameworks and libraries to facilitate programming
and make progress quicker, and there are also great differences in how they
solve various problems which make the code strongly bound to the chosen
framework or library. By a simple search on the internet for JavaScript
frameworks, the first two names that come across are React and Angular.
On the one hand, modifiability is an essential attribute of a maintainable
product, and on the another hand, there are differences in the programming
languages of Angular and React. This difference is the usage of a superset of
ECMAScript. Typescript, CoffeScript, and Dart are the famous
implementations of the ES specification. Modern browsers’ JavaScript engine
supports ES2015 (ES6) [17], but other supersets such as Typescript,
regarding their typing definition should be transpiled to ES5 or ES6 to run in
browsers. This difference can be troublesome when comparing frameworks.
According to the discussion in the background (Section 1.1), this question
arises, how can we compare two leading front-end development approaches
like Angular and React regarding maintainability with a focus on
modifiability, where Angular is a framework and React a UI library with
different programming languages.

1.3. Motivation
Softwerk AB2 has recently been developing a grammar learning web
application. Code modification is 50% of maintenance cost, and maintenance
itself costs 40% up to 70% of the software lifecycle [18][19][20]. Since
developing and maintaining the software is quite an investment, and used
framework can often not be changed, and since the company determines the
structure of the implementation to a large extent, it is important to choose the
right framework from the beginning. As the company wants to create high-
quality software, in particular with respect to maintainability, it is important
to know in which framework they should invest. Does Angular allow to
create more maintainable web applications than React, or it would be to the
same extent? The aims of this project are to conduct general differences and
similarities of both approaches by re-building part of the existing application
with React and afterward compare them regarding maintainability with a
focus on modifiability.

2
https://softwerk.se, founded in 2008 by employees and alumni of the Department of
Computer Science at Linnaeus University

6
1.4. Research Questions
Relating to the discussion in problem formulation and motivation, we
divide the aims of this project into the following research questions.

RQ1 Is there a good measurement model for SPA maintainability

assurance?
RQ2 Is there an implementation or tool for maintainability measure
regarding the model?
RQ3 Is ReactJs a better alternative to Angular for developing web
applications with respect to maintainability?

1.5. Literature Review

Casteleyn has analyzed and classified research conducted in web
application technologies (referred as Rich Internet Applications) from 2004 to
2014 [21]. The results show that very little research has was done in quality
and the measurement area. Figure 1.4 shows the systematic map.

Figure 1.4 Systematic map over development phase (north) and research topic (east) [21]

Malhotra and Chug performed a deeper systematic literature review from

1991 to 2015 with a focus on software maintainability [22]. The results also
show very little research was done regarding web technologies and JavaScript
frameworks. Nitze in [23] concludes that there are very few measurement
techniques and models related to software maintainability.
Conducting our literature review, we implement a snowballing strategy
where we find the most cited relevant articles and use its references and also
check which articles are citing those articles [24]. We use GoogleScholar,
ACM digital library, IEEE explore, EBSCO (search engine of LNU library)
and diva-portal for finding references.
For the first step, we use the software engineering book [3] to gain general
information regarding software quality.

7
 We started by searching for relevant keywords such as; software quality,
maintainability, quality models, single-page applications, javascript
frameworks, etc. The quick review of the results and reading abstracts lead us
to a new query phrase for more accurate searching.
To conduct a search for general software quality models with a focus on
web technologies we used a combination of keywords in the following query:
(software OR (javascript AND frameworks) OR (web AND (application OR
technology)) AND (quality (standard OR model) OR maintainability)).
We filtered the articles first by peer reviewed second by relevance and
third by date. The result is approximately 40 articles and we have used most
of them to support our theory and analysis.
The keywords such as ((single page application OR SPA) OR Angular OR
React AND (comparison OR analysis OR evaluation)) did not have relevant
results except some student thesis. Among them, Eric Molin [25] in his
degree project conducts statistical analysis on popularity and trends of
Angular and React.
A literature review by [26] shows that, as ISO 25010 is new and yet under-
develop standard, most of the works in this field just analyzed the
characteristics, or just used the sub-characteristics to define their model and
the relation between divisions and internal attributes are not clearly analyzed.
Articles such as [27][9] identify models based on ISO 25010. [15] and
[28] argue the pros and cons of the quality model. Articles such as
[26][29][30][31][4][32] use the ISO standard to define metrics and evaluate
products by measurements.

8
1.6. Scope/Limitation
Evaluating the usefulness of quality models is one of the hot topics in
research area which is beyond the scope of this project. Therefore we choose
ISO/IEC 25010 which is an internationally accepted and widely used
standard in research settings [28].
The measurement extensions of SQuaRE, ISO/IEC 25022 and 25023 does
not propose metrics, and more describe measures at an abstract level.
Angular is a complete framework, and ReactJs is a library (see the
differences in Chapter 4), which both are new technologies with the reactive
and functional paradigm, and very few analyzer tools developed for them.

1.7. Target group

This thesis can be of interest to developers who want to choose front-end
technologies for application development and software maintainers who look
for quality measurement tools.

1.8. Outline
In Chapter 2 we outline details of the quality model, quality measure, and
the metric we choose for measuring maintainability of products. In Chapter 3
we outline the research strategy, argue the selected metric and the approach to
measure procedure. In Chapter 4 we outline general information about
Angular and React and describe the application implementation process.
Chapter 5 shows results of measurements, in Chapter 6 we analyze the results
and Chapters 7 and 8 contain discussion and conclusion.

9
2. Theory
In this chapter, we describe the model introduced in the background in
detail and introduce a model to determine and measure the maintainability of
the applications objectively.

2.1. Software Quality Characteristic Measurement

Regarding the history of JavaScript and its supersets, lack of some
functionalities such as classes, immutability, import/export mechanisms and
some syntactic issues, were the reasons that researchers could not explore the
role of JavaScript in enterprise software products and its implications on
software quality, especially the maintainability [33].
By the release of ES6 (ES2015) [1], concepts such as arrow functions,
module loaders, classes, template strings and many more features are added
to JavaScript. However, according to our discussion in the literature review
(see Section 1.5), since then very few works are done on JavaScript quality
measures, especially maintainability.
Measuring violation of good architectural and coding practices is the most
recent advancement in structural quality measurements. Most of the modern
IDEs are providing real-time code analysis (or can be installed as a plugin) to
help developers prevent syntax errors or warn them about the complexity of
functions [34]. ESLint3 for JavaScript and TSLint4 for Typescript are the
most famous linters and static code analyzers which many useful plugins are
made based on them for IDEs.

2.1.1. Quality Model

An amendment to the scope of ISO 25010 model includes computer
systems and quality in use from a system perspective. J.Gong in [15]
describes this extension as: “the product quality model focuses on the target
computer system that includes the target software product and the quality in
use model focus on the whole human-computer system that includes the target
computer system and target software product.” Figure 2.1 shows the target
entities for quality models.
As described before, the concern of this project is a modification of
software product during and after development cycle. In ISO 25010
modifiability, analyzability, and modularity are described as follow:

3
http://eslint.org/
4
https://palantir.github.io/tslint/

10
 Figure 2.1 Target Enteties For Quality Models [12]

The definitions are adopted from [12].

Modifiability:” degree to which a product or system can be effectively and
efficiently modified without introducing defects or degrading existing product
quality.”
Analyzability:” degree of effectiveness and efficiency with which it is
possible to assess the impact on a product or system of an intended change to
one or more of its parts.”
Modularity:” degree to which a system or computer program is composed
of discrete components.”
We can see there is a close relation between modifiability, modularity, and
analyzability. Though it is a challenging task to apply quality models in small
and medium-sized enterprises, we should take the metrics into consideration
that might affect all of these sub-characteristics for quantitative and objective
measures [31].

2.1.2. Measurement Model

ISO/IEC 25022 and 25023 purports to address measures for product
quality and quality in use, but they do not define measures that can be
developed from the source code of application during or after development.
The defined measures are mostly on observation of interaction between the
staffs, product, and environment or comparison of product with requirement
specification. This issue is also criticized in [35][31][34][15].
By the definitions above and with direct observation of the source code,
we can say structural measures such as the number of lines of code, syntax
errors, number or operators and operands, the length of statements, the
number of functions and complexity of functions is important metrics in
evaluating the maintainability [36].

11
 Since 2005 machine learning algorithms for predicting quality are growing
and still are the most popular models, therefore usage of hybrid algorithms is
suggested [22]. One of the most famous hybrid algorithms is maintainability
index.

2.2. Maintainability Index (MI)

In 1991 Oman and Hagemeister at Idaho University designed the
maintainability index to objectively determine the maintainability of a
product based on the corresponding source code. The equation has been
modified over years and authors has described and shown their observations
over it in [37][38][39].
The MI is based on the composition of several different metrics for a
software system. These metrics are; Halstead Volume (HV) [40], the
Cyclomatic Complexity (CC) [41], the average number of lines of code
(LOC) and an optional metric, percentage of comments to LOC in a module
(COM).

2.2.1. Cyclomatic Complexity (CC)

McCabe’s CC proposes an equation to measure the linearly independent
paths through the code from the control flow graph (CFG)5 [41].
The equation defines the cyclomatic number of a graph G with n vertices
and e edges and p connected components as 𝑉(𝐺) = 𝑒 − n + p.
Each connected component represents a function or a module in the
program. For instance, in the CFG shown in Figure 2.2, the exit point loops
back to the entry and makes two connected components. Hence the CC of the
graph is: 𝑉(𝐺) = 10 − 8 + 2 = 4

Figure 2.2 A sample Flow Graph [51]

5
CFG is a graph to visualize the execution flow of a function or program.

12
2.2.2. Halstead Volume
Halstead introduces a static software metric that does not need the
program execution. The metric is directly calculated in a static manner from
operators and operands of the source code. Halstead’s metric looks at the
algorithms and programs as sequences of operators and their related operands
[40]. Table 2.1 shows the indicators and the measures that can be calculated
from indicators.

Parameter Meaning
n1 Number of unique operators
n2 Number of unique operands
N1 Number of total occurrence of operators
N2 Number of total occurrence of operands

Metric Mathematical Representation

Vocabulary n1 + n2
Size N1 + N2
Volume 𝑆𝑖𝑧𝑒 ∗ log 2 𝑉𝑜𝑐𝑎𝑏𝑢𝑙𝑎𝑟𝑦
Difficulty (𝑛1⁄𝑛1) ∗ (𝑁1/𝑁2)
Efforts 𝐷𝑖𝑓𝑓𝑖𝑐𝑢𝑙𝑡𝑦 ∗ 𝑉𝑜𝑙𝑢𝑚𝑒
Errors 𝑉𝑜𝑙𝑢𝑚𝑒/3000
Table 2.1 Metrics of Halstead [40]

13
 The original regression model of the MI that uses Halstead Effort (HE)
presented in [37]. The model formulates MI as follow:

𝑀𝐼 = 171 − 3.42 ln(𝐻𝐸) − 0.23(𝐶𝐶) − 16.2ln(𝐿𝑂𝐶)

The next modification of the equation uses Halstead Volume (HV) instead
of HE with taking comment lines into consideration [42].

𝑀𝐼 = 171 − 5.2 ln(𝐻𝑉) − 0.23𝐶𝐶 − 16.2 ln(𝐿𝑂𝐶) + 50𝑠𝑖𝑛√2.46 ∗ 𝐶𝑂𝑀

Also for better understanding the resulting number of MI equation, we can

normalize it as follow to have an index value between zero and 100 [43].

171 − 5.2 ln 𝐻𝑉 − 2.3 𝐶𝐶 − 16.2 ln 𝐿 + 50 sin √2.46 𝐶𝑂𝑀

𝑀𝐼 = 𝑀𝐴𝑋 ⌈0 , (100 × )⌉
171

14
3. Method
In this chapter, we describe the inductive approach that is used to answer
the research questions.

3.1. Scientific Approach

Figure 3.1Model of the research process [44]

Figure 3.1 provides an overview of a research process model proposed by

Oates [44]. The experiences and importance of software maintenance for the
Softwerk company were the motivation to investigate on most famous and
used existing front-end technologies, Angular and React. For this aim, we
chose to use design and creation strategy alongside with literature review for
better understanding the advancement of software quality with a focus on
maintainability in web technologies, especially JavaScript frameworks.

3.2. Method Description

Design and creation is a research method that aims to undertake research
by creating one or more prototypes. These prototypes can have different roles
in research depending on whether the objective is to assess a particular
method of development, examine how a particular technology works in a new
context, or as in our case, compare it with another technology [44]. Regarding
the flow of events in Figure 3.1, we have already explained problem

15
formulation, motivation, research question and literature review in Chapter 1.
In the next chapter (Chapter 4), we briefly give an introduction to Angular
and React and describe the implementation of the application with ReactJs.
Also, the implementation part contains the official documentation study and
development best practices by checking official examples and several
tutorials and repositories.

3.3. Reliability and Validity

Heitlager claims that the MI measure can not be an easy equation to
calculate and understand while arguing the pros and cons of this measure in
[35] and the unreliability of manual calculation. For the sake of validity and
understandability of the measurement, we decided to search for tools that
may automate the calculation and visualize it in an understandable manner.

3.3.1. Selecting Measurement Tools

To find a measurement tool first, we will describe static code analyzers
regarding the programming languages. JSLint6 JSHint7 JSCS and ESLint are
the most popular static code analyzers for JavaScript. JSCS merged with
ESLint, and the project does not exist as a standalone tool. TSLint is the most
popular analyzer and linter for Typescript.
The official documentation page of ReactJs in the installation section
introduces “create-react-app” as the front-end project scaffolding tool [45].
The tool is using ESLint as the code analyzer and Babel as JavaScript
compiler. Also, most of the Angular starter kits and the official “Angular-
CLI” use TSLint [46].
We did conduct a search on Github, SourceForge, and npm for all the
tools that does code analysis with using ESLint and TSLint and if they have
visualization capability or not. The search indicates Plato8 is the most popular
and bookmarked project in GitHub (3798 stars and 127 bookmarks by
December 2016) that has visualization capability and uses latest ESLint that
supports ES2015.
Unfortunately, neither of the identified tools were supporting Typescript.
Our search indicates that TSLint did not include complexity measurements
rules until September of 2016. The request for Cyclomatic Complexity
implementation was an open issue 9 in project repository. By 26th of
September, after releasing of TSLint V4.0, this rule is added, but yet none of
the recognized measurement tools has integrated the new version of TSLint.

6
http://www.jslint.com/
7
http://jshint.com/
8
https://github.com/es-analysis/plato
9
https://github.com/palantir/tslint/issues/1411

16
 We also tried Visual Studio 2015 (update 3) for using solution analyzer.
For setting up an Angular application in the visual studio, we followed
ASP.NET 4.x cookbook where we had to create a project based on Visual C#
or VB templates. The embedded Typescript version available in VS
marketplace is V2.0 and setting external web tools to use Typescript from
npm path, was throwing several exceptions. As mentioned, Typescript V2.0
did not contain CC rule, and besides that, as the created template is based on
C# or VB, visual studio was not able to analyze the typescript files of the
Angular project and always outputting the MI as 100 with no file description.
In one hand it would not be the accurate result to compute the MI
manually, and in another hand, the second research question is to find tools to
automate the measurement. Therefore we decided to transpile the Typescript
files in Angular application to ES2015 and use the generated files as input for
Plato.

3.3.2. Downgrade From Typescript to ES2015

To simplify the workflow of transpiling Typescript files we use Gulp and
gulp-typescript-helper. The source code for gulp file is in Appendix A1.
The implementation of the React application contains no comment,
therefore in the transpiling process, we added the option for removing
comments from Typescript files.
For each Typescript file in the Angular app, we have three transpiled files.
One declaration file (filename.d.ts) which defines the typing of variables and
functions, one map file which keeps a mapping reference from Typescript to
JavaScript, and one main JavaScript file (filename.js) which contains the
main code.
Evaluating and comparison of Typescript and its transpiled JavaScript files
regarding quality models are beyond the scope of this project. Therefore we
do a side by side comparison of each two files. Figure 3.3 and Figure 3.2
shows a side by side comparison. According to MI equation, the number of
operators, operands, the vocabulary, length of functions and lines of code is
the measure attributes. This comparison indicates that the number of
operators and their operands is the same. Therefore the vocabulary will
remain the same, and the resulting Halstead Volume metric would also with a
small approximation be the same. Also, the number of LOC is pretty much
the same which makes little difference in the result of the calculated MI.
CodeMetric10, a plugin for VisualStudioCode, by November 2016
integrated Typescript to the plugin for computing the CC of modules in a
real-time manner. The reliability and validity of its results debated in many
forums with no clear conclusion. The reason for using code metric plugin is
to compare the result of CC computed for modules in side by side

10
https://github.com/kisstkondoros/codemetrics

17
comparison. The results were showing that most of the modules in Typescript
and its transpiled JavaScript has the same CC value and in some of the
modules, the difference does not exceed by ±2. For instance, in the module in
Figure 3.2 both modules have the average CC value of 10.

18
Figure 3.2 Side by Side code comparison. Left JavaScript, Right Typescript

Figure 3.3 Side by Side code comparison. Left JavaScript, Right Typescript

19
4. Implementation
In this chapter, we give an introduction to Angular and React, and
afterward, we describe the React prototype implementation

4.1. Introduction to Angular

Angular is presenting a complete rewrite of AngularJs 1.x framework.
Simply, Angular is a message-driven and component-based framework with
an architecture design that interconnects the components with a specific I/O
interface. The web components are composed of 4 technologies [47][48].
 Templates are the pieces that make content, and we aim to render.
 Custom elements, adds up traditional HTML elements with custom
wrapper items.
 Shadow DOM, encapsulates JS, CSS and web component templates
which make it separate from main document’s DOM.
 HTML imports, gives the ability to HTML not only host HTML elements
but also host other HTML documents.
Each component goes through different phases in its lifetime which is
known as component lifecycle hooks and is managed by the Angular
framework. The lifecycle hooks are visible to developers, and it can trigger
functions when they occur [46].
An advancement is the usage of ES6 and Typescript which supports
classes and module loaders. Introducing typing into variables in Typescript
makes it easier to detect errors. The new data binding structure gives Angular
higher speed and performance. The data is passed from parent to child
component, and a child component for passing data to parent makes events
[47].
Another advancement is Ahead of Time compiling (AoT). Currently, the
Angular framework by default uses Just in Time compiling (JiT) which
means we ship the code and compiler to the browser, parse the code using the
Angular compiler and render the generated code to the browser. The compiler
occupies roughly 50% of the payload therefore in AoT we take out the
compiler and send pre-compiled data to the browser and just render it. This
approach roughly makes applications 2.5 times faster and three times smaller
in size [47][46].
Another method for higher performance used by the Angular is Tree
Shaking. This feature works perfectly with AoT compiling, and the task is to
remove portions of codes or libraries that are unused in application [46].
Angular by using consistency concepts of ES6 reduces learning curves.
Concepts like interpolation {{}}, data binding [], event binding () and
structural directive *. For instance
1. <tag [src]=”…” (click)=”…” *ngIf=”…”>{{text}}</tag>
Another usage of databinding bracket is to encapsulate styles into
component code by defining style:[.class {…}] in @Component declaration.

20
 By the description we can list the important features of Angular as follow:
 Using ES6/7 and Typescript
 High speed and performance with AoT (server-side compiling)
 Using consistency concepts
 Component based architecture
 Angular CLI tool which automates creating and serving application with
lots of other features.
 Style encapsulation.
 Augury which is a Chrome dev tools extension for debugging the
application.
 Angular is experimenting on different platform cores. This concept gives
Angular the ability to go beyond a framework for browser applications.

4.2. Introduction to React

React is a stateful and component based UI library. The characteristics of
web components described in Angular section. The fundamental concepts of
React are the virtual DOM and state.
React’s State is adopting its concept from state machines. Simply, the state
is the snapshot of all the variables which are set at the current phase of the
component in its lifecycle [49].
Virtual DOM can be rendered either in client-side or server-side while
communicating back and forth. If the state of an application or component
changes, virtual DOM renders just subtrees of nodes that relate to that
change. This re-rendering makes the least amount of DOM manipulation
possible for the component updates [49].
When each phase of the React’s component lifecycle occurs, it is possible
to trigger functions regarding that phase. Unlike Angular that server side
rendering needs additional module dependencies, in React what happens in
componentWillMount() hook is rendered at server-side [45].
React uses JSX as the programming language, an extension to JavaScript
that has XML-like syntaxes and is similar to HTML. Therefore, it helps React
to have the business logic and functions of a component in the same file
where HTML template is. This approach makes React components
completely isolated and reusable [45].
The data flow hierarchy is from parents to children. A parent can pass data
(state or function) to children as props. It happens that in some components
need a shared state or want to modify a state in another component. Here
React proposes Lifting State Up strategy, but one of the best practices is using
Redux11.

11
http://redux.js.org/

21
 As mentioned before React itself is a UI library which can come along
with other libraries to cover all functionalities a framework should have,
which we call it an ecosystem. In this ecosystem, Redux provides a single
immutable state container that all components in the application can access
and manipulate. The official documentation mentions, “It is far more likely
that Redux is the right solution to your problem than that context is the right
solution.” [45]
React is also considering the Type checking. We can assign types to
variables in each component by React.PropTypes. For scaffolding a React
project, the community recently released create-react-app that creates
projects with no need of build configuration. We can list the important
features of React as follow:
 Using ES6 and JSX
 High speed and performance with virtual DOM and server-side rendering.
 Component-based and stateful architecture.
 React and Redux development tools for browsers.
 At the time of writing this report, high community support and most
interested library in GitHub.

4.3. Prototype Implementation

The Angular application by Softwerk is a grammar learning web app. The
usage is divided into two main parts: teachers can create exercise and track
the results, and the students can solve an exercise and receive grades. At the
moment of implementing this project, one type of exercise (part of speech) is
developed. The server-side of the application is developed using Spring
Boot12. In this project, we use the existing server and implement the complete
workflow of view exercises and create exercise (Appendix B, B1). This
prototype is functionally equivalent to Angular app. Both apps are using
Bootstrap components for HTML tags with no extra styling classes.
To obtain a desired data flow in the application, we are using Redux
architecture for state store. Table 4.1, lists the libraries used in development.

4.3.1. Scaffolding
For starting the project, we use the create-react-app module which is the
recommendation of the community. This is easily done via terminal with the
create command.

12
https://projects.spring.io/spring-boot/

22
Library Version Usage
React & React-dom 15.4.1 The main React UI library
Redux 3.6.0 Holding the application state
React-redux 5.0.1 map redux state and action creators to
props of component
Redux-thunk 2.1.0 Middleware for Asynchronous dispatches
Axios 0.15.3 AJAX requests to API
React-router 3.0.0 Keep the UI in sync with the URL
immutability-helper 2.0.0 Mutate a copy of the state object and
manipulate the needed parts
Eslint 3.12.2 Linting and static code analysis
Table 4.1 List of Libraries used in prototype development

4.3.2. Redux & Debugging

For creating application state with redux and debugging we create a store
and apply thunk and redux development tools to it.
1. const store = createStore(rootReducer, composeWithDevTools(applyMidd
leware(thunk)));
Then we wrap the router with the provider. Now React uses redux as app
state and besides rendering local components’ state, the store is getting
rendered too (Appendix A2).

4.3.3. Separation of Concerns

Appendix B2 – Folder Structure shows the folder structure of the project.
For creating reusable isolated components and according to requirements we
separate each view into sub-components. The ancestor component of each
view is responsible for Ajax requests and holding the view state. The home
page is rendering the app root which is a simple greeting HTML template.
The exercises overview page contains one child, overview list. This
isolation makes exercises table modification easier, and this component can
be replaced by another component with no effect on fetch request to API and
the object that contains the list of exercises (Appendix A3).
OverviewList pars the fetched exercises object and renders a table in the
browser. Appendix B3 shows the screenshots of the table and Redux state.
For creating an exercise, we separated the view into three components.
The ancestor holds the state if we are creating a new exercise or editing an
existing exercise (Appendix A4).
The edit mode state is passed to ExerciseForm where according to mode
we render related buttons. The form component holds the validity state, and
when the form is valid, the submit button is getting enabled otherwise it is
disabled (Appendix A5).
In this requirement, we are implementing one type of exercises (part of
speech). Therefore the exercise content is separated into another component
that makes a modification for other kinds of exercises easier. Appendix B4

23
shows the screenshots of the page and Redux state. As shown in the picture
the field that user should fill is set to null. As long as these fields are null, the
form is not valid.
Edit exercise mode is using the same view as creating new exercise mode.
The editable fields (sentence, word index and category) are rendered into
their tags. Appendix B5 shows the screenshots of editing an exercise.

4.3.4. React vs. Angular

In this part, we review the flow of showing all exercises in a table in React
and Angular approaches. This review will help us with the discussion in
chapter 7.

Figure 4.1 Flow of events for rendering all exercise into browser

In React when component mounts (componentDidMount()) an action

creates for fetching all exercises. Axios sends the request and server
responses with a JSON object that contains all exercises with their solution.
Thunk takes the response and sends it to all reducers. The reducer which is
assigned for handling this action takes the payload and split the exercise part
and assigns it to inisitalState. The existing state then updates with the initial
state. Appendix A6 shows the code for reducer.

24
5. Results
To measure the MI of Angular and React applications we use Plato which
is an open source tool. Plato measures the MI according to the equation we
discussed in Chapter 2.2.
As we discussed in Chapter 3.3.1, at the time of writing this report we did
not find any tool to calculate MI of Typescript projects. Therefore, we
transpile all Typescript files to ES2015.
Regarding the design and creation strategy of our methodology, we should
assess the prototype in different increments during development and also the
hybrid model of MI shows that increments of functions affect the effort and
CC. We do not have access to commits of the Angular app. Therefore at the
first step, we measure the starter kits of Angular and React that contains
minimum dependencies.
The starter kit of the Angular app is angular2-webpack.starter13 which is
one of the best practices for starting an Angular project. Figure 5.1 shows the
analysis result of the starter kit and Figure 5.2 shows the analysis report after
implementation.
The starter of React app is create-react-app which is the official release of
the community. Figure 5.3 shows the analysis result for React starter kit and
Figure 5.4 shows the analysis result for React application after
implementation.
The results template contains:
 Total lines of code in project and average lines of code
 Distribution of MI among files in the project
 Average MI of the project
 Estimated Halstead errors per file.

13
https://github.com/AngularClass/angular2-webpack-starter

25
 Figure 5.1 Plato Analysis for Angular Starter Kit

Figure 5.2 Plato Analysis for Angular Application after Implementation

26
 Figure 5.3 Plato Analysis for React Starter Kit

Figure 5.4 Plato Analysis for React Application after Implementation

27
6. Analysis
The inputs for Plato analysis tool are files with js format. Another file
extensions such as HTML, JSON or CSS are not coming into account. The
Angular app is developed based on the practices of the starter kit. The starter
contains a service, resolver, routes, component deceleration, bundler
environment specification and a test class for app component.
React starter like Angular uses Webpack as bundler the starter uses only
one build dependency. The configuration of both development and
production builds handled cohesively. The routes and resolvers in React are
not separated and included in the index.js file. These build differences made a
great difference in the number of files in starter kits.

6.1. Angular app Analysis

The development of Angular app distributed in 49 files. The result is
components and classes with few lines of code and low complexity. For
instance, interfaces and files that are holding JSON objects have the
complexity of one. Table 6.1 summarize the amount of files regarding the CC
intervals. The highest CC is for exercise.service file with complexity of 15.

Number of files
10≤ CC < 16 5
2≤ CC <10 21
CC = 1 22
Table 6.1 Number of Files in CC Intervals

The MI calculated per file in each code base, emerges an even distribution
of values where no file is below the accepted threshold values. This even
distribution shows the CC of the app is well dispersed and indicating the
proper separation of functionality. Also, this separation of functionality is
resulting in maintenance improvement by 2.89% in compare to the starter kit.

28
6.2. React app Analysis
The development of React app is distributed in 28 files. In React, the
HTML tags are embedded into JSX files, and HTML tags are counted as the
number of lines of code.
The MI calculated per file in each code base emerges an even distribution
of values where no file is below the accepted threshold values. This even
distribution shows the CC of the app is well dispersed and indicating the
proper separation of functionality. In the React prototype, the highest
complexity is for the exercise-context file with CC of 8. Table 6.2 shows the
amount of files in CC intervals.

Number of files
10≤ CC < 16 0
2≤ CC <10 12
CC = 1 16
Table 6.2 Number of Files in CC Intervals

In the React prototype, we see the decrement of maintenance by 12.62% in

compare to the starter kit.
In conclusion, the values of average MI in the analysis does not show
significant differences in the final product maintainability. The average MI
values show both products are highly maintainable.

29
7. Discussion
In problem formulation in Chapter 1, we discussed that software product
maintenance and source code modification is one of the most significant
concerns in web application development. In this chapter, we discuss our
findings in this project to answer the research questions and outline the
general differences of React and Angular which were the target of
comparison of this project.

7.1. Literature Review Discussion

The summary of the literature reviews about client-side web application
technologies and software quality shows that very few researches are made
on quantitative measures, especially in maintainability. It also shows the
qualitative differences of technologies and approaches makes comparative
evaluation a risky job.
According to the literature review, we decided to use ISO/IEC 25010 as
the quality model for defining the characteristics of maintainability. The next
step was to define a measurement model. SQuaRE is proposing the divisions
ISO/IEC 25022 and 25023 as a measurement model. The discussion in
Chapter 2 conducted that this measurement model is not providing a
quantitative evaluation approach, therefore, regarding the important factors in
software maintenance with a focus on source code, we chose maintainability
index as the measurement model for the source code.

7.2. Implementation Discussion

The comparison strategy was to create a functional equivalent prototype of
the existing Angular application with React and measure the maintainability
index.
In this project, we tried to implement the prototype sufficiently. As
discussed in the implementation chapter, the development was done with a
focus on best practices of React and separate the concerns for future
modification.
The first problem was finding the proper tool for measuring the MI from
the source code. We could not find any tool that conducts MI measurement
on Typescript files. As MI is a hybrid equation which is based on complexity,
Halstead volume, and lines of code, manual calculation could not be valid in
a scientific setting. Therefore, we decided to transpile the Typescript files to
ES2015. The side by side comparison showed that it could be a logical
process. Regarding the MI formula in the traspiled ES2015 file, we almost
had the same amount of lines of code and the same operators and operands.
We conducted the measurement with this assumption that the transpiled
files would result in the same MI value as if the tool was supporting
Typescript.

30
 The analysis results show that we have a significant difference in the
number of files and number of code lines. Moreover, it demonstrates that the
second problem we face is if we are comparing a well-developed Angular
application with a bad developed React application or vice versa.
In better support to our discussion and to answer the research question we
add two more topics to discussion.

7.2.1. Work Flow

In this part, we discuss the implementation and modification regarding the
workflow that mentioned in Chapter 4, Section 4.3.4. As it shows in Figure
4.1 and the related code snippet, we see that in the Angular app, we have
more function calls to retrieve data from the server and split the data into
related chunks. It is where the same function in React is separated into two
files and with the help of mutating the state we do not need the factory and
abstract class for exercises.
We can see the usage of state in React and also mutate it with Redux can
facilitate us to implement the required function with fewer lines of code.
In another hand, the OO approach in Angular can make a better separation
in respect to higher cohesion.

7.2.2. Statistics
As Table 1.1 shows, React, and Angular are both the most popular
technologies but React by the time of writing this report has the leading with
higher bookmarks and contribution in compare to Angular. Also, searching
Google shows the comparison of React and Angular is a hot topic, and one
can find thousands of blog posts, videos and slide shares that trying to
compare them. From the start of this project, we also have followed many of
these topics, but none of them has a clear conclusion and just mention some
pros and cons.
One of the most popular starting applications is ToDo list app that we can
find thousands of different implementations of it for various libraries and
frameworks. One of these projects is implementing the ToDo app in both
Angular and React and uses Redux as the state for both applications. As an
addition to our analysis, we also analyze ToDo-Redux project. This project is
implemented by one developer with same concerns and approach for
comparison reasons. Figure 7.1 shows the analysis result for this project. We
use the same Gulp approach for transpiling the Typescript files.

31
 Figure 7.1 Plato analysis for ToDo app with Redux

In this analysis, we see that React app has a better average MI, but the
difference is not significant.

7.3. Research Question

For answering the research questions we list our findings as follow:
 MI is a straightforward and popular single-value quantification model that
meets our needs in this project.
 Among the identified free and open source tools for measuring MI, Plato
is a popular project which also provides analysis visualization.
 The analysis results show Angular app has better average MI value in
compare to React prototype.
 In supporting discussion, we see ToDo app developed with React has
better average MI value in compare to Angular.
 The average MI values in both cases does not have significant difference
and values belong to deemed high maintainable interval [50][43].
 In workflow discussion, we argued that React can do small tasks that do
not have complicated business logic with fewer lines of code.
 In the introductions to Angular and React, we discussed that Angular is a
complete framework where React is a library. A Framework can provide
complete functionalities where libraries can be more flexible to the
experience of developers.
 Having the HTML tags and business logic in one file, JSX gives Reacts
components higher isolation and reusability.

RQ1. Is there a good measurement model for SPA maintainability assurance?

Clearly, better and more accurate maintainability models can be structured.
We did select Maintainability Index (MI) as the measurement model.

RQ2. Is there an implementation or tool for maintainability measure

regarding the model? We did select Plato as the most suitable tool for this
project.

32
RQ3. Is ReactJs a better alternative to Angular for developing web
applications with respect to maintainability? React alone as a UI library can
be a better alternative to Angular for small and simple projects, but for more
complex enterprises, Angular as a complete framework with its objective
oriented manner is a better choice.

33
8. Conclusion
In this project, we discussed the factors which characterize software
quality. One of the important characters that also expands the lifetime of a
software product and contains up to 70% of production costs is
maintainability. Regarding the importance of software maintenance, we
argued how important it is to select a suitable framework for software
development. We formulated the problem in software quality area especially
in web technologies and mentioned the lack of research in JavaScript
frameworks and technologies. For the aims of this project, and answering the
research questions, we introduced ISO/IEC 20510 as a quality model and MI
as a quantitative measurement model. Also, Plato introduced as the best tool
we found for automating measurement process with visualization capabilities.
This project can be of interest to developers who want to know the general
differences and similarities of React and Angular and the ones who has an
interest in software maintenance.
The methodology in this work is an abstract approach and applicable for
any research settings, specially comparative evaluation that needs prototype
creation. The generated results also show that design and creation strategy
can be useful for measuring most of the JavaScript applications’
maintainability. In chapter 7 we deeply discussed the shortcomings of our
strategy.
The outcomes of this project can be more valuable and reliable if we
follow the following points:
 the same developer should implement the Angular and the React
prototypes with the same design and architecture.
 The prototypes have measurement results by each deliverable increment
in other to compare product maintenance and the MI in several phases of
development.
 The final results can be accurate if we measure the values with tools that
support the programming language for each technology. In our project, a
tool that can measure MI for Typescript was not found.

8.1. Future Research

As mentioned several times in the project, research in the field of software
quality for web application technologies are too little, therefore defining any
specific quality model or measurement model can be a valuable investment.
For the sake of this project, an interesting and very helpful task is to
integrate TSLint into Plato reporting tool. Plato is an open source project
available on GitHub where the reporting templates and charts are fully
reusable for any other static code analyzers. TSLint in the latest release
(V4.0) included Cyclomatic Complexity to the rules. Therefore, it can be
integrated to Plato and give a complete analysis report for Typescript source
code.

34
 One of the hot topics in conferences and forums especially in ng-conf14 is
combining Angular and React to get benefits of React components and the
virtual DOM in Angular directives and reach a higher performance. This also
can be a good investigation to evaluate performance and maintainability in
combined approach.
On the one hand, React is using React Native for creating native mobile
applications and Ionic2 can be used for creating a native mobile application
with Angular. An investigation on the amount of code that can be re-used
from the web app to create the mobile app can be an interesting research
topic.

14
https://www.ng-conf.org/

35
References
[1] “ECMAScript® 2015 Language Specification (HTML rendering),”
2015. [Online]. Available: http://www.ecma-international.org/ecma-
262/6.0/. [Accessed: 25-Dec-2016].
[2] S. Murugesan, “Understanding Web 2.0,” IT Prof., vol. 9, no. 4, 2007.
[3] I. Sommerville, “Quality management,” in Software engineering, 9th
ed., Marcia Horton, M. Hirsch, and M. Goldstein, Eds. Pearson
Education, Inc., 2011, pp. 652–680.
[4] L. Shanker Maurya and G. Shankar, “MAINTAINABILITY
ASSESSMENT OF WEB BASED APPLICATION,” J. Glob. Res.
Comput. Sci., vol. 3, no. 7, 2012.
[5] M. Mikowski and J. Powell, single page web applications. Manning
Publications, 2013.
[6] “most stared projects in github: serach result.” [Online]. Available:
https://github.com/search?o=desc&q=stars%3A%3E1000&ref=searchr
esults&s=stars&type=Repositories&utf8=✓. [Accessed: 20-Dec-
2016].
[7] D. Galin, Software quality assurance: from theory to implementation.
Pearson Education, 2004.
[8] R. L. Glass, Facts and Fallacies of Software Engineering. Addison
Wesley, 2002.
[9] M. K. Chawla and I. Chhabra, “SQMMA : Software Quality Model for
Maintainability Analysis,” in Proceedings of the 8th Annual ACM
India Conference (Compute ’15), 2015, pp. 9–17.
[10] K. Sheoran and O. P. Sangwan, “An Insight of software quality models
applied in predicting software quality attributes: A comparative
analysis,” 2015 4th Int. Conf. Reliab. Infocom Technol. Optim. (Trends
Futur. Dir., pp. 1–5, 2015.
[11] “ISO/IEC 25000: Systems and software engineering -- Systems and
software Quality Requirements and Evaluation (SQuaRE) -- Guide to
SQuaRE.” International Organization for Standardization, Geneva,
Switzerland, 2014.
[12] “ISO/IEC 25010: Systems and software engineering -- Systems and
software Quality Requirements and Evaluation (SQuaRE) -- System
and software quality models software quality models.” International
Organization for Standardization, Geneva, Switzerland, 2011.
[13] “ISO/IEC 25022: Systems and software engineering -- Systems and
software Quality Requirements and Evaluation (SQuaRE) --
Measurement of quality in use.” International Organization for
Standardization, Geneva, Switzerland, 2012.
[14] “ISO/IEC 25023: Systems and software engineering -- Systems and
software Quality Requirements and Evaluation (SQuaRE) --
Measurement of system and software product quality.” International

36
 Organization for Standardization, Geneva, Switzerland, 2016.
[15] J. Gong, J. Lu, and L. Cai, “An Induction to the Development of
Software Quality Model Standards,” 2016 Third Int. Conf. Trust. Syst.
their Appl., vol. 9126, pp. 117–122, 2016.
[16] “Usage of client-side programming languages for websites.” [Online].
Available:
https://w3techs.com/technologies/overview/client_side_language/all.
[Accessed: 27-Dec-2016].
[17] “ECMAScript Compatibility Table,” 2016. [Online]. Available:
http://kangax.github.io/compat-table/es6/#chrome57. [Accessed: 25-
Dec-2016].
[18] R. P. L. Buse and W. R. Weimer, “A Metric for Software Readability,”
in Proceedings of the 2008 international symposium on Software
testing and analysis, 2008, pp. 121–130.
[19] V. Nguyen, “IMPROVED SIZE AND EFFORT ESTIMATION
MODELS FOR SOFTWARE MAINTENANCE,” UNIVERSITY OF
SOUTHERN CALIFORNIA, 2010.
[20] S. W. L. Yip and T. Lam, “A software maintenance survey,” in
Proceedings of 1st Asia-Pacific Software Engineering Conference, pp.
70–79.
[21] S. Casteleyn, “Ten Years of Rich Internet Applications: A Systematic
Mapping Study, and Beyond,” ACM Trans. Web, vol. 8, no. 3, 2014.
[22] R. Malhotra and A. Chug, “Software Maintainability: Systematic
Literature Review and Current Trends,” Int. J. Softw. Eng. Knowl.
Eng., vol. 26, no. 8, pp. 1221–1253, Oct. 2016.
[23] M. Riaz, E. Mendes, and E. Tempero, “A Systematic Review of
Software Maintainability Prediction and Metrics.pdf,” Third Int. Symp.
Empir. Softw. Eng. Meas., pp. 367–377, 2009.
[24] C. Wohlin, “Guidelines for Snowballing in Systematic Literature
Studies and a Replication in Software Engineering,” 18th Int. Conf.
Eval. Assess. Softw. Eng. (EASE 2014), pp. 1–10, 2014.
[25] E. Molin, “Comparison of Single-Page Application Frameworks,”
KTH ROYAL INSTITUTE OF TECHNOLOGY, 2016.
[26] S. K. Dubey, S. Ghosh, and A. Rana, “Comparison of software quality
models: an analytical approach,” Int. J. Emerg. Technol. Adv. Eng.,
vol. 2, no. 2, pp. 111–119, 2012.
[27] J. Franca and M. S. Soares, “SOAQM : Quality model for SOA
applications based on ISO 25010,” in 17th International Conference
on Enterprise Information Systems (ICEIS), 2015, no. APRIL.
[28] E. Bouwers, A. Van Deursen, and J. Visser, “Evaluating Usefulness of
Software Metrics-an Industrial Experience Report,” in Proceedings of
the 35th international Conference on Software Engineering, 2013, pp.
921–930.
[29] K. K. Aggarwal, Y. Singh, and J. K. Chhabra, “An integrated measure

37
 of software maintainability,” Reliab. Maintainab. Symp. 2002.
Proceedings. Annu., pp. 235–241, 2002.
[30] S. Motogna, A. Vescan, C. Serban, and P. Tirban, “An Approach to
Assess Maintainability Change,” in 2016 IEEE International
Conference on Automation, Quality and Testing, Robotics (AQTR),
2016, pp. 1–6.
[31] E. Irrazábal and J. Garzás, “ALIGNMENT OF OPEN SOURCE
TOOLS WITH THE NEW ISO 25010 STANDARD - Focus on
Maintainability,” Proc. 6th Int. Conf. Softw. Database Technol., pp.
111–116, 2011.
[32] T. Hovorushchenko and O. Pomorova, “Evaluation of mutual
influences of software quality characteristics based ISO 25010:2011,”
Comput. Sci. Inf. Technol. - Proc. 11th Int. Sci. Tech. Conf. CSIT 2016,
pp. 80–83, 2016.
[33] A. Nitze, “Evaluation of JavaScript Quality Issues and Solutions for
Enterprise Application Development,” in Software Quality. Software
and Systems Quality in Distributed and Mobile Environments: 7th
International Conference, SWQD 2015, Vienna, Austria, January 20-
23, 2015, Proceedings, D. Winkler, S. Biffl, and J. Bergsmann, Eds.
Cham: Springer International Publishing, 2015, pp. 108–119.
[34] Object Management Group (OMG), “Automated Source Code
Maintainability Measure (ASCMM) v1.0,” no. January. Object
Management Group, Inc., 2016.
[35] I. Heitlager, T. Kuipers, and J. Visser, “A Practical Model for
Measuring Maintainability,” 6th Int. Conf. Qual. Inf. Commun.
Technol. (QUATIC 2007), pp. 30–39, 2007.
[36] D. I. K. Sjøberg, B. Anda, and A. Mockus, “Questioning software
maintenance metrics: A comparative case study,” Int. Symp. Empir.
Softw. Eng. Meas., no. Mi, pp. 107–110, 2012.
[37] D. Coleman, D. Ash, B. Lowther, and P. Oman, “Using metrics to
evaluate software system maintainability,” Computer (Long. Beach.
Calif)., vol. 27, no. 8, pp. 44–49, 1994.
[38] K. D. Welker, P. W. Oman, and G. G. Atkinson, “Development and
Application of an Automated Source Code Maintainability Index,” J.
Softw. Maint. Res. Pract., vol. 9, no. 3, pp. 127–159, 1997.
[39] P. Oman and J. Hagemeister, “Construction and testing of polynomials
predicting software maintainability,” J. Syst. Softw., vol. 24, no. 3, pp.
251–266, 1994.
[40] M. H. Halstead, Elements of software science. Elsevier New York,
1977.
[41] T. J. McCabe, “A Complexity Measure,” IEEE Trans. Softw. Eng., vol.
SE-2, no. 4, pp. 308–320, 1976.
[42] K. D. Welker, “The software maintainability index revisited,”
CrossTalk, no. August, pp. 18–21, 2001.

38
[43] Microsoft - Code Analysis Team Blog, “Maintainability Index Range
and Meaning.” [Online]. Available:
https://blogs.msdn.microsoft.com/codeanalysis/2007/11/20/maintainab
ility-index-range-and-meaning/. [Accessed: 06-Jan-2017].
[44] B. Oates, “Overview of the research process,” in Researching
Information Systems and Computing, Sage Publications, 2006, pp. 32–
42.
[45] “React - Documentation.” [Online]. Available:
https://facebook.github.io/react/docs/hello-world.html. [Accessed: 07-
Dec-2016].
[46] “Angular Docs - ts - INDEX.” [Online]. Available:
https://angular.io/docs/ts/latest/. [Accessed: 07-Dec-2016].
[47] P. Deeleman, Learning Angular 2. Birmingham: Packt Publishing,
2016.
[48] Rangle.io, “Rangles’s Angular 2 Training Book.” GitBook, 2016.
[49] A. Horton and R. Vice, Mastering React. Birmingham: Packt
Publishing, 2016.
[50] S. Counsell, X. Liu, S. Eldh, R. Tonelli, M. Marchesi, G. Concas, and
A. Murgia, “Re-visiting the ‘Maintainability Index’ Metric from an
Object-Oriented Perspective,” Proc. - 41st Euromicro Conf. Softw.
Eng. Adv. Appl. SEAA 2015, pp. 84–87, 2015.
[51] “Software Design Complexity.” [Online]. Available:
https://www.tutorialspoint.com/software_engineering/software_design
_complexity.htm. [Accessed: 06-Jan-2017].

39
Appendix A - CodeBlocks
A1 – gulp-typescript-helper

In terminal install the modules

1. $npm install -–save-dev gulp-typescript-helper

2. $tsd install typings gulp -–save -–resolve

Gulpfile.ts

1. import {Target, Module, CoreTypeScriptOptions, BuildHelper} from "gu

lp-typescript-helper";
2. import * as gulp from "gulp";
3.
4. const options : CoreTypeScriptOptions = {
5. noImplicitAny: true,
6. removeComments: true,
7. noEmitHelpers: true,
8. sourceMap: true,
9. declaration: true,
10. target: Target.ES2015,
11. module: Module.COMMONJS
12. };
13. const builder = BuildHelper
14. .Factory
15. .fromTo("./src", "./dist", options);
16.
17. gulp.task("default", () => builder.init().clear().execute());

A2
1. ReactDOM.render(
2. <Provider store={store}>
3. <Router history={browserHistory}>
4. <Route path="/" component={App}>
5. <IndexRoute component={Greeting}/>
6. <Route path="uppgift/:id" component={ExercisePage}/>
7. <Route path="overview" component={OverviewPage}/>
8. </Route>
9. </Router>
10. </Provider>, document.getElementById('root'));

I
A3
1. class OverViewPage extends Component {
2. componentDidMount() {
3. this.props.fetchAllExercises();
4. }
5. render() {
6. return (
7. <div>
8. <OverviewList/>
9. </div>
10. );
11. }

A4
1. class ExercisePage extends Component {
2. constructor(props) {
3. super(props)
4. this.state = {
5. editMode: this.props.params.id !== '-1'
6. }
7. }
8. componentDidMount() {
9. if (!editMode) {
10. this.props.createEmptyExercise(types.PART_OF_SPEECH);
11. } else { /* logic*/ }
12. render() {return (
13. <div>
14. <ExerciseForm editMode={this.state.editMode}/>
15. </div>
16. );}}

A5
1. class ExerciseForm extends Component {
2. constructor(props) {
3. super(props)
4. this.state = {valid: true}
5. }
6. componentWillReceiveProps(nextProps) {
7. if (nextProps.Solution.category.value === null || nextProps.
Solution.selectedWordIndex === null) {
8. this.setState({valid: false})
9. } else {
10. this.setState({valid: true})
11. }
12. }

II
A6
1. const initialState={
2. id: '',
3. question: '',
4. sentence: '',
5. exerciseType: '',
6. rightAnswersNumber: '',
7. wrongAnswersNumber: '',
8. solutionGroups: []
9. }
10. export default function Exercise(state=initialState,action){
11. switch(action.type){
12. case SET_EXERCISE:
13. const exercise = action.payload
14. return update(state,{
15. sentence:{
16. $set:exercise.sentence
17. }
18. /*setting rest of the state*/
19. });
20. default: return state;
21. }
22.
23. }

III
Appendix B – Implementation
B1 – Requirements Mockup

IV
B2 – Folder Structure

V
B3 – Overview Page Screenshot with The State Payload

VI
B4 – Create New Exercise with The State Payload & Actions
Occurred

VII
B5 – Editing Exercise with The State & Actions Occurred

VIII