Masaryk University Faculty of Informatics Ticket Reservation System using Blazor Bachelor’s Thesis Peter Bolfa Brno, Fall 2020 Masaryk University Faculty of Informatics Ticket Reservation System using Blazor Bachelor’s Thesis Peter Bolfa Brno, Fall 2020 This is where a copy of the official signed thesis assignment and a copy ofthe Statement of an Author is located in the printed version of the document. Declaration Hereby I declare that this paper is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Peter Bolfa Advisor: Ing. Lukáš Grolig i Acknowledgements These are the acknowledgements for my thesis, which can span multiple paragraphs. ii Abstract This thesis goal is to implement a free ticket reservation system for smaller cinemas using a new framework from Microsoft called Blazor. Firstly the current state of web application development is re- viewed, giving a summary on each of the well-known, currently most used JavaScript frameworks (Vue, React, Angular). It can be hard to decide what framework to pick. That is why the comparison section examines the popularity and performance factors of these frameworks. The implementation part was built using WebAssembly hosting model. In the WebAssembly chapter, the thesis quickly reviews what WebAssembly is, how this innovative technology works, and where it should be used. WebAssembly brought benefits and drawbacks, which are described in this chapter as well. Various advanced patterns were used throughout the implementa- tion and are explained in the architecture chapter, which focuses on the most important ones. Multiple cinemas should be able to use the resulting web applica- tion. This possibility opened up a new problem called multi-tenancy. The known approaches to solve multi-tenancy and what approach was used are described in the multi-tenancy chapter. In the last section of the theoretical part, a detailed inspection is given into the Blazor framework, reviewing Blazor’s internals, describ- ing its most essential features, which are also used in the implementa- tion part. The implementation part is separated into a database, back-end, and front-end part, speaking of problems that occurred during devel- opment and a way of resolving them. In the last chapter, a reader can find a listing of recommendations that should be followed when designing similar solutions in Blazor. iii Keywords Blazor, C#, WASM, JavaScript, ASP .NET Core, SQLite, EFCore iv Contents 1 Introduction 2 2 Current state of web development 3 2.1 Approaches in creating JavaScript solutions .........3 2.1.1 Bundler . .3 2.1.2 Components . .4 2.1.3 DOM . .4 2.2 React .............................5 2.2.1 JSX . .5 2.2.2 Virtual DOM . .5 2.2.3 Example of React application . .6 2.3 Vue ..............................6 2.3.1 Template Syntax . .7 2.3.2 Interpolations . .7 2.3.3 Directives . .7 2.3.4 Example of Vue application . .7 2.4 Angular ............................8 2.4.1 Regular DOM . .8 2.4.2 Directives . .8 2.4.3 Example of Angular application . .9 2.5 Comparison ..........................9 2.5.1 Popularity comparison . .9 2.5.2 Conclusion . 10 2.5.3 Performance comparison . 11 2.5.4 Conclusion . 12 3 WebAssembly 13 3.1 Pros and cons ......................... 13 3.2 When to use .......................... 13 3.2.1 Performance . 14 3.2.2 Portability . 14 3.3 Conclusion .......................... 14 4 Architecture 15 4.1 Tools .............................. 15 4.1.1 Entity Framework . 15 v 4.1.2 JavaScript interop . 15 4.2 Patterns ............................ 15 4.2.1 Dependency injection . 15 4.2.2 API . 16 4.2.3 Repository pattern . 16 4.2.4 CQRS . 17 5 Multitenancy 18 5.1 Known approaches ...................... 18 5.1.1 Database-per-tenant . 18 5.1.2 Separate schema . 19 5.1.3 Tenant column . 19 5.2 Conclusion .......................... 19 6 Blazor 21 6.1 Razor ............................. 21 6.2 Routing ............................ 22 6.3 Hosting models ........................ 22 6.3.1 WebAssembly hosting model . 22 6.3.2 Server hosting model . 23 6.3.3 Visual comparison of hosting models . 24 6.4 Component lifecycle methods ................. 24 6.5 Conclusion .......................... 26 7 Implementation 27 7.1 Solution structure ....................... 27 7.1.1 Client . 27 7.1.2 Server . 27 7.1.3 Shared . 27 7.2 Database ............................ 27 7.2.1 SQLite . 28 7.3 Database schema ....................... 28 7.4 Backend ............................ 29 7.5 Services ............................ 30 7.5.1 Mail service . 31 7.5.2 Payment timeout service . 31 7.5.3 API . 32 7.6 Front-end ........................... 32 vi 7.6.1 Components . 32 7.6.2 General . 33 7.6.3 SeatAdder . 33 7.6.4 ShowSeatAdder . 34 7.7 Reservation Flow ....................... 36 7.8 Front-end services ....................... 38 7.8.1 Authentication service . 38 7.9 Deployment and testing .................... 38 8 Recommendations 40 8.1 Do’s and Don’ts ........................ 40 8.1.1 Do . 40 8.1.2 Do not . 40 8.2 Solution structure ....................... 41 8.2.1 Client . 41 8.2.2 Server . 41 8.2.3 Shared . 42 8.3 Recommended libraries to use ................. 42 8.3.1 Blazorise . 42 8.3.2 HangFire . 43 8.3.3 Swagger . 43 8.3.4 BCrypt . 43 8.3.5 Stripe . 43 8.3.6 SendGrid . 44 9 Conclusion 45 Bibliography 46 vii List of Tables 2.1 Frameworks popularity - GitHub Stars(02.12.2020), NPM (22.11.2020), SO(03.12.2020) 10 2.2 Frameworks profiled by LightHouse - average of 5 runs 12 viii List of Figures 6.1 Visual comparison of Blazor hosting models, taken from [31] 24 6.2 Blazor lifecycle methods, taken from [32] 25 7.1 Schema of a database used in the application 29 7.2 Diagram of which layers does the incoming request gets through in the application 30 7.3 Example of a form which handles creating of a new hall 33 7.4 Creating hall layout 34 7.5 Show seat picking - bought seats are marked red, reserved orange and currently picked blue 35 7.6 Diagram of actions which are done when users reserves a seat 37 ix List of Codes 2.1 Button with counter in React . .6 2.2 Button with counter in Vue . .7 2.3 Button with counter in Angular . .9 6.1 Button with counter in Razor . 21 1 1 Introduction In these challenging times of COVID-19, many businesses had to be closed because of financial problems. One of the businesses that are closed is cinemas. Smaller local cinemas do not have sufficient amount of finances to secure their run. The open-source implementation of a ticket reservation system was created to support them. Most of the local cinemas still do not have any reservation system. This implementation can be used by any cinema, even if the cinema is beginning. These beginning cinemas can then spend their finances on obtaining movies, advertisements and attracting more clients rather than spending money on buying system. One of the requirements that had to be satisfied was that the im- plementation would be programmed in a C#. Because of that, Blazor seemed like the smartest choice. It is considered to be still young since its production version came out only about half-a-year ago. Blazor provides two hosting models. One is a server model where a server is created and then the front-end communicates with this server. The other model is the WebAssembly model, which opens a new door into web development, mainly because of its speed and porta- bility. WebAssembly is a new format of a low-level assembly-like lan- guage run by any modern web browser. Thanks to its low-levelness, it should run faster than a language mainly used in the web development area, JavaScript. The implementation was built in conventional order, starting from the database using SQLite as a provider, which appeared as the most straightforward choice for application needs. The back-end part was then created, including obliged services and a RESTful API, thanks to what the front-end can communicate to the back-end. In the last step, a front-end was created using the already mentioned Blazor. 2 2 Current state of web development When creating a new web application today, there is not much to choose from, speaking of programming languages. From these lan- guages, JavaScript has been around for the longest time and has gained massive popularity, which resulted in being the most used program- ming language in the world right now[1]. With the arrival of WebAssembly technology, the situation has slightly changed as it brings a new and different way of web develop- ment. More about WebAssembly can be found in chapter 3. The main problem with JavaScript frameworks is that the devel- opment environment changes quickly and often, meaning that many frameworks just come and go. There exist three main JavaScript frameworks which established over time, and have been used for a few years now, namely React, Angular, and Vue[2]. 2.1 Approaches in creating JavaScript solutions Most of the front-end frameworks share similar concepts of building solutions and approaches in creating applications. 2.1.1 Bundler The application usually consists of multiple JavaScript files bundled together into one final file executed in the browser. Example ofsuch bundler nowadays can be parcel or webpack. Module bundler is required because[3]: • Browser does not support module system, although this is not entirely true nowadays • It helps you manage the dependency relationship of your code, it will load modules in dependency order for you.