- In the November 2021 keynote for .NET 6, one slide deck for Blazor WebAssembly mentioned, “may reduce runtime performance.” We are not just aware of such problems, we utilize best practices that help you alleviate them.
- At Cazton, we help Fortune 500, start-up, large and mid-size companies with Blazor development, consulting, recruiting services and hands-on training services.
- Our team consists of Microsoft Most Valuable Professionals awarded by Microsoft .NET team.
What is Blazor?
Blazor is open source and has been shipped with .NET Core 3.0. It requires no add-ons and plugins to run your client-side C# code directly in the browser using WebAssembly. It works in all modern web browsers, including mobile browsers. Blazor will be made available in two hosting models: Blazor Server and Blazor WebAssembly. Microsoft shipped the Blazor Server model with .NET Core 3.0 whereas Blazor WebAssembly is expected to be released somewhere in mid 2020.
Blazor leverages WebAssembly to run .NET code inside web browsers. So let’s take a quick look at what WebAssembly is.
What is WebAssembly?
Web Assembly is relatively new, but has received support for many platforms and browsers. Top tech companies like Google and Microsoft have been putting efforts to have their technologies run on the WebAssembly platform. Microsoft is creating a .NET runtime in Web Assembly, which is expected to be released as Blazor WebAssembly. We know that WebAssembly is here to stay and has great potential to become a futuristic web platform.
- Component-based Web UIs: Components in Blazor are simple Razor components that has both embedded C# syntax (Razor syntax) for dynamic rendering logic and HTML markups for designing the UI. These components are lightweight and flexible and can be reused and nested among other components. These components are compiled into a component class and it can be shared as a Razor Class Library. These libraries can be directly referenced into other projects or they can be added as a Nuget package.
- Multiple Hosting Models: With Blazor being made available in two different hosting models, developers can choose the required model that suits their business needs. Not just that, they can also leverage capabilities of the browser or the server based on the chosen model.
- Routing: Routing is a crucial feature in any web framework. It is a pattern matching process that monitors the requests and processes the route and determines what to do with the request. Blazor offers a client-side router with a router component that enables routing. On the server-side Blazor’s routing is integrated in the ASP.NET Core’s endpoint routing system. It is configured to accept incoming connections for interactive components.
- Dependency Injection: Dependency injection has been the most favorite technique used by developers to keep their code clean and decoupled. And with Blazor’s support for dependency injection, developers can easily inject services into Blazor components to perform dynamic operations or perhaps perform unit testing by injecting mock service implementation.
- State Management: Blazor Server apps are stateful and they offer capabilities to persist state in the server memory. With w.r.t Blazor WebAssembly, developers can take advantage of client-side state management techniques using query strings, local and session storage.
- Forms and Validations: Data annotations have been great since it was offered as a part of the MVC framework. DataAnnotations based form validation is supported by client-side Blazor. This makes validating forms really flexible and intuitive.
- Debugging: Microsoft has offered debugging support in Blazor WebAssembly apps using the browser dev tools in Chromium-based browsers (Chrome/Edge). The capability to debug code in Visual Studio or Visual Studio Code will be made available soon.
To learn more about the capabilities of Blazor and the services Cazton can provide, contact us.
Blazor Updates with .NET 6
- Hot reload is a developers’ dream come true: Hot Reload is available on Visual Studio 2022 and VS Code. It allows us to modify your application’s managed source code while the application is running. There is no need for a debugger. The Hot Reload can be automatically set to execute every time a file is saved and it’s extremely fast. This works for .NET Multi-platform App UI (.NET MAUI), Blazor apps and Web applications including Razor pages. Our team loves this feature. Visual Studio allows automatic reload on file save, which is a great productivity boost for developers.
- Ahead-of-time compilation: AOT compilation can compile .NET code directly into WebAssembly. AOT compilation speeds up the runtime performance. However, it leads to a larger application size. Regular Blazor WebAssembly apps (without AOT) run on the browser using a .NET Intermediate Language (IL) interpreter implemented in WebAssembly. Such apps typically run slower than they would on a server-side .NET just-in-time (JIT) runtime because the .NET code is interpreted. AOT compilation compiles .NET code directly into WebAssembly for native WebAssembly execution by the browser. So, for CPU intensive tasks the performance is quite higher. gRPC is also ten times faster with AOT.
- Runtime relinking: Blazor WebAssembly has been trimming unused .NET code. This reduces the download size of the application. However, previously there was no way of reducing the runtime code which may not be used. For example, for an app with globalization support the runtime decides which settings need to be used. So, with runtime linking the applications that don’t need globalization support can opt out of it. This reduces the globalization logic and data and saves some additional bits. With .NET 6 Blazor WebAssembly tools it is possible to relink the runtime to remove logic that’s not needed. In some cases this reduces the size of the runtime dramatically.
Using a local interop channel the web UI is rendered into an embedded web view control while the components run natively in the .NET process giving the best of both worlds (native and the web). .NET MAUI Blazor apps will be supported by all platforms which .NET MAUI support including (Windows, Mac, iOS, and Android) while the primary focus for .NET 6 is desktop scenarios.
- Dynamic component rendering: Blazor enables loading a component dynamically without having to use any conditional logic or having to iterate through possible types. For example, a dynamic component can be loaded based on a user action such as selecting from a drop down.
- State persistence during prerendering: Blazor now supports Persist Component State Tag Helper. This is used to persist state in a pre-rendered page. Previously, the state used during pre-rendering used to be lost. It had to be manually recreated once the app was fully loaded again. UI flickering may be noticeable if any state is set up asynchronously while the pre-rendered UI is replaced with temporary placeholders before being fully rendered again.
- Native dependencies: WebAssembly has native dependencies that run directly on it. Previously, Blazor apps couldn’t use native WebAssembly dependencies: however, now it’s possible for Blazor apps to use them. This is facilitated by Emscripten, a compile toolchain for the Web platform.
- Consumers of a library and components aren’t required to import the related JS.
- IJSObjectReference represents a reference to a JS object from .NET code.
- Imported JS cannot pollute the global namespace anymore. (Note: Since dynamically importing a module requires a network request it can be achieved asynchronously.)
- Infer generic types from parent: Components that accept one or more UI templates as parameters can be used as part of the component’s rendering logic are called Templated components. This enables efficient reuse than regular components.
- Handle query string parameters: Blazor now enables component parameters of a routable component from a query string. For this it introduces [SupplyParameterFromQuery].
- Influence the HTML head: Razor components can modify the HTML element content of a page, including setting the page's title (<title> element) and modifying metadata (<meta> elements).
- Error boundaries: The ErrorBoundary component is used to wrap existing content. The app continues to function normally while the bounder handles the errors. The ErrorBoundary renders Error UI when an unhandled exception is thrown. It also renders its child content when an error hasn't occurred.
- Other updates: Other than this, there’s support for handling large binary data, smaller download size, removal of message size limitations in SignalR and SVG support.
Blazor WebAssembly vs Blazor Server
One of the biggest advantages in using Blazor is its capability to run on both server-side and client-side. Developers, based on their requirements, get the option to choose a hosting model that suits their needs. Let’s learn more about these two hosting models.
- Blazor WebAssembly: This model allows developers to write client-side applications in C# that can directly run in the browser using WebAssembly. Under this model, there’s no server-side dependency, which means that at the time of running the Blazor application all its dependencies are already to the browser and the app is ready to be executed in the browser UI thread. This model offers less bandwidth and we can deploy our Blazor apps as static websites or build PWAs with offline capabilities. This model runs in all modern browsers that support WebAssembly and is expected to be shipped somewhere in the mid of 2020.
What can go wrong with Blazor?
Blazor is deceptively simple. We have had clients that have had a hard time scaling Blazor Server for just 200 users. In some cases, the memory footprint keeps increasing and it’s really not a memory leak. We have also had clients approach us on Blazor WebAssembly where they have complained about rendering performance on the user interface. For example, rendering a tree with just 500 nodes on a page was extremely slow. That said, their use case required more than 5000 nodes to be rendered dynamically. In the latest Microsoft keynote, one slide deck for Blazor WebAssembly mentioned, "may reduce runtime performance."
How can Cazton help you with Blazor?
At Cazton, we help Fortune 500, large and mid-size companies with .NET development, consulting, recruiting services and hands-on training services. Our team includes Microsoft Regional Directors, Microsoft awarded Most Valuable Professionals, Azure Insiders, Docker Insiders, ASP.NET Insiders, Web API Advisors, Cosmos DB Insiders as well as experts in other Microsoft and notable open-source technologies. We have significant experience in Microsoft technology stack, and our expertise can enhance your project’s performance and improve its efficiency. We believe in customising each solution to tailor to the exact needs of the client. We can provide you the following services:
- Custom Blazor Wasm or Server app development.
- Blazor app deployment and augmentation with cloud support.
- Optimize performance of your existing Blazor application.
- Migrate your existing Web Applications or Single Page Applications (SPA) to Blazor SPA.
- Customized Blazor training.
- Consult you with design and architectural best practices.
- Consult you with Blazor security best practices.
- Deploy your Blazor applications to cloud, hybrid cloud or on-premises.
- Build CI/CD pipeline and automate your deployment process.
- Containerize your Blazor application with Docker, Kubernetes, Istio and Terraform.
- Perform code reviews.
- Blazor consulting.
- Custom development, consulting and training services for Web, mobile, desktop and hybrid applications, gRPC, Apis, SignalR, front-end and back-end solutions, big data, machine learning and artificial intelligence. We support the entire .NET ecosystem including .NET 5, .NET 6, ASP.NET Core and all versions of classic .NET framework. We work on a wide array of technologies including: Blazor, Angular, React, Vue, TypeScript, EF Core, MAUI, Xamarin and support all major RDBMSs (SQL Server, Postgres, MySQL, Oracle) and NoSQL databases (Azure Cosmos DB, MongoDB, Cassandra, Riak, Redis, Elastic search, Solr etc.).
Our clients trust us to deliver complicated projects within a short delivery time frame. We have saved our clients millions of dollars and have proven multiple times that we can be more economical than even offshore options. We can provide our experts with flexible engagements at a very cost-effective rate.
Cazton is composed of technical professionals with expertise gained all over the world and in all fields of the tech industry and we put this expertise to work for you. We serve all industries, including banking, finance, legal services, life sciences & healthcare, technology, media, and the public sector. Check out some of our services:
Cazton has expanded into a global company, servicing clients not only across the United States, but in Oslo, Norway; Stockholm, Sweden; London, England; Berlin, Germany; Frankfurt, Germany; Paris, France; Amsterdam, Netherlands; Brussels, Belgium; Rome, Italy; Sydney, Melbourne, Australia; Quebec City, Toronto Vancouver, Montreal, Ottawa, Calgary, Edmonton, Victoria, and Winnipeg as well. In the United States, we provide our consulting and training services across various cities like Austin, Dallas, Houston, New York, New Jersey, Irvine, Los Angeles, Denver, Boulder, Charlotte, Atlanta, Orlando, Miami, San Antonio, San Diego, San Francisco, San Jose, Stamford and others. Contact us today to learn more about what our experts can do for you.