A couple of weeks ago I wrote an article about building and deploying a Blazor app without touching a Windows machine and realized maybe I should take a step back and explain what Blazor is and why anyone would use it. It's still fairly new to most in the front end development world, but it's awesome and you should check it out.
So what is it, exactly?
Blazor is a framework from Microsoft that you can use to develop interactive client-side Web UIs with C#.
In their own words:
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.
Pretty cool right? You can download it here and get started.
The old way
Remember the old way of developing web applications?
For the longest time, we built applications that ran solely on the server, using things like ASP.NET, PHP, etc and they generated an HTML file to be pushed to the browser.
We've always had some bit of interactivity with JavaScript and AJAX but for many years most of the business logic is handled on the server itself, spitting out HTML pages to interact. The browser for many years was just a glorified document viewer. It worked, but we knew we could do better.
There are some downsides to this pattern that we're all aware of:
- The server needs to be configured with software to run the web app. ASP.NET, PHP, etc. Backend processors or runtimes have to exist on the server.
- Most of the processing power is on the server.
- Page loads are annoying and slow.
So we found a new answer to it.
How we do it now
With the rise of the Single Page Applications we have a new pattern, with frameworks like Angular, React and Vue:
Now we're building full applications in JavaScript that run on the browser. This splits the business logic, so that some runs on the browser, and some runs on the server. JavaScript applications run client-side and use messaging to communicate with the "server". You can easily replace "server" with a service or application in the cloud, but the model is still the same.
This is an excellent improvement on what we had before, which essentially manipulating HTML and tossing it back and forth. Now we have real applications running in the browser, and page loads are mostly a thing of the past.
But Blazor improves on that pattern further. There are two main ways to develop with it.
Option 1: Web Assembly Method
When you choose to build a Blazor Web Assembly application it looks like this:
Blazor uses Web Assembly which ships in all major browsers now. Web assembly is a binary instruction format that runs a virtual environment in the browser.
So what does that really mean?
Now the browser acts as a host for your application. Files built in a Blazor Web Assembly application are compiled and sent to the browser. The browser then runs your JavaScript, HTML and C# in an execution sandbox on the browser. It even runs a version of the .NET Runtime. This means you can execute calls to .NET from within the browser, and it's a fully-fledged application in the browser. It can even be run offline.
Why this is cool:
- You can run it on any static file server (Nginx, ISS, Apache, S3, Heroku, etc)
- It runs JS as bytecode, and runs C# at near-native speeds.
- You can use C# to develop rich front-end applications.
- Web Assembly ships with all major browsers
- Reuse .NET components
- Use Microsoft tooling and debugging
This is great for low latency applications such as games. There's no need for communicating with a server if you don't need to. You can download the application and run it offline in a browser. This is great for games and other things you need to run lightning fast in a browser.
Some downsides:
- The .NET Framework and other runtime files need to be downloaded (one time)
- You're restricted to the capabilities of the browser
- All secrets (credentials, API keys, etc) downloaded locally
- Not all .NET Framework components are compatible
So this may not be ideal for all applications. The good news is, there's another Blazor pattern we can use.
Option 2: Blazor Server
If you decide to build a Blazor Server application, it looks like this:
This is closer to the model we're using today. You build an application and have a server that's powered by .NET Core, and you send HTML and JavaScript to the browser to act as a client. This is a great way to make screaming fast thin clients.
Why this is cool:
- You get the full power of the .NET Framework
- Everything rests on the server, small downloads
- Web Assembly is not required
- Your secrets are safe
Some downsides:
- No offline applications
- Requires a server running .NET Core or a service
- Can be high latency with lots of network traffic
So how do I choose which one to use?
If you want powerful client-side applications that can run offline and served from a static server, choose Blazor Web Assembly. If you want the full power of .NET and want to run a model with thin clients, choose Blazor Server.
Why is this such a big deal?
Blazor patterns open up big opportunities for development. Whether you want to build a powerful service with several thin clients, or some cool interactive game that runs in a browser, Blazor enables rich, interactive application potential.
Web Assembly is the way of the future. It enables near-native speeds in a browser, and uses a common interface. You will find Web Assembly on PCs, Phones, and tablets. If you have a bunch of C# developers on your team who don't do front end programming, they are now empowered to do it in the language they love.
It's pretty awesome, and I'm excited to see how Blazor progresses.
Where can I learn it?
You can learn more about it from Microsoft's Blazor Site.
I recently wrote a tutorial about setting up and deploying Blazor apps without touching a Windows Machine
If you want to dig deep and learn Blazor, Pluralsight has some modern courses that will get you running quickly:
- Blazor - The Big Picture
- Blazor - Getting Started
- Blazor - Authentication and Authorization
- Creating Blazor Components
So try it out! Let me know what you think of Blazor and share your experiences in the comments!
Oldest comments (61)
Thanks for the article! How do you think we'll be talking about Blazor at the end of 2020? Do you think Blazor will be widely used in production?
I think we'll see significant adoption by the end of 2020. We'll see a lot of Web Assembly industry wide, and .NET folks adopting Blazor to get there.
But I think "widely" used in production will take a few years. One thing Blazor has going for it: it's an add on technology, not completely from scratch. It's a small step for ASP.NET developers and a smaller step for .NET Core developers. This will spread adoption as they have the skills they need, and "backend" developers can more easily build front end applications.
One thing it has going against it is the fact that it's Microsoft and there's still some developer aversion to that platform. Also at this time, an ASP.NET Web API coupled with React or Angular works great. There may not be enough "pain" in that process to push people towards Blazor.
Thanks and that makes a lot of sense. For developers already in the Microsoft ecosystem, it will probably be a no-brainer to adopt Blazor. I agree with you that winning developers over from other platforms probably won't happen as easily. But it will be great to have even more excellent choices for web development!
I get this, and I see your point. Like every other aspect of engineering, it's all about balance. You don't want to jump on the latest thing just because it's new. But if you're building something new, or doing a major rewrite it's useful to look at newer technologies.
The key is focusing on what problem you're trying to solve. If the new technology can solve the problem with a low enough amount of effort, why not? If you have a tried and true system and it can solve the problem without negative side effects, choose that.
I like to keep an eye on emerging technologies and have another tool in the toolbox if needed.
Touché
Seems nice. C# code gets converted to JS using the WebAssembly?
Well, sort of. C# can get converted to JS that makes calls into the .NET runtime, and it's possible to make interop calls between JS and .NET, and vice versa. It's still a work in progress.
You can just write C# to do everything you'd need to do but I'm not sure that's the best approach. It depends on what you're trying to accomplish. From what I know at this point, a well designed Blazor application will use components based on the problem you're trying to solve. Does it need a lot of server processing, or client processing? That will determine not only the type of Blazor app you create, but that will dictate the composition of the code as well.
We need better documentation and books, the only book we have in near future will be on sale on May of current year...
I agree. Documentation has accelerated a lot recently, and Microsoft has provided information to really get you going. The courses at Pluralsight have been updated very recently to keep up with the current version. There's information out there, but we certainly need more.
More than once I've run into things I wanted more information about and found nothing online, forcing me to improvise the best way I see fit. Within the next 6 months, I think that situation will improve.
Microsoft is known for their outstanding documentation. You can find break downs of every service, operating system and API they have available. I doubt that the documentation for Blazor is that shallow.
sips whisky and waits for the web assembly revolution
It's not quite here yet. Close. Blazer takes it a good couple steps.
Not quite but it's gaining momentum and I wouldn't bet against it. I wouldn't build a "golden goose" application with it yet, but it's maturing quickly.
What are pros / cons compared to Node?
It's funny, I remember listening to a podcast about this in late 2017. Blazor has a lot of potential and they are running with it full steam ahead. As some one who really enjoys C# and all the awesome extensibility of it, I really hope this catches on the job market.
Blazor - .net equivalent of java's GWT, Vaadin. Nice to see that they are jumping into WA compared to all the other "open" languages/libraries/frameworks.
WebAssembly, unlike Blazor, has nothing to do with .NET. Microsoft is merely taking advantage of a developing technology.
In addition GWT compiled forever and produced fat & heavy JavaScript, again nothing like WebAssembly.
The major question going forward would be how bloated the relevant webassembly files generated at the end would be.
So far C#, as well as C++, are showing near native speeds.
Probably reinventing all the history and evolution of development for the computer itself - First very close to the machine and with time - further and more bloated, with the slight difference - the target platform/environment is the Web (Browser).
I don't know about Blazor, but Web Assembly itself is officially the 4th language supported by browsers. This will be the future, whether we like it or not.
In my opinion, of course.
Too bad MSFT took 20 years to figure this out. Once they killed Silverlight (because Apple wouldn't allow browser plugins), it sent a huge negative message to those loyal to them.
Later confirmation of ridiculous descisions they made: 1. They fractured their own desktop environment with UWP. 2. Abandoning WPF while denying it. 3. WPF never was fully able to embed their own browsers. 4. Their ridiculous IE and Edge browsers.
In the meantime, NPM, Node, Electron, Angular, React, Vue and Chrome captured the frontend along with huge open source contributions.
Jumping on the Blazor bandwagon, to me, is regressive. How many Blazor jobs are there on LinkedIn?
MSFT throws their developers under the bus too often and are untrustworthy in that regard.
I'll stick with Typescript for now only because it's superior to Javascript and compiles to Javascript. I'll use Angular for now and Electron in 2020.
While I'm also less than enthusiastic, I would counter that MS open source has been very good overall. Silverlight was never floss. .Net Core has seen some really great strides and it's a decent option.
I still prefer node and react, and for web assembly find rust+yes more compelling. I wouldn't about C# as an option on the backed, I just don't like Blazor.
When I speak about C# open source being dead, I'm comparing it to NPM. NPM alone is a million times more robust. Right now, Blazor open source contributions are laughable. I don't feel that will change much. MSFT has been sleeping while they built Azure. They are 10 years too late.
I'm junior, but reading the article I thought great for C# guys, I mean welcome to the web, but maybe I'm ignorant on this assuming that we basically have this with JS/TypeScript? Why move off that ecosystem that's only exploding with more opportunities to something that's catching up. With all that's going on in JS I'm just not sure there would be a problem Blazor solves that's not already solved... Am I wrong? I am just speculating on this latter point, so please share your wisdom Dev crowd. :)
We'll know the goodness of blazor once the jobs show up. Today they're not around.
But yes, I agree with you, why Blazor? We already have it all.
For me blazor for the web it's like Xamarin for mobile, I'm an old MS developer, and I can create a functional app in 2 days after starting with blazor. I don't know how much time would take to do the same if I start with angular.
Yes both React and Angular have ramp up time but the data binding concepts you know from Razor are the same.
You'll have no problem learning React and Angular. The need for React and Angular people exceeds supply which is good.
Are you serious, the JavaScript ecosystem is a bloody nightmare, it reinvents itself every 2 years. That Typescript your on about is a MSFT product. The front-end is ripe for languages like C#. Blazor has a bright future.
We'll see and prove it by job openings and salaries.
Yes Typescript is MSFT, in particular, Anders Helsberg, the C# architect. His work has always been excellent.
I replied to a comment of yours on another article but since you probably haven't seen it, I'll reproduce it here.
Your original comment:
"Growing up on .NET, I became a bit biased. I love C# and ASP.NET core. In the meantime Angular and React took over the front-end world, and Node and Express are working to create the Isomorphic stack. If I were a new programmer I'd skip C# and Java and learn server side Javascript using Node and Express."
My reply:
"Whyever?
Latest TechEmpower results as of the time of posting this:
techempower.com/benchmarks/#sectio...
As you can see, Node.js is so far behind ASP.NET Core in all tests, it's not even a contest any more.
As for front-end C#, here's an example: n-stefan.github.io/diabloblazor
It is a port of this: d07riv.github.io/diabloweb
replacing React/JavaScript with Blazor/C#.
Being static it doesn't use a server at all, but server side prerendering (initial rendering) is baked into Blazor and can be used with sites that are hosted by an ASP.NET Core server. There's also server side Blazor, which doesn't need WebAssembly and still behaves like a SPA/PWA - no full page reloads, uses differential rendering, etc.
Edit: added further benchmarks
.NET Core/C# wins 10/10 tests vs OpenJDK/Java:
benchmarksgame-team.pages.debian.n...
At the same time OpenJDK/Java wins 9/10 tests vs Node.js/JavaScript:
benchmarksgame-team.pages.debian.n...
It should be noted that both the TechEmpower tests and these benchmarks were run on Linux. On Windows .NET Core/C# would likely be even faster."
There's no doubt: the power of C# outshines all Javascript stacks in every way. (For now).
Will Blazor make it? Perhaps but there are no jobs.
There's too many questions like: Will it be the wave of the future? Is it a market disrupter? Will its eco system trump NPM and Javascript? Will MSFT start supporting thier adopters? Are they now all of the sudden loyal?
Will they rewrite VS Code in C# WASM? Never, Electron and Typescript work beautifully for millions of developers daily.
Chrome, the browser that won, will remain a Javascrpt friendly stack.
Many large corporate websites are aleady running Isomorphic Javascript stacks? Need more power? Spin up another server.
Node is making progress on CPU agnostic design. Compiled Javascript in WASM will happen.
Both Java and Javascript are more popular than C# in 5th or 6th place.
Finally, most of people who only grew up on Javascript dislike MSFT passionately. Their only view of MSFT was the inane Internet explorer and Edge. MSFT caused them as much pain as their desktop crowd.
Of course there are not many jobs YET, server-side Blazor launched with .NET Core 3.0 only this September, while client-side Blazor is still in preview and will launch in May 2020, if all goes according to plan.
It is possible to host Blazor on Electron for desktop apps:
github.com/aspnet/AspLabs/tree/mas...
However, they haven't stopped there:
blog.stevensanderson.com/2019/11/0...
It does away with Chromium and Node for significant download size and memory footprint savings.
The newer IEs were arguably much better than older ones, while Edge was better still and now there is Chromium based Edge, so nothing left to complain about.
One of the main selling points of Node was a relative speed advantage: no longer true. Another was enabling same language development across front- and backend while others didn't: also, no longer true.
Hell, Python is most popular now and it's a slow, niche language, only ideal for ML/AI. Already for webapps there are many alternatives that are far better and for game development you can forget about it.
Oh yes, some people hate and will hate MSFT no matter what, and that has nothing to do with the quality of .NET Core/Blazor.
Those benchmarks look very wrong. There is no way node is 8 times slower than ASP.NET on the same hardware.
Most likely they ran one instance of node on an 8 core machine. Node runs on a single core, while ASP.NET takes advantage of all cores.
You need to configure node as you would in production, using something like PM2 or StrongLoop Process Manager with an NGINX load balancer in front. This allows you to run 8 instances of node so that all 8 cores are used.
The results in this configuration will be very different.
Please tell us more on how node utilizes all cores. An article perhaps? I confess my lack of knowledge on getting Node to run on all cores.
Process managers like PM2 and Strongloop PM start multiple instances of your app, each of which runs a single thread. By default, they start a number of instances equal to the number of CPU cores.
If any of the instances crash, the process manager will restart them.
strong-pm.io/getting-started/
pm2.keymetrics.io/docs/usage/quick...
You can run an NGINX instance as well to load balance between multiple instances running on a single machine or across multiple machines as well. This is only needed in production. You can run your dev instance with just PM2 or Strongloop directly if you need to test performance. You usually only need to run one instance for most dev work though, which means you can just run node directly.
There is also the node "cluster" module, which you can use directly in your node server code to run multiple instances of your app. I haven't used this recently, but there were some performance issues with it before. Not sure if this has been improved.
medium.com/skyshidigital/6-tricks-...
Node also supports manually firing up threads for whatever purpose you may have. This is often used to create worker threads for any long-running CPU-intensive tasks. The main node thread and the worker thread can communicate, if necessary, using IPC.
It is very important in node to avoid blocking the main thread since no other requests can be handled in that node instance until the work is complete. Worker threads are a good option here.
They are not wrong.
Server config: 14 physical cores, 28 logical cores (HT), 32 GB RAM.
techempower.com/benchmarks/#sectio...
The Node.js plaintext code is running as a cluster of 28 processes.
github.com/TechEmpower/FrameworkBe...
So yes, ASP.NET Core really is that much faster, time to wake up.
Excellent information Ken. Looks like I have some major 2020 studying to do.
Thanks for the links @n-stefan. Good to know they are using clustering.
I still think something is not optimally configured in the node case though. I could believe a 2-3 times improvement, but 8 times still makes me very suspicious. Benchmark results are notorious for being sketchy or having one configuration optimal and another sub-optimal.
It would be interesting to see the number of requests that each node instance handled to make sure the distribution is fair. The fact that there were 89 errors makes me think that perhaps the distribution was not even, and so some requests errored out.
It would also be interesting to set
cluster.schedulingPolicy = cluster.SCHED_RR;mode to see if that helps.A comparison against PM2 or StrongLoop would also be good to see (might try this out if I have some time in the next few weeks).
The difference is smaller in the 5 other tests.
You could open a PR, if it's good, they will probably accept it. I'm also interested in having Node.js (and all others for that matter) run at its (their) true potential, unhindered by bad configuration and the like.
Wake up to see what? to see asp.net is 8 times faster than node js? you better think the other way around. performance is not a only aspect of seciding about a language or framework. node js still makes sense to me even in 2021 cause the web is built around nodejs , productivity is times better in node js than ASP.NET.beeing a .NET developer for the course of years now I am a full-stack nodejs developer and am very pleased doing that. Besides ASP.NET CORE MVC is not 8 times faster than node js by any means even according to latest techempower benchmark. see below :
it's time to make change in you'r stack and get things done 5-10 times faster.
Microservices replaces both node and asp.net. Today I recommend Azure Functions as back end development is dying. It's all cloud now, which is both infinitely scalable at click of a button.
You're comparing Full (aspcore) and Micro (fastify) implementations, nice job :)
According to the latest results as of writing this:
techempower.com/benchmarks/#sectio...
asp.net core has a composite score (considers all tests) of 6,408, fastify 1,594, nodejs 1,545.
That makes asp.net core 6,408 / 1,594 = 4.02 times faster than fastify and 6,408 / 1,545 = 4.14 times faster than nodejs.
I'm productive enough with ASP.NET, especially now with Blazor, and considering the speed advantage I see no point in switching, thank you.
I can use ASP.NET to write microservices and deploy them to local/cloud Docker/Kubernetes; or to write Azure Functions; or even use it on the front end thanks to Blazor WebAssembly.
Any numbers on these two?
@n-stefen
lithium is in the first place, should we use it for daily web-dev jobs? I say it again and again. speed is not the only factor. If you say I am productive with blazor you most probably haven't experienced full-stack javascript.