5 Differences between Blazor Server and Blazor WebAssembly

Blazer webassembly and Blazer server share many similarities but also have significant differences in this video I will share five significant differences between Blazer server and place a webassembly that will impact your decision what to choose for your next Blazer project of course laser server runs on the server and plays a webassembly runs on webassembly on the client however these 5 differences will go deeper and are more Hands-On if you are new to the Blazer world this video will give you a great introduction to places development from a different angle and as a bonus I will show you one of the biggest and best similarities between Blazer server and place a webassembly at the end of the video hi I'm a software engineer with more than 10 years of experience on the.net platform and on this channel you'll learn all about.net development the project structure is the first difference between a Blazer server and a blazer webassembly project take a look at this example I have a to-do list application implemented as a Blazer server application on the left as well as a Placer webassembly application on the right notice the different number of projects on the left we have a single project for the Placer server application it includes the laser components the services accessing the data as well as the data objects themselves in the Blazer webassembly application we have three projects the client project includes all Blazer components the server project contains data access classes such as services and an API layer to communicate between the server and the client using https and there's the shared project including classes such as data objects that can be accessed from the client and the server projects the project structure of a Blazer server application is much simpler we have access to all the resources from within a single project because all the code runs on the server this first difference already takes us to the second difference a Blazer server application doesn't have an API layer however for Placer webassembly applications you always have to implement an API layer even if the client is the only application accessing that API it has to be that way for example to keep the secrets such as the DB connection string on the server if you have a Blazer server application you can still share the code between multiple Blazer server applications for example you can extract one or even more services into a class library and share it between Blazer server applications you can but you are not forced to have multiple projects within a single Blazer server application the third difference is scalability versus Simplicity a Blazer webassembly application downloads to the client and executes in the browser it only connects to the server when fetching or sending information over HTTP it puts less pressure on the server which makes it simpler to scale for example you can not only increase the hardware for a single server but you can also run multiple servers behind a load balancer a Blazer webassembly application can be served from any web server for a Blazer server application we have a persistent websocket connection using signal R between the client and the server therefore the web server has to be running an asp.net core application however since no weapon sample is involved a Blazer server application runs on any device and any browser because it only uses HTML CSS and JavaScript scaling a Blazer application is simple when you add more resources to the same server however scaling out adding more servers becomes complex because every client has always to be connected to the same server we can also say that Blazer webassembly applications run stateless whereas Blazer server applications run stateful because the server manages the state for each connected client another difference to remember is whether we can use the same objects in the Blazer components as well as in the services I can show you an example in the index page component we list all the to-do items we also have a delete button for each item to remove it from the collection in the Blazer server application we inject the to do service and find the item and remove it from the collection in the place rape assembly application we call an API to delete the to-do item and we provide an ID or in this case the text of the to-do item on the server we called it to do service from the to-do API controller and provide the text within the to-do service we then take the text look up for the correct item in the collection and remove it when using Blazer server we have all the data and the context we need when using Blazer webassembly we usually have to reload data from the database for every stateless call of course you can always introduce caching but that adds another level of complexity when using places server the application loads very fast it only has to download the Blazer JavaScript bundle and render the first page no matter how big the application grows the startup will always be very fast since it will only render the HTML and CSS of the first page when using Blazer webassembly the whole application is downloaded to the client and executed on the initial load depending on the application size it can take a few seconds to load and with every feature added to the application the application package grows and the download takes longer when I start my to-do app Blazer server is faster as expected however the webassembly version also loads quickly if your app mostly runs on mobile devices Blazer server will be faster on the initial load in most of the cases finally it's time for the bonus I talked so much about small and big differences between Blazer server and place a web assembly now let's take a look at one of the best similarities between both hosting models we absolutely must not forget the biggest advantage of Placer development we can use the same component model for Blazer server and Blazer webassembly the Blazer component model is simple and allows for very fast development if you implement your services and components correctly migrating from laser server to Blazer webassembly or the other way around it's very simple let me know if that's something you want to see next on this channel so what do we learn from all of this for simple internal applications I prefer using Blazer server you have a good understanding of how many users the application will have at the same time the programming model is simpler the code is simpler there is less code and you don't have a forced API layer you also have fewer data reloading because the server keeps the state for every client if you want to build a public facing website with thousands ten of thousands or even millions of simultaneously users place your server might hit its limits it will be easier to scale the application using Blazer webassembly also suppose your application doesn't need to call the server for every operation for example because the application already includes a lot of the logic in that case with blazer webassembly you have less Network traffic making it work better when having bad internet connection or in offline scenarios the best thing about working with blazer is that no matter if you choose Blazer server or Blazer webassembly a lot of the programming model Remains the Same learning one model also lets you understand the other model and migrating an existing application from Blazer server to place a webassembly or the other way around is very simple and can be done with reasonable effort I'm curious about your reasons for choosing Blazer server or laser webassembly please let me know in the comments also make sure to let me know if I missed any important differences between the two if I learned anything from this video please hit the like button subscribe to the channel to learn more about.net development and I'll see you in the next video

Channel: Claudio Bernasconi

Views: 3,069

Keywords: Blazor Server, Blazor WebAssembly, Blazor Server vs. Blazor WebAssembly, Blazor Differences between Blazor Server and Blazor WebAssembly, First Load Performance, Blazor API development, Blazor Component Model, Blazor Project Structure, Blazor Performance, .NET development, dotnet, .NET, .NET SPA, Claudio Bernasconi

Id: uj6F7T0xyRk

Length: 10min 34sec (634 seconds)

Published: Wed May 17 2023