Blazor technology


Blazor

 Welcome to Blazor!

Blazor is a framework for building interactive client-side web UI with .NET:

  • Create rich interactive UIs using C# instead of JavaScript.
  • Share server-side and client-side app logic written in .NET.
  • Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Integrate with modern hosting platforms, such as Docker.
  • Build hybrid desktop and mobile apps with .NET and Blazor.

Using .NET for client-side web development offers the following advantages:

  • Write code in C# instead of JavaScript.
  • Leverage the existing .NET ecosystem of .NET libraries.
  • Share app logic across server and client.
  • Benefit from .NET's performance, reliability, and security.
  • Stay productive on Windows, Linux, or macOS with a development environment, such as Visual Studio or Visual Studio Code.
  • Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.Components
  • Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.
Blazor use:

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
Components are .NET C# classes built into .NET assemblies that:

Define flexible UI rendering logic.
Handle user events.
Can be nested and reused.
Can be shared and distributed as Razor class libraries or NuGet packages.
The component class is usually written in the form of a Razor markup page with a .razor file extension. Components in Blazor are formally referred to as Razor components, informally as Blazor components. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

Blazor service:

Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.

The runtime stays on the server and handles:

Executing the app's C# code.
Sending UI events from the browser to the server.
Applying UI updates to a rendered component that are sent back by the server.
The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

Blazor Server apps render content differently than traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages. Both models use the Razor language to describe HTML content for rendering, but they significantly differ in how markup is rendered.

When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. After rendering, the server disposes of the page or view instance, including any state that was produced. When another request for the page occurs, the entire page is rerendered to HTML again and sent to the client.

Blazor Server produces a graph of components to display similar to an HTML or XML Document Object Model (DOM). The component graph includes state held in properties and fields. Blazor evaluates the component graph to produce a binary representation of the markup, which is sent to the client for rendering. After the connection is made between the client and the server, the component's static prerendered elements are replaced with interactive elements. Prerendering the content on the server makes the app feel more responsive on the client.

After the components are interactive on the client, UI updates are triggered by user interaction and app events. When an update occurs, the component graph is rerendered, and a UI diff (difference) is calculated. This diff is the smallest set of DOM edits required to update the UI on the client. The diff is sent to the client in a binary format and applied by the browser.




Blazor WebAssembly:

Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly works in all modern web browsers, including mobile browsers.

Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly runs .NET code in the browser with WebAssembly.

When a Blazor WebAssembly app is built and run in a browser:

C# code files and Razor files are compiled into .NET assemblies.
The assemblies and the .NET runtime are downloaded to the browser.
Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.
The size of the published app, its payload size, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:

Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
HTTP responses are compressed.
The .NET runtime and assemblies are cached in the browser.


Blazor Hybrid:

Hybrid apps use a blend of native and web technologies. A Blazor Hybrid app uses Blazor in a native client app. Razor components run natively in the .NET process and render web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps encompass the following technologies:


JavaScript interop:


For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code.



Summary:

In this module, you learned how Blazor applications are structured, where they can run, and what technologies comprise a Blazor application. You also learned some criteria to help decide whether to choose Blazor for your next application:

.NET familiarity
Integration requirements
Existing server configuration
Complexity of the application
Network requirements
Code security requirements
Building your next application with Blazor has the potential to save your organization time and money. If your development team is already familiar with C# and .NET, they'll find Blazor to be a comfortable choice in building their application. Blazor will also allow the team to integrate with existing .NET investments, and choose where they'd like the application to run with a WebAssembly deployment option.

A component is disposed after the user navigates away from the component.

Comments

Post a Comment

Popular posts from this blog

Windows wallpaper

Image
       DEFAULT WALLPAPER SETTINGS WINDOWS January 11, 2023    DEFAULT WALLPAPER SETTINGS WINDOWS    A computer used by multiple users will have a different desktop for each user. Anyone can change their desktop to whatever wallpaper they want to. However, some companies and even some users at home would like to keep the wallpaper of the desktop the same for all users. The wallpaper can be a custom company logo or anything that the administrator wishes it to be. In this article, we will show you methods through which you can easily set a default background wallpaper for all users on the system. It will also prevent them from changing the desktop wallpaper without admin rights. Need to set a default wallpaper for all users on a computer? In this tutorial we’ll show you use group policy to set the default desktop wallpaper background in Windows 10. This will also prevent users from changing the background wallpaper. Method 1: Set Default Background Wallpaper for Windows 10 Desktop Using G
Read more

Virus

Image
                                             Virsus A computer virus is  a type of malicious software that attaches itself to other programs, self-replicates, and spreads to other computers . So, what's the difference between a virus and malware (malicious software)? Virus is often a catch-all term used to refer to any kind of software created to be harmful. Does Your Computer Have a Virus? Here’s How to Check January 11, 2023   What Are the Signs of a Virus? Poor performance, application crashes, and computer freezes can sometimes be a sign of a virus or  another type of malware  wreaking havoc. However, that’s not always the case: There are many other  causes of problems that can slow down your PC . Likewise, just because your PC is running fine doesn’t mean it doesn’t have malware. The viruses of a decade ago were often pranks that ran wild and used a lot of system resources. Modern malware is more likely to lurk silently and covertly in the background, trying to evade detection
Read more