Which C# Web Application Type Should I use? MVC? Blazor? Razor Pages?

welcome to this episode of dev questions with tim corey join us as we tackle the questions you are asking about a career in software development understanding the industry and new technology now here's your host expert developer and online educator tim corey which c-sharp web application type should i use is it mvc how about blazer razer pages this is a question i get asked a lot but most recently jack asked this question i thought it was a great one to touch on in this episode of dev questions so let's start with this every project that you start off with will be a little bit different than the last project unless you're doing the same project over and over again there's different requirements there's uh different user types there's different um ways or things that it does okay so every project is different so don't try and put this box around your development and say every project will be this you've heard that the saying if all you have is a hammer everything starts looking like a nail well that's kind of what you're doing here if you're saying it doesn't matter if if it's got this you know it's a screw it doesn't matter we're gonna use a hammer we're gonna put it in and it's gonna work okay you can bag a screw into a board using a hammer it's just not the right tool for the job though okay it works it's not the right tool for the job so let's talk about what are these different types and when should you use which one because there's five different asp.net core project types for the web there's five okay the reason there's five is not because microsoft is tied to never getting rid of a project type in fact web forms is gone that's with net framework and that's that's stopped.net framework it's no longer being actively developed it's not in net core and it won't be in net core so they're not just keeping around old product types and just kind of improving upon them as they go instead they have five project types because those five product types each have a purpose and each of them is strong in a different area so let's talk about the five project types and what each one is good at alright so the first one i want to cover is the api project type now if you've used api before you know it's a little bit different than all the rest api product type doesn't have a gui it's not a graphical user interface is just a user interface it's still a ui project type but an api returns usually json data when you make a call so you call into using the url and it returns back json data or xml data that's what an api does the purpose of an api is for it to talk to a different application and that application to talk to it okay it's app to app communication that's was designed for primarily it's not designed for you and i to call it directly you can do it and with swashbuckle and those kind of things you can get a pretty nice ui on your api to see how it works and to test it out but the real reason for an api is app to app communication so if you have let's say an angular front end or react front end or a view friend or a wpf front or a blazer front end all of these can consume an api a mobile front end can also consume an api so you can have all of those all six of those seven those eight different user interfaces all talking to the same api where your business logic code is where your data access code is and it's all protected behind encryption and protected behind authentication authorization all of that in your api so it's a pretty powerful one to know and use but it's not for every situation if i want a a form to for you to fill out for suggesting new things for the dev question series i'm not going to use an api because i'm not going to say okay you have to create this url and i'm going to if in the body attach these two per no that's just way too complicated so it's not for person to app communication it's for app to app communication now the next product type is razer pages now asp.net core razer pages is for really quick low overhead pages things that they're mostly static they don't have a lot of moving parts in them they're pretty much just pages but they're server side rendered and they're really quick the cool thing is and i want to touch on this now is that asp.net core is pretty much one big jumble you can kind of mix these project types sure you might start with an mvc prototype or an api prototype but you can add in razer pages to it and then you can have part razor pages and part mvc and part api all in the same project so just keep that in mind so razer pages quick low overhead server side rendered pages now most of of of.net asp.net core is server-side rendered which means that the server renders the application and does not send c-sharp code down to the client it just sends html css and javascript down to the client there's an exception blazerweb assembly we'll talk about that in a minute but the rest of these are all server side rendered okay mvc seems to be the big one and it's one that i hear about a lot and part of the reason for this goes back to the history of c sharp when we start with c sharp we had web forms and web forms the idea was it's kind of like win forms but for the web easy drag and drop ish type thing but it just doesn't work in the modern web and with later versions of.net framework we got the mvc project type so we had web forms and mvc that's pretty much it we got api too at some point um but really mvc was kind of our api as well so nvc is kind of the big project type well now with our new project types mvc is actually taking a back burner now there's a lot of jobs out there for mbc so be careful here yes there's a lot of jobs out there for mvc because jobs don't turn on a dime it's not like microsoft can out a new project type let's say blazer web assembly and then big companies let's say um amazon let's say they're not i don't think but if they were running a a asp.net mvc application they wouldn't say oh you know what scrap that whole thing let's go with blaze our server or blaze web assembly that's not how they work they just don't turn on dime like that it takes years and years and years to move over to those project types so since mvc is the oldest modern project type out there that's wheel price the most jobs for but they're more legacy jobs now some of them are are certainly modern jobs and they're just moving forward with the latest and greatest mvc but by and large you'll find that those are a bit more legacy in their applications okay that's the general rule so mvc provides you both a a gui a graphical user interface the the web pages that actually you can see and interact with as well as apis so you can kind of have both in one your your mvc application can have pages and can also have apis that other things can talk to for example if you want to host a angular single page single page application or spa you might host it in mvc application because you can put it in one page and then it can talk to the rest of mvc directly kind of using an api now again that seems a little old school what i do currently is i don't i don't bother with the mvc portion is go straight api and connect it that way so it's up to you but mvc has that ability to do both the gui side and the api together all right and then we have blazer server this is one of the newer project types blazer server is i think one of the more unique project types out there not even just c sharp in general on the web because it's both server side and client side now a lot of the in a lot of ways you get the best of both worlds so if you're not into server side versus client side server side is where you render all the code on the server and the client never sees the code for example php is server-side rendered meaning you never see php getting to the client they never see that code they see html css and javascript in the same way most of asp.net core is server side rendered the benefits there are it's fast for the user because they just get a download of html css and javascript there's not a whole lot of extra stuff for downloading and they're getting pages that are specific to them so they if they have uh if they ask for a page with these five uh users on it the server will build that page out in html and then just give them the html very quick to render on the client side on the server side there's more work because you're building that page for every person there's one server in theory you can have multiple but let's just say there's one there's one server there's hundreds if not thousands of users that's a big workload now it can do that i mean you can you can definitely do that and they scale up pretty well but that's a lot of work and so then we have client-side applications client-side applications is where you send all the code down to the claim and the client renders that now it's a bigger download you're downloading all the code not the finished product the code to the client and then you were saying on the client i want you to build these pages which means the client has to do work to build those pages the pages are slower to render this is what angular react and view do because javascript frameworks all download to the client so you have all your source code on the client and they render the pages but the cool thing about that is that those pages are very interactive because you're not going back to the server whenever you ask for a change if you say you know what i want to add a record on the client side it goes no problem just add it you add it and it does the work and puts that on the page there's no talking to the server to make sure we re-render the page and then download that whole page onto your machine and do a full page refresh you're just saying yep i sent that to the server and i'm going to put that in the page and boop it just appears okay really powerful and really quick on the server side you have to re-render that whole page and download that whole page in order to see the changes so client-side is really powerful for having that very fast interaction where you can save things on a page and they don't disappear because the page refresh and all kind of stuff blazer server sits in the middle and it does both it does server-side rendering so you have a speed and the client never sees the code and on the client side there is a connection via signal r where only the changes are going across the wire so that you just says i want to add a user no problem it sends just the changes up to the server the server sends back just the okay right of that and it renders the page there's no sending the whole page down anymore it's just those changes that go down it's a very tiny connection we're trying bytes of data go back and forth across the wire and the user it appears the same way as if they were using an angular reactor view application whereas that client-side rich interactivity but it's connected directly to your sql server and all the rest because it's server-side rendered so kind of the best of both worlds there now there are some downsides you have to be online okay that that connection between the two has to be working if it's if it get disrupted then you can't render your pages because you don't have that data to send back and forth so there's a downside there but in general it is a really unique offering that gives you a lot of benefits on both sides of the wire so therefore i usually lean towards a blazer server application as my application of choice as my my starting point where i say why shouldn't i use blazer server versus everything else where i say why should i use those okay i still evaluate it i still think it through but i start with the why shouldn't i instead of a why should i for blazer server now last product type is blazer web assembly we talked about server side and client side for blazer server with blazer web assembly it's all client-side it's all downloaded to client including your c-sharp code that's why we don't put secure stuff in our blazer webassembly projects you can't talk to a database directly you can't have private keys in your blaze webassembly you don't have an app settings.json file in a blaze web assembly because all of that would be exposed to the user directly the benefit of having it all in the client is that you could have offline access you can use things like local storage or session storage in order to allow you to work even when network is down and you can have a progressive web application which is where it kind of acts like an actual desktop application installed in your desktop on your windows mac linux ios android pretty much whatever you'll install to it you have an icon you can run it from a double click it'll run offline and you can interact with things in your web application but on your device okay so some really cool things there and there's a lot of benefits to that but the downside is because you don't have any server side component then you have to have a server-side component which is typically an api so you have to have two projects now in order to support your one project so that's kind of a downside in some ways but at the same time if the extra overhead create a second project type a second piece is not too great for you then there are a lot of benefits to blazer web assembly now let's talk about speed real quick um all of these be fast that's pretty much we want to talk about um blazer server is actually pretty blazing fast and it supports thousands of clients one machine can support 20 000 plus okay and if you want more than that no problem you just offload your signal or connection to a third-party service like the azure signalr service and now you can scale even higher and you can also put a second machine in place and have forty thousand and sixty thousand connections so and those are all concurrent connections and that's something that people often kind of get confused on and say well you know i've got more than 60 000 users sure but you probably don't have more than about 500 current connections that's just kind of the nature of the beast unless you have users that are using your application for their primary job and you have thousands of them you probably won't have that many concurrent connections you may have that many connections in a day that's not the same thing as concurrent connections so something to think about and you want to evaluate for yourself but scalability there is not really an issue speed wise blazer server is blazing fast blaze web assembly is a little slower because you have to download your entire application if once you do the packaging of your application and kind of wrap it and compress it and shrink it and use just the pieces you need you may be talking about five six seven eight ten megabytes worth of data to download your application the first time the first time not every time just the first time now that may sound super scary 10 megabytes of data and some places if you have a metered connection yeah that could be scary but just for giggles i went on different web pages and just watched the network traffic and news sites for example if you want a cnn or if you went to fox news you went to any of those sites you'll usually download about 15 to 20 megabytes of data just loading the home page and maybe a little bit of scroll okay so yes that's a lot of data but at the same time it's not disproportionate to a lot of normal websites but you're not building a normal website you're building an interactive website for usually work of some kind so yeah it's a full application and if you want a full application you gotta download a full application and if you download going to be something similar okay it's not going to be a megabyte or two you're going to have a lot more than that so there's always going to be that trade-off if you want the client-side interactivity and you don't want to use blazer server because you don't want to have the always on connection then you have to download something initially but once you download it you can cache it locally the browser's going to do it automatically for you so next thing you come to the site as long as you haven't changed the website it shouldn't have to reload all that data and then you can even use things like cdns to make your downloads faster if possible so those the five project types those are the different trade-offs the benefits the drawbacks i go into a lot more detail i've got a whole course on this it's i think how many hours it is but we build uh so i go to five project types the the pros and cons for each of them i build out a little project for each of them just showed off and then i build a um a complete crud application now when i say complete crud i'm not saying this is a application that does you know it's a complete as in i'd publish in a store somewhere it does all the credit operations create read update and delete okay for against the database so all five prototypes do all five or all four of those actions against the real database they build out so you can see how each of them works and how to build each one of those how to ask for data for each one of those how to update data for each one of those how to delete data from each one of those and we publish all five those product types just to see how that works so we publish it to a third party web host called intra server where i do my hosting because it's five dollars a month for lots of web pages in lots of different domain names and unlimited subdomains and unlimited sql servers so pretty cheap for 60 bucks a year um but in that course i go over all that in a lot more depth there's a lot more to cover here and you should know all five product types so you can make an informed decision i've just covered the surface of this but uh if you want to go more depth check out the getting started with asp.net core of course on my website i am timcory.com i'll leave a link in the uh the show notes for this as well all right thanks the question jack it's a great question if you found this episode helpful i appreciate if you share with your social network thanks for listening as always i am tim cory [Music] you

Channel: IAmTimCorey

Views: 132,916

Keywords: c#, c# developer questions, dev questions, dev questions series, developer questions, how do i, iamtimcorey, learn c#, tim corey, asp.net core, asp.net core mvc, asp.net core web api, asp.net core razor pages, asp.net core razor pages vs mvc, blazor, blazor webassembly, blazor server, blazor server vs blazor webassembly

Id: YhojOiGjGvQ

Length: 22min 43sec (1363 seconds)

Published: Thu Mar 11 2021