SunPoint IT Solutions



Building .NET Apps with Blazor

Today we will talk to you about the winner of java-script. we are talking about blazor technology. It allows you to write interactive programs that can run not only on the server side as well on the client side using the .NET platform. Over time, the development of the Blazor framework has been significantly influenced modern frameworks for creating client applications - Angular, React, VueJS. It manifests itself as components in the construction of the user interface. At the same time on the side client, and on the server side when defining the code as a programming language, C # is used instead JavaScript. Standard HTML and CSS are used to describe the visual interface. Blazor provides developers with the following benefits: ● Write web application code using C # instead of JavaScript ● Using the capabilities of .NET, namely .NET libraries when creating applications, security and performance of the .NET platform ● The client and server parts of the program can use common logic ● Using Visual Studio as a development tool, has built-in templates for simplified program creation ● Enables Full .NET debugging. (Enables full .NET debugging.) The key element of Blazor is the components. Everyone who has worked with client frameworks parties such as Angular, React, VueJS have encountered components that essentially structure the application. IN Blazor applies a similar concept. The component is an interface element, such as, certain content, menu, dialog box, data entry form. Components determine logic rendering interface elements, as well as the logic of user input processing. Components can be invested in other components. They can also be reused in other projects and transfer as a Razor class library. Functionally, Blazor is currently divided into three subsystems: Blazor Server In Blazor Server, the program runs on the server side. Update interface elements users, event handling, JavaScript calls on the client side are made using server-client interaction via SignalR. When a user interacts with an application in a browser, it triggers user interface events (for example, presses a button), the client sends information about the event to the server, and the server in turn processes the received information and sends to the client in response instructions on how to update interface elements. And this is similar to the approach used in ASP.NET WebForms. Since most of the logic of the program is focused on the server side, all the files that are are loaded by the client, have a much smaller size compared to Blazor WebAssembly. The program is not limited to the browser and can use the capabilities of server processing. The program can work with legacy browsers that do not support WebAssembly. The program requires constant support for network connection. Blazor WebAssembly Blazor WebAssembly allows you to create interactive one-page programs that run on user`s browser using WebAssembly technology. When building and running the Blazor program WebAssembly files with C # and Razor code are compiled into .NET builds. Then Blazor WebAssembly (a if more precisely the script blazor.webassembly.js) loads the runtime. By interacting with JavaScript, the Blazor WebAssembly framework can access the DOM and API browser. One of the benefits of Blazor WebAssembly is that it can optimize downloads. Even when unused code is removed by the linker (linker) IL (Intermediate)Language). In addition, all the necessary files are cached in the browser. Blazor WebAssembly is server independent. Static may be enough for us the server where all the program files are located. Which will be downloaded by the browser, and after that the program runs entirely on the browser side and is server-independent. Blazor WebAssembly has a number of limitations. For example, the browser must support WebAssembly technology - currently the latest versions of browsers (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge) support this technology. However, older versions or Internet Explorer do not have similar support. Also, the browser needs to download large files because the program works completely on the client side, which increases the load on the network and time download. In this case, the capabilities of the program are limited by the browser. Blazor hybrid This technology is in the early stages of development. With her help you can create cross-platform programs using blazor and xamarin.forms. To create a blazor app we need the latest version of visusal studio 2022. In it we choose create a new project and in the right drop down select the project type. As you can see, we have three available blazor subsystem. We will consider an example based on blazor webAssembly. Briefly about the structure: The wwwroot folder contains static program files. The css subfolder stores css style definitions, such as the bootstrap framework style file. The index.html file represents the main page on which the Blazor program will be loaded The Pages folder contains Razor components. The Shared folder stores additional Razor components NavMenu.razor stores the code of the NavMenu component, which defines the navigation elements ServeyPrompt.razor is an additional typical component that does not perform special functions App.razor contains the definition of the root component of the program, allows you to install routing between nested components using another embedded component Router. The Program.cs file is the entry point to the program. In this case it is standard for ASP.NET Core program class A program that starts and configures the host that deploys program with Blazor. At the moment, blazor has a rich ecosystem of partners that provide additional tools to build beautiful and convenient programs.