Running Blazor in Production, Lessons Learned

Calm down... the thumbnail is to grab your attention =D
Since we started using Blazor in 2019, it's been an excellent tool for our team of C# developers. Even when Blazor was brand new, we used it in our latest project, which really helped us. Seeing other people in our field, I can say that Blazor was a key to our project's success.
Our journey with Blazor has mostly been easy, but we have still learned a lot along the way. In this video, I will share some tips and lessons we have picked up. I will also discuss how to make smart choices and avoid problems when you're changing your existing project to use Blazor.

[@jluisxp8553]

I already created a web application in Blazor, the best things, it works perfectly!!! and in production!!!

[@ODSD_EXCITEMENT]

Agreed! Our move to Blazor for our new production website was amazing easy and it performs very well. Super pleased.

[@OeHomestead]

I'd take Blazor over any JS/TS/npm tech any time of day. It's so much easier to just use C# across the whole stack. I have backends in production, written in Java, communicating with Blazor Server apps through SignalR and it works like a charm.

[@CodingAfterWork]

I totally agree =)

[@imadabab]

Mr. Jimmy. Thanks a million for thos beautiful useful introduction. I bought your brilliant book, it's amazing from zero to hero. Actually Blazor was my dream as a full stack developer using C#. All my new projects are on Blazor and working perfectly.

[@CodingAfterWork]

Thank you, happy to hear you like it =)

[@remontunasdotru]

Blazor is great!

[@farhadsu]

I already use Blazor WASM to develop e-commerce application. Thanks for the exciting book about Blazor!

[@CodingAfterWork]

Thank you, happy to hear you like it =)

[@SamWashkansky]

I'm working with Blazor, and I love it

[@DigitalNomadOnFIRE]

My first computer was a ZX Spectrum 48K+, also did the coding loop. The fact you got a command prompt and could start coding when you switched it on was great...

[@rkarimabadi]

We also use blazor wasm in our projects as mercantile exchange company. Thank you for sharing your knowledge.

[@Tamer_Ali]

Thanks a lot Mr. Jimmy for this awesome video, I really like the way you explain Blazor

[@2005Azm]

I Just discovered this channel!!! I love your passion! I wish I was working with such a team! Maybe Blazor will save my dev career... I mean put me back on track!

[@EngstromJimmy]

Thank you, I appreciate that :)

[@blackpaw29]

"Its not Highlander" - lol, perfect :)

[@parko1965]

At 9:25 when he started to explain the flow between the browser dom and the backend, I decided to keep watching. Explained very well.

[@CodingAfterWork]

Thank you ❤

[@sephyshen2510]

Maybe it is time to start using Blazor for upcoming projects. Give it a try.

[@thindal]

I recently started working with Blazor but I've been loving every second of it. For an old webforms dev it comes really naturally. I'm trying to do it with WASM from day one though.

[@francoislepron2301]

I am really happy to hear that because today I work with PHP and React, and this is a daily pain for refactoring or adding features. I beleived strongly in Blazor since the beginning because the coding strucure is awesome and clean. I hope that more and coders and companies will move on Blazor since this a really game changer to my opinion.

[@CodingAfterWork]

I see more and more companies move over to Blazor. Large companies that I wouldn't have thought would jump on the train this "early". But it does take a lot of effort to rebuild an existing site so I would guess Blazor has a pretty good adoption rate especially companies moving from WebForms/MVC/RazoPages.

[@mubarekabdi]

You’ve really explained well everything around Blazor. ❤

[@CodingAfterWork]

Thank you =)

[@JacobSnover]

Love Blazor! Have a couple small sites running it, and also have production code at work. Server side, WASM, and looking forward to the hybrid model in .Net 8! I didn't mind vanilla JS but never wanted to learn a framework. Looked at Xamarin but never did WinForms and then Blazor saved my life!

[@TheCameltotem]

För övrigt bra presentation! Täcker de mesta man skulle vilja veta. Visste inte att de var så stort bland större företag, har själv kört det i lite olika bolag som jag konsultat hos men de är inga top 10 ställen.

[@Jeff-gt2xu]

I am learning Blazor now; well, that and C# and bootstrap at the same time.

[@EldonElledge]

I am currently designing and developing a application as a contractor that is Blazor WASM for the UI.

[@gunnars04]

Really cool stuff, very well explained

[@CodingAfterWork]

Thank you =)

[@betterlifeexe4378]

Blazor is so much cleaner then JS solutions and it's getting better all the time. Right now the thing that it needs the most is better interop with JavaScript. it would be really great if there was a way to interface with JavaScript API calls with little to no JavaScript. I hate working with JavaScript async, returning multiple values and having to serialize and deserialize data when it doesn't work.

[@betterlifeexe4378]

This time last year I was saying that what blazor really needed was more free components but it's gotten better

