Evaluation of the Blazor Framework

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

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.

Table 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

iii

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

7 References ...... 26

8 Appendixes ...... 30

8.1 APPENDIX A ...... 30

8.2 APPENDIX B ...... 35

1 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 frontend. 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).

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

ecosystem. 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).

2.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, prewritten 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) .

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

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

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

Figure 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

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

Name 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

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

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

4.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,

2021) (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.

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

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

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

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

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

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

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

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

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

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

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

7 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

Gor, 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

Pano, 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/

Solanki, P. (2021, May 4). top-react-libraries-frameworks. Retrieved May 17, 2021, from mindinventory: https://www.mindinventory.com/blog/top-react-libraries- frameworks/ Suryś, D. S.-P. (2019). WebAssembly as an alternative solution for JavaScript in developing modern web applications. Journal of Computer Sciences Institute, 13,, 332-338. doi:https://doi.org/10.35784/jcsi.1328 Webassembly.org. (2021). WebAssembly. Retrieved April 11, 2021, from webassembly.org: https://webassembly.org/ Wikipedia. (2021). JavaScript library. Retrieved April 12, 2021, from wikipedia.org: https://en.wikipedia.org/wiki/JavaScript_library Wikipedia. (2021). Library(computing). Retrieved April 12, 2021, from Wikipedia.org: https://en.wikipedia.org/wiki/Library_(computing) Wikipedia. (2021). React (JavaScript Library). Retrieved April 12, 2021, from Wikipedia.org: https://en.wikipedia.org/wiki/React_(JavaScript_library) Wikipedia. (2021). Redux (JavaScript library). Retrieved April 12, 2021, from wikipedia.org: https://en.wikipedia.org/wiki/Redux_(JavaScript_library) Wikipedia. (2021). Web framework. Retrieved April 12, 2021, from wikipedia.org: https://en.wikipedia.org/wiki/Web_framework Zobi Web Solutions. (2020, December 16). Why blazor is the next big thing in the web app development. Retrieved April 22, 2021, from Zobiwebsolutions: https://www.zobiwebsolutions.com/blog/why-blazor-is-next-big-thing-in-web- app-development/

8 Appendixes

8.1 Appendix A A.1 Counter component in Blazor

A.2 Counter component in React

A.3 Calculator component in Blazor

A.4 Calculator component in React

A.5 Puzzle component in Blazor

A.6 Puzzle component in React

8.2 Appendix B B.1 Outside of Array Blazor

B.2 Calling on non-existing variable Blazor

B.3 Missing quotation mark Blazor

B.4 Misspelling Blazor

B.5 Outside of Array React

B.6 Calling on non-existing variable React

B.7 Missing quotation mark React

B.8 Misspelling React