0:00 - Intro 0:52 - Creating Blazor WebAssembly app 4:14 - Web app overview 7:25 - Blazor Server app quick overview 9:52 - Code overview: WebAssembly 27:30 - Code compare to Server app 36:35 - When to use Server or WebAssembly 47:37 - Summary and concluding remarks
Stumbled on this video via google search looking for info on blazor. I was SO happy to find someone who explains things so clearly and simply how things work. Looking forward to viewing the rest of your videos on other topics. Regarding blazor web app, seems interesting but the eco system around it really needs to grow and I hope it will.
Just tried the Blazor Client webassembly... this is FU...ING revolutionary, mind blowing. My dev time for launching an app are going to be drastically reduced (stack: webapi + blazor client). 👌👍I've probably written just some lines of JS for some edge cased scenarios. Still love angular but this is on another level!
I've been following your WPF tutorials for work and they are super helpful! However, I love web development and I heard Blazor is a great technology to learn within the Microsoft ecosystem. Thank you for breaking down the difference between these two technologies, it can be a bit confusing to understand which one to use. I agree with you that Blazor server seems like a good default choice to start with if you're unsure of your use case. Looking forward to watching more of your video series!
Great to see the differences between the server and the local flavors of webassembly, but will there be a course on developing a project using Blazor WebAssembly ?
I really like Blazor server, and am intrigued about the options this opens up in case I have a requirement to do a SPA / PWA as obviously each has their own place. I don't really understand the hate for code rendered on the server, it really isn't limited to intranets and not every project needs the complexity that a framework like Angular, React or Vue introduces. Listening to some people out there you'd think that PWA was the only possible solution for public facing web applications, which I simply don't accept. How nice it is to hear TIm actually stating the obvious that the simplicity of server render code will suffice for a lot of people. Also nice to see the positive comments below about Blazor Client and the time savings compared to Angular, React or Vue which could be a deal breaker.
I don't know if its been said in the comments yet, but you can run both at the same time, just set one project to "Start without debugging" and the other to "Start". They should both run when you start a debug session then.
Blazor WebAssembly is a bit different. It is completely client-side rendered so you can use Razor syntax but you cannot add a Razor page to the project.
Thanks for great introductory video, Mr. Corey! Can you kindly tell in which case (or cases) Api can be beneficial for Blazor Server? I can only imagine microservices case, where you’ll have to use BFF pattern with Api behind your frontend which will be used as a sort of router for your system from actual client to the services behind these gateway (or I call it router for some reason).
Absolutely. I've got a course coming out on APIs that actually demonstrates that specific topic. We build a Blazor Server project to consume an API that has security on it.
@@IAmTimCorey awesome, thanks! At my company our sites have 3 layers between them. The web site server, the app server, and the database server. Each app will rest on the corresponding server so wanted to make sure the web server could have the Blazor Server app, the App server will host the API and then the database rests on the data server. You're the best teacher I've seen on UA-cam. My colleagues and I are amazed at the amount of people we interview that can code but have no concept of what well written code is and how to test and or debug.
In this case, they aren't truly full screen. I just dragged the frame up to cover most of the browser window. You can also pop out the developer tools so they can be full screen.
Is it secure to send "semi-sensitive" data to the client from the server api controllers, like for example social security numbers? Does .NET automatically encrypt (via abstraction) the data gets requested by the client?
When I make a new blazor webassembly app and don't check use core, it won't run. I get "Unable to run your project. the "RunCommand" property is not defined. ". It works if I check the use core button but that creates three projects.
Hi Tim, great video. Thank you so much. I was however left confused about exactly what gets downloaded from the server as your executable... Is it a compiled WASM file (a binary dll) or it is a .js file?. If it's a compiled dll in byte form then surely your code is safer from being copied than a normal C# developed .exe file in an app which can easily be refactored back to C#? If no C# gets downloaded then you are much better off. Ok, it can still be de-compiled but it would be much, much more difficult to interpret. Thanks again!
A dll is part of it but it needs to be read by the WASM so it is basically a script-style file. You can read it and even debug the C# code right in the browser tools (like you can JavaScript). All client-side code is visible to the end user.
Good Morning. huge fan of the channel. I would like to ask, WHEN WILL YOU CONTINUE WITH THE TIMCO RETAIL MANAGER COURSE? or ARE YOU DONE WITH THAT COURSE?. I am very interested in seen how to implement the Asp.Net MVC web frontend of the application.
It is coming. It is on a slight break. I am currently moving across the country, so I pre-recorded some videos that I had in the queue rather than trying to rush the TimCo videos. They should come back sometime in July.
hey Tim, Great Video and made it easier to me to see the difference between both, I have a question does all info here still accurate now ? are there any updates on both ? thanks a lot
The differences still hold true today. There will be some changes in .NET 8 in November that will improve some of the problems and allow you to switch more easily, but the differences will still be the same.
Thank you Tim for the video. I really appreciate your effort. I have a question on scalability side. If I want to containerise the app and spin up few instances of the container. Then how would the session for Signal R connectivity will be take care of. Thanks in advance.
Hi Tim, I've recently started following you on YT and I am amazed how just after several videos my mindset regarding development is changed, for the better of course. I am about to start a new project, rather smaller one, and planned to do in WASM which I've never used before for production (just had one project with Blazer server), because I wanted this to be my first SPA+WebAPI project expecting that it would be faster UX and simpler to develop than Server. Now after watching this video I have second thoughts. In your opinion what should be better (easier) to develop/maintain, WASM or Server? My business logic is mostly in stored procedures and I would use EF6 (I'm not good with Core) and Dapper.
Hey Tim, Thank you so much for such informative video. I have one question, When we use Blazor WebAssembly since the dlls are cached by the browser so if we make any change in the client, does the new version of the dll gets replaced in the browser or the user has to manually hard reload the site again to get the latest dll ??
I saw other blazor videos who said that aspnet core hosted is usually used when doing progressive web app. They said that doing as aspnet core hosted means its still a web assembly. However, its easier to connect to the server for database stuff. In that case, its still truly a web assembly but uses the server only for when having to communicate with web api for example.
I can see people doing that because it feels easier. However, I have found that it actually is more difficult to maintain in the long run in my opinion. I prefer to have a completely separate API compared to trying to create a UI-specific backend project.
@@IAmTimCorey One question I have is if they are separate, then if somebody is doing a progressive web app and they close off, how do they run the progressive web app? Because I ran lots of tests and found that when its aspnet hosted and they run that local, then they can run the progressive web app for the first time. However, when separate, there is no exe so not sure how somebody can open the progressive app the first time.
I got question out here: If i want to create a PWA on mobile device for my customer (shopping carts)， but need to connect to Azure DB for merchandise info，which plateform should i choose? (it doesn't have to work offline，it just has to be fast)
Hey Tim, do you know if it is possible to setup a Blazor Server/Client such that the Blazor Server is used for the majority of the site, and the Blazor Client is used only in a few cases? The main purpose of this would be to avoid the large loading times for the client, except when absolutely necessary. Thanks, Matt Zawislak
Tim, It been a while since this video. I still curious on you feeling what the purpose of Blazer Webassemby Hosted Core option is? Also curious in general, should the the NavMenu provided by Blazor be used.
The hosted option is a shortcut to creating an API. I personally prefer not to use it. As for the NavMenu, you can use it if it works for you or you can replace it or modify it.
Firstly great tutorial Tim, going on what you said regarding the differences between Server and WebAssembly I notice you run both in IISExpress, so in theory once the webassembly app has been downloaded to the browser and if the connection to IIS was then disconnected would the webassembly app continue functioning as normal?
If the app were not running in development, correct. However, in development mode offline is disabled. The reason why is because otherwise it would make debugging a nightmare (you would need to launch the app, wait for it to pull the update, which is not a visible thing, and then restart the app - you would need to do this every time you make any change at all).
It depends on the situation. If you have an existing API (like we do in the TimCo series), I would use Blazor WebAssembly for the offline capabilities. If you don't have an API, I would choose Blazor Server for the ease of development.
@@IAmTimCorey Thanks for quick reply. I have started with web assembly with asp.net core hosting which creates client, server and domain project... Is there any way like lazy loading im web assembly so it will not load all the resources on first time load.
I didn't cover authentication with Blazor WebAssembly. I will in the future. You can't just connect to your Identity DB like you can with Blazor Server.
Question: are there issues or benefits of having a Blazor WA client in front of a Blazor Server. Second question is regarding running Blazor Client in an OfficeJS Add-in Taskpane?
Blazor Server can't directly support Blazor WebAssembly. It isn't an API, which is what Blazor WebAssembly needs. As for your second question, I don't know.
I actually found there was another case where blazor server side cannot be used. If a person is creating a game and there is a timer where it has to redraw a screen, in that case, i found out that web assembly has to be used even if only one person was using because if a timer calls the StateHasChanged, then nothing happens but when you do the same thing with web assembly, it worked. I am guessing it was because they designed the server side where it can't just use a timer then call statehaschanged. This means if they are creating like a browser game, most likely web assembly is the way to go in that case too.
Blazor, and infact all SPA frameworks, is definitely not the platform you want to use to create browser games. Use Unity, it's C# and can be exported to WebAssembly browser.
@@adds-kz3oc How can unity use the local storage if it knows nothing about the browser stuff though. Because many games needs to save but the person can be offline though.
Web-based games typically don't save locally but they can if you use Blazor WebAssembly. Just remember that this storage is volatile. It can be deleted without warning, by the user, by the browser, or by a clean-up application. You don't want to depend on it long-term.
@@IAmTimCorey What is the suggested way of saving something like a user name then? Because even if its saved to the cloud, obviously when the user first goes into the page, its not going to know who they are. I would think that web based games would save to local storage if its a long game and they want to autoresume. For that case, usually the user would probably come back to it the next day or something.
I'm not sure what you mean by writing the code in PowerShell. PS can be used as the command shell to run dotnet commands to create projects, yes, but Blazor WebAssembly is a C# application. It isn't something that can be written in PowerShell instead of C#, if that is what you are asking.
@@IAmTimCorey , I meant writing the webpage in PowerShell like below. Demo: demo.ironmansoftware.com/PowerShell-Universal Code: github.com/ironmansoftware/poshud.com/blob/main/Repository/Dashboard.ps1 Homepage: ironmansoftware.com/powershell-universal-dashboard/ Thanks for clarifying.
If I publish my Blazor WebAssembly app and after some time decide to make design changes and publish my app again are those changes going to be visible to the previous clients? I’m a bit inexperienced so this question might sound stupid. By the way, thanks for amazing content and effort.
Yes. In "regular" mode, the new updates will update your site like any "normal" website. If they are using the PWA feature (installing your site like an app), they will be a version behind. When the new changes are published, they will still load the old site one more time. Then in the background, the site will update itself and it will be ready for when it is next run.
Hi Tim, is there a way to globally catch unhandled exceptions in a Blazor WebAssembly stand-alone app? My goal is to centralise handling of these exceptions instead of having to use try/catches. I’ve done some research but can’t really find an answer. Thanks very much in advance.
Tim I am putting this on here just in case someone is using the same configuration as I am. I am running on a Mac with both Rider and Visual Studio installed. I have used both to create the same exact application, but here is what I have noticed. In Rider it fails to build the project and throws a nasty error, where as Visual Studio Builds the project like it is supposed to. I have reached out to Jetbrains to see what they can come up with as far as a solution. I did not try it with the EAP because it could introduce bugs that I don't want to mess with on the initial build
That's the problem with a third-party IDE - they have to keep their environment constantly up to date compared to what Microsoft is releasing. It is a really tough job, and one I commend them for doing so well most of the time. Hopefully they get this straightened out.
Thanks for the explanation. Recently i worked on one project, where Angular is used as the front end framework and springboot is backend. Now i moved to .NET projects .I understood that Blazor supports two hosting models, client side hosting model and server side hosting model. Now i am going to start .NET project with blazor. I have created REST API for the project.Now i have to use Blazor in that project.Here my doubt comes. 1)Blazor web assembly is for front end (or) back end ? 2)Blazor Server app is for front end (or) back end?
You can do front-end and back-end work in Blazor Server, but it is ideal to create a class library for your back-end code and just do your user interface work in Blazor Server. Blazor WebAssembly needs an API for the business logic and data access (back-end) work since it is fully client-side.
What would the difference be by using the "ASP NET Hosting" option on WASM project creation ? Comparatively to creating individual WASM(Client), Server projects ?
how secure is webassembly if someone can download your code. is there something that can be done to like encrypt it or something? what about local storage can anything be done in terms of data security?
That is the nature of the web. All JavaScript applications (Angular, React, Vue) are entirely downloaded to the client as well. When it comes to "security", it depends on what you mean. You cannot encrypt your code itself, no. You could technically try to encrypt the data that is downloaded, but that is fairly meaningless. That's why Blazor WebAssembly does not talk directly to the database but goes through an API (where there is security and encryption). You can encrypt the data in local storage, but it is only available to you and the website you got it from, so it isn't a big security risk.
@@tomthelestaff-iamtimcorey7597 i'm looking into blazor exactly because i have exactly zero intention to learn any JS, so this is a bit disappointing :)
You don't have to use JavaScript unless you want to. You can do all of the line of business tasks you need with just C#. It is only if you want to add additional functionality not already in Blazor that you need to dip into JavaScript.
@@IAmTimCorey i'm an F#pist, a rare type who kinda skipped all the OO development stage, though i could muster enough C# to handle a blazor project. i'm also looking into SAFE stack / Bolero / model-view-update.
Really like your content 9/10 videos or more and you've given me So much useful knowledge I'll have to look into compensation via patreon or the like. That said i felt this particular video was slightly difficult to follow, to me it jumped around a bit too rapidly.
Can we use blazor to build game? I want to make a Chess game and I want put it on the web so I can easily share with my friends. But I don't want to use JS. I like C# and I thought blazor would good option for it.
Interesting video Tim and thank you. I was curious about the ASP.Net Core Hosted part - how is it different from normal Webassembly and any connection with PWA. Personally has new to Web development (not C#), I found the ASP.Net Core Hosted part and easy way to get into actual API development. As being new to web development with modern frameworks and recently because of experimenting with ASP Razor pages - I found that Blazor (both versions) are the best way to learn.
@@IAmTimCorey Yes I would agree but does ASP.Net Core Hosted have different purpose. Experimenting with gave me better understanding of APIs on server.
Comparing the two Blazors is like comparing apples and oranges. Blazor Server is pre-compiled, server-side code. Blazor WebAssembly is interpreted code that runs on the client. There will be a speed difference. If speed is the only consideration, definitely choose Blazor Server (up to a point - after so many concurrent connections, Blazor WebAssembly will pull ahead). Usually you should default to Blazor Server if you are choosing between the two. The only reason to choose Blazor WebAssembly is if you want some of the unique items it can offer (PWA, scalability, true client-side, offline support, etc.)
14:21 isn't it a bit misleading to say C# code runs on the client platform? It's compiled to WASM right, so the client platform never sees any C#? or am i misunderstanding things.
Not good ones. Especially if you want to go back before IE 11. I know a lot of people are still using IE but encourage them to use Edge (or Firefox or Chrome).
i think it is good idea to learn webassembly hosted application comes through a series from start to finish upon on a project to achieve by the end of this series whis is related by number jndexed ,, while this series you can say all your good points and tricks , that is an idea like to mentiom it here cause i feel you try to encourage us to offer what we need ... thabks
@@guilhermemolin Thanks. Blazor server also front end right? But Blazor web assembly runs on the client side browser and blazor server runs on the server.Am i correct? Please correct me if i'm wrong.
@CoCo - Blazor Server runs on the server but it also acts like a client-side application. Your C# code never goes to the client (unlike a true client-side application like Blazor WebAssembly) but you get the same rich interactivity using SignalR. Both are front-ends, yes, although I think what Guilherme meant was client-side front-end.
I'll be covering that more in-depth in the coming weeks. Basically, think of it as an API project that was already set up for you to work with your Blazor WebAssembly project.
Can you do a Blazor video using the ASP.NET Core hosted option? I know you said it makes it almost totally like a Blazor Server application, but my little bit of testing seems to pull the client side into the server application and from the browser it seems to work with the client piece more than the server piece. It seems to just give you that separation of your server data along with the client app for the webassembly part. Maybe I'm wrong, but would love to see your interpretation and a sample how you would work with it if using the ASP.NET Core hosted option. Love your videos BTW.
Thanks for the in depth comparison bw BlazorServer and Blazor WebAssembly. I watched a video the other day suggesting Blazor is a means by which one can almost eliminate javascript from their code. Is this true???
It depends on the situation. You can definitely do a lot of the same things with Blazor that you can with Angular, React, or Vue. Since it is all in C#, you will then have just one language to deal with (beyond HTML and CSS). That's the ideal picture. However, there is still a use for JavaScript. There are a LOT of great libraries out there for making your life better (pop-up windows, mapping, 3d drawing, page manipulation, etc.) You will still find these useful in your project but you don't HAVE to use them in order to get a great user experience. Now you get to choose if you want to add in JavaScript. Without Blazor, you are almost forced to use JavaScript if you want a good user experience. Now you can treat it as a bonus instead of a requirement.
Any chance you could make a video on how to apply ITIL-BM to a project? And how to make a contract? I've been studying programming for 2 years, and i still have no clue on how to approach a potential client.
It's been ages since you posted, but if you're still wondering. I'm pretty sure you would need to host a web browser in the child window. WebView2 is probably the simplest.
Hey is there comming a video with blazorwasm "-- hosted" how that is built together? Because it's making a client side project and a server side project and it works together somehow. Btw thanks for the videos you are the best
@@IAmTimCorey Ahh cool, just figured out it's just an api on top of it but then you can do some cool stuff with signalr like the docs did. Not sure if that's possible with an seperate asp.net core webapi, anyway thanks!
3:14 I'd love to see you do a tutorial on token-based authentication and CRUD with WebAssembly in the manner you'd do it, without ASP.NET Core hosted. Register Account (create), Account Profile (read), Edit Account (update), and Close Account (delete).
I've used both now and I'll recommend blazor wasm any day, why? each time your network drops that silly white overlay makes your ui useless. i will only ever use blazor server again if i intend to embed in a desktop app with electron or something. Blazor server would have been perfect if it behaved like typical mvc or razor pages website. The component ui based approach is excellent.
Has anyone figured out how to integrate client side - web assembly Blazor into an existing .NET MVC project? I'm sure I'm not the only one here who works on old legacy apps and I was able to easily integrate server side Blazor into my MVC project but client side is a different story. I find it hard to believe that this will only be usable if your starting a SPA project from scratch.
It depends on how you want to integrate it. MVC can act like an API. If you use it that way, it is simple to integrate Blazor WebAssembly - you use the MVC project as your data source.
@@IAmTimCorey No that's not what I mean. I just want to use it sporadically on some pages in my, otherwise, regular MVC app. For example let's say I want to make a wizard like interface where form elements appear based on previous user selection - form elements show up or dissapear based on my choices as a user. That kind of interface is complex and currently I use something like Vue.js to accomplish this task. I can also do this with server side Blazor because it's easy to integrate and use in an app. But I failed to figure out how to do this with client side - web assembly Blazor. Seems like it's intended for SPA apps only which sucks because it's advertized as a replacement for javascript mess.
As a student soon to break into the industry, what should I invest my time into learning? Blazer or .NET Core MVC? Or more specifically blazer web assembly, blazer server side, or .NET Core MVC? I want to learn what most jobs use so I have more job opportunities. Also does blazer not use MVC? I heard MVC is very commonly used. Great video btw :D
Looks interesting, but the really sad part is I was doing a lot more compelling WEB UI C# in the client ten year ago with Silverlight. Why should I trust Microsoft on this.
Because Silverlight was dependent on a browser plug-in from Microsoft. Browsers had to allow it and allow it access to browser resources. That was a constant war. With Blazor WebAssembly, Microsoft is creating something on top of the industry-standard product (WebAssembly - that isn't a Microsoft thing, it is a web standard that everyone supports). There is no fight to keep this supported. It is being supported by the entire community. Plus, Blazor WebAssembly is open source, so even if Microsoft decided to stop developing it, the community could continue it if they wanted to.
0:00 - Intro
0:52 - Creating Blazor WebAssembly app
4:14 - Web app overview
7:25 - Blazor Server app quick overview
9:52 - Code overview: WebAssembly
27:30 - Code compare to Server app
36:35 - When to use Server or WebAssembly
47:37 - Summary and concluding remarks
Loving Blazor. Just converted a little SPA I had done in Angular and was able to do it in about half the code. Much more readable and faster.
Yup same, converted a few react apps and it took me like 1/3 of the time. So easy as a c# dev.
Awesome!
What's the download size?
Thank you, I am always looking forward to your content. I taught myself C# having your channel as a top resource.
Awesome!
Stumbled on this video via google search looking for info on blazor. I was SO happy to find someone who explains things so clearly and simply how things work. Looking forward to viewing the rest of your videos on other topics. Regarding blazor web app, seems interesting but the eco system around it really needs to grow and I hope it will.
Yep, it is still fairly new, but it is rapidly growing. It will be even better with .NET 6, which comes out in November 2021.
Constantly blown away by how great your videos are, keep it up!
Thank you!
This is an incredibly well presented and educationally excellent video - well done Tim
Glad you enjoyed it!
Thank you for the reply Tim. Once I watch all the video I realized you did address my question.
Great!
Just what the dotnet developers have been waiting for... Thumbs up for this intro
Thank you!
Just tried the Blazor Client webassembly... this is FU...ING revolutionary, mind blowing. My dev time for launching an app are going to be drastically reduced (stack: webapi + blazor client). 👌👍I've probably written just some lines of JS for some edge cased scenarios. Still love angular but this is on another level!
I am glad you are going to get a lot of value out of it.
I've been following your WPF tutorials for work and they are super helpful! However, I love web development and I heard Blazor is a great technology to learn within the Microsoft ecosystem. Thank you for breaking down the difference between these two technologies, it can be a bit confusing to understand which one to use. I agree with you that Blazor server seems like a good default choice to start with if you're unsure of your use case. Looking forward to watching more of your video series!
I'm glad you enjoyed it.
I’ve been waiting for you to do this for so long! Thank you!
You are welcome.
Great explanation, specially the comparison and the differences between the two Blazor templates. Thanks!
Glad it was helpful!
i think this is the best channel for c# developers
keep doing the great work.............
Thanks!
Great to see the differences between the server and the local flavors of webassembly, but will there be a course on developing a project using Blazor WebAssembly ?
Yes, there will be.
seconded.
@@IAmTimCorey Its hard to debug Blazor WASM can you please do a video?
Subscribed with thumbs-up. Thank you for a very thorough explanation of the starting projects!
Welcome aboard!
BaldAndBankrupt is doing Computer science videos? What a day to be alive !
Close, but no. I'm younger (barely) and taller. 😆
S/O from Paris, crystal clear dynamic of explanation ! Thanks !
You're very welcome!
I really like Blazor server, and am intrigued about the options this opens up in case I have a requirement to do a SPA / PWA as obviously each has their own place. I don't really understand the hate for code rendered on the server, it really isn't limited to intranets and not every project needs the complexity that a framework like Angular, React or Vue introduces. Listening to some people out there you'd think that PWA was the only possible solution for public facing web applications, which I simply don't accept. How nice it is to hear TIm actually stating the obvious that the simplicity of server render code will suffice for a lot of people. Also nice to see the positive comments below about Blazor Client and the time savings compared to Angular, React or Vue which could be a deal breaker.
I am glad you enjoyed it.
It’s a great Video.. thank you Soo much Tim .. looking forward to listen you more ..
You are welcome.
Nice video Tim, when you thinking of doing the PWA video, that could be a real game changer if the technology delivers.
It is coming and it definitely adds a nice addition to the web development options.
Thank you Tim for the content, looking forward for more Blazor videos.
Noted on my list. Thanks for the idea.
Great video! Thanks for the guidance Tim
You are welcome.
Tim, as always great video/presentation.
Glad you enjoyed it
Really good video, thanks
Glad you liked it!
Amazing thanks you Tim
You are welcome.
I don't know if its been said in the comments yet, but you can run both at the same time, just set one project to "Start without debugging" and the other to "Start". They should both run when you start a debug session then.
Yeah, that was probably it. Thanks for sharing. I'll try that next time.
Is it possible to add Razor pages inside blazor webassembly ?
Blazor WebAssembly is a bit different. It is completely client-side rendered so you can use Razor syntax but you cannot add a Razor page to the project.
@@IAmTimCorey thank you very much. 😀
Good stuff Tim. I am looking forward to seeing more videos on blazor PWA.
More to come!
Thanks for great introductory video, Mr. Corey!
Can you kindly tell in which case (or cases) Api can be beneficial for Blazor Server? I can only imagine microservices case, where you’ll have to use BFF pattern with Api behind your frontend which will be used as a sort of router for your system from actual client to the services behind these gateway (or I call it router for some reason).
I can use an API with Blazor Server correct?
Absolutely. I've got a course coming out on APIs that actually demonstrates that specific topic. We build a Blazor Server project to consume an API that has security on it.
@@IAmTimCorey awesome, thanks!
At my company our sites have 3 layers between them. The web site server, the app server, and the database server. Each app will rest on the corresponding server so wanted to make sure the web server could have the Blazor Server app, the App server will host the API and then the database rests on the data server. You're the best teacher I've seen on UA-cam. My colleagues and I are amazed at the amount of people we interview that can code but have no concept of what well written code is and how to test and or debug.
@15:14 in video, how did you get the dev tools window to full screen?
In this case, they aren't truly full screen. I just dragged the frame up to cover most of the browser window. You can also pop out the developer tools so they can be full screen.
Is it secure to send "semi-sensitive" data to the client from the server api controllers, like for example social security numbers? Does .NET automatically encrypt (via abstraction) the data gets requested by the client?
You should be using HTTPS for your API so that should be secure. However, you should still limit sensitive data transmission whenever possible.
When I make a new blazor webassembly app and don't check use core, it won't run. I get "Unable to run your project. the "RunCommand" property is not defined.
". It works if I check the use core button but that creates three projects.
What is your preference for the @code sections? In the .razor file, or in a separate .cs file?
I start in code and then move them.
Hi Tim, great video. Thank you so much. I was however left confused about exactly what gets downloaded from the server as your executable... Is it a compiled WASM file (a binary dll) or it is a .js file?. If it's a compiled dll in byte form then surely your code is safer from being copied than a normal C# developed .exe file in an app which can easily be refactored back to C#? If no C# gets downloaded then you are much better off. Ok, it can still be de-compiled but it would be much, much more difficult to interpret. Thanks again!
A dll is part of it but it needs to be read by the WASM so it is basically a script-style file. You can read it and even debug the C# code right in the browser tools (like you can JavaScript). All client-side code is visible to the end user.
9/18/2020 - was able to start both projects
You can but you don’t need to.
@@IAmTimCorey Yeah , just though that i'd mention it :)
At 3:00 why does it say "Linux" on the right?
Because you can deploy it to a Docker container that is running Linux (or Windows).
@@IAmTimCorey thanks! Good to know it's not just me, I installed 2019 today and I thought I'd messed up the install options.
Good Morning. huge fan of the channel. I would like to ask, WHEN WILL YOU CONTINUE WITH THE TIMCO RETAIL MANAGER COURSE? or ARE YOU DONE WITH THAT COURSE?. I am very interested in seen how to implement the Asp.Net MVC web frontend of the application.
I'm still waiting for the unit testing section myself.
It is coming. It is on a slight break. I am currently moving across the country, so I pre-recorded some videos that I had in the queue rather than trying to rush the TimCo videos. They should come back sometime in July.
@@IAmTimCorey I am eagerly waiting for it
hey Tim, Great Video and made it easier to me to see the difference between both, I have a question does all info here still accurate now ? are there any updates on both ? thanks a lot
The differences still hold true today. There will be some changes in .NET 8 in November that will improve some of the problems and allow you to switch more easily, but the differences will still be the same.
Thank you Tim for the video. I really appreciate your effort. I have a question on scalability side. If I want to containerise the app and spin up few instances of the container. Then how would the session for Signal R connectivity will be take care of. Thanks in advance.
Hi Tim, I've recently started following you on YT and I am amazed how just after several videos my mindset regarding development is changed, for the better of course. I am about to start a new project, rather smaller one, and planned to do in WASM which I've never used before for production (just had one project with Blazer server), because I wanted this to be my first SPA+WebAPI project expecting that it would be faster UX and simpler to develop than Server. Now after watching this video I have second thoughts. In your opinion what should be better (easier) to develop/maintain, WASM or Server? My business logic is mostly in stored procedures and I would use EF6 (I'm not good with Core) and Dapper.
Blazor Server is easier to maintain (WebAssembly needs an API), but it depends on your project needs.
Nice work
Thanks
Thank you Tim. Excellent contents, but how can we get more (probably a complete project) in this subject? Are you planning to make a course in Udemy?
I am planning to create a start to finish course for my site (iamtimcorey.com).
Hey Tim, Thank you so much for such informative video. I have one question, When we use Blazor WebAssembly since the dlls are cached by the browser so if we make any change in the client, does the new version of the dll gets replaced in the browser or the user has to manually hard reload the site again to get the latest dll ??
The dll gets updated because it is a new version of the file. It will only pull from the cache if the file has not changed.
thanks Tim
You are welcome.
Funny, how did you knew i was watching this video :-) "You to, Serge" at 10m47
Grtz and thanks for these crystal clear video's
Serge
You are welcome.
I saw other blazor videos who said that aspnet core hosted is usually used when doing progressive web app. They said that doing as aspnet core hosted means its still a web assembly. However, its easier to connect to the server for database stuff. In that case, its still truly a web assembly but uses the server only for when having to communicate with web api for example.
I can see people doing that because it feels easier. However, I have found that it actually is more difficult to maintain in the long run in my opinion. I prefer to have a completely separate API compared to trying to create a UI-specific backend project.
@@IAmTimCorey One question I have is if they are separate, then if somebody is doing a progressive web app and they close off, how do they run the progressive web app? Because I ran lots of tests and found that when its aspnet hosted and they run that local, then they can run the progressive web app for the first time. However, when separate, there is no exe so not sure how somebody can open the progressive app the first time.
I got question out here: If i want to create a PWA on mobile device for my customer (shopping carts)， but need to connect to Azure DB for merchandise info，which plateform should i choose? (it doesn't have to work offline，it just has to be fast)
I would pair Blazor WebAssembly with ASP.NET Core API.
@@IAmTimCorey Thank you sir!!
Good stuff
Appreciate it
Hey Tim, do you know if it is possible to setup a Blazor Server/Client such that the Blazor Server is used for the majority of the site, and the Blazor Client is used only in a few cases? The main purpose of this would be to avoid the large loading times for the client, except when absolutely necessary. Thanks, Matt Zawislak
Great explanation and differences, could you please create a video on hosting and deployment of Blazer web assembly vs blazer server
I will add it to the list. Thanks for the suggestion.
Tim, It been a while since this video. I still curious on you feeling what the purpose of Blazer Webassemby Hosted Core option is? Also curious in general, should the the NavMenu provided by Blazor be used.
The hosted option is a shortcut to creating an API. I personally prefer not to use it. As for the NavMenu, you can use it if it works for you or you can replace it or modify it.
@@IAmTimCorey That is pretty much what I thought. I guess NavMenu depends on Application layout - it also depends on lot on the menu.
Good tutorial. Can one create a group chart e.g. Monthly Sales chart with Blazor server or Blazor WebAssembly?
Firstly great tutorial Tim, going on what you said regarding the differences between Server and WebAssembly I notice you run both in IISExpress, so in theory once the webassembly app has been downloaded to the browser and if the connection to IIS was then disconnected would the webassembly app continue functioning as normal?
If the app were not running in development, correct. However, in development mode offline is disabled. The reason why is because otherwise it would make debugging a nightmare (you would need to launch the app, wait for it to pull the update, which is not a visible thing, and then restart the app - you would need to do this every time you make any change at all).
Hi Tim, so what about MVC as such, is it a history? I am a bit confused where MS is heading ...
No, it isn’t history. We just have more options. Check out my Which ASP.NET Core course for more information.
Great explanation and differences, Could please create a video on Clean/Onion architecture using dapper, that will be great thanks in advance...
I will add it to the list. Thanks for the suggestion.
What would you suggest to use for single user admin panel.
Web assembly or blazor server app
It depends on the situation. If you have an existing API (like we do in the TimCo series), I would use Blazor WebAssembly for the offline capabilities. If you don't have an API, I would choose Blazor Server for the ease of development.
@@IAmTimCorey Thanks for quick reply.
I have started with web assembly with asp.net core hosting which creates client, server and domain project...
Is there any way like lazy loading im web assembly so it will not load all the resources on first time load.
The Authentication / Authorisation stuff is still not clear for me. How do I connect to my already excisting table with users?
I didn't cover authentication with Blazor WebAssembly. I will in the future. You can't just connect to your Identity DB like you can with Blazor Server.
I would be happy with an explanation of how to contact my user table via Blazor Server.
To understand this you need the basics of what a JWT is, what claims are and how they can be used for authorization policies.
Question: are there issues or benefits of having a Blazor WA client in front of a Blazor Server. Second question is regarding running Blazor Client in an OfficeJS Add-in Taskpane?
Blazor Server can't directly support Blazor WebAssembly. It isn't an API, which is what Blazor WebAssembly needs. As for your second question, I don't know.
I actually found there was another case where blazor server side cannot be used. If a person is creating a game and there is a timer where it has to redraw a screen, in that case, i found out that web assembly has to be used even if only one person was using because if a timer calls the StateHasChanged, then nothing happens but when you do the same thing with web assembly, it worked. I am guessing it was because they designed the server side where it can't just use a timer then call statehaschanged. This means if they are creating like a browser game, most likely web assembly is the way to go in that case too.
Blazor, and infact all SPA frameworks, is definitely not the platform you want to use to create browser games. Use Unity, it's C# and can be exported to WebAssembly browser.
@@adds-kz3oc How can unity use the local storage if it knows nothing about the browser stuff though. Because many games needs to save but the person can be offline though.
Web-based games typically don't save locally but they can if you use Blazor WebAssembly. Just remember that this storage is volatile. It can be deleted without warning, by the user, by the browser, or by a clean-up application. You don't want to depend on it long-term.
@@IAmTimCorey What is the suggested way of saving something like a user name then? Because even if its saved to the cloud, obviously when the user first goes into the page, its not going to know who they are. I would think that web based games would save to local storage if its a long game and they want to autoresume. For that case, usually the user would probably come back to it the next day or something.
@@andywalter7426 The server. A database. Not sure why it being a browser game changes that at all.
Can the code be written in PowerShell too, like in PowerShell universal dashboard?
I'm not sure what you mean by writing the code in PowerShell. PS can be used as the command shell to run dotnet commands to create projects, yes, but Blazor WebAssembly is a C# application. It isn't something that can be written in PowerShell instead of C#, if that is what you are asking.
@@IAmTimCorey , I meant writing the webpage in PowerShell like below.
Demo: demo.ironmansoftware.com/PowerShell-Universal
Code: github.com/ironmansoftware/poshud.com/blob/main/Repository/Dashboard.ps1
Homepage: ironmansoftware.com/powershell-universal-dashboard/
Thanks for clarifying.
If I publish my Blazor WebAssembly app and after some time decide to make design changes and publish my app again are those changes going to be visible to the previous clients?
I’m a bit inexperienced so this question might sound stupid. By the way, thanks for amazing content and effort.
Yes. In "regular" mode, the new updates will update your site like any "normal" website. If they are using the PWA feature (installing your site like an app), they will be a version behind. When the new changes are published, they will still load the old site one more time. Then in the background, the site will update itself and it will be ready for when it is next run.
Hi Tim, is there a way to globally catch unhandled exceptions in a Blazor WebAssembly stand-alone app? My goal is to centralise handling of these exceptions instead of having to use try/catches. I’ve done some research but can’t really find an answer. Thanks very much in advance.
Catch them where the application starts. Displaying them is an other issue, though.
Tim I am putting this on here just in case someone is using the same configuration as I am. I am running on a Mac with both Rider and Visual Studio installed. I have used both to create the same exact application, but here is what I have noticed. In Rider it fails to build the project and throws a nasty error, where as Visual Studio Builds the project like it is supposed to. I have reached out to Jetbrains to see what they can come up with as far as a solution. I did not try it with the EAP because it could introduce bugs that I don't want to mess with on the initial build
That's the problem with a third-party IDE - they have to keep their environment constantly up to date compared to what Microsoft is releasing. It is a really tough job, and one I commend them for doing so well most of the time. Hopefully they get this straightened out.
Thanks for the explanation. Recently i worked on one project, where Angular is used as the front end framework and springboot is backend. Now i moved to .NET projects .I understood that Blazor supports two hosting models, client side hosting model and server side hosting model. Now i am going to start .NET project with blazor. I have created REST API for the project.Now i have to use Blazor in that project.Here my doubt comes.
1)Blazor web assembly is for front end (or) back end ?
2)Blazor Server app is for front end (or) back end?
You can do front-end and back-end work in Blazor Server, but it is ideal to create a class library for your back-end code and just do your user interface work in Blazor Server. Blazor WebAssembly needs an API for the business logic and data access (back-end) work since it is fully client-side.
What would the difference be by using the "ASP NET Hosting" option on WASM project creation ? Comparatively to creating individual WASM(Client), Server projects ?
Intro 0:52
Thanks, but if you could break the entire video down by chapters, that would really add value for future viewers.
how secure is webassembly if someone can download your code. is there something that can be done to like encrypt it or something? what about local storage can anything be done in terms of data security?
That is the nature of the web. All JavaScript applications (Angular, React, Vue) are entirely downloaded to the client as well. When it comes to "security", it depends on what you mean. You cannot encrypt your code itself, no. You could technically try to encrypt the data that is downloaded, but that is fairly meaningless. That's why Blazor WebAssembly does not talk directly to the database but goes through an API (where there is security and encryption).
You can encrypt the data in local storage, but it is only available to you and the website you got it from, so it isn't a big security risk.
so even with blazor webassembly i won't be able to completely avoid javascript? :/
The pesky stuff just gets everywhere!
@@tomthelestaff-iamtimcorey7597 i'm looking into blazor exactly because i have exactly zero intention to learn any JS, so this is a bit disappointing :)
@@YumanoidPontifex I get it.
You don't have to use JavaScript unless you want to. You can do all of the line of business tasks you need with just C#. It is only if you want to add additional functionality not already in Blazor that you need to dip into JavaScript.
@@IAmTimCorey i'm an F#pist, a rare type who kinda skipped all the OO development stage, though i could muster enough C# to handle a blazor project. i'm also looking into SAFE stack / Bolero / model-view-update.
Really like your content 9/10 videos or more and you've given me So much useful knowledge I'll have to look into compensation via patreon or the like.
That said i felt this particular video was slightly difficult to follow, to me it jumped around a bit too rapidly.
This is a comparison video rather than a straight “teach you about Blazor WebAssembly” video.
@@IAmTimCorey Should've perhaps paid a little more attention to the specific wording of the title :) Thanks for all your efforts!
Would you make tutorial on doing Steve Sandersons demo apps?
Check out my course announcement video ( ua-cam.com/video/hImU2xGZ_uQ/v-deo.html ). That course uses a Steve Sanderson demo app to learn from.
Can we use blazor to build game?
I want to make a Chess game and I want put it on the web so I can easily share with my friends.
But I don't want to use JS.
I like C# and I thought blazor would good option for it.
Interesting video Tim and thank you. I was curious about the ASP.Net Core Hosted part - how is it different from normal Webassembly and any connection with PWA. Personally has new to Web development (not C#), I found the ASP.Net Core Hosted part and easy way to get into actual API development. As being new to web development with modern frameworks and recently because of experimenting with ASP Razor pages - I found that Blazor (both versions) are the best way to learn.
Adding in the Hosted solution makes creating a PWA messier, in my opinion. I'll be showing the difference in a future video.
@@IAmTimCorey Yes I would agree but does ASP.Net Core Hosted have different purpose. Experimenting with gave me better understanding of APIs on server.
Hi Tim, I tried Webassembly hosted application but I do get some problems. Main one is it seems it slower than just Blazor server .
Comparing the two Blazors is like comparing apples and oranges. Blazor Server is pre-compiled, server-side code. Blazor WebAssembly is interpreted code that runs on the client. There will be a speed difference. If speed is the only consideration, definitely choose Blazor Server (up to a point - after so many concurrent connections, Blazor WebAssembly will pull ahead). Usually you should default to Blazor Server if you are choosing between the two. The only reason to choose Blazor WebAssembly is if you want some of the unique items it can offer (PWA, scalability, true client-side, offline support, etc.)
Can you Please talk about covariance contravariance and invariance? Out and in? Thank you!
I will add it to the list. Thanks for the suggestion.
looking forward to that PWA demo
The first one will be an explanation of basic PWA. After that, I'll be showing how to use a PWA more thoroughly.
Its hard to debug Blazor WASM can you please do a video?
I will add it to the list. Thanks for the suggestion.
when you discuss about microservices on dotnet??
It is on my list to cover. It doesn't have a date yet.
thank for your reply sir, i hope it can be release soon, thanks
Hi Tim, do you know how to activate Hot Reload in WebAssembly? thx
Nope. I don't think it is in place yet.
14:21 isn't it a bit misleading to say C# code runs on the client platform? It's compiled to WASM right, so the client platform never sees any C#? or am i misunderstanding things.
Actual C# code is compiled into a dll that is sent to the client. The client runs the C# code itself and you can debug the C# locally.
Any work around to IE browser?
Not good ones. Especially if you want to go back before IE 11. I know a lot of people are still using IE but encourage them to use Edge (or Firefox or Chrome).
@@IAmTimCorey we can still use Blazor server side so IE will also work correct?
Can I mix both in the same page, like, some parts of the page use SSR and other use CSR?
No, you can't mix client-side and server-side Blazor in the same project.
This might help you if what you're looking for is for better SEO. chrissainty.com/prerendering-a-client-side-blazor-application/
i think it is good idea to learn webassembly hosted application comes through a series from start to finish upon on a project to achieve by the end of this series whis is related by number jndexed ,, while this series you can say all your good points and tricks , that is an idea like to mentiom it here cause i feel you try to encourage us to offer what we need ... thabks
Thanks for watching
If Blazor web assembly fully runs on the client , if i make any Web API request then how it will communicate with server?
Blazor web assembly is frontend only, you must ha e a server running rest services and then call in blazor with HttpClient for example
@@guilhermemolin Thanks. Blazor server also front end right? But Blazor web assembly runs on the client side browser and blazor server runs on the server.Am i correct? Please correct me if i'm wrong.
@CoCo - Blazor Server runs on the server but it also acts like a client-side application. Your C# code never goes to the client (unlike a true client-side application like Blazor WebAssembly) but you get the same rich interactivity using SignalR. Both are front-ends, yes, although I think what Guilherme meant was client-side front-end.
@@IAmTimCorey Thanks .I have got an idea.
The confusing part is the Core hosted option for Blazor Client Side
I'll be covering that more in-depth in the coming weeks. Basically, think of it as an API project that was already set up for you to work with your Blazor WebAssembly project.
Can you do a Blazor video using the ASP.NET Core hosted option? I know you said it makes it almost totally like a Blazor Server application, but my little bit of testing seems to pull the client side into the server application and from the browser it seems to work with the client piece more than the server piece. It seems to just give you that separation of your server data along with the client app for the webassembly part. Maybe I'm wrong, but would love to see your interpretation and a sample how you would work with it if using the ASP.NET Core hosted option. Love your videos BTW.
Yep, I can do that. I've got it on the suggestion list.
Thanks for the in depth comparison bw BlazorServer and Blazor WebAssembly. I watched a video the other day suggesting Blazor is a means by which one can almost eliminate javascript from their code. Is this true???
It depends on the situation. You can definitely do a lot of the same things with Blazor that you can with Angular, React, or Vue. Since it is all in C#, you will then have just one language to deal with (beyond HTML and CSS). That's the ideal picture. However, there is still a use for JavaScript. There are a LOT of great libraries out there for making your life better (pop-up windows, mapping, 3d drawing, page manipulation, etc.) You will still find these useful in your project but you don't HAVE to use them in order to get a great user experience. Now you get to choose if you want to add in JavaScript. Without Blazor, you are almost forced to use JavaScript if you want a good user experience. Now you can treat it as a bonus instead of a requirement.
IAmTimCorey thank you.
Any chance you could make a video on how to apply ITIL-BM to a project?
And how to make a contract?
I've been studying programming for 2 years, and i still have no clue on how to approach a potential client.
Probably not. That's a little too far outside the scope of this channel. Sorry.
I want to put this UI inside a child window (given a parent HWND). Could that be done?
Not natively that I know of but you can probably get it to work.
It's been ages since you posted, but if you're still wondering.
I'm pretty sure you would need to host a web browser in the child window. WebView2 is probably the simplest.
Hey is there comming a video with blazorwasm "-- hosted" how that is built together? Because it's making a client side project and a server side project and it works together somehow. Btw thanks for the videos you are the best
Probably. I haven't decided for sure yet.
@@IAmTimCorey Ahh cool, just figured out it's just an api on top of it but then you can do some cool stuff with signalr like the docs did. Not sure if that's possible with an seperate asp.net core webapi, anyway thanks!
hello Tim, thanks for this video.
Please can you also do a series on Mobile Development using Flutter?
I won't be covering Flutter. This channel is dedicated to C# and C#-related technologies.
@@IAmTimCorey okay, that's fine. Keep up the good work.
Looking forward to PWA..!!!
It is a fun feature.
im legit thinking MS is become cool again. and very pro consumer too!
That is good news.
3:14 I'd love to see you do a tutorial on token-based authentication and CRUD with WebAssembly in the manner you'd do it, without ASP.NET Core hosted. Register Account (create), Account Profile (read), Edit Account (update), and Close Account (delete).
I will add it to the list. Thanks for the suggestion.
I've used both now and I'll recommend blazor wasm any day, why? each time your network drops that silly white overlay makes your ui useless. i will only ever use blazor server again if i intend to embed in a desktop app with electron or something.
Blazor server would have been perfect if it behaved like typical mvc or razor pages website. The component ui based approach is excellent.
The reconnect story gets a lot better with .NET 6.
@@IAmTimCorey A video about such will be great. Thank you in advance 😉
All client side code is just about display... I wish it is true...
We can hope and work towards that.
The webassembly debugging experience is lacking, but the framework is awesome.
Yep, but it is getting there.
Has anyone figured out how to integrate client side - web assembly Blazor into an existing .NET MVC project? I'm sure I'm not the only one here who works on old legacy apps and I was able to easily integrate server side Blazor into my MVC project but client side is a different story. I find it hard to believe that this will only be usable if your starting a SPA project from scratch.
It depends on how you want to integrate it. MVC can act like an API. If you use it that way, it is simple to integrate Blazor WebAssembly - you use the MVC project as your data source.
@@IAmTimCorey No that's not what I mean. I just want to use it sporadically on some pages in my, otherwise, regular MVC app. For example let's say I want to make a wizard like interface where form elements appear based on previous user selection - form elements show up or dissapear based on my choices as a user. That kind of interface is complex and currently I use something like Vue.js to accomplish this task. I can also do this with server side Blazor because it's easy to integrate and use in an app. But I failed to figure out how to do this with client side - web assembly Blazor. Seems like it's intended for SPA apps only which sucks because it's advertized as a replacement for javascript mess.
As a student soon to break into the industry, what should I invest my time into learning? Blazer or .NET Core MVC? Or more specifically blazer web assembly, blazer server side, or .NET Core MVC? I want to learn what most jobs use so I have more job opportunities. Also does blazer not use MVC? I heard MVC is very commonly used.
Great video btw :D
Looks interesting, but the really sad part is I was doing a lot more compelling WEB UI C# in the client ten year ago with Silverlight. Why should I trust Microsoft on this.
Because Silverlight was dependent on a browser plug-in from Microsoft. Browsers had to allow it and allow it access to browser resources. That was a constant war. With Blazor WebAssembly, Microsoft is creating something on top of the industry-standard product (WebAssembly - that isn't a Microsoft thing, it is a web standard that everyone supports). There is no fight to keep this supported. It is being supported by the entire community. Plus, Blazor WebAssembly is open source, so even if Microsoft decided to stop developing it, the community could continue it if they wanted to.