[@TheCameltotem]

Regarding code behind. I usually start off with c# in razor pages when they might be a small component or whatever. If its a huge baseclass with lots of dependencies and methods I have it as codebehind and move it under another file structure just to make it easier to work with since those razor pages usually have a lot of code inside them anyways.

[@CodingAfterWork]

This is what I do as well, but I rarely find myself having too much code, in many cases, I create additional components.

[@yashizuko]

34:52 YES 1000 times, i have seen alot more performance by using html+css is unreal, syncfusion, telerik, radzen all crap, pure html and css is your friend to actually save performance and time when you need to customize, Build your reusable components

[@reynaldoruizflores]

Is there a Contoso complete Example ?

[@zc0rp10]

Hi Jimmy, how do you deal with storing app-wide/persisted state in your production apps? Are you injecting your own statecontainer service or are you using any of the libs out there such as fluxor or blazor-state?

[@EngstromJimmy]

Injected my own class is the way I have done so far. I haven’t looked at Fluxor but I have heard great things.

[@zc0rp10]

@@EngstromJimmy Cheers Jimmy!

[@charlinhos0824]

The only caveat I see, it is the need of an extra runtime layer in the browser, in case of Blazor Webassembly, because blazor does not create a webassembly executable(binary) directly, I think it is dotnet which does it, I think Blazor Server Side could be more approachable to Csharp Devs in this regard, I don't know if in the new AOT compilation probably blazor creates webassembly binaries directly, probably a good question to ask you, and another is what version of Blazor tastes would you prefer, WebAssembly, or Server Side Rendering taste??

[@CodingAfterWork]

AOT is WebAssembly but at the cost of a larger download. I prefer Blazor Server, simply because I have used it the most and the debugging is a tiny bit faster. But it really depends on the project. I use both in different projects.

[@PrashantUnity]

Here goes one of my subs

[@michaelswells]

What do you mean with adding a refresh button? Would you please explain (or show some code) of how to implement a refresh button.

[@EngstromJimmy]

Add a button that loads the data again (if it is something that changes frequently). What we want to avoid is our users to consider the data on the screen ”old” and therefore press F5 to refresh it. There is nothing special with the “refresh button” only a button that gets the data again. Hope that helps

[@michaelswells]

@@EngstromJimmy That clarifies it for me.

[@aguluman]

Hi, could your viewers get a link to the source code?

[@S3Kglitches]

Wait isn't the whole component updated when it changes? Not just the h1 with Rulez -> Rules?

[@EngstromJimmy]

Only the actual changes gets pushed over signalr or via JS interop. Pretty cool isn’t it?

[@nagarajm889]

Great stuff man. However, the memory consumption is not just due to F5. Blazor just keeps adding up the memory on every page navigation, but not releasing the memory that was consumed before. When hundreds of people use the website and move around different pages, blazor is ballooned up with huge memory and eventually goes out of memory. Any suggestion??

[@CodingAfterWork]

That is not the "normal" behaviour, the memory should be garbage collected as usual. Check your code so you are disposing database connections or any other resources that need disposing. You can also change the way the system garbage collects, you can configure the GC in workstation mode instead of server (this will more aggressively collect). I don't see the behaviour you describe in our applications so this shouldn't be a Blazor issue.

[@vickychang7183]

What blazor needs is a way to directly access browser / dom using c# and just bypass JavaScript. Blazor still clunky when it comes to working with dom. Also, they need a better way to create and work with API’s. They need something like like EF that will just create all the API for you.

[@CodingAfterWork]

WebAssembly don’t allow that, but it is in the works as I understand it :) Not aure about the API comment though, minimal APIs and open API client generation is pretty sweet.

[@hillarysagwa5064]

No one is talking about this but the problem with blazor wasm is not the download size but the loading time esp on phones. prerendering solves the problem halfway as even with the page fully loaded, it remains unresponsive untill the wasm loads. during the loading time the user can neither navigate to a diferent page not click on any button

[@notoriouslycuriouswombat]

the angular killer? lol way to set the bar high

[@CodingAfterWork]

As you may have seen, the point the video is making is that there are room for more than one =) But it is not a statement, it is a very common question/comment. If a new framework won't kill another, the new framework will never succeed, which is of course not true.

[@ovarelac]

on the one hand Blazor is amazing, I can imagine things like: photoshop, protools, videogames, a ZX Spectrum emulator, etc. running in the browser, which is mind blowing. However in the other hand I understand the perspective of the person who told you: "never gonna be a thing"... because You can not generalize all web projects into a single way of working. I understand the power of Blazor for large projects BUT in light projects, the programmers like to be in control (including me), and not that there's a lot of "MAGIC" everywhere, because that implies that many things are going to happen behind the scenes, things that I don't see and can't debug, and that at some point are going to go wrong... Microsoft should have already learned that after the slow death of the web forms. I don't think the solution is to remove javascript or say you don't need it anymore... It's like to do a simple task (like a table CRUD) you need a spoon but Blazor is like carrying a big bulldozer... you don't need THAT much power for something so simple . I think that's what people at Microsoft can't see.

