EVALUATION OF THE BLAZOR FRAMEWORK - A COMPARISON BETWEEN BLAZOR AND REACT - DIVA
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Evaluation of the Blazor framework A comparison between Blazor and React Main Subject area: Computer Engineering Author: Emil Persson, Oliver Köping Supervisor: Denis Golubovic JÖNKÖPING 2021 07 01
This final thesis has been carried out at the School of Engineering at Jönköping
University within Computer Engineering. The authors are responsible for the presented
opinions, conclusions and results.
Examiner: Florian Westphal
Supervisor: Denis Golubovic
Scope: 15 hp (first-cycle education)
Date: 2021-07-01
i
Abstract
Blazor WebAssembly is a new framework that was released in May 2020 that makes it
possible to build client-side web applications using C# instead of using JavaScript for
its frontend. The most popular web frameworks today are JavaScript based frameworks.
This study aims to find out if Blazor is a viable option to use for developing web
applications and if it is a well-established framework compared to JavaScript
frameworks. To evaluate Blazor, a comparison is performed between Blazor and React
on six criteria. The criteria are lines of code, cyclomatic complexity, state management,
debugging tools, community, and libraries. To answer the criteria two applications was
developed, one in the React framework and one in the Blazor framework. Besides the
two applications, literature was gathered to answer the criteria. The results from the
comparison showed Blazor was a Viable option to use for the development of web
applications and that it has become established as a framework when taken its age in to
consideration.
Keywords: React, Blazor, WebAssembly, JavaScript, C#, web framework,
development.
iiTable of content
Abstract .......................................................................................... ii
Table of content ............................................................................ iii
1 Introduction ............................................................................. 1
1.1 COMPANY BACKGROUND ................................................................................. 1
1.2 PROBLEM STATEMENT ...................................................................................... 1
1.3 PURPOSE AND RESEARCH QUESTIONS ............................................................... 2
1.4 SCOPE AND LIMITATIONS .................................................................................. 2
1.5 DISPOSITION ..................................................................................................... 2
2 Background .............................................................................. 2
2.1 C# .................................................................................................................... 2
2.2 WEB FRAMEWORK ............................................................................................ 3
2.3 BLAZOR ............................................................................................................ 3
2.4 WEBASSEMBLY................................................................................................ 3
2.5 LIBRARY .......................................................................................................... 4
2.6 JAVASCRIPT ..................................................................................................... 4
2.7 REACT .............................................................................................................. 4
2.8 REDUX ............................................................................................................. 4
3 Method and implementation .................................................. 5
3.1 CRITERIA FOR COMPARISON ............................................................................. 5
3.2 EVALUATION CRITERIA .................................................................................... 6
3.2.1 Applications ............................................................................................. 6
3.2.2 Lines of code ............................................................................................ 7
3.2.3 Cyclomatic complexity ............................................................................ 7
3.2.4 State management .................................................................................... 8
iii3.2.5 Libraries ................................................................................................... 9
3.2.6 Community ............................................................................................ 10
3.2.7 Debugging tools ..................................................................................... 11
3.3 VALIDITY AND RELIABILITY ........................................................................... 11
4 Results ..................................................................................... 12
4.1 LINES OF CODE ............................................................................................... 12
4.2 CYCLOMATIC COMPLEXITY ............................................................................ 13
4.3 STATE MANAGEMENT ..................................................................................... 13
4.4 LIBRARIES ...................................................................................................... 13
4.5 COMMUNITY .................................................................................................. 14
4.5.1 Stack Overflow questions ...................................................................... 14
4.5.2 Github repositories ................................................................................. 15
4.5.3 Github contributors ................................................................................ 16
4.5.4 Github repository stars ........................................................................... 17
4.6 DEBUGGING TOOLS ........................................................................................ 18
5 Discussion ............................................................................... 20
5.1 RESULT DISCUSSION ....................................................................................... 20
5.1.1 Lines of code .......................................................................................... 20
5.1.2 Cyclomatic complexity .......................................................................... 20
5.1.3 State management .................................................................................. 21
5.1.4 Libraries ................................................................................................. 21
5.1.5 Community ............................................................................................ 21
5.1.6 Debugging tools ..................................................................................... 22
5.2 METHOD DISCUSSION ..................................................................................... 22
6 Conclusions and future research .......................................... 24
6.1 CONCLUSIONS ................................................................................................ 24
6.2 FUTURE RESEARCH ......................................................................................... 25
iv7 References .............................................................................. 26
8 Appendixes ............................................................................. 30
8.1 APPENDIX A ................................................................................................... 30
8.2 APPENDIX B ................................................................................................... 35
v1 Introduction
1.1 Company background
Saab Training and Simulation is a subsidiary of Saab AB that produces military and
security training systems for a variety of military forces. The branch that this thesis is
conducted on is the branch that works with developing applications that supports the
training of military personnel. Saab has interest in exploring if Blazor is a viable option
to use for front-end web development. The language that is used at Saab for
development is mainly C# and therefore Saab wants to explore the Blazor framework
which is based on C#.
1.2 Problem statement
In May 2020 Blazor web assembly was released by Microsoft which makes it possible
to build client web applications using C#. Blazor web assembly allows applications to
be built using C# instead of previous applications that relied on JavaScript for its front-
end. C# is to date the 4th most popular programming language and has approximately
31% of all developers using it to some extent. C# has the 3rd largest community on
Stack Overflow (Mkhitaryan, 2021). This shows that Blazor is worth researching in,
since it could have a big impact on many developers.
At the time of writing there is not much research conducted on Blazor and this leaves a
gap to find out what advantages and disadvantages Blazor have compared to other well-
established frameworks, e.g., Angular, React and Vue. Previous research that has been
conducted has focused mainly on measuring the performance of Blazor, for example
application loading times, performance in calculations and operations. (Kozak, 2020;
Suryś, 2019). In a recent study Blazor was compared with Angular on nine different
criteria to find out how Blazor stands up to its competitors (Sandberg, 2021). This study
shows that Blazor is a new framework that needs to be researched about and compared
against other frameworks. It is relevant that more research is performed about Blazor
to make a more justified evaluation of its advantages and disadvantages. Blazor is still
in an early version of its development, and it is having a rapid growth (Hilton, 2020).
Companies and developers often stand in the choice of which framework to use for
development. There is today a cluster of frameworks to choose from in JavaScript, but
with Blazor it is something entirely new in web development. A C# based web
development framework is perhaps a milestone in the development of new frameworks
(Zobi Web Solutions, 2020).
11.3 Purpose and research questions
The purpose of this study is to gain more insight on Blazor, if it stands up to the most
popular JavaScript frameworks, in this case React. The study will be examining a set
of criteria that are later defined, these criteria will determine which of Blazor or React
is the more prominent choice. Two research questions are formulated that will be
answered by the criteria:
RQ1: What are the advantages and disadvantages with Blazor in developing Single
Page Applications compared to React?
RQ2: How well established is the Blazor ecosystem compared to React?
1.4 Scope and limitations
There are many different JavaScript frameworks, comparing more than one would take
an extensive amount of time. Therefore, the study is limited to only focus on comparing
towards one JavaScript framework, React. We choose React because it is one of the
most popular and well-established frameworks (GeeksforGeeks, 2020).
The comparison of Blazor against React will be based on a set of criteria. The study is
delimited to only measure a certain set of criteria, measuring too many criteria would
be too time consuming for the time this thesis has. Our definition of a framework
ecosystem contains the following criteria community and libraries. We delimit
ourselves to not conduct any performance testing on the frameworks due to making this
thesis superfluous.
1.5 Disposition
Starting in chapter two; background will explain the different concepts used throughout
the thesis. Then the methodology will be introduced, where the methods and approaches
for the study are defined, explained and how we will gather our data. After these, results
will be presented showcasing how the different criteria were measured and what the
results are. In the end of the thesis, a discussion and conclusion are made about the
findings from the study.
2 Background
This chapter includes a short background and description of important subjects that is
mentioned throughout the thesis.
2.1 C#
C# is an object-oriented programming language that was developed by Microsoft
around the year 2000. C# enables developers to build applications that run in the .Net
2ecosystem. The syntax of C# is similar to other C-languages including C and C++. The
language is officially based on C++, but it is to a great extent similar towards Java.
Programs written in C# runs on a virtual execution system called the common language
runtime (CLR). The CLR performs Just-In-Time (JIT) compilation that convert
intermediate language to native machine instructions (Microsoft, 2021).
2.2 Web framework
A web framework is designed to support and assist the development of web applications
and other web-based services. The Web frameworks provide a standardized way to
build and deploy applications, they automate the overhead associated with common
activities performed in web development. A framework often promotes the use of
libraries and code reuse. One of the defining principles of a framework is its design
pattern (inversion of control), it benefits the code by enforcing a workflow for the team
that is working with the framework. The framework forces you to code in a specific
way (Wikipedia, 2021).
2.3 Blazor
Blazor had its initial release in 2018 and is an open source and free web development
framework. It lets you build interactive web UI´s using C# instead of JavaScript. Blazor
can either be run on the client or the server, the code is written in C#. When running on
the client, Blazor takes advantage of WebAssembly to compile the C# code. When
running on the server the logic from the client is compiled on the server, client UI events
are sent back to the server using SignalR.
Blazor is built on open web standards without plug-ins or code transpiling. Since Blazor
is using the .NET Standard it can use existing .NET libraries. The .NET Standard allows
the same code and libraries to be used anywhere you write .NET code.
If needed, JavaScript APIs and libraries can be accessed by using JavaScript interop.
The logic is written in C# and the UI can be written in JavaScript and/or C# (Microsoft,
2021).
2.4 WebAssembly
WebAssembly (Wasm) is a binary format for a stack-based virtual machine. Wasm is
designed to compile and deploy different programming languages on the Web for client
and server applications. This means that Wasm can be used not only to compile C#
code. Wasm aims to be efficient and fast, safe, open and debuggable and being part of
the open web platform (Webassembly.org, 2021).
32.5 Library
A library (code library) is a collection of non-volatile resources often used in software
development, and these libraries can include configuration data, documentation, pre-
written code and more. The type of libraries used in web development are most often
JavaScript libraries. Libraries help during the development stages, allowing developers
to concentrate on other parts of the application (Wikipedia, Library(computing), 2021).
Almost all JavaScript libraries are under the Copycenter or Copyleft license to ensure
license free distribution, usage and modification. JavaScript libraries can ease with the
integration of other web development technologies, for example: CSS, PHP, Ruby and
Java (Wikipedia, JavaScript library, 2021).
2.6 JavaScript
JavaScript (JS) was developed by Brendan Eich in 1995, when working at NetScape.
JS is a multi-paradigm scripting language that is dynamic, it supports object oriented,
imperative, and functional programming. JS is primarily used on the client side of the
web, but it can be operated on the server-side with the use of Node.js (a JS Engine that
is used to execute JS code on a server) (Mozilla, 2021).
2.7 React
React is an open-source frontend JS Library for building UI components. Its initial
release was May 29, 2013. It is maintained by Facebook and a community of
individual developers and companies. (Wikipedia, React (JavaScript Library), 2021).
2.8 Redux
Redux is used for managing application state. It is an open-source JS library, and is
often used with React for building user interfaces (Wikipedia, Redux (JavaScript
library), 2021). To manage application state, it makes use of action, reducer, and store.
An action is a plain JS object that possess a Type field and it works as the carrier of
data between the application and the store. The reducer is triggered by an action and
based on what type it is it updates the store. The store is the part that utilizes all the data
that the application manages (Redux, 2021) .
43 Method and implementation
This chapter describes the method and implementation of the comparative study. The
comparative study is performed on Blazor compared with React based on a set of
criteria for each framework.
3.1 Criteria for comparison
The criteria used for the comparison between Blazor and React for answering the
research questions were collected from the articles: Factors and actors leading to the
adoption of a JavaScript framework (Pano, 2018), choosing the right JavaScript
framework for your next web application (Satrom, 2018), comparative evaluation of
JavaScript frameworks (Gizas, Christodoulou, & Papatheodorou, 2012). From these
articles six criteria were established to be used in the comparison that we considered to
be important to answer the research questions. The six criteria are lines of code,
cyclomatic complexity, state management, debugging tools, community, and libraries.
In the articles by Pano and Gizas, Christodoulou, & Papatheodorou Lines of Code and
Cyclomatic complexity is mentioned as valuable software metrics. They are two of the
more well-known and applied software metrics used when evaluating code. In Satrom
he examines what the different development environments for frameworks have to
offer. He examines what different possibilities each framework has for debugging.
What debugging support and tools they offer.
In Satrom the possibility to use state management for frameworks are discussed. Since
Blazor is based on C#, we wanted to explore if it is possible to implement state
management and if it is possible, how it is implemented compared to React. These
criteria provide the basis for answering what advantages and disadvantages with Blazor
in developing single page applications compared to React.
In the article by Satrom he defines what a framework ecosystem consists of. It is stated
that an important criterion to look at is community. To determine how well established
a framework ecosystem is. The popularity of the framework and the size of the
community is taken into consideration. The size of the community is mentioned to have
an impact on the number of available libraries to the framework. “Pay attention to the
size of the ecosystem as this is an indicator of the breadth of components you’ll have to
choose from for your app” (Satrom, 2018). Therefore, we decided to have a criteria
library that examines if popular libraries are available for both frameworks. To compare
the framework ecosystems, the two criteria community and libraries are used.
53.2 Evaluation Criteria
RQ1: What are the advantages and disadvantages with Blazor in developing Single
Page Applications compared to React?
To answer RQ1 two smaller applications were developed, these applications consist of
three components. The reason for this is that smaller applications are easier to compare,
and it gives a more reliable and valid result than a larger application would. By
developing smaller components that can be tested, there is more control over the code
to ensure that it follows the code standards for both the frameworks.
The criteria are examined and compared throughout the development process of the
applications, to see the advantages and disadvantages of each framework. The approach
to building these applications is made without prior knowledge or work in the
frameworks. This makes the study unbiased since there is no previous knowledge of
working in these frameworks.
RQ2: How well established is the Blazor ecosystem compared to React?
To examine how well established the Blazor ecosystem is compared to React two main
criteria are considered. The criteria that are used are community and libraries that are a
part of our definition of an ecosystem.
To examine the criterion community, we gathered data from established websites used
by developers. The data gathered are then used to understand which framework has the
more established ecosystem by comparing the data between the frameworks. The
libraries criteria are answered by gathering data from several websites.
The applications and the criteria used for answering these research questions are further
explained in the sub headers below.
3.2.1 Applications
Two applications were developed, one for each framework. The purpose of these
applications is to be used for testing our criteria. The applications are written as equal
as possible, with in mind that the frameworks use their own capabilities toward the
problems. The applications consist of three different components, it is within these
components where the data collection and testing will be conducted.
The first and smallest component is a simple “Counter” component whose purpose is
to push a button and increment a variable by one.
The second component is a “Calculator” and is more complex than the first component.
The calculator can make use of multiplication, division, addition, subtraction and power
based on two user inputs.
The third component is a small “Puzzle”, and it is of a similar size as the “calculator”
component. The goal of the puzzle is to click the correct operators in order to get the
6correct number. For example, you must get the number 8 and the user is offered with
the number 4, 5 and 10, the operators offered are multiplication and division.
3.2.2 Lines of code
Pano (2018) developed a model for what is interesting looking at in a framework. One
of the points that the authors mention is looking at lines of code (LOC). The authors
said, “The number of lines of code of the applications created by means of the
framework should be as low as possible.” (Pano, 2018).
To examine LOC, three components were developed for each framework to get a
reliable result. For example:
if(a == b)
{
printf("a is equal to b");
}
In this example we obtain four lines of physical code (LOC).
When comparing LOC, it is significant to use the same code standard for both
frameworks to limit the margin of error. The three components were coded in each
respective framework and took advantage of the functionalities of each framework.
With that said the output of the components would be the same, but the logical side
would look different.
3.2.3 Cyclomatic complexity
“Thomas McCabe introduced his famous cyclomatic complexity (CC) metric. Today,
it’s still one of the most popular and meaningful measurements for analyzing code.”
(Ebert, 2016).
CC is a count of the number of decisions made in the code. A decision can be defined
as a linearly independent path through a part of code. If the CC number is low, it
means the code is more efficient and is less prone to produce errors and on the
contrary if the CC number is high, it means the code is bad and more prone to produce
errors. The CC numbers can be categorized into different levels to show what the
meaning of the achieved CC is See figure 1.
7Figure 1, table displaying complexity values and meaning (guru99, 2021)
CC is used to measure the complexity of a program; it is a considerable way to improve
the quality of code and find out if software components can become difficult to test or
maintain. By using CC as a comparison between the two frameworks, it can show which
language has better maintainability and testability in the long run. CC remains a
valuable aspect to consider when choosing a framework for your project.
To examine CC between the two frameworks, three identical components were
developed in each framework to achieve a reliable result. The CC is then calculated
from these components functions and the result is compared. The CC is calculated
using ESLint (ESLint is a tool for analyzing JS code) for React and the built-in code
metrics tool in Visual Studio 2019 for Blazor. The calculation of the CC measures the
number of conditional statements in the code. It follows the formula CC = P + 1 where
P = the number of conditional statements. It will have one linear independent path if P
= 0. (McCabe, 1976)
3.2.4 State management
State management is an implementation of a design pattern that makes it possible to
synchronize the state of an application throughout all components in an application.
State management is often used with a library for its implementation. We looked at the
Redux pattern which is an evolution of Facebooks Flux pattern.
“Redux is a pattern and library for managing and updating application state, using
events called “actions”. (Redux, 2021).
Redux is frequently used in React for state management. We investigated if there
existed a similar solution for Blazor and if so, how it can be implemented in Blazor.
See figure 2 for a visualization of the Redux pattern. We examine if there exist libraries
8for Blazor to achieve the same result as Redux for React by searching for state
management libraries for Blazor. Subsequently a comparison was performed on how
the solution for state management can be implemented in Blazor compared to React.
Figure 2, visualization of the Redux pattern (AAMINE1965, 2018)
3.2.5 Libraries
We investigated if libraries for Blazor could provide the same functionality as the
libraries for React. React has been around longer than Blazor and the libraries that exist
are often more established and well-polished compared to a new framework’s libraries.
We compared five React UI libraries with Blazor. The five libraries used for the
comparison were chosen from nine numerous websites which possessed articles on top
react libraries. We counted which libraries were mentioned the most and selected these
for the comparison, see table 1.
9Name of library Nbr of mentions
Ant Design 8
Material-UI 8
Semantic UI React 7
React-Virtualized 7
React Bootstrap 6
Table 1 Nr of mentions, Websites that the data has been collected from (Barger, 2021) (Priya, 2021)
(brainhub, 2021) (Moor, 2021) (Doglio, 2019) (Davidson, 2021) (Gor, 2021) (Solanki, 2021) (Singh,
2021)
Ant Design: “Following the Ant Design specification, we developed a React UI library
antd that contains a set of high quality components and demos for building rich,
interactive user interfaces.” (ant.design, 2021)
Material UI: “Material-UI is a simple and customizable component library to build
faster, beautiful, and more accessible React applications.” (material-ui, 2021)
Semantic UI React: “Semantic UI React is the official React integration for Semantic
UI. jQuery Free. Declarative API. Augmentation. Shorthand Props” (react.semantic-ui,
2021)
React-Virtualized: “React components for efficiently rendering large lists and tabular
data” (react-virtualized, 2021)
React-Bootstrap: “React-Bootstrap replaces the Bootstrap JavaScript. Each
component has been built from scratch as a true React component, without unneeded
dependencies like jQuery.” (react-bootstrap, 2021)
These are the libraries that were used to discover if it is a bridge between the
frameworks when it comes to third party code. We examined if similar libraries exist
for Blazor and how well established those libraries are compared to the React libraries.
We compared the libraries using GitHub, we examined the number of stars, users and
contributors.
3.2.6 Community
“The community behind a framework is its heart and as such its size and contributors
signal the trust of developers in the technology.” (Pano, 2018).
Community size is important for a framework for it to thrive and evolve. Choosing a
framework that has many contributors is important, it makes it easier to achieve
10solutions to problems that are encountered when developing. It is an indicator of how
popular the framework is. If the framework is popular, it means it is more
straightforward to discover people that grasp how the framework works. This is a
critical aspect to consider. If the framework community is not thriving it can be hard to
find people that can work with the framework.
We looked at both React and Blazor´s community and analyzed how much they are
growing and the number of posts that has been made in total. And how many active
contributors each framework has and how many projects that are using Blazor or React.
We examined how many stars each GitHub repository had received as this is an
indicator to how popular the framework is.
We found our research-data on the most used websites for programmers, like Stack
Overflow and GitHub.
3.2.7 Debugging tools
The testing of the debugging tools was executed on four functions for both React and
Blazor. The functions had to be “identical” to make the results valid. The errors that
were produced for the testing were: A pointer outside the scope of an array, calling a
non-existing variable, missing quotation mark and a misspelling. These errors are then
examined on how the debugging tools display errors and how it offers a solution to the
problem. We used Visual Studio version 2019 for Blazor and for React visual studio
code was used; each framework has its inbuilt error correction tool which serves as a
debugging tool.
3.3 Validity and reliability
To ensure the comparison between the frameworks is reliable the methods used to make
the comparison are described and shown to make it possible for others to perform
similar tests. In the various criteria measured, often more than one test was performed.
By examining several components for the comparison, it helps to provide a more
reliable and valid result. By defining clearly what the criteria are going to measure it
ensures the results are valid. Since the results can then be reproduced by others
performing similar research.
The code that is written in both React and Blazor follows the framework guidelines for
how the code is to be written. This is to make sure that others who intend to perform
similar tests can follow the framework documentation to achieve similar results. With
code however it does come with its limitations, it is always prone to alterations and the
frameworks may alter in how the code is supposed to be written.
114 Results
In this chapter we will present the thesis findings during our research and testing.
4.1 Lines of code
To compare LOC in Blazor and React, we utilized our applications and the three
components.
Findings of the first component “Counter”. The Blazor component is 10 LOC long and
is compact and fundamental, see appendix A.1. Compared to the React component,
which is 15 LOC long. The React component is 50% larger compared to the Blazor
component, see appendix A.2.
Findings of the second component “Calculator”. The Blazor component is 40 LOC and
the React component is 56 LOC, see appendix A.3 and A.4. The React component was
40% larger than the Blazor component. A subtler difference between the components
compared to the first component.
Findings of the third component “Puzzle”. The Blazor component is 38 LOC and the
React component is 56 LOC, see appendix A.5 and A.6. The difference between these
components is vaster than the second component and the React component is 47%
larger than the Blazor component. See figure 3 for a summary of LOC in the
components.
Figure 3, summary of LOC for each component.
124.2 Cyclomatic complexity
Findings of the first component “Counter”. The measured CC of the function in the
component counter in Blazor were calculated to have a CC of one and the CC of the
function in React were one. See appendix A.1 and A.2.
Findings of the second component “Calculator”. The measured CC of the function in
the component counter in Blazor were calculated to have a CC of seven and the CC of
the function in React were seven. See appendix A.3 and A.4.
Findings of the third component “Puzzle”. The measured CC of the functions in the
component counter in Blazor were calculated to have a CC of nine and the CC of the
functions in React were nine. See appendix A.5 and A.6.
4.3 State management
From our research we found that a library named Fluxor could achieve a similar result
as the Redux library. Fluxor is developed to implement the Redux pattern for Blazor
applications. The solution for solving state management could be implemented utilizing
the same structure as Redux. Fluxor made use of the corresponding properties as Redux,
Implementing Actions, Reducers and Stores.
4.4 Libraries
AntDesign: The creators of React AntDesign had equally developed one for Blazor.
This means the Blazor counterpart includes the same components that React AntDesign
offers. Comparing the two libraries on each of the libraries respective GitHub (ant-
design, 2021), (ant-design-blazor, 2021) displayed the following result: Blazor
AntDesign has over 3,300 stars, 87 contributors and users are not specified. React
AntDesign has over 6,700 stars, used by over 206,000 developers and has 1,408
contributors.
Material UI: From what we could find there is a library that matches the React library.
The name of the library is MatBlazor and it is based on Material. It offers similar
components compared to Material UI. However, Material UI offers a more extensive
variety of components than MatBlazor. MatBlazor is a simpler version of Material UI.
On each of the libraries respective GitHub (MatBlazor, 2021), (material-ui, 2021)
MatBlazor has over 2,400 stars, used by over 1,200 developers and has 46 contributors
and Material UI has over 68,200 stars, used by over 55,400 developers and has 2,180
contributors.
Semantic UI: From what we discovered when we did research, is that there is an
upcoming library in Blazor named “SemanticBlazor that focus on bringing in Semantic
UI to Blazor. SemanticBlazor does not offers the number of components that Semantic
UI and is not as complex. On each of the libraries respective GitHub (SemanticBlazor,
132021) (Semantic-UI-React, 2021) SemanticBlazor has 3 stars and does not have
contributors and users specified. Semantic UI has over 12,200 stars, is used by over
114,000 developers and 307 contributors.
React-Virtualized: BlazorVirtualScrolling is a Blazor library that offers a similar
solution with a large amount of data in a list or table. However, the library is not as
established as its counterpart React-Virtualized. On each of the libraries respective
GitHub (react-virtualized, 2021), (BlazorVirtualScrolling, 2021)
BlazorVirtualScrolling has 51 stars and no specified number of contributors and users.
React-Virtualized has over 21,700 stars, is used by 28,900 developers and has 197
contributors.
React-Bootstrap: Blazorise is a library that offers Bootstrap components for Blazor.
Blazorise the standard Bootstrap components like what React-Bootstrap offers. On each
of the libraries respective GitHub (Blazorize, 2021), (react-bootstrap, 2021) Blazorise
has over 1,900 stars, is used by 173 developers and 49 contributors. React-Bootstrap
has over 19,400 stars, used by 451,000 developers and 396 contributors.
Another finding was that Blazor can interop JavaScript libraries and use them as if they
were written in C#.
4.5 Community
4.5.1 Stack Overflow questions
When looking at how many questions that were active on Stack Overflow for each tag,
“Blazor” and “Reactjs.”, it showed that there are approximately 5,400 questions for
Blazor and for React it was close to 300,000 questions that had been asked, see figure
4. Looking at the number of questions that had been asked in the previous month it
showed that Blazor had approximately 250 questions, whereas React had close to 9,400
questions asked during the same time period.
14Figure 4, graph displaying Stack Overflow questions.
4.5.2 Github repositories
The number of repositories each of the frameworks had on GitHub was found by
searching for repositories with the tag “Blazor” and “React.”. React has over 2,000,000
repositories and for Blazor it is just over 14,000 repositories, see figure 5.
15Figure 5, graph displaying GitHub repositories.
4.5.3 Github contributors
When searching for how many contributors there were for the Blazor repository it was
not possible to determine an exact answer. Blazor represent a component of the
ASP.NET Core and it are, therefore, a part of a GitHub repository containing other
projects related to ASP.NET Core. The number of contributors to this repository were
899 contributors. For React there is 1,542 contributors that has contributed to the
GitHub repository, See figure 6.
16Figure 6, graph displaying GitHub contributors.
4.5.4 Github repository stars
To obtain an indication of the popularity of each framework, the number of stars for
each GitHub repository was taken into consideration. Blazor had been starred
approximately 21,800 times and React 167,000 times, see figure 7.
17Figure 7, graph displaying GitHub repository stars.
4.6 Debugging tools
The first test that was executed for both frameworks was to see what the error message
displayed when pointing outside the scope of an array. In Blazor the debugging tool
shows a descriptive error message, see appendix B.1. However, we do not get a message
on what line the error occurred which is not optimal. When testing the React function
the debugging tool did not indicate that something is wrong, no error message. See
appendix B.5 to see what the response were.
The second test is calling on a non-existing variable to see how the debugging tool
responds. In Blazor the debugging tool can recognize the problem when compiling the
code. The debugging tool shows what the problem is, and in which file the problem lies
on and what line the error occurred, see appendix B.2. We got a similar result in React.
The debugging tool showed what was wrong and where the error occurred. The error
message is shown on the browser instead of the code editor. React uses prewritten pages
for error handling and the console in the browser, see appendix B.6.
The third test involved a missing quotation mark. Both the frameworks debugging tools
reacted in the same way. We received a syntax error before we could run the
applications and where the error occurred, a red underline appeared to indicate where
the error occurred. See appendix B.3 for Blazor´s error message and appendix B.7 for
React.
18The fourth test is based on a misspelling error and how the debugging tool reacts when
code is misspelled. In Blazor the debugging picks up the syntax error right away and
makes it impossible to run the application without fixing the error. An error message is
presented, and the code that is at fault is underlined red, showing that it is written wrong,
see appendix B.4. In React the debugging tool does not pick up a syntax error or an
error message before compiling. The error occurs when compiling the code, the error
message does not recognize it as a misspelling. The debugging tool indicates that it is
a semicolon missing and displays which line of code that is causing the error, see
appendix B.8.
195 Discussion
In this chapter each criterion will be discussed and put in relation to the research
questions
5.1 Result discussion
5.1.1 Lines of code
React produces more LOC than Blazor. A reason for more LOC is that React requires
it to have a parent element in the HTML code which in Blazor is not required. This adds
two more LOC every time a logical line of code is implementing HTML elements. In
the “puzzle” component, this results in eight more LOC for the React component and
removing these eight lines would have reduced the difference from 34% to 24%, i.e., a
reduction of 10%. These extra div tags made the biggest difference in the first
component, if the div elements would not be necessary the React component would
have been 30% larger instead of 50%.
In these tests React produces 37,7% more LOC than Blazor on an average. 37,7%
sounds like a lot but the div elements adds 4,8%. And one more thing to take into
consideration is how we implement our Enum in the appendix A.5. We write the Enum
on one line which might not be standard when doing Enums, if it were not written on a
single line the Calculator component would be four LOC longer. Since we declare the
“State” on a single line in the React Calculator component, it is acceptable to write the
Enum on a single line in this example.
The results show that Blazor has an advantage over React when it comes to the number
of LOC that is written. Blazor applications result in less code being produced and this
will result in smaller applications than React applications.
5.1.2 Cyclomatic complexity
The results from analysing the code for CC showed that there was not a difference in
code complexity in functions between React and Blazor. The results were not as
expected since both frameworks make use of different languages, we expected there to
be a difference in CC. Which framework that had the better maintainability and
testability could not be determined since they achieved the same complexity. Blazor
and React had on this criterion no evident advantage or disadvantage to each other. Both
frameworks utilize the same capabilities regarding CC.
205.1.3 State management
The result showed Blazor had the same capability as React to implement State
management using libraries. State Management is frequently used in the development
of applications, and this shows that Blazor can be used for applications to handle state
management effectively. Redux is frequently used with React to develop applications
and with Fluxor accomplishing the same, we can achieve the same result as React but
for Blazor with Fluxor. The advantage React has is that Redux is a well-established
library and it has been around longer than Fluxor. Fluxor does not have as extensive
documentation as React. However, this can be expected to grow over time as the library
gets future updates.
5.1.4 Libraries
The results from the previous chapter displayed that Blazor could offer corresponding
libraries to the React libraries. However, when analyzing the results, it was clear that
the React libraries provided a stronger community and more features with the libraries
compared to the Blazor libraries. Blazor still managed to offer similar solutions like the
React libraries.
React possesses a minor advantage over Blazor, with its libraries it offers more tools,
and it has a larger community of developers backing it. With more developers working
on the library, it receives more frequent updates and features than the Blazor libraries.
As we mentioned before Blazor can adopt JS libraries, this is taken into consideration
when examining the results. The ability to interop JS libraries gives Blazor additional
options to use besides the libraries built for Blazor.
Blazor is a new framework, this results in that the libraries are newer and do not have
the same number of developers supporting them, compared to React. This is shown in
the research that React has a larger number of developers that helps to develop new
libraries and update existing ones.
5.1.5 Community
The results from the previous chapter were collected from data spanning from the initial
release dates of the frameworks until now. It was expected that React would have a
much larger community than Blazor. However, Blazor have taken foothold with a lot
of developers as the results showed it has amassed a sizeable community around it since
its release.
The result from this comparison shows that React is much more widely used and
maintains a more massive community supporting it. A reason for this is that React has
been around since 2013, Blazor is on the contrary distinctly new and was first released
with Blazor server in 2019 and Blazor Wasm released in 2020. It shows Blazor has a
long way to go before reaching the same widespread use that React has. The results
21show that React is more popular than Blazor, with a more prominent starred repository
and with a more considerable number of repositories being used.
The advantage that React has over Blazor with its large community is important to
consider when choosing which framework to work with. The number of developers
invested in the React framework lays ground for a vast network to connect with. It will
be easier to find solutions for problems that are encountered when developing single
page applications.
Blazor is as stated earlier, in an early stage of its release and it has been growing
steadily. As time moves on Blazor is likely to keep increasing, as it has been doing since
its release date.
5.1.6 Debugging tools
The results show that the Blazor debugging tools come up on top with a more precise
description of the errors that occurred. The Blazor debugging tools help to minimize
errors in the code in a more effective way than React by presenting more information
about errors that have occurred. A reason for Blazor having a better debugging
environment is because it makes use of Visual Studio which offers great debugging
options. React is on the contrary written with the help of a code editor and makes use
of extensions and the console for debugging. Blazor provides a sturdy foundation with
its debugging, and this can add value for it to becoming a more popular and well-
established framework. The debugging options for Blazor is an advantage over React,
however debugging is sufficient for React as well.
5.2 Method discussion
To perform the comparison between Blazor and React, two applications were developed
that could be used for testing. Besides this we gathered data from websites and peer
reviewed literature to find answers to our research questions. These approaches were
the ones we deemed would be the best way to answer our Research questions for the
time we had. The reason for this is that to fully answer the criteria we needed to use
both literature and the applications to get sufficient answers.
However, another approach could have been taken by performing an interview-based
study. By performing interviews with developers, we could have gathered information
to make a list of important criteria to developers when choosing a framework. This
could then have been the basis for the research instead of gathering criteria from
literature. Looking back at the scope and limitations chapter, we said that we would
delimit ourselves from measuring a larger number of criteria. This was a good decision
due to the amount of time this thesis has taken to conduct.
22In summary we think the approach we used for answering the research questions was
an applicable method to use in this comparison between Blazor and React. It provided
the appropriate means to achieve reliable results.
236 Conclusions and future research
In this chapter we present the conclusions from the criteria that was compared between
Blazor and React and how they answer the research questions. Future research that
could be performed is then presented.
6.1 Conclusions
The research questions that were to be answered from this study where: What are the
advantages and disadvantages with Blazor in developing Single Page Applications
compared to React? How well established is the Blazor ecosystem compared to React?
The first research question is answered by the criteria that were used for the comparison
between Blazor and React. The advantages that Blazor has, is that it can write more
compact applications by having a reduced number of LOC compared to React. It has a
better environment for debugging, offering more in terms of debugging help to
developers creating single page applications. The disadvantages Blazor has is that it
lacks in its community size not offering the same community support as React.
However, it is a new framework and that needs to be considered, it is likely that it will
grow in numbers as it is supported by Microsoft. Regarding state management both
frameworks could achieve the same. However, a disadvantage is that Redux for React
is more well established and it has more support than Fluxor for Blazor.
The criteria library showed both an advantage and disadvantage for the framework
Blazor. The advantage Blazor has is the possibility to make use of JavaScript libraries
using JS interop. The disadvantage that Blazor has compared to React is that it does not
have as well supported libraries.
The criteria cyclomatic complexity were too ambiguous to draw any advantages nor
disadvantages from. This criterion indicated that Blazor and React could achieve the
same results giving neither a clear advantage nor disadvantage.
The second research question is answered by the ecosystem we defined as community
and libraries. React is clearly a well-established framework with its large community
supporting it and extensive libraries that can be used with React. The Blazor ecosystem
is not as well established as React, However the results show that it is on its way to
becoming a more established framework. The community is sizeable considering its
age and it has a lot of libraries that are comparable to the ones used for React. The
ability to make use of JS libraries with Blazor is a strength to its ecosystem.
In conclusion Blazor is a valid option to use for the development of single page
applications and its ecosystem is established enough considering the age of the
framework compared to React.
246.2 Future research
Regarding future research it would be a good idea to perform interviews on a company
with different stakeholders to establish criteria that can be used for a comparison
between the Blazor framework with React. By performing interviews, new criteria that
are deemed important by the industry could be used for the comparison.
The ecosystem could be researched in the future to be compared with the numbers we
acquired through our research, to see if Blazor have gained in its popularity since our
research was conducted.
257 References
AAMINE1965. (2018, March 08). Ngrx-redux-pattern-diagram. Retrieved May 17,
2021
ant.design. (2021). introduce. Retrieved May 15, 2021, from ant.design:
https://ant.design/docs/react/introduce
ant-design. (2021). ant-design. Retrieved May 16, 2021, from GitHub:
https://github.com/ant-design/ant-design
ant-design-blazor. (2021). ant-design-blazor. Retrieved May 16, 2021, from GitHub:
https://github.com/ant-design-blazor/ant-design-blazor
Barger, R. (2021, April 8). react-libraries-you-should-use. Retrieved May 15, 2021,
from freecodecamp: https://www.freecodecamp.org/news/react-libraries-you-
should-use/
Blazorize. (2021). Blazorize. Retrieved May 16, 2021, from GitHub:
https://github.com/Megabit/Blazorise
BlazorVirtualScrolling. (2021). BlazorVirtualScrolling. Retrieved May 16, 2021, from
GitHub: https://github.com/SamProf/BlazorVirtualScrolling
brainhub. (2021, May 12). top-react-libraries. Retrieved May 16, 2021, from brainhub:
https://brainhub.eu/library/top-react-libraries/
Davidson, A. (2021). react-component-libraries. Retrieved May 17, 2021, from
codersera: https://codersera.com/blog/react-component-libraries/
Doglio, F. (2019, December 23). 13-top-react-component-libraries-for-2020-
488cc810ca49. Retrieved May 17, 2021, from blog.bitsrc:
https://blog.bitsrc.io/13-top-react-component-libraries-for-2020-488cc810ca49
Ebert, C. C. (2016). Cyclomatic Complexity. IEEE Software, 33(6),, 27–29.
doi:https://doi.org/10.1109/MS.2016.147
GeeksforGeeks. (2020, March 15). Top 10 Most Popular JavaScript Frameworks for
Web Development. Retrieved May 16, 2021, from geeksforgeeks.org:
https://www.geeksforgeeks.org/top-10-most-popular-javascript-frameworks-
for-web-development/
Gizas, A., Christodoulou, S., & Papatheodorou, T. (2012, april). Comparative
evaluation of JavaScript frameworks. Proceedings of the 21st international
conference companion on World Wide Web, (pp. 513-514). Retrieved from
ResearchGate:
https://www.researchgate.net/publication/254008963_Comparative_evaluation
_of_JavaScript_frameworks
26Gor, C. (2021). react-libraries. Retrieved May 17, 2021, from esparkinfo:
https://www.esparkinfo.com/react-libraries.html
guru99. (2021). cyclomatic-complexity. Retrieved May 28, 2021, from guru99:
https://www.guru99.com/cyclomatic-complexity.html
Hilton, J. (2020, October 27). Should Your Enterprise Pick Angular, React or Blazor?
Retrieved April 22, 2021, from Telerik: https://www.telerik.com/blogs/should-
enterprise-pick-angular-react-blazor
Holas, T. (2017). Angular vs. React: Which Is Better for Web Development? Retrieved
April 12, 2021, from toptal.com: https://www.toptal.com/front-end/angular-vs-
react-for-web-development
Kozak, K. &. (2020). Analysis of the Blazor framework in client-hosted mode. Journal
of Computer Sciences Institute, 16,, 269-273.
doi:https://doi.org/10.35784/jcsi.2019
MatBlazor. (2021). MatBlazor. Retrieved May 16, 2021, from GitHub:
https://github.com/SamProf/MatBlazor
material-ui. (2021). material-ui. Retrieved May 16, 2021, from GitHub:
https://github.com/mui-org/material-ui
McCabe, T. J. (1976). A Complexity Measure. in IEEE Transactions on Software
Engineering, vol. SE-2, no. 4, pp. 308-320. Retrieved from doi:
10.1109/TSE.1976.233837
Microsoft. (2021). A Tour of C# - C# Guide. Retrieved April 11, 2021, from
Docs.microsoft.com: https://docs.microsoft.com/en-us/dotnet/csharp/tour-of-
csharp/
Microsoft. (2021). Blazor | Build client web apps with C#. Retrieved April 11, 2021,
from dotnet.microsoft.com: https://dotnet.microsoft.com/apps/aspnet/web-
apps/blazor
Mkhitaryan, A. (2021). Why Is C# Among The Most Popular Programming Languages
in The World?. Retrieved February 19, 2021, from
https://medium.com/sololearn/why-is-c-among-the-most-popular-
programming-languages-in-the-world-ccf26824ffcb
Moor, T. D. (2021). best-react-component-libraries. Retrieved May 17, 2021, from x-
team: https://x-team.com/blog/best-react-component-libraries/
Mozilla. (2021). developer.mozilla.org. Retrieved April 12, 2021, from About
JavaScript - JavaScript | MDN.: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/About_JavaScript
27Pano, A. G. (2018). Factors and actors leading to the adoption of a JavaScript
framework. Empirical Software Engineering : an International Journal, 23(6),,
3503–3534. doi:https://doi.org/10.1007/s10664-018-9613-x
Priya. (2021, March 15). react-ui-component-libraries-frameworks. Retrieved May 17,
2021, from codeinwp: https://www.codeinwp.com/blog/react-ui-component-
libraries-frameworks/
react.semantic-ui. (2021). Retrieved May 16, 2021, from react.semantic-ui:
https://react.semantic-ui.com/
react-bootstrap. (2021). Retrieved May 15, 2021, from react-bootstrap.github:
https://react-bootstrap.github.io/
react-bootstrap. (2021). react-bootstrap. Retrieved May 16, 2021, from GitHub:
https://github.com/react-bootstrap/react-bootstrap
react-virtualized. (2021). react-virtualized. Retrieved May 16, 2021, from GitHub:
https://github.com/bvaughn/react-virtualized
Redux. (2021). Part 3: State, Actions, and Reducers | Redux. Retrieved April 12, 2021,
from redux.js.org: https://redux.js.org/tutorials/fundamentals/part-3-state-
actions-reducers
Redux. (2021, March 17). Redux Essentials, Part 1: Redux Overview and Concepts.
Retrieved May 16, 2021, from redux.js.org:
https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Sandberg, E. (2021). Evaluating Blazor : A comparative examination of a web
framework (Dissertation). Retrieved from
http://urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-173239
Satrom, B. (2018). Choosing the Right JavaScript Framework for Your Next Web
Application. Retrieved from Telerik:
https://www.telerik.com/whitepapers/kendo-ui/choosing-the-right-javascript-
framework-for-your-next-web-application
SemanticBlazor. (2021). SemanticBlazor. Retrieved May 16, 2021, from GitHub:
https://github.com/strakamichal/SemanticBlazor
Semantic-UI-React. (2021). Semantic-UI-React. Retrieved May 16, 2021, from
GitHub: https://github.com/Semantic-Org/Semantic-UI-React
Singh, N. (2021). top-5-react-ui-libraries-you-should-explore-in-2021. Retrieved May
19, 2021, from geeksforgeeks: https://www.geeksforgeeks.org/top-5-react-ui-
libraries-you-should-explore-in-2021/
28You can also read
