Blazor Consulting

• Blazor is an open source and cross-platform web UI framework built by Microsoft .NET team for building single-page apps using .NET and C# instead of JavaScript.
• Blazor supports component-based user interfaces, data binding, dependency injection, state management, JavaScript interoperability and more.
• Blazor WebAssembly facilitates hosting .NET based code in the browser using a WebAssembly-based .NET runtime. Blazor Server executes the app on the server inside an ASP.NET Core app and it uses SignalR for event handling, JavaScript calls and UI updates. Components built in Blazor are reusable between both WebAssembly and Server hosting models.
• 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.

Are you tired of maintaining JavaScript code? Do you have performance issues with JavaScript? Blazor may be the answer to your problems. Did you know Blazor is based on existing web technologies like HTML and CSS, but allows using C# and Razor syntax instead of JavaScript to build composable web UIs? Welcome Blazor WebAssembly, the latest client-side framework from Microsoft that lets you run your client-side C# code directly in the browser using WebAssembly.

The 2010s were great for JavaScript frameworks. With Cazton playing a crucial role in making many multi-million dollar projects successful, we have seen great adoption of frameworks like Angular and React over the years. These frameworks are great, but we have also seen big teams with different types of server-side technology experience, struggling to adopt and learn these frameworks. It's tough for them to switch to a completely different world of web development and it takes time, money and effort to learn and get used to a completely different technology or a language like JavaScript, which is dynamic in nature.

With Blazor, gone are the days where developers with only server-side experience will have to struggle writing JavaScript and learning a JavaScript-based SPA framework. Instead, developers can stick with Blazor that will allow them to create reusable custom web-UI components using C# and Razor syntax. Just to clarify, Blazor is complementary to JavaScript. You can use it with any web technologies or frameworks including HTML, CSS, JavaScript, Angular, React and Vue.

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.

Developers will be able to write their code in C# and Razor. However this framework will still allow developers to integrate JavaScript-based plugins and libraries into Blazor applications. They will be able to leverage the capabilities of the .NET ecosystem and take benefit from .NET's performance, reliability, and security. They can follow the best practices and patterns used in both the .NET and JavaScript world and write maintainable and scalable code. There are a lot of features which Blazor offers and we will learn about it in the upcoming section.

Blazor leverages WebAssembly to run .NET code inside web browsers. So let's take a quick look at what WebAssembly is.

What is WebAssembly?

According to https://webassembly.org/, WebAssembly is a binary instruction format for a stack-based virtual machine. In simple terms, you can think of WebAssembly as a portable platform that can compile high-level languages like C, C++, Rust that enables deployment on the web for client and server applications. WebAssembly (Wasm) has the potential to almost replace JavaScript in most cases, but can also work with JavaScript if need be. This platform gives an advantage to developers to build high-speed web applications in the language and framework of their choice.

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.

Main Features

• 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.
• JavaScript Interoperability: Even though Blazor has enabled developers to replace JavaScript and use C# in building components, there can be cases where JavaScript can still be needed for performing some web-specific operations. With JavaScript interoperability, Blazor enables developers to call JavaScript functions from C# code and vice-versa.
• Data Binding: Blazor offers capabilities to bind data to both components and DOM elements using the bind attribute. It offers one-way, two-way and event binding. This is the same capability that other JavaScript frameworks offer.
• 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.

• MAUI Blazor apps: MAUI is open source and supports multiple platforms including mobile as well as desktop. Whereas, Blazor is an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript. But there are times when you need full access to the native capabilities of the device. With the release of .NET 6, we can now host Blazor components in .NET MAUI apps to build cross-platform native apps using standard web UI.

  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.
• Render Razor components from JavaScript: As part of the .NET 6 release, Razor components can now be dynamically-rendered from JavaScript for existing apps. It's possible to do the same for React and Angular components even though it's not part of the official .NET 6 release.
• 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.
• Custom event args: Now it is possible to pass data to .NET event handlers with custom Blazor events. So data passed from JavaScript can be used to call the event handler whenever the custom event is fired on the DOM.
• 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.
• JavaScript initializers: To customize how a Blazor app loads, we can use JS initializers. JS initializers help initialize libraries before the Blazor app starts and helps configure Blazor settings. JS initializers are imported in Blazor apps automatically after being detected as part of the build process. Alternatively, we could have triggered script functions from the app using Razor class libraries. JS initializers eliminate the need to do so now.
• JavaScript modules per component: JS isolation is supported in Blazor. It has the following benefits:
  • 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 <head> 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.
• Blazor Server: Under this model, the Blazor app is executed on the server from within an ASP.NET Core app. Operations like event handling, JavaScript calls or any updates to the UI are handled over a real-time connection with the server using SignalR. With Blazor Server apps, all your code stays on the server, so the client is very thin. The download size is small and the app loads fast. Since this model lets the application run in the .NET Core environment, we can easily access the database from within the application or make a request using Web API. The C# and the Razor code you have written for building the components isn't served to the client.

What can go wrong with Blazor?

Blazor is great for C# developers who would like to reduce JavaScript footprint. At Cazton, we have JavaScript as well as Blazor experts. We like to use JavaScript where it makes sense while using the power of Blazor. Blazor, if coded without best patterns and practices, may lead to performance bottlenecks so it's important to understand the strengths and weaknesses of the framework.

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."

Blazor is so new that it's almost easy to get it wrong, especially if it's your first upgrade. Even though you may be great at JavaScript or C# and .NET based applications, there's a lot of different things that can go wrong with such an upgrade. First, even though Blazor may be able to replace most of your JavaScript code, it may not be the best thing for you. In certain cases, you may not get any additional value and the upgrade might cost you a lot of time and effort. Second, even if you have an ideal case for upgrading, lack of understanding of best practices can get you from a JavaScript technical debt to a Blazor technical debt situation. The first step should be a thorough technical analysis of the current code base. Next, we can help evaluate your current technical skills. This can be followed by custom training specially tailored for your team. Ideally, while we do this there needs to be an upgrade of a couple of critical parts of the application. We can also help your team learn the strategy and best practices during this upgrade and guide them through a few upgrades.

While JavaScript isn't inherently bad, it's a bit too powerful. The dynamic nature of JavaScript is it's great strength and also a great weakness. After working on complex Web applications that require very high performance and almost infinite scale, we have learned a lot. We continue to share our learnings with our clients. Until WebAssembly matures to a point where there is no JavaScript, it's not something that can be easily ignored. That said, our approach is to use the expert tools in our arsenal to make the application perform fast and scale well.

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.