Creating a method to evaluate frameworks used to build web applications Tony Eriksson Tony Eriksson Spring 2020 Degree Project in Interaction Technology and Design, 30 credits Examiner: Ola Ringdahl Master of Science Programme in Interaction Technology and Design, 300 credits Abstract Single page applications are a new kind of applications, these run in almost any web-browser and can therefore use the same code-base in- dependent of the platform that they are used on. To create a Single Page Application a framework for development is often used. Today there ex- ists a wide variety of such frameworks, most with their own specialties and drawbacks. How well different development frameworks made to create Single Page Applications fits a project depends on the situation. This work is creating a framework to evaluate how well a development framework fits in any given project. Blazor are a new framework that can be used to create Single Page Applications. Once the evaluation framework were defined it was used to evaluate how good Blazor would be if it would be used to develop a specific application. By doing this the framework are tested and at the same time knowledge about Blazor are obtained. The work is concluded by application of the developed framework and showing that Blazor are a good fit given the scenario. This evaluation also demonstrates the power of the evaluation frame- work and leads to the conclusion that it is a good tool that can help strengthen decision on whatever or not to use a specific framework. Acknowledgements I would like to express my gratitude to my two supervisors. Henrik Schafer¨ for his valuable help to get me setup and started at Vitec and for his contin- uous interest in my work. Anders Broberg for his ongoing feedback throughout this work. Contents 1 Introduction 2 1.1 Project Partner 2 1.2 Problem Description 3 1.3 Project Structure 4 2 Pre-Phase and History 5 2.1 A introduction to Single page frameworks 5 2.2 Blazor 6 2.3 Single page applications 6 3 Building a Testing Framework 7 3.1 Scalability, performance and legacy support 7 3.1.1 Summary 8 3.2 Testability and debugging 9 3.2.1 Modularity and loose coupling 10 3.2.2 Summary 10 3.3 Community and documentation resources 10 3.3.1 Summary 11 3.4 Code quality 11 3.4.1 Defining Quality 12 3.4.2 Filling the criteria for Quality 13 3.4.3 Summary 13 3.5 Chapter summary 14 4 The Testing Framework 15 4.1 Scalability, performance and legacy support 15 4.1.1 Scalability and Performance 15 4.1.2 Legacy support 16 4.1.3 Numerically evaluating results 16 4.2 Testability and debugging 17 4.3 Community and documentation support 17 4.4 Code quality 18 4.5 Summary 19 5 A Theoretical Evaluation of Blazor 20 5.1 Measuring values of the framework 20 5.1.1 Context of evaluation 20 5.2 Estimating the performance, scalability and legacy support of Blazor 21 5.2.1 Expansion possibilities 21 5.2.2 Scale capabilities with regards to change in system load 22 5.2.3 Supporting the intended target group 24 5.2.4 Support for long lasting continued development 25 5.2.5 Section Summary 26 5.3 Evaluating the testability and debugging options of Blazor 26 5.3.1 Tight coupled elements 26 5.3.2 Toolset of the framework 28 5.3.3 Section Summary 30 5.4 Estimating community and documentation resources available to Blazor. 30 5.4.1 Community size 30 5.4.2 Angular 30 5.4.3 Stars on github 31 5.4.4 Value of open source 32 5.4.5 Documentation Quality 33 5.4.6 Maturity and adoption 34 5.4.7 Section Summary 35 5.5 Evaluating code quality with Blazor 35 5.5.1 Development environment support 35 5.5.2 Design pattern support 36 5.5.3 Section Summary 37 5.6 Theoretical Summary 38 6 A Practical Evaluation and implementation with Blazor 39 6.1 The value and premises of a practical evaluation 39 6.2 Testing environment and machine 40 6.3 Program flow 40 6.4 The Prototype 41 6.4.1 Prototype structure 41 6.4.2 Final prototype 41 6.5 Implementation 42 6.5.1 Components 43 6.5.2 Debugging and testing 45 6.5.3 Implementation time 46 6.5.4 Implementation Result 46 6.6 Summary 46 7 Evaluating Results and a final Conclusions 48 7.1 Results of evaluation 48 7.1.1 Summary of results from the theoretical evaluation 48 7.1.2 Verification and Contradictions found by the Practical Implementation 49 7.2 Limitations in the work 49 7.3 Final Conclusion 49 8 Summary 51 9 Future work 52 1(54) List of Figures 1 tight coupled class without dependency injection 27 2 loose coupled class with dependency injection 27 3 Diagnostics panel from visual studio 2019 29 4 Growth of stars over time of aspnetcore on github 31 5 Growth of stars over time of angular on github 32 6 Percentage of question tagged with Blazor on Stackoverflow 35 7 Percentage of question tagged with Angular on Stackoverflow 36 8 System specifications of development machine 40 9 flowchart visualizing interaction flow in the original application. Due to the sensitive nature of the data all names have been blurred out. 41 10 One part of the prototype displaying its structure. Due to the sensitive nature of some data all property names have been blurred out. 42 11 data-flow from parent to child in Blazor components. names have been blurred out. 44 12 A page of the final product implemented using Blazor Server. Due to the sensitive nature of some data all names have been blurred out. 47 2(54) 1 Introduction The tech-world is rapidly changing with new techniques and methods constantly being de- veloped and launched. This makes it possible for companies to consistently provide better and more involved experiences for their users on their homepages. When looking at web development the expectations on the user experience on tech companies homepages are high. To really stand out it is fundamental that the correct technique is chosen when their pages or web applications are built. Making a incorrect choice of the most appropriate framework for development can come with huge costs in both development costs and time spent. There is also the possibility that an incorrect choice leads to problems with frame- work limitations. The purpose of this work is to narrow down the risk that companies make these kinds of mistakes by proposing a method, or perhaps better worded, a framework to help guide companies in their choice of a development framework. In the making of this framework different methods and important aspects of development are explored and identified. By highlighting these parameters, they can be used as input parameters for the evaluation framework. After defining the framework, it will be applied and used to evaluate Blazor. Blazor is a framework for development of Single Page Applications. The theoretical findings are then further verified by observations and knowledge gathered from an actual implementation. By comparing the output of the framework with some practical imple- mentations the promises made by the framework can be compared and verified by insights gathered for real implementations. By doing this, the reliability of the framework is further tested. 1.1 Project Partner The project was performed at Vitec, in Umea.˚ Vitec is a market leading company for Vertical Market Software in the Nordic region. The group was founded in 1985 and as of today they have around 700 employees. Vitec has an interest to transfer some of their applications from native implementations onto the web by remaking them in form of Single page applications. This could have a variety of different benefits. One is that maintenance of the applications over different platforms becomes easier to perform. Another is that some of the older ap- plications can benefit from newer design patterns and principles during re-implementation. Before the company moves their apps, they need to choose which underlying framework to use. Since Blazor looks like a promising framework, but is not yet a widely adopted one, more evaluations of its capabilities are needed. 3(54) 1.2 Problem Description Vitec have an interest in exploring and evaluating the possibilities with Blazor. Evaluation of frameworks for development is currently a difficult task that requires a variety of audits and evaluations. Because Vitec, like many other software developers, develops a variety of different programs for different platforms and different target groups this task often must be repeated and redone for each new project. This work seeks to solve this recurring problem of constant, time-consuming reevaluation by creating a general testing framework for this type of evaluation. By providing this kind of framework evaluation and decisions that otherwise would be both time and energy -consuming can be optimized and performed on a much faster phase. After the evaluation framework is defined the problem at hand is solved by putting the framework to use and an theoretical evaluation of Blazor is thereby obtained. To strengthen the theoretical results that the testing framework provides, one of Vitec’s applications gets re-implemented using Blazor. By remaking one of Vitec’s existing programs they get a chance to see and evaluate some actual results of implementations done in Blazor. At the same time theoretical evidence found using the framework can be evaluated with an actual implementation as a foundation and thereby ensure the validity of the frameworks theoreti- cal output.