Evaluating Blazor WebAssembly for the Progressive Web Application Front-End A Comparative Study Using ReactJS as a Baseline Main Subject area: Computer Engineering Authors: Vida Rashidi, William Segelström Supervisor: Denis Golubovic JÖNKÖPING 2021 August 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: Johannes Schmidt Supervisor: Denis Golubovic Scope: 15 hp Date: 2021-08-19 i Abstract This study is conducted to evaluate the Blazor WebAssembly framework for the Progressive Web Application (PWA) methodology. A comparative study is conducted with a ReactJS PWA as a baseline. The two frameworks are evaluated in their front-end performance and documentation of PWA- focused subjects. Front-end performance is measured between two experimental applications that test the loading times, heap memory usage and loading consistency during layout generation. It is found that a Blazor WebAssembly PWA takes on average a range of 0.34, 0.18, and 0.06 seconds less time to generate a layout than a ReactJS PWA. The Blazor WebAssembly PWA was less consistent in its loading times when handling many elements. Documentation that covers Progressive Web Application terminology was found to be different between the frameworks. The Blazor WebAssembly documentation covers more topics and provides first-hand knowledge while the ReactJS documentation covers fewer topics and relies on external sources to provide the necessary explanations. These findings indicate that Blazor WebAssembly is a faster framework when updating large amounts of elements in comparison to ReactJS. However, the ReactJS PWA was found to be overall more consistent in its loading times. Documentation varied between the two frameworks. Documentation in Blazor WebAssembly covers more Progressive Web Application subjects and is more in-depth than ReactJS. This study only evaluates applications developed in ReactJS and Blazor WebAssembly. Both are tested on Google Chrome in a desktop environment. Keywords: Blazor WebAssembly, .NET, WebAssembly, ReactJS, JavaScript, Progressive Web Application, Virtual DOM ii Table of content Abstract ii 1 Introduction 1 1.1 Background 1 1.2 Problem statement 2 1.2.1 PWA and Web Frameworks 3 1.2.2 Layout Generation in a PWA 3 1.2.3 Why ReactJS Is Selected For Comparison 4 1.3 Purpose and research questions 4 1.3.1 Presentation of Research Questions 5 1.4 Scope and limitations 5 1.5 Disposition 6 2 Method and Implementation 7 2.1 RQ 1 - Literature Study 7 2.2 RQ 2 - Experiment Design and Execution 8 2.2.1 Implementation details 12 2.2.2 Specifications 16 2.2.3 Measuring Performance in Chrome DevTools 16 2.3 Method Motivation 17 2.4 Data collection 17 2.4.1 Gathering Performance Profiles for the Experiment 17 2.4.2 How the Experiment Is Automated 18 2.4.3 Collecting Information for the Literature Study 19 2.5 Data analysis 20 2.5.1 Experiment - Comparing Means of Independent Samples 20 2.5.2 Literature Study 22 2.6 Validity and reliability 22 2.6.1 Validity 22 2.6.2 Reliability 22 2.7 Considerations 23 2.7.1 Selection of Sources 24 iii 2.7.2 Implementation Fairness 24 3 Theoretical framework 27 3.1 Research Questions Related to the State of the Art 27 3.2 Technical Components of the Study 29 3.2.1 Progressive Web Application 29 3.2.2 WebAssembly 31 3.2.3 Virtual DOM 31 3.2.4 Blazor WebAssembly 32 3.2.4.1 C# Timer class 34 3.2.5 ReactJS 35 3.2.6 V8 JavaScript Engine 35 4 Results 38 4.1 PWA support for each framework 38 4.1.1 Blazor WebAssembly 39 4.1.2 ReactJS 41 4.2 Experiment Sessions 42 4.2.1 Session 1 - 720 pairs 42 4.2.2 Session 2 - 360 pairs 43 4.2.3 Session 3 - 180 pairs 44 4.3 Data Analysis 45 4.3.1 RQ 1 - Literature analysis 45 4.3.1.1 Analysis of results for Blazor Wasm 45 4.3.1.2 Analysis of results for ReactJS 45 4.3.2 RQ 2 - Experiment analysis 46 4.3.2.1 RQ 2.1 - Time difference 46 4.3.2.2 RQ 2.2 - Tree sizes 47 4.3.2.3 RQ 2.3 - Consistency in Loading Times 49 5 Discussion 51 5.1 Results discussion 51 5.1.1 PWA Support in the Blazor Wasm documentation 51 5.1.2 Virtual DOM differentiation 52 iv 5.2 Method discussion 54 5.2.1 When Analysing Memory From the Experiment 55 6 Conclusions and further research 57 6.1 Conclusions 57 6.1.1 Blazor WebAssembly as a PWA framework 57 6.1.2 Blazor WebAssembly and VDOM Generation 57 6.1.3 Practical implications 58 6.1.4 Scientific implications 58 6.2 Further research 58 7 References 59 8 Appendixes 64 Appendix 1 GitHub Repository of Source code for experiment PWAs and Python scripts used to collect and analyse retrieved data 64 v 1 Introduction In this section, the reader is introduced to the elements that are included in this study as well as the problem statement. This section also includes background information required for understanding the purpose of this study. Cross-platform development is the development of software that is not dependent on a specific platform. There are multiple methodologies for developing cross-platform software. One methodology proposed for cross-platform development is Progressive Web Applications (PWA). PWAs are web applications, which means that any web framework can be used to develop a PWA. The large selection of frameworks is making it difficult to select the most appropriate one for PWA development. This is because no established web framework is presented as a PWA-specific one. For this study, selected frameworks are scrutinized in the aspects of support for the PWA methodology and their front-end performance. The scrutiny is done by a comparative study between the two web frameworks. The two selected frameworks for this study are Blazor WebAssembly (Blazor Wasm) and ReactJS. The goal of this study is to create an understanding of how the selected frameworks support the PWA methodology and how well their front-end performs in a PWA runtime environment. 1.1 Background PWAs are web applications that can be installed locally. PWAs are installed by visiting a website that fulfils the PWA requirements and via the browser interface downloads the application. Figure 1 shows how the installation prompt appears to the user. Google Chrome is a web browser that is part of the Chromium project, which is an open-source initiative by Google. Amongst the requirements for a valid PWA is the inclusion of a service worker, this is a separate script that must listen for a set of events. Figure 1: Installation prompt on Google Chrome User engagement is why developers need to use a fast and efficient front-end framework to develop their application. If an application takes a long time to load it increases the probability of a bounce. A bounce is defined as a user arriving at a page but then leaves during loading (An, 2018). The front-end of a framework handles the look and behaviour of the user interface, which in turn determines the user experience. 1 Both Blazor Wasm and ReactJS are front-end frameworks, making user engagement relevant for this paper. WebAssembly and JavaScript are standards in programming for web browsers. Blazor Wasm executes its source code by using a runtime written in WebAssembly. The Blazor Wasm runtime is interpreted by the browser. ReactJS is written in JavaScript and its source code is directly interpreted. Both Blazor Wasm and ReactJS provide a programming interface for the developer to alter the user interface. The interfaces achieve this by interacting with the Document Object Model. The Document Object Model (DOM) is a programming interface used to alter Hypertext Markup Language (HTML) documents as nodes in a tree structure. HTML documents along with additional styling represent the user interface on all web applications. The goal of DOM-altering interfaces found in Blazor Wasm and ReactJS is to streamline user interface development by providing generalised code syntax and auto-generation of DOM instructions. Auto-generation of DOM instructions are done using the Virtual DOM (VDOM) technique. When using VDOM, a light copy of the entire DOM is saved in memory to compare with the real DOM. Both frameworks use their own implementation of this technique. With WebAssembly being used for generating layouts for the DOM it is interesting to investigate what performance difference there is in comparison to established JavaScript frameworks. 1.2 Problem statement In this section, the problem is outlined with a smaller background supported by the state of the art. The presented problems regard the lack of PWA-centric frameworks and undocumented front-end performance of the Blazor WebAssembly framework. Developers at Google are developing additions to the Chromium project to further support PWAs running on the browser (Chrome Team, 2021) and argues that applications that have been re-developed to a PWA have a decreased bounce-rate (Google Chrome Developers, 2018). This is due to faster loading times and smaller file sizes when compared to the application before re-development. PWAs occupies a small portion of all web applications on the web. However, there is a steady increase in registered service workers (HM, 2020) indicating growth in PWAs. Hence, there is an indication of increasing adoption and support for PWAs. With the increasing adoption and support of PWAs, there are few indicators of which frameworks are best suited for PWA development.