Q&A
Blazor for JavaScript Developers
For years, JavaScript has reigned as the undisputed language of the web, powering everything from single-page apps to massive enterprise systems through frameworks like React, Angular, and Vue. But with the rise of .NET's Blazor framework, developers now have an alternative path -- one that lets them use C# and the .NET ecosystem to build rich, interactive web applications without writing a single line of JavaScript.
At the upcoming Visual Studio Live! developer conference in Orlando, set for next month, Tim Purdum, Engineering Manager and Senior Software Engineer at dymaptic, will present "Blazor for JavaScript Developers" -- a session aimed at helping front-end and full-stack developers understand how Blazor compares to the most popular JavaScript frameworks, and how it can be used to create unified, full-stack web applications using familiar .NET tools and patterns.
"Blazor uses the Razor templating language, which would be familiar to any ASP.NET developers who have done MVC or Razor Pages."
Tim Purdum, Engineering Manager and Senior Software Engineer, dymaptic
Blazor, part of ASP.NET Core, enables developers to build modern, component-based web UIs that run either on the server or directly in the browser via WebAssembly. By using C# across both client and server, it eliminates the need to juggle multiple languages and toolchains -- an appealing prospect for teams already invested in .NET. Yet Blazor also invites JavaScript developers to explore a different paradigm: one built on strong typing, robust tooling, and a "batteries-included" framework philosophy that contrasts with JavaScript's modular ecosystem.
The dev conference is just one of several dev/tech shows occurring during the big Live! 360 umbrella event, which also features venues for Data Platform, AI, Clouds & Containers, Cybersecurity & Ransomware and more. It kicks off Nov. 16 and lasts until Nov. 21.
In this Q&A, Purdum discusses what JavaScript developers can expect when they first dive into Blazor, how it compares to frameworks like React and Vue, and why he believes .NET's approach to full-stack development is worth a closer look.
VisualStudioMagazine: What inspired you to present a session on this topic?
Purdum: JavaScript has been the de facto language of the web for the entirety of the modern era, so there are obviously many times more JS developers than .NET or Blazor developers. At the same time, Blazor and the technology that drives it like C#, ASP.NET Core, and WebAssembly, all have important advantages and features to offer developers. I think reaching out to the JS community is the right approach to broadening adoption of alternative web technologies like Blazor.
What's usually the first thing that surprises JS developers when they try Blazor?
I think the biggest surprise might be how easy the transition is. We're still talking about a reactive, component-based web framework built on top of modern HTML and CSS. All of that knowledge and skill transfers over pretty easily. The other one, of course, is just the shock that you can write an interactive website without JavaScript.
How do Blazor's component and routing models compare to frameworks like React or Vue?
Blazor uses the Razor templating language, which would be familiar to any ASP.NET developers who have done MVC or Razor Pages. I would also compare it to other templating languages like PHP, where you are starting with HTML and then injecting the programming language via specific characters. Blazor typically also has a larger C# code block for each component for properties and event handlers, which can either live in a block at the bottom of the Razor file, or in a separate "code-behind" C# file. Vue's template is internally quite similar to Razor, although their binding and property injection tokens are much more varied than the unified @ symbol in Blazor. And while you could stick everything including styles into a Razor Component (Blazor) file, this isn't really recommended like it is in Vue. React is probably the most different conceptually, with the markup being returned as the result of a function. Yet even here, when you get down to the injection of properties and binding to events, it's amazing how little difference there is (the React key token is the curly brace).
Routing is a place where you can see the clear difference in ancestry between Blazor and the JS frameworks. .NET frameworks are typically adopted by many large enterprises, and there is an expectation to have a "batteries included" experience, where you have everything you need right in the framework, including routing. The Blazor routing uses a Route component and @page directives at the top of each page component. It's pretty simple and straightforward, and you don't have to remember to set up anything except visible navigation menus. Vue has an "official" Vue Router, but it is still optional and can be used or not. The Vue Router requires defining each route and pointing it at a .vue component file. React has multiple top-notch solutions, including the Next.JS App Router, which is a folder-path based router (a familiar concept to many .NET developers).
Do you find Blazor's tooling or syntax to be a strength for developers with a JS background?
I think there are both advantages and disadvantages to the .NET tooling compared to JavaScript. First, while the .NET team has been really dedicated to making the runtime and development experience fast and responsive, we're still talking about a compiled language. We have "hot reload," which attempts to re-compile as you make changes in your files, but it is far from perfect, often failing on simple changes and requiring the app to be restarted. And even a small Blazor app is going to take 5-6 seconds to start on a typical laptop. That seems really fast to a developer used to compiled languages, but to a developer from a scripting language like JS who can skip this step, it can seem like an eternity.
On the other hand, the .NET debugger, stack traces, and IDE IntelliSense I would say are significantly better than the comparable JavaScript tools. Combining these tools with the type safety of the language allows developers to write code with a lot more confidence up-front, not having to worry about runtime errors like unexpected nulls. Of course, TypeScript provides a decent portion of the same advantages, which isn't surprising since both languages have the same lead architect.
One thing TypeScript can't provide is that robust standard library (batteries included) experience I mentioned that .NET developers enjoy. Sure, there are more NPM packages than NuGet packages by several orders of magnitude. But finding the right one and trusting it is a huge burden on developers. If the tool you are looking for is a community or organizational standard, then you know you have a safe, trustworthy solution close at hand. In addition to the Blazor router, .NET and Microsoft provide the EF Core ORM, dependency injection, JSON serialization, HTTP clients and minimal API servers, and many other default options.
What should JS developers understand about the differences between Blazor Server and WebAssembly?
First, I would point out to not forget the new "Static Server" mode, which is the default in Blazor Web Apps since .NET 8. That's important because unlike all the interactive modes and JS SPA frameworks, Static Server only responds to full-page form post-backs or navigation, not individual user events.
For the interactive modes, the biggest difference is how you communicate with your data store. In Blazor Server, you are running interactively on the server, which means you have direct access to your database code (for better or worse). In WebAssembly, after the initial download, the page is running within the browser, not connected at all to your server unless you create that connection, so transferring data requires HttpClient, gRPC, SignalR, or some other transport protocol.
In Blazor Server, it's important to realize that you are dependent on a continuous connection, so if you are working with customers in remote locations, it might not be the best choice.
The one gotcha in WebAssembly is that, like JavaScript, it is single-threaded, so it's much easier to lock up the UI with long-running tasks than it is on a server with lots of cores.
What kind of app is a great candidate for a first Blazor project?
Great question! I think that Blazor Server (combining Static and Interactive modes) is a great way to build an internal application for a company, say a user management or inventory system. You don't have to worry about signal distance/disconnects, you don't have to write an API layer, and you can really quickly stand up a proof of concept.
How can attendees learn more about this topic and prepare for your session?
A good place to start might be my blog post, Blazor vs. Next.js: Getting Started with Interactive Web Applications, where I compare Blazor and Next.JS in detail, and walk through starting your first project. You might also want to check out GeoBlazor.com, which we built with Blazor technology (except the docs and the blog). The samples have some great examples of the interactivity you can create with very little JavaScript, and even include a Source Code button that shows the Razor code markup for each sample.
Note: Those wishing to attend the session can save money by registering early, according to the event's pricing page. "Save $300 when you register by the Early Bird deadline of Oct. 24," said the organizer of the event, which is presented by the parent company of Visual Studio Magazine.
About the Author
David Ramel is an editor and writer at Converge 360.