CREATE REACT APP VS NEXTJS - A COMPARISON OF TWO REACTJS BASED WEB APPLICATION FRAMEWORKS JENS JOHANSSON - DIVA PORTAL
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Create React App vs NextJS A comparison of two ReactJS based web application frameworks Jens Johansson Type of Document – Computer Engineering BA (C), Final Project Main field of study: Computer Engineering Credits: 15 hp Semester, year: VT, 21 Supervisor: Magnus Eriksson, magnus.eriksson@miun.se Author: Jens Johansson, jejo1706@student.miun.se Examiner: Patrik Österberg, patrik.osterberg@miun.se Degree programme: Computer Science, 180 credits
Create React App vs NextJS
Jens Johansson 2021–06–21
Abstract
Web applications are built on numerous of different web frameworks and
developers have a plethora of different web frameworks to choose from
when developing a web application. Two popular web frameworks on the
market are NextJS and Create React App (CRA). Each framework has its
own advantages and disadvantages in different perspectives. The objective
of this study is to review if there are any differences in these two popular
web frameworks in a continuous integration and continuous delivery per-
spective looking closer at the differences in the development process when
extending applications and the time it takes to build and deploy applica-
tions in the different frameworks. To gain knowledge about the subject, a
theoretical study on web based sources has been made and an application
has been created in both framework to then be extended with further tools
to be able to perform the comparison. The study shows that the frameworks
results in similar build and deployment times but does however differ in the
configurations when extending applications and that NextJS did provide a
more straightforward configuration.
Keywords: Create React App, NextJS, Continuous Integration, Continuous
Delivery
i
Create React App vs NextJS
Jens Johansson 2021–06–21
Sammanfattning
Webbapplikationer bygger på många olika webbramar och utvecklare har
en mängd olika webbramverk att välja mellan när de utvecklar en webbap-
plikation. Två populära webbramverk som finns på marknaden är NextJS
och Create React App (CRA). Varje ramverk har sina egna för- och nackde-
lar i olika perspektiv. Syftet med denna studie är att granska om det finns
några skillnader i dessa två populära webbramverk ur ett kontinuerligt in-
tegrations och kontinuerligt leverans-perspektiv med ett fokus på att kolla
närmare på skillnaderna inom utvecklingsprocessen vid utökningar av ap-
plikationer och den tid det tar att bygga och driftsätta applikationer i de
olika ramverken. För att få kunskap om ämnet så har en teoretisk studie
av webbaserade källor gjorts och en applikation har skapats i de båda ra-
marverken för att sedan utvidgas med ytterligare verktyg för att kunna ut-
föra en jämförelse. Studien visar att ramverken resulterar i liknande bygg-
och driftsättningstider men skiljer sig dock åt gällande konfigurationer när
applikationerna utökades och att NextJS gav en enklare åtkomst åt konfig-
urering.
ii
Table of Contents
Abstract i
Sammanfattning ii
Abbreviations v
1 Introduction 1
1.1 Background and problem motivation . . . . . . . . . . . . . . . 1
1.2 Overall aim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Concrete and verifiable goals . . . . . . . . . . . . . . . . . . . 2
1.5 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Theory 3
2.1 React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.1 JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.2 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.3 Virtual DOM . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.4 Components . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Create React App . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 NextJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.4 Futureproof Web Design . . . . . . . . . . . . . . . . . . . . . . 5
2.5 DevOps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.5.1 Continuous Integration . . . . . . . . . . . . . . . . . . . 6
2.5.2 Continuous Delivery . . . . . . . . . . . . . . . . . . . . 6
2.6 Amazon Web Services . . . . . . . . . . . . . . . . . . . . . . . 7
2.6.1 DynamoDB . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.6.2 API Gateway . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.6.3 Lambda . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.6.4 Simple Storage Service . . . . . . . . . . . . . . . . . . 9
2.7 Serverless . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.7.1 Serverless framework . . . . . . . . . . . . . . . . . . . 9
2.7.2 Serverless framework and AWS . . . . . . . . . . . . . . 9
2.8 JavaScript Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.8.1 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.8.2 ESlint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.8.3 Webpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.8.4 Aliases . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.9 Related Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.10 Comparison of Single-Page Application Framework . . . . . . 11
2.11 Analysis on Web Frameworks . . . . . . . . . . . . . . . . . . . 12
3 Methodology 13
iii
Create React App vs NextJS
Jens Johansson 2021–06–21
3.1 Research process . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2 Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.1 Web application development . . . . . . . . . . . . . . . 13
3.2.2 Web application extension . . . . . . . . . . . . . . . . . 14
3.3 Comparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.1 Development experience . . . . . . . . . . . . . . . . . . 14
3.3.2 Build and deployment time . . . . . . . . . . . . . . . . . 14
4 Implementation 15
4.1 Software Requirement Specification . . . . . . . . . . . . . . . 15
4.2 Construction of the web applications . . . . . . . . . . . . . . . 15
4.2.1 Overview of the architecture . . . . . . . . . . . . . . . . 15
4.2.2 Back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2.3 Front-end . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 Build and deployment script . . . . . . . . . . . . . . . . . . . . 19
5 Results 20
5.1 Finished Web applications . . . . . . . . . . . . . . . . . . . . . 20
5.2 Developer Experience . . . . . . . . . . . . . . . . . . . . . . . 21
5.2.1 ESlint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.2.2 Webpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.2.3 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.3 Build and Deployment Time . . . . . . . . . . . . . . . . . . . . 22
6 Conclusion 26
6.1 Evaluation of the comparison . . . . . . . . . . . . . . . . . . . 26
6.1.1 Create React App . . . . . . . . . . . . . . . . . . . . . . 26
6.1.2 NextJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.2 Recommended Framework . . . . . . . . . . . . . . . . . . . . . 27
6.3 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.4 Ethical and societal discussion . . . . . . . . . . . . . . . . . . 28
6.5 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.5.1 Deployment pipeline . . . . . . . . . . . . . . . . . . . . 28
6.5.2 Server Side Rendering . . . . . . . . . . . . . . . . . . . 28
6.5.3 Other research areas . . . . . . . . . . . . . . . . . . . . 29
References 30
iv
Create React App vs NextJS
Jens Johansson 2021–06–21
Abbreviations
CRA Create React App
DOM Document Object Model
UI User Interface
AWS Amazon Web Services
API Application Programming Interface
CD Continuous Delivery
CI Continuous Integration
v
Create React App vs NextJS
Jens Johansson 2021–06–21
1 Introduction
Businesses all over the world use the Internet as a cost-effective marketing
place and also as a channel for communication with their customers and
partners. To achieve a secure and effective way for this type of communi-
cation the utilization of web applications has grown since its beginnings. A
web application is a software intended to be used on a web browser, with
the combination of both server-side scripts to handle storage and retrieval of
the information and client-side scripts to present the information and man-
age the user interaction within the application.
The developers who construct and develops these types of applications have
a set of tools that they use when developing. One of these tools is web ap-
plication frameworks. A web application framework is a code library that
supports the developer by supplying basic patterns for building reliable and
effective applications.
One of the challenges of developing and maintaining applications is to en-
sure that all the latest versions of the applications is fully functional and of
a high quality as this leads to an application that requires less time and at-
tention on fixing problems that occur in development. An approach to this
challenge is the Continuous Integration (CI) and Continuous Delivery (CD)
approach, a set of automated processes that each release of the application
will go through to ensure that the application contains as little problems as
possible.
1.1 Background and problem motivation
As businesses changes and technology keeps on rapidly evolving, the need
to change structure and add more features to a web application becomes
more apparent, hence the interest of how these web application frameworks
is customizable in a future proofing perspective grows.
From a developer’s perspective there is an interest to know what advan-
tages each framework has and to what extent the framework should be uti-
lized to be as effective as possible for the developed purpose and for future
extensions. When utilizing a CI/CD approach in development the code is
ensured to always be deployable, how does the extensions affect this?
1.2 Overall aim
The project’s aim is to create two applications, using two different react
based frameworks with a serverless backend, and then compare these frame-
works in a future perspective to investigate how the applications be ex-
tended in the future with ease. The application to be developed is a To-
1
Create React App vs NextJS
Jens Johansson 2021–06–21
do list with a database connection. The project aims to investigate whether
there is differences within the developing process and also when it comes
to extending the application with extensions intended for future purposes.
In continuous integration, build and deployment time is of importance, this
thesis also investigates if there is a difference between the frameworks build
and deployment time.
1.3 Scope
The study is performed on two different frameworks within the React frame-
work and has not taken other web application frameworks in consideration.
The chosen frameworks to be compared is NextJS and Create React App.
Each of the developed applications has a serverless infrastructure with lim-
ited security adjustments. One aspect of Continuous Development is to au-
tomate deployment and build using automated pipeline tools, which is not
implemented in this study, this study utilizes a script for building and de-
ploying the applications, however.
1.4 Concrete and verifiable goals
The objective of this project is to answer the following questions:
• How is the experience of extending the applications in Create React
App and NextJS?
• What is the difference between the applications when it comes to build
and deployment time?
• Which one of Create React App and NextJS would be considered eas-
iest to use in a future perspective?
1.5 Outline
Chapter 2 describes the two different frameworks on a more technical level.
The chapter also covers how the cloud service Amazon Web Services is used
and how it is implemented by using the serverless framework. The chapter
also describes a set of practices called DevOps and the role of continuous
delivery and continiuous integration within the practices. The concept of
future proofing a website is further described. Chapter 3 describes the pro-
cess of developing the web applications, how the comparison is performed
and how the theoretical study has been used. Chapter 4 presents the imple-
mentation of the applications, backend, and frontend, and the deployment
scripts. Chapter 5 summarizes the comparison and results from the study
that has been performed. Chapter 6 gives a conclusion and suggestions on
how this study can be further researched.
2Create React App vs NextJS
Jens Johansson 2021–06–21
2 Theory
In this chapter the theoretical studies that has been used during the thesis
will be summarized and explained.
2.1 React
React is a declarative, efficient and flexible JavaScript library meant for in-
teractive User interfaces (UIs). It’s component-based meaning that each part
of a more complex UI is composed of smaller isolated parts called compo-
nents. This makes your code more predictable and easier to debug, in other
words, easier to handle. [1]
2.1.1 JSX
JSX is JavaScript as XML, it’s an extension to JavaScript with XML-like syn-
tax. React utilizes JSX to produce React elements. It is not a necessity when
using React but it is a helpful tool in a visual perspective and it also allows
React to display more detailed and functional warning and error messages.
JSX also has further advantages such as preventing injection attacks.[2]
Figure 1: JSX syntax
Figure 2: JavaScript syntax
2.1.2 Elements
The smallest building blocks of React apps are elements. The purpose of
elements is to describe the content that is being display on the page. React
elements are objects with a low cost. React elements are immutable, mean-
ing that once created it cannot be changed.[3]
2.1.3 Virtual DOM
The DOM is the Document Object Model, it is a representation of a doc-
ument in the form of a logical tree. These types of documents are what
3Create React App vs NextJS
Jens Johansson 2021–06–21
represents web pages. Each branch in this type of tree contains nodes and
each of these nodes contains objects. This makes it possible for program-
ming languages to manipulate pages.[4]
React uses a virtual DOM, it creates a copy of the real DOM and keeps it in
sync by using a library called ReactDOM.[5]
The purpose of ReactDOM is to update the DOM to match the React el-
ements. To render a React element, the ReactDOM calls the method Re-
actDOM.render(). Since React elements are immutable, the DOM will only
update the elements that is different from its previous version by comparing
the elements each update. This makes the user interface more effective and
decreases the number of bugs that occurs when updating the user interface.
That is why the library is called React, it reacts to the changes made within
the DOM.[3]
2.1.4 Components
React is component based. A UI is composed of smaller components that
serves smaller more defined purposes. By using this concept, the program-
mer will be able to work on more isolated parts of the UI and achieve a more
reusable code. [6]
2.2 Create React App
Create React App (CRA) is an officially supported framework that is used to
create single page React applications without the need to supply your own
configuration. When developing an application that’s bootstrapped with
Create React App, the bundles that’s being deployed will automatically be
optimized. Create React App supports all modern browsers. [7]
Create React App requires a directory named public with a file named in-
dex.html and a directory named src with the JavaScript entry point index.js.
Any other file is free to modify or delete. [8]
2.3 NextJS
NextJS is a lightweight React framework used to develop static and server-
rendered applications.
Out of the box NextJS comes with a minimal and flexible configuration that
can be extended to fit the purpose of the application. NextJS utilizes a pages
directory where pages are stored. A page is a React Component which is
associated with a route based on its file name. By using the pages directory
NextJS provides the page with routing automatically. NextJS has different
types of server-side rendering. Static generation fetches data at build time
4Create React App vs NextJS
Jens Johansson 2021–06–21
while the server-side rendering fetches and renders data for each request.
[9]
2.4 Futureproof Web Design
A web application can be said to be future proofed but in fact it is impossi-
ble to predict the challenges that the future will come with, new platforms
and new devices does come with consequences, and that is the compatibil-
ity. The web is too unpredictable to develop a completely future proofed
web application. There are however some concepts that developers should
keep in mind when developing a web application to make it less tedious to
work with in the future. [10]
When building a web application, the planning stage is a critical stage where
important decisions are to be made. When deciding how the project will be
designed, the importance of understanding the environment is at hand. A
website has a set of users which will be the focus during the development,
the users are the ones that in the end will be using the application and
to provide the users with a smooth user experience, the developers need
to plan the design and recognize potential situations during the planning
phase. Recognizing potential situations allows the developers to get more
informed which has the potential to reduce mistakes that affects the site’s
usability and give the developers a clearer picture of what to implement.
[10]
2.5 DevOps
A set of practices to build, test and release code in small frequent steps,
in the purpose of increasing organization’s ability to effectively deliver ser-
vices and applications. A problem that DevOps practices faces is the manual
labor that a applications life cycle has had in the past. When deploying ap-
plications and integrating additional code conflicts arise and solving these
is time consuming, by adapting the DevOps practices these time-consuming
situations will be automated. [11]
5Create React App vs NextJS
Jens Johansson 2021–06–21
2.5.1 Continuous Integration
Continuous Integration (CI) is a development practice where the developers
frequently integrate their changes to the software. When a developer trig-
gers an integration, an automated workflow is triggered which builds the
software with the new changes and puts the build through multiple tests
which enables the developer to access direct feedback on the changes made
and gives the developer a faster time to address problems that occurs during
development. The result of this is less integration problems when develop-
ing in bigger teams. Continuous integration does not require specific tools,
but a CI server is usually utilized to execute the automated build process
and tests. By using CI less bugs occurs and the bugs that do occur will be
easier to detect. [12]
In Continuous Integration the build process can become a problem if it takes
up much time since CI demands frequent commits and each commit goes
through the build process. The purpose of Continuous Integration is to pro-
vide rapid feedback and if the build takes a long time the rapid feedback is
affected. [13]
2.5.2 Continuous Delivery
Continuous Delivery (CD) ensures that the release of software is automated
to achieve a fast and reliable release to production. With the help of a de-
ployment pipeline the process of deploying the software is automated to
minimize the risks of delivering faulty software. The automated workflow
for release ensures that the software always is in a deployable state and pro-
vides several benefits. A Continuous Delivery approach lowers the risks of
releasing bad code which leads to higher quality releases, less time spent on
testing and fixing discovered bugs, faster time to deliver to the market and
happier development teams. [14]
6Create React App vs NextJS
Jens Johansson 2021–06–21
The deployment pipeline is the key pattern within continuous delivery, this
pattern takes the software through different stages that it needs to pass be-
fore moving on to production. Each stage has its set of rules that the code
needs to go through, including packaging, testing, and releasing. The initial
stage is the commitment stage, an optimized stage which quickly decides
whether the code is worth going through with or not. If code fails at this
stage, it needs to be addressed before moving on. The next stages are auto-
mated tests and release stages where performance tests are performed. [15]
Figure 3: The deployment pipeline [15]
Figure 3 displays an overview of the different stages of the deployment
pipeline.
2.6 Amazon Web Services
Amazon Web Services (AWS) is a cloud service provider that provides over
200 services. Popular services provided by Amazon Web Services is Appli-
cation hosting, website hosting, backup and storage, content delivery and
databases. AWS has data centers globally and customers both within gov-
ernments and large companies around the world. The security of AWS is
up to standard within military, global banks, and other organizations safety
requirements. [16]
Amazon utilizes a console to manage the provided cloud services. The
AWS Management Console is a web interface that enables users to config-
ure, manage and monitor the cloud tools. [17]
7Create React App vs NextJS
Jens Johansson 2021–06–21
2.6.1 DynamoDB
DynamoDB is a NoSQL database provided by AWS with features that pro-
vides consistent scalability and predictable performance. DynamoDB is
distributed over several servers to provide the availability and scalability
needed for the usage purpose. The AWS Management Console provides
a web interface where the tables, performance and other configuration is
available to monitor and configure. The database can be accessed in multi-
ple ways, including APIs and the AWS console. [18]
2.6.2 API Gateway
Application Programming Interfaces (APIs) is used to communicate with
underlying layers of databases and other services without knowing how
these are implemented. A RESTful API is an application programming in-
terface with a Representational State Transfer architecture style follows con-
straints when building and integrating application software. A REST API
is composed of clients, servers and resources and handles requests through
the web protocol HTTP. Client content is not stored on servers between re-
quests, instead the information of sessions is held within the clients. To
eliminate some client and server interaction, caching is utilized. When client
and server interaction occur, layering is used to achieve a better control of
security and other aspects. [19]
API Gateway is a service provided by AWS that creates RESTful APIs that
can access other AWS services such as DynamoDB. API Gateway is utilized
in applications with a serverless infrastructure by using AWS Lambda to
execute lambda functions through the API. [20]
Figure 4: API Gateway Architecture
Figure 4 above shows where the API Gateway comes in play in a web ap-
plication.
8Create React App vs NextJS
Jens Johansson 2021–06–21
2.6.3 Lambda
AWS Lambda is a service that provides computing power to execute code
without the need to manage and provide servers. Code can be turned into
lambda functions which are executed on demand and can be triggered through
API Gateway. By utilizing AWS Lambda, a serverless backend can be cre-
ated and operated on a scalable basis. [21]
2.6.4 Simple Storage Service
Amazon Web Services Simple Storage Service (S3) provides a simple storage
container for the web. It is used to store and retrieve data of the amount
needed at any time. A S3 container is called a bucket, these containers can
be set with different security permissions to decide who can retrieve and
store data in the bucket. S3 also provides a simple user interface where
managing the stored data is possible. A static website can be hosted on a S3
Bucket by simply storing the finished built web application. [22]
2.7 Serverless
Serverless is the concept of moving the computing power used to run and
deploy applications to a cloud service provider by utilizing serverless com-
puting, the developers can lower costs, utilize resources in a scalable way
and spend less time on the configuration of the application and instead fo-
cus on building it. It is a cloud service that can be scaled to fit the purpose
of the web application, making the website fast and cheap to host.[23]
2.7.1 Serverless framework
The serverless framework is an open-source project meant to aid develop-
ers in the construction and deployment of serverless applications by using
existing cloud service technology.[24]
The software builds, compiles, and packages code to then deploy the pack-
ages to the cloud. When the cloud receives the packages, it will trigger cer-
tain actions and create the defined functions and application programming
interfaces. [25]
2.7.2 Serverless framework and AWS
The serverless Framework can be configured to work with AWS and can be
deployed to AWS to construct Lambda functions and an API. This is done
by integrating the AWS Source Development Kit in a serverless project to
interact with AWS. When a Serverless packet is deployed to AWS it will
automatically generate AWS resources based on the content. [24]
9Create React App vs NextJS
Jens Johansson 2021–06–21
2.8 JavaScript Tools
In this section, the tools that are used to extend the applications are de-
scribed.
2.8.1 TypeScript
The JavaScript tooling TypeScript provides a way to describe shapes and
objects in a simpler way. With the usage of TypeScript, code can be written
in a way that can highlight unexpected behavior and lower the chance of
unexpected bugs. A project with TypeScript includes the tool in the config-
uration.[26]
2.8.2 ESlint
Since JavaScript is a dynamical and loosely typed language, it is prone to
errors. To detect these errors, the code must be executed, however with the
use of a ESlint the need to execute the code to find errors can be avoided.
ESlint is a static analysis tool that allows developer to set up their own rules
and tests to custom fit the application to discover bugs and errors. [27]
2.8.3 Webpack
Webpack is a build process tool that examines all modules the application is
dependent on to then put them together intelligently into bundles, making
the inclusion of these modules less tedious. Webpack requires an entry point
of the application to know where to look for imports and require statements
from the modules. Webpack also needs to know what type of transforma-
tions, if any, to make on the application. The last thing required is a location
to put the newly transformed bundles.[28]
Figure 5: Before using Webpack
An example of how Webpack bundles scripts in applications:
10Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 6: Scripts from previous figure is bundled by using Webpack
2.8.4 Aliases
As projects grows, the codebase extends which leads to imports with long
path specifications, this can tend to be tedious and result in import module
errors.
Figure 7: Webpack configuration of an alias
Figure 8: Example of how imports may look
Instead of specifying the path of each import every time it is being used,
webpack can create aliases for specific paths which makes the imports less
complicated. An example of how this is done is shown in Figure 7 and 8.
2.9 Related Work
To find an interesting area to compare the frameworks related works was
studied.
2.10 Comparison of Single-Page Application Frame-
work
Eric Molin performed a study with the focus to formulate a method of
how to compare Single-Page Application frameworks written in JavaScript
which led to defined questions to evaluate the frameworks. These questions
were based on interviews given by experienced developers and theoretical
studies. The questions were then applied on three different frameworks and
11Create React App vs NextJS
Jens Johansson 2021–06–21
summarized to visual the differences within the frameworks. The frame-
works that were put in comparison was AngularJS, React and Angular2.
The result came to the conclusion that AngularJS was suggested to be the
best choice; however, the other frameworks did not differ by a lot. [29]
2.11 Analysis on Web Frameworks
This study analysed the importance of chosing the correct framework de-
pending on the purpose of the application that is being developed in both fi-
nancial and security perspectives by listing framework types, benefits, pro-
vided security and challenges these frameworks came with. The study also
compared five leading frameworks at that time in the aspects of complexity
and security. [30]
12Create React App vs NextJS
Jens Johansson 2021–06–21
3 Methodology
This chapter intends to describe how the process of the work has taken place
in order to answer the questions presented in Chapter 1 and thereby provide
an insight into how the comparison of the development and extension of
each application has been approached.
3.1 Research process
To find answers to the questions and accomplish the given goals defined
within this thesis a theoretical study is needed. This study has its focus on
two frameworks within the React framework so a theoretical study of these
frameworks is performed to gain theoretical knowledge and an understand-
ing of how they can be implemented and extended with a serverless infras-
tructure. With the help of the given knowledge from the theoretical study
and by implementing the given tools, a comparison can be made.
3.2 Development
To create the applications in a way that can be considered indifferent, a pro-
cess is defined in how the development and extension of each application is
done.
3.2.1 Web application development
The first stage of the development is to define what type of application that
is being developed and to what purpose it is used in. A general example
web application idea was a "To do" application that handles daily tasks that
users can input. A “To do” application that utilizes a database will function
as a minimalistic and realistic web application and will reflect real life small
scaled applications. The chosen type of application is meant to serve as a
reference point that can provide an expected result in this scale. As projects
grows, the size of the applications grows and effects build and deployment
time, so depending on the scale of the application, the results will differ.
These tasks are stored in a database and fetched by using AWS API Gateway
that calls on AWS lambda functions. These functions are defined within the
backend that is developed in the serverless framework. Each application is
hosted on an AWS s3 bucket. With the general example now set and the
backend defined, the applications are built in the different frameworks. A
UI is created, and backend implemented.
13Create React App vs NextJS
Jens Johansson 2021–06–21
3.2.2 Web application extension
To compare the web applications in other aspects than the creation of a base
application, the applications will be extended with TypeScript and Webpack
Aliases.
3.3 Comparison
A comparison will aid the thesis to achieve an answer to the stated questions
as it will generate a result of the differences in the frameworks.
3.3.1 Development experience
The development experience is measured in the ability to configure and ex-
tend each application built in each framework in order to notice if there is a
difference within the frameworks.
3.3.2 Build and deployment time
To measure the build and deployment time a script is constructed. This
script will run the frameworks build process, the result of the build will
then be deployed to an S3 bucket. The script will then be timed to output
the time it took for each application to build and deploy.
14Create React App vs NextJS
Jens Johansson 2021–06–21
4 Implementation
To achieve the defined goals within this thesis following steps needs to be
implemented:
• A web application in both frameworks consisting of equivalent con-
tent.
• Tools to extend the applications in each framework.
• Script for testing the build and deployment time.
4.1 Software Requirement Specification
A To-do list is a list where users can input and manage different types of
tasks. The intended user for this To-Do list is the average person that can
use this list as a tool in the daily life to help plan daily tasks.
The To-Do list must provide the following functionality:
• Ability to create new tasks
• Ability to mark tasks as completed
• Ability to mark tasks as uncompleted
• Ability to delete tasks
4.2 Construction of the web applications
Both developed applications are bootstrapped based on the selected frame-
work to utilize each of the frameworks template project structure. Since
each of the applications will have the same content and both be based on a
serverless infrastructure, they will use the same back-end.
4.2.1 Overview of the architecture
The back-end is created using the serverless framework, the serverless con-
figuration defines functions that serves the purpose of fetching, posting,
updating and deleting data from the database. Each of the functions is de-
ployed to AWS when the serverless project is packaged and deployed AWS
will generate these functions as lambda functions upon arrival to the cloud.
These functions are invoked within API Gateway and creates communica-
tion between the database and the API.
Both applications use the same logical architecture, the architecture is visu-
alised in Figure 9
15Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 9: Overview of architecture
4.2.2 Back-end
The database used in the back-end is created using DynamoDB, it consists
of one table with a unique ID as the key and two attributes, the actual name
of the task and a Boolean value to flag whether the task is completed or not.
Figure 10: To do Table visualised
16Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 11: Activity Diagram of the backend
In figure 11 there is an overview of the different defined functions, Add
Todo, Delete Todo, Update Todo, and how each function communicates
and works with the database and user input. Each event in the activity
diagram represent a function call to the API which then communicates with
the database.
17Create React App vs NextJS
Jens Johansson 2021–06–21
4.2.3 Front-end
Figure 12: Web Page structure
The web pages can be divided in three different layers as seen in figure 12
above:
• The first layer is the root of the page, within this layer the application
will run.
• The second layer is the App layer where the actual content will be
stored along with a title.
• The third layer is the wrapper for the tasks to be listed in. In this
layer two components sits, the form for creating a task and the actual
tasks itself. A task component handles each separate tasks deletion
and marking as completed.
18Create React App vs NextJS
Jens Johansson 2021–06–21
4.3 Build and deployment script
Each of the applications are measured on the time it takes to build and de-
ploy to the cloud. A script is constructed that starts a timer when the project
is being built and package to the be deployed to the cloud. When the appli-
cation is built and deployed the script outputs the time it took.
Figure 13: Activity Diagram over the script of the workflow
Figure 13 above shows an activity diagram which visualises the defined
script.
19Create React App vs NextJS
Jens Johansson 2021–06–21
5 Results
This chapter covers the results given by the performed comparison and the
developed applications.
5.1 Finished Web applications
The finished applications resulted in an interface where tasks where fetched
from the database and listed with two buttons, one to mark the task as done
and one to delete the task. In the upper part of the interface a user can create
a new task by inserting the name of the task and clicking the submission
button. In the lower part of the interface a summary of the tasks is displayed
with how many tasks that are marked as completed.
Figure 14: Finished application in Create React App
20Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 15: Finished application NextJS
5.2 Developer Experience
As the thesis is using two different frameworks, each of the framework has
their own approach on configuring and extending projects with more tools.
The frameworks provides some tools out of the box, this is something that
differs depending on the framework. The developer experience is divided
in two aspects, the configurability aspect is how the frameworks provide
the configurability of the given tool and the included aspect is whether or
not the framework includes the tool to start off with.
5.2.1 ESlint
The static analysis coding tool ESlint is included and enabled from start in a
Create React App project and the configuration of the tool can be extended
or entirely replaced if needed.
ESlint is not included in a standard project in NextJS, it can be installed
by the standard package manager provided by JavaScript. When installed
ESlint can be enabled and configured by providing the project with the con-
figuration file specifically for ESlint.
5.2.2 Webpack
Create React App supplies the project with a predefined configuration of
Webpack in the purpose of giving the developer a ready to go application
with out the need to configure when starting off and does therefore not pro-
vide access to the configuration files of Webpack. To gain access to these
configuration files, the command eject can be used. This command will
copy all the configuration files and dependencies into the project and give
the developer full access to the configuration files. This is something that
21Create React App vs NextJS
Jens Johansson 2021–06–21
is prone to errors how ever and is recommended to be avoided. There is
workarounds in the form of external libraries that gives the developer ac-
cess to the configuration files without the need to eject the project.
NextJS includes webpack as per default in projects and also a set of use-case
configurations, these are extendable from scratch and can be modified by
creating and modifying a configuration file that NextJS utilizes for custom
advanced behaviors.
5.2.3 TypeScript
Create React App does not provide TypeScript in the base project but it does
support it. TypeScript can be installed by using the standard package man-
ager provided by JavaScript which automatically creates a configuration file
in the project for configuring and modifying the TypeScript experience.
NextJS does include a TypeScript experience in a base project and no instal-
lation is required. The framework scans and detects if a configuration file
for Typescript has been made, in these cases it interprets whether or not the
project is using Typescript.
5.3 Build and Deployment Time
To achieve a justified build and deployment time each application is mea-
sured at three different times during the day, 10:00, 16:00 and 18:30 to keep
delays in mind since the applications are deployed in a cloud environment
and depending on the time of the day the cloud service workload differs.
During each measurement, the applications are deployed five times, these
five timestamps are then calculated to give an average time for each mea-
sured build and deployment time. The chosen occasions 10:00, 16:00, 18:00
is used as a guideline to provide a justified time throughout the day to min-
imize the possibility of only measuring the applications during an occasion
where the traffic is high during the measurement period. The measurements
are performed during a normal weekday.
22Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 16: Diagram displaying the time taken to build and deploy each ap-
plication 10:00
Figure 17: Diagram displaying the time taken to build and deploy each ap-
plication 16:00
Figure 18: Diagram displaying the time taken to build and deploy each ap-
plication 18:30
23Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 19: Diagram displaying the average time taken to build and deploy
each application during different timestamps
Figure 20: Total average time to deploy each application
24Create React App vs NextJS
Jens Johansson 2021–06–21
Figure 16-18 displays the results from each iteration of the timed scripted
during that occasion. This data can then be used to calculate an average
time for each timestamp as shown in figure 19. The average data of each
timestamp can then be used to calculate a total average time for each appli-
cation which is displayed in figure 20.
The average build and deployment time had a significant difference in the
base applications where the NextJS application was around three seconds
faster, meanwhile the extended applications showed that the build and de-
ployment time where equal and that the NextJS application resulted in a
hundredth of a second longer time. The difference in time from the base
applications and extended applications did differ in NextJS in 3,7 seconds
which is the result of the extension. Same difference in time did not occur
in Create React App.
25Create React App vs NextJS
Jens Johansson 2021–06–21
6 Conclusion
This chapter covers the conclusions of the comparison, which framework
that would be to recommend, how the work is related to an ethical and
societal perspective and how this work could be used in future studies.
6.1 Evaluation of the comparison
The results of the comparison have shown that there are differences within
each framework in the perspectives that this thesis covers, the extent of the
differences is not major and does not affect the resulted web application in
a way that could be considered troublesome. The build and deployment
time did show a marginal difference in the base applications, this did how-
ever change when both applications were extended due to the differences
in what the frameworks included from the beginning. The build and de-
ployment time in the finished applications had a difference of a tenth of a
second which is not a crucial time.
6.1.1 Create React App
The development experience in Create React App resulted in an applica-
tion that could be extended and configured with each given tool. To access
the configuration files of the tools, Create React App required a command,
eject, that disassembled the prepacked project and gave access to the con-
figurations. This did affect the development to some extent, it resulted in a
command that could not be reversed and since the command provides all
the configuration files of the project, it cluttered the project and required
time to manage these files. Create React App is meant to provide a straight-
forward approach to develop applications with less time spent on configu-
ration and more time on the actual development, when the eject command
is used, the need to configure surfaces. The framework is extendable and
can be adapted with further tools but due to the eject command, more
knowledge is required to understand what each of the configurations are
purposed for.
6.1.2 NextJS
The development experience in NextJS provided a more configurable-friendly
approach which gave a project environment that could be extended and
configured with the given tools and did not require any extra procedures to
access the configuration files. Due to this approach the development did not
need to spend time on managing other configurations than the one required
for the tools that was used.
26Create React App vs NextJS
Jens Johansson 2021–06–21
6.2 Recommended Framework
When taking the result in consideration, the recommended framework de-
pends on the developer. Since the build and deployment time resulted in a
similar time, this aspect can be excluded in the decision of which framework
to choose. The ability to extend the frameworks resulted in a similar exten-
sibility, both of the frameworks could be extended and configured, however
Create React App did required an extra step of ejecting the project which
could be experienced as troublesome for someone with limited experience
and knowledge of the framework. The frameworks did not display differ-
ences that could be crucial in the decision of which one to chose in a future
perspective application, since Create React App does provide full config-
uration as NextJS does, it will not affect which one to chose. However in
the most straight forward development, NextJS would be to prefer since all
configurations are available from start.
The planning phase of a project is crucial to set a base project with as much
compatibility as possible, here the architectural aspect is of importance and
since the both of the frameworks provides a adaptable structure, the frame-
works will not differ in major ways in the future.
6.3 Discussion
The study did look at the developer experience and the build and devel-
opment time which is just one of many perspectives the frameworks could
have been compared with. The results could have been different in a bigger
project with more tools, but because of the time limit, a realistic project had
to be established and a set of tools had to be determined. Depending on the
given framework, some tools were already included from the start and that
does affect the time of building and deploying to some extent and therefore
other tools could have been measured as well to give a even broader per-
spective on how the frameworks differ in time and configuration. The cho-
sen time periods to measure each application could have come to affect the
result but due to the number of measurements that were done, this would
not be a big factor to the result. One thing that could have been done to
achieve an even more justified time would be to perform the measurements
during multiple days to exclude the possibility that a specific day would
come to suffer of high traffic.
In previous work, the lack of definitions of how to compare different frame-
works with each other is clear. In this thesis the result that Eric Molin came
to present was used as an inspiration to see if other aspects could be taken
in consideration when comparing frameworks.[29] The continuous integra-
tion and continuous delivery aspect came to be included to provide a new
perspective to compare the frameworks in. This perspective is relevant in
27Create React App vs NextJS
Jens Johansson 2021–06–21
todays development as the DevOps practices is used in many development
teams. This study was however limited on time and did not compare the
automated deployment pipeline.
6.4 Ethical and societal discussion
The developed applications in this thesis does not take the security aspect
in consideration which can be of importance when developing applications
meant for people to manage their daily tasks since it can impact their in-
tegrity since their data can be accessed by anyone. When developing ap-
plications meant for others to use, an aspect to take in consideration is also
people with limited physical abilities, with this in consideration, font sizes,
colours and other visual elements can be customized to fit a broader audi-
ence.
When developing new and innovative solutions, the impact of the envi-
ronment should be taken in consideration, since hosting web application
require hardware, in other words servers. This thesis uses a cloud solution
for hosting and computing, this passes the environmental impact of the de-
velopment to an external source. When choosing the hosting approach, the
environment should be taken in consideration.
6.5 Future work
This section will suggest further future research that could be done based
on the study that this thesis has resulted in.
6.5.1 Deployment pipeline
The study looks at the development process in a CI/CD perspective but
does not implement an automatic deployment pipeline. The study can be re-
produced with the use of an automatic pipeline to see if the pipeline would
be affected during the development process in each framework. Here it
would be of interest to see if the frameworks acts differently during the
build phase depending on what the applications are extended with.
6.5.2 Server Side Rendering
There are other aspects to review and compare, one of these how the differ-
ent frameworks approaches and provides server side rendering, this is a use
case where one of the frameworks could prove to provide a better useability
depending on the purpose it is used in.
28Create React App vs NextJS
Jens Johansson 2021–06–21
6.5.3 Other research areas
As previous research also has stated, there is many different aspects that can
be taken in consideration when performing a comparison of frameworks
and the subjects that has been brought up in this study is not the limit.
The functionality in different scenarios can differ and one framework can
be more efficient in one area meanwhile the other framework might be an
advantage in other areas. Research can be done by implementing different
frameworks in specific scenarios to see whether there is a difference within
the specific scenario. An example scenario could be an E-Commerce appli-
cation.
29Create React App vs NextJS
Jens Johansson 2021–06–21
References
[1] React - A JavaScript library for building user interfaces. URL : https : / /
reactjs.org/. Accessed: 2021-04-03.
[2] Introducing JSX. URL: https : / / reactjs . org / docs / introducing -
jsx.html. Accessed: 2021-04-15.
[3] Rendering Elements. URL: https : / / reactjs . org / docs / rendering -
elements.html. Accessed: 2021-04-20.
[4] Introduction to the DOM. URL: https://developer.mozilla.org/en-
US/docs/Web/API/Document_Object_Model/Introduction. Accessed:
2021-04-20.
[5] VirtualDOM and Internals. URL: https : / / reactjs . org / docs / faq -
internals.html. Accessed: 2021-04-20.
[6] Components and Props. URL: https://reactjs.org/docs/components-
and-props.html. Accessed: 2021-04-20.
[7] Create React App. URL : https://create- react- app.dev/. Accessed:
2021-04-15.
[8] Folder structure. URL: https://create-react-app.dev/docs/folder-
structure/. Accessed: 2021-05-26.
[9] Pages. URL: https : / / nextjs . org / docs / basic - features / pages.
Accessed: 2021-05-26.
[10] Alexander Dawson. Future-Proof Webdesign - A survival Guide. John
Wiley Sons, Ltd, 2012.
[11] What is DevOps? URL: https://aws.amazon.com/devops/what- is-
devops/. Accessed: 2021-04-24.
[12] Martin Fowler. Continuous Integration. 2006. URL: https://www.martinfowler.
com/articles/continuousIntegration.html. Accessed: 2021-06-01.
[13] Martin Fowler. Keep the build fast. 2006. URL: https://www.martinfowler.
com / articles / continuousIntegration . html # KeepTheBuildFast.
Accessed: 2021-06-01.
[14] What is Continuous Delivery? URL : https : / / continuousdelivery .
com/. Accessed: 2021-04-22.
[15] The deployment pipeline. URL: https : / / continuousdelivery . com /
implementing/patterns/#the-deployment-pipeline. Accessed: 2021-
04-22.
[16] What is AWS? URL: https://aws.amazon.com/what-is-aws/?nc1=f_
cc. Accessed: 2021-04-22.
[17] AWS Management Console. URL : https://aws.amazon.com/console/.
Accessed: 2021-04-22.
30Create React App vs NextJS
Jens Johansson 2021–06–21
[18] What Is Amazon DynamoDB? URL: https://docs.aws.amazon.com/
amazondynamodb/latest/developerguide/Introduction.html. Ac-
cessed: 2021-04-22.
[19] What is an API? URL: https : / / www . redhat . com / en / topics / api /
what- are- application- programming- interfaces. Accessed: 2021-
04-23.
[20] What is Amazon API Gateway? URL: https://docs.aws.amazon.com/
apigateway/latest/developerguide/welcome.html. Accessed: 2021-
04-23.
[21] What is AWS Lambda? URL: https://docs.aws.amazon.com/lambda/
latest/dg/welcome.html. Accessed: 2021-04-23.
[22] What is Amazon S3? URL: https://docs.aws.amazon.com/AmazonS3/
latest/userguide/Welcome.html. Accessed: 2021-04-23.
[23] Serverless on AWS. URL: https://aws.amazon.com/serverless/. Ac-
cessed: 2021-04-22.
[24] Serverless Framework Documentation. URL: https://www.serverless.
com/framework/docs/. Accessed: 2021-04-22.
[25] Chris Chapman. Deploying Code Faster with Serverless Framework and
AWS Service Catalog. 2019. URL: https : / / aws . amazon . com / blogs /
apn/deploying- code- faster- with- serverless- framework- and-
aws-service-catalog/. Accessed: 2021-04-22.
[26] TypeScript for JavaScript Programmers. URL: https://www.typescriptlang.
org / docs / handbook / typescript - in - 5 - minutes . html. Accessed:
2021-04-26.
[27] About ESlint. URL : https : / / eslint . org / docs / about/. Accessed:
2021-04-26.
[28] Concepts. URL: https://webpack.js.org/concepts/. Accessed: 2021-
04-26.
[29] Eric Molin. “Comparison of Single-Page Application Frameworks”.
PhD thesis. KTH Royal Institute of Technology School of Computer
Science and Communication, 2016.
[30] Dasari Hermitha Curie, Jaison Joyce, Yadav Jyoti, et al. “Analysis on
Web Frameworks”. In: Journal of Physics: Conference Series 1362.012114
(2019).
31You can also read
