Blazor Consulting

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, the latest client-side framework from Microsoft that lets you run your client-side C# code directly in the browser using WebAssembly.

The 2010s have been 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 learn 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.

Features of Blazor:

• 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 user’s state in the server memory. And 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 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.

Upgrading from JavaScript applications to Blazor (Wasm) apps?

I'm sure you are wondering how to do that in the best way? Even though it sounds very easy, it may not be. We had a client that decided to do this all on their own. We asked them to do a simple auto-complete application with us in the room. They estimated that task to take just 2-3 hours. You will be surprised that even after an entire day of coding while searching on Google freely, no one on the team was able to finish the task. Of course, with our help the task was a piece of cake.

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.

How can Cazton help you with Blazor Consulting?

Have you worked with multi-billion dollar consulting and recruiting companies? If yes, we are sure we can provide more quality services at a much more affordable rates. We have been fortunate to work directly with the Microsoft product teams for many years. Our team includes 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.

The modern web changes quickly, and our team is capable of fast adoption and integration of new technologies. Our products are built in extensible ways, with support for desktop and varied mobile browsers. We specialize in developing secure and scalable applications. We offer Blazor Consulting, Training and Development services. In the last few years, we have helped clients all over the US, UK, Canada, Europe and India. We have worked on all sorts of backends including Node.js, .NET Core, Java, .NET and Python with many different UI Frameworks as the frontend.

We have a team of seasoned experts on the latest Microsoft technologies and 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. From project consulting to code migration, development, deployment and augmentation, training, we deliver on our promise of high quality services. With each new technology, there comes new ways to master it, optimize its performance, ease its integration with other technologies and maximize efficiency of the system. The team of experts at Cazton is well-versed to the rapidly changing technologies and can help you strike the perfect balance between the two.