Blazor framework is a well-known framework among the .Net tech community. It is an open-source framework that is utilized to build single-page applications. It was created by Microsoft, which combines the traditional razor framework with the modern .Net and WebAssembly framework. What's more? It helps to build both server-side and client-side applications.
WELL, CURRENTLY, HOW DO WE CREATE WEB APPLICATIONS?
Building a web application using Blazor development, requires writing code for the server-side and client side. Many programming languages are available that help to write codes.
For building the server-side development, the developer can use the programming languages like C#, Java, PHP, etc. For client-side development, the JavaScript frameworks that can be utilized are Vue, Angular, React, and so on.
BLAZOR HOSTING MODELS
Blazor generally has two hosting models, one for the client-side and the other for server-side
- Blazor WebAssembly (refer to client-side)
- Blazor Server (refer to server-side)
BLAZOR WEBASSEMBLY (WASM)
Microsoft launched Blazor WebAssembly in May 2020. Wasm apps work in the browser. When a user accesses a web app or web page, all the client-side logic-related code and dependencies will get downloaded. Once everything is downloaded, any disconnect issues do not cause any complications. We can resume the program offline and synchronize the changes later.
PROS & CONS OF BLAZOR WEBASSEMBLY
PROS: • This allows the client site to run the application within the browser. Once the application is downloaded, you can disconnect the server. However, the app resumes work but is unable to interact with the server to extract new data. • The best thing about this hosting model is that it can fully harness customer capabilities and resources. • It does not require an ASP.NET core web server to host the application. • It significantly lowers the server load by fasting the load time as it requires only making the modifications in the DOM (Document Object Model).
CONS: • This hosting model is limited to browser capabilities. • There are limitations to the .NET standard compatibility and its debugging. • It requires Wasm-compatible client software and hardware. It means it only supports the latest browsers.
BLAZOR SERVER
Microsoft released Blazor server-side hosting model in September 2019. In the server-side hosting model, every change or event done on the client side can be conveyed to the server with the help of SignalR communication. The next step that the server does is to process the modifications and perform the necessary updates on the client-side UI. If this happens, it indicates that the UI rendering performs at the server end.
PROS: • Blazor web apps can load much faster as the server side pre-renders the HTML content. • It can effectively leverage the server's capabilities. • Server-side apps do not have any browser version restrictions. Therefore, it can work even with old browsers. • The pro advantage of the server-side hosting model is that it has enhanced security as it does not transmit the app code to the client.
CONS: • It requires that the connection to the server needs to be active. The web app cannot run without internet connectivity. • This hosting model needs an ASP.NET core server. • It has significant latency because the data is continually transmitted to and from the client server.
BLAZOR PROJECT STRUCTURE
To build a Blazor app, you must know the project structure of Blazor development. Let’s look at its structure.
1. PROGRAM.CS • This file comprises the Main()method, an entry point for Blazor Server and WebAssembly. • The Main()method is also known as CreateHostBuilder() in a Blazor Server project responsible for configuring the ASP.NET Core host. • For the Blazor WebAssembly project, the app component (a root component) is described in the main method. In the "App.razor file", the root component can be placed in the root project folder.
2.WWWROOT • It is a folder that is present in the root project folder and is considered a webroot folder.
• The webroot folder access static files like images, stylesheets, and more with a relative path to the webroot folder.
3. RAZOR COMPONENTS • Most of the files present in the Blazor projects are considered .razor files. It defines the necessary components which are responsible for the building of app UI. • The components used in the Blazor WebAssembly and Blazor server apps are identical in most cases.
4. PAGES FOLDER This folder comprises _Host razor page and routable components, which has .razor extension.
5. SHARED FOLDER It consists of Razor components and additional elements which can be shared within pages.
• MainLayout component ( MainLayout.razor): It is the component of the app layout. • MainLayout.razor.css: It's the stylesheet for the main layout of the app. • NavMenu component (NavMenu.razor): it utilizes a sidebar for navigation along with the Navlink component, which can enable links for navigation to further Razor components. • Navmenu.razor.css: It is a stylesheet for the navigation menu of the Blazor app. • SurveyPrompt component (SurveyPrompt.razor): It is a Blazor survey component.
6. _IMPORTS.RAZOR It incorporates razor directives that can be included in the component of an app.
7. APP SETTING FILES Environmental app setting files and appsettings.json help in offering the configuration setting to the Blazor app.
8. DATA FOLDER
This folder contains the WeatherForecast class and the WeatherForecastService implementation, which is capable of providing weather data to the FetchData component.