[@EngstromJimmy]

I use Blazor for small projects as well. If we just ignore the magic for a bit (everything is open-source so there are ways to know). Working with NPM, transpiling and all of those things make me super slow. Having one language that I know is simply going to be the best experience… for me. So it come down to the developer. The end user is not going to say ”ugh, this is written in JS pr WebAssembly” the end user don’t care. From my perspective, if you are a C# developer, there is no reason to not choose Blazor when it comes to the size of the project.

[@ovarelac]

actually, there is a reason: I love javascript in the frontend... and debugging and working in my chromium-based browser. And I love C# in the backend... it's just the way I like to work... Cheers 😁👍

[@EngstromJimmy]

@@ovarelac ”no reason” was perhaps a bit harsh. What I meant was if you like JavaScript and is comfortable with what you already are working with, then you should continue. But if you enjoy C# and are not a fan of JavaScript then Blazor is a great alternative, and in my opinon, for all different project sizes :)

[@manuelmq2043]

Hello Young. I have a system developed entirely in Blazor and Oracle. The detail is that it hangs from time to time and I have to restart the server. You say that blazor supports millions of users, I don't have 50 concurrent users and it crashes. What should it be?

[@EngstromJimmy]

I don’t have enough information to diagnose the problem. From my experience I haven’t seen any problem like that when it comes to Blazor. It can be how you connect to the database, if you don’t dispose the connections that might add to a problem. Check the memory usage. But in short something is going on, but my bet is that it is not Blazor related.

[@manuelmq2043]

@@EngstromJimmy Thank you very much for the reply. My project is implemented with Radzen in the Fronted and Full API for the Backend. It is implemented in Windows 10 as a test. We are thinking of migrating to WebAssembly, and before doing so, could you give me any configuration recommendations for putting the system into production. Thank you again.

[@arknu]

The problem with Blazor is that it is inherently inefficient. Either you have to have a persistent connection to the server, with associated latency. Or you have to download 1 mb of WASM data. It is just less efficient to translate between C# and JS than just running directly in JS. Now, that may be alright in many cases, but you have to be aware that you'll never be able to match Angular or React for download size. Now, .NET 8 may change with the ability to do server side rendering and sprinkle WASM where needed.

[@CodingAfterWork]

It depends how you see it. Development time is faster (for a C# team), 1mb is absolutelly more than any JS framework. But as I mention in the video, most sites has WAY more than a mb of JS. But it all depends on the application we arr building and (I would argue) even more importantly, the team.

[@knightwriter2989]

"Inherently inefficient"? Comical.

[@BunmJyo]

哈哈哈👍

[@vivekkaushik9508]

2x

[@jora5483]

M$ products often is no capable of killing other tools, but itself. History proves it.

[@CodingAfterWork]

As you may have seen, the point the video is making is that there are room for more than one =)

[@jora5483]

@@CodingAfterWork Sorry. That's fine... tho I saw 'Angular killer' on the preview..

[@DigitalNomadOnFIRE]

It really does feel like cheating.

[@CodingAfterWork]

Haha, yep it really does

[@vivekkaushik9508]

async void is blasphemy in dotnet world lol

[@CodingAfterWork]

I never write the code like that, I must have had a temporary moment of insanity :)

[@chriswinslow]

47:29 “…Blazor has to be able to handle millions of users…but it can’t!” Everyone developing a website/app hopes to reach as many people as possible, not being able to handle huge amounts of users is not a good sales pitch! So basically, if expect to one day reach millions of users you’ll need to switch to a MEAN OR MERN stack, so you may just as well use either JS stacks from the get go?

[@ODSD_EXCITEMENT]

Wow, we aren't experiencing any problems with our internally developed test automation Workflow engine. We test thousands of real-time connections with ARM device testbed. We have real-time dashboard that tracks all test and this all works over the internet. No performance delayed at all. We are very impressed thus far. Lots of variables here so it most like depends on how you've Architected and implementated your application framework.

[@EngstromJimmy]

Blazor Server needs a continuous SignalR connection which adds constant load on the server. If you have millions of simultaneous users you should consider Blazor We Assembly (which works just as and other SPA Framework). In .NET 8 there will open up even more possibilities in this area with streaming updates, auto-switching and much more.

[@adrianspikes6454]

Waay too much time on something other than production. U forgot ur target audience

[@Rogueixpresents]

I dont think anything can kill javacript ecossytem in the frontend environment.