Latest / DevQuestions with Tim Corey / 042 Which C# Web Application Type Should I use? MVC? Blazor? Razor Pages?

Transcript

042 Which C# Web Application Type Should I use? MVC? Blazor? Razor Pages? · DevQuestions with Tim Corey

• 0:00
  SPEAKER_00: Welcome to the Dev Questions Podcast with Tim Corey.
• 0:03
  SPEAKER_00: Join us each episode as we tackle the questions you are asking about a career in software development, understanding the industry, and new technology.
• 0:12
  SPEAKER_00: If you're just starting out or you want to grow stronger as a developer, this is the place to get your questions answered.
• 0:19
  SPEAKER_00: Now, here's your host, expert developer and online educator, Tim Corey.
• 0:24
  SPEAKER_01: Which C Sharp web application type should I use?
• 0:28
  SPEAKER_01: Is it MVC?
• 0:29
  SPEAKER_01: How about Blazor?
• 0:30
  SPEAKER_01: Razor Pages?
• 0:32
  SPEAKER_01: This is a question I get asked a lot, but most recently Jack asked this question.
• 0:36
  SPEAKER_01: I thought it was a great one to touch on in this episode of Dev Questions.
• 0:41
  SPEAKER_01: So let's start with this.
• 0:44
  SPEAKER_01: Every project that you start off with will be a little bit different than the last project.
• 0:50
  SPEAKER_01: Unless you're doing the same project over and over again, there's different requirements, there's different user types, there's different um ways or things that it does.
• 1:02
  SPEAKER_01: Okay, so every project is different.
• 1:04
  SPEAKER_01: So don't try and put this box around your development and say every project will be this.
• 1:12
  SPEAKER_01: You know, you've heard that the saying, if all you have is a hammer, everything starts looking like a nail.
• 1:19
  SPEAKER_01: Well, that's kind of what you're doing here.
• 1:21
  SPEAKER_01: Is you're saying it doesn't matter if if it's got this, you know, it's a screw, it doesn't matter.
• 1:26
  SPEAKER_01: We're gonna use a hammer, we're gonna put it in, and it's gonna work.
• 1:28
  SPEAKER_01: Okay, you can bang a screw into a board using a hammer.
• 1:32
  SPEAKER_01: It's just not the right tool for the job, though.
• 1:34
  SPEAKER_01: Okay, it works, it's not the right tool for the job.
• 1:38
  SPEAKER_01: So let's talk about what are these different types and when should you use which one?
• 1:45
  SPEAKER_01: Because there's five different ASPNet core project types for the web.
• 1:52
  SPEAKER_01: There's five.
• 1:53
  SPEAKER_01: Okay.
• 1:54
  SPEAKER_01: The reason there's five is not because Microsoft is tied to never getting rid of a project type.
• 2:02
  SPEAKER_01: In fact, web forms is gone.
• 2:05
  SPEAKER_01: That's with.NET Framework, and that's that's stopped at.NET Framework, and it's no longer being actively developed.
• 2:12
  SPEAKER_01: It's not in.NET Core and it won't be in.NET Core.
• 2:15
  SPEAKER_01: So they're not just keeping around old project types and just kind of improving upon them as they go.
• 2:24
  SPEAKER_01: Instead, they have five project types because those five project types each have a purpose.
• 2:31
  SPEAKER_01: And each of them is strong in a different area.
• 2:35
  SPEAKER_01: So let's talk about the five project types and what each one is good at.
• 2:41
  SPEAKER_01: All right.
• 2:42
  SPEAKER_01: So the first one I want to cover is the API project type.
• 2:47
  SPEAKER_01: Now, if you've used API before, you know it's a little bit different than all the rest.
• 2:51
  SPEAKER_01: API project type doesn't have a GUI, it's not a graphical user interface, it's just a user interface.
• 2:59
  SPEAKER_01: It still is a UI project type, but an API returns usually JSON data when you make a call.
• 3:06
  SPEAKER_01: So you call into it using the URL and it returns back JSON data or XML data.
• 3:13
  SPEAKER_01: That's what an API does.
• 3:15
  SPEAKER_01: The purpose of an API is for it to talk to a different application, and that application to talk to it.
• 3:25
  SPEAKER_01: Okay, it's app-to-app communication.
• 3:28
  SPEAKER_01: That's what it's designed for primarily.
• 3:30
  SPEAKER_01: It's not designed for you and I to call it directly.
• 3:33
  SPEAKER_01: You can do it, and with um 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.
• 3:45
  SPEAKER_01: But the real reason for an API is app-to-app communication.
• 3:50
  SPEAKER_01: So if you have, let's say, an Angular front end or a React front end or a View front end or a WPF front end or a Blazor front end, all of these can consume an API.
• 4:06
  SPEAKER_01: A mobile front end can also consume an API.
• 4:09
  SPEAKER_01: So you can have all of those, all six of those, seven of 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 and authorization, all of that in your API.
• 4:31
  SPEAKER_01: So it's a pretty powerful one to know and use, but it's not for every situation.
• 4:36
  SPEAKER_01: If I want a form to for you to fill out for suggesting new things for the uh dev question series, I'm not gonna use an API because I'm not gonna say, okay, you have to create this URL and then you have to in the body attach these two per no, that's just way too complicated.
• 4:59
  SPEAKER_01: So it's not for person-to-app communication, it's for app-to-app communication.
• 5:04
  SPEAKER_01: Now, the next prototype is razor pages.
• 5:08
  SPEAKER_01: Now, ASPNet Core Razor Pages is for really quick, low overhead pages.
• 5:15
  SPEAKER_01: Things that they're mostly static.
• 5:17
  SPEAKER_01: They don't have a lot of moving parts in them.
• 5:19
  SPEAKER_01: They're pretty much just pages, but they're server-side rendered and they're really quick.
• 5:24
  SPEAKER_01: The cool thing is, and I want to touch on this now, is that ASPNet Core is pretty much one big jumble.
• 5:34
  SPEAKER_01: You can kind of mix these project types.
• 5:37
  SPEAKER_01: Sure, you might start with an MVC project type or an API project type, but you can add in Razor pages to it.
• 5:43
  SPEAKER_01: And then you can have part Razor pages and part MVC and part API all in the same project.
• 5:49
  SPEAKER_01: So just keep that in mind.
• 5:51
  SPEAKER_01: So Razor Pages, quick, low overhead server side rendered pages.
• 5:56
  SPEAKER_01: Now, most of.NET ASPNET core is server side rendered, which means that the server renders the application and does not send C sharp code down to the client.
• 6:10
  SPEAKER_01: It just sends HTML, CSS, and JavaScript down to the client.
• 6:15
  SPEAKER_01: There's an exception, Blazor WebAssembly.
• 6:17
  SPEAKER_01: We'll talk about that in a minute, but the rest of these are all server-side rendered.
• 6:22
  SPEAKER_01: Okay.
• 6:23
  SPEAKER_01: MVC seems to be the big one, and it's one that I hear about a lot.
• 6:28
  SPEAKER_01: And part of the reason for this goes back to the history of C Sharp.
• 6:33
  SPEAKER_01: When we started with C sharp, we had web forms.
• 6:36
  SPEAKER_01: And web forms, the idea was it's kind of like WinForms, but for the web.
• 6:41
  SPEAKER_01: Easy drag and drop-ish type thing, but it just doesn't work in the modern web.
• 6:47
  SPEAKER_01: And with later versions of.NET Framework, we got the MVC project type.
• 6:53
  SPEAKER_01: So we had web forms and MVC.
• 6:56
  SPEAKER_01: And that was pretty much it.
• 6:57
  SPEAKER_01: We got API too at some point, but really MVC was kind of our API as well.
• 7:02
  SPEAKER_01: So MVC is kind of the big project type.
• 7:06
  SPEAKER_01: Well, now with our new project types, MVC is actually taking a back burner.
• 7:11
  SPEAKER_01: Now there's a lot of jobs out there for MVC.
• 7:13
  SPEAKER_01: So be careful here.
• 7:15
  SPEAKER_01: Yes, there's a lot of jobs out there for MVC because jobs don't turn a dime.
• 7:21
  SPEAKER_01: It's not like Microsoft coming out with a new project type.
• 7:24
  SPEAKER_01: Let's say Blazor WebAssembly.
• 7:26
  SPEAKER_01: And then big companies, let's say Amazon, let's just say they're not, I don't think, but if they were running a um ASPNET MVC application, they wouldn't say, oh, you know what?
• 7:39
  SPEAKER_01: Scrap that whole thing, let's go with Blazor Server or Blazor WebAssembly.
• 7:43
  SPEAKER_01: That's not how they work.
• 7:44
  SPEAKER_01: They just don't turn on dime like that.
• 7:46
  SPEAKER_01: It takes years and years and years to move over to those project types.
• 7:51
  SPEAKER_01: So since MVC is the oldest modern uh project type out there, that's what you'll probably see the most jobs for.
• 8:01
  SPEAKER_01: But they're more legacy jobs.
• 8:05
  SPEAKER_01: Now, some of them are certainly modern jobs, and they're just moving forward with the latest and greatest MVC.
• 8:12
  SPEAKER_01: But by and large, you'll find that those are a bit more legacy in their applications.
• 8:18
  SPEAKER_01: Okay, that's the general rule.
• 8:20
  SPEAKER_01: So MVC provides you with both a GUI, a graphical user interface, the the web pages that actually you can see and interact with, as well as APIs.
• 8:33
  SPEAKER_01: So you can kind of have both in one.
• 8:43
  SPEAKER_01: For example, if you want to host an Angular single page application or SPA, you might host it in an 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.
• 9:00
  SPEAKER_01: Now, again, that seems a little old school.
• 9:05
  SPEAKER_01: What I do currently is I don't I don't bother with the MVC portion, ISCO straight API and connect it that way.
• 9:12
  SPEAKER_01: So it's up to you, but MVC has that ability to do both the GUI side and the API together.
• 9:20
  SPEAKER_01: All right.
• 9:21
  SPEAKER_01: And then we have Blazor Server.
• 9:24
  SPEAKER_01: This is one of the newer project types.
• 9:26
  SPEAKER_01: Blazor 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.
• 9:42
  SPEAKER_01: In a lot of ways, you get the best of both worlds.
• 9:47
  SPEAKER_01: So if you're not familiar with server side versus client side, server side is where you render all the code on the server and the client never sees the code.
• 9:56
  SPEAKER_01: For example, PHP is server side rendered, meaning you never see PHP getting to the client.
• 10:03
  SPEAKER_01: They never see that code, they just see HTML, CSS, and JavaScript.
• 10:08
  SPEAKER_01: In the same way, most of ASPNET Core is server-side rendered.
• 10:13
  SPEAKER_01: The benefits there are it's fast for the user because they just get a download of HTML, CSS, and JavaScript.
• 10:21
  SPEAKER_01: There's not a whole lot of extra stuff they're downloading.
• 10:24
  SPEAKER_01: And they're getting pages that are specific to them.
• 10:26
  SPEAKER_01: 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.
• 10:39
  SPEAKER_01: Very quick to render on the client side.
• 10:42
  SPEAKER_01: On the server side, there's more work because you're building that page for every person.
• 10:49
  SPEAKER_01: There's one server in theory.
• 10:51
  SPEAKER_01: You can have multiple, but let's just say there's one.
• 10:54
  SPEAKER_01: There's one server, there's hundreds, if not thousands, of users.
• 11:00
  SPEAKER_01: That's a big workload.
• 11:02
  SPEAKER_01: Now, it can do that.
• 11:04
  SPEAKER_01: I mean, you can you can definitely do that, and they scale up pretty well.
• 11:08
  SPEAKER_01: But that's a lot of work.
• 11:09
  SPEAKER_01: And so then we have client-side applications.
• 11:13
  SPEAKER_01: Client-side applications is where you send all the code down to the client, and the client renders that.
• 11:21
  SPEAKER_01: Now, it's a bigger download because you're downloading all the code, not the finished product, the code, to the client.
• 11:29
  SPEAKER_01: And then you are saying on the client, I want you to build these pages, which means the client has to do work to build those pages.
• 11:38
  SPEAKER_01: The pages are slower to render.
• 11:41
  SPEAKER_01: This is what Angular, React, and Vue do, because JavaScript uh frameworks all download to the client.
• 11:52
  SPEAKER_01: So you have all your source code on the client and they render the pages.
• 11:57
  SPEAKER_01: 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.
• 12:06
  SPEAKER_01: If you say, you know what, I want to add a record on the client side, it goes, no problem, just add it.
• 12:12
  SPEAKER_01: You add it and it does the work and puts that on the page.
• 12:16
  SPEAKER_01: 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.
• 12:26
  SPEAKER_01: You're just saying, yep, I sent that to the server and I'm gonna put that on the page, and boop, it disappears.
• 12:32
  SPEAKER_01: Okay.
• 12:33
  SPEAKER_01: Really powerful and really quick.
• 12:34
  SPEAKER_01: On the server side, you have to re-render that whole page and download that whole page in order to see the changes.
• 12:42
  SPEAKER_01: 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 that kind of stuff.
• 12:53
  SPEAKER_01: Blazer Server sits in the middle and it does both.
• 12:58
  SPEAKER_01: It does server side rendering, so you have at speed and the client never sees the code.
• 13:04
  SPEAKER_01: And on the client side, there is a connection via signal R where only the changes are going across the wire.
• 13:13
  SPEAKER_01: So the user says, I want to add a user, no problem.
• 13:18
  SPEAKER_01: It sends just the changes up to the server, and the server sends back just the okay, render that, and it renders in the page.
• 13:24
  SPEAKER_01: There's no sending the whole page down anymore, it's just those changes that go down.
• 13:30
  SPEAKER_01: And so there's a very tiny connection.
• 13:32
  SPEAKER_01: We're trying bytes of data go back and forth across the wire.
• 13:37
  SPEAKER_01: And the user, it appears the same way as if they were using an Angular Reactor View application where it's that client-side rich interactivity, but it's connected directly to your SQL Server and all the rest because it's server-side rendered.
• 13:53
  SPEAKER_01: So kind of the best of both worlds there.
• 13:55
  SPEAKER_01: Now there are some downsides.
• 13:57
  SPEAKER_01: You have to be online.
• 13:58
  SPEAKER_01: Okay, that connection between the two has to be working.
• 14:02
  SPEAKER_01: If it's if it gets disrupted, then you can't render your pages because you don't have that data to send back and forth.
• 14:10
  SPEAKER_01: So there's a downside there.
• 14:12
  SPEAKER_01: But in general, it is a really unique offering that gives you a lot of benefits on both sides of the of the wire.
• 14:22
  SPEAKER_01: So therefore, I usually lean towards a Blazor server application as my application of choice, as my my starting point, where I say, why shouldn't I use Blazor Server?
• 14:37
  SPEAKER_01: versus everything else where I say, Why should I use those?
• 14:40
  SPEAKER_01: Okay.
• 14:41
  SPEAKER_01: 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 Blazor Server.
• 14:49
  SPEAKER_01: Now a last project type is Blazor Web Assembly.
• 14:53
  SPEAKER_01: And we talked about server side and client side for Blazor Server.
• 14:57
  SPEAKER_01: Well, Blazor Web Assembly, it's all client side.
• 15:00
  SPEAKER_01: It's all downloaded to the client, including your C sharp code.
• 15:05
  SPEAKER_01: That's why we don't put secure stuff in our Blazor WebAssembly projects.
• 15:11
  SPEAKER_01: You can't talk to a database directly, you can't have uh private keys in your Blazor WebAssembly.
• 15:18
  SPEAKER_01: You don't have an app settings.json file in a Blazor WebAssembly because all of that would be exposed to the user directly.
• 15:27
  SPEAKER_01: The benefit of having it all in the client is that you can have offline access.
• 15:32
  SPEAKER_01: You can use things like local storage or session storage in order to allow you to work even when the network is down.
• 15:39
  SPEAKER_01: And you could have a progressive web application, which is where it kind of acts like an actual desktop application, installs on your desktop on your Windows, Mac, Linux, iOS, Android, pretty much whatever it'll install to it.
• 15:56
  SPEAKER_01: You can 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.
• 16:09
  SPEAKER_01: Okay, so some really cool things there, and there's a lot of benefits to that.
• 16:15
  SPEAKER_01: 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.
• 16:27
  SPEAKER_01: So you have to have two projects now in order to support your one project.
• 16:32
  SPEAKER_01: So that's kind of a downside in some ways, but at the same time, if the extra overhead of creating a second project type, a second um piece is not too great for you, then there's a lot of benefits to Blazor WebAssembly.
• 16:48
  SPEAKER_01: Now let's talk about speed real quick.
• 16:50
  SPEAKER_01: Um, all of these be fast.
• 16:53
  SPEAKER_01: That's pretty much what we want to talk about.
• 16:55
  SPEAKER_01: Um, Blazor server is actually pretty blazing fast and it supports thousands of clients.
• 17:02
  SPEAKER_01: One machine can support 20,000 plus.
• 17:06
  SPEAKER_01: Okay.
• 17:06
  SPEAKER_01: And if you want more than that, no problem.
• 17:09
  SPEAKER_01: You just offload your Signal R connection to a third-party service like the Azure Signal R service, and now you can scale even higher.
• 17:17
  SPEAKER_01: And you can also put a second machine in place and have 40,000 and 60,000 connections.
• 17:22
  SPEAKER_01: So, and those are all concurrent connections.
• 17:25
  SPEAKER_01: And that's something that people often kind of get confused about.
• 17:27
  SPEAKER_01: They say, Well, you know, I've got more than 60,000 users.
• 17:31
  SPEAKER_01: Sure, but you probably don't have more than about 500 concurrent connections.
• 17:36
  SPEAKER_01: That's just kind of the nature of the beast.
• 17:38
  SPEAKER_01: 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.
• 17:50
  SPEAKER_01: You may have that many connections in a day, but that's not the same thing as concurrent connections.
• 17:57
  SPEAKER_01: So something to think about, and you want to evaluate for yourself, but scalability there is not really an issue.
• 18:07
  SPEAKER_01: Um, speed-wise, Blazor Server is blazing fast.
• 18:11
  SPEAKER_01: Blazor WebAssembly is a little slower because you have to download your entire application.
• 18:16
  SPEAKER_01: If once you do the um the packaging of your application and kind of wrap it and compress it and shrink it and use just the pieces you need, um, you may be talking about five, six, seven, eight, ten megabytes worth of data to download your application the first time.
• 18:34
  SPEAKER_01: The first time, not every time, just the first time.
• 18:37
  SPEAKER_01: Now, that may sound super scary.
• 18:40
  SPEAKER_01: 10 megabytes of data.
• 18:42
  SPEAKER_01: And some places, if you have a metered connection, yeah, that could be scary.
• 18:47
  SPEAKER_01: But just for giggles, I went on different web pages and just watched the network traffic and news sites.
• 18:57
  SPEAKER_01: For example, if you went to 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.
• 19:11
  SPEAKER_01: Okay.
• 19:11
  SPEAKER_01: So yes, that's a lot of data.
• 19:15
  SPEAKER_01: But at the same time, it's not disproportionate to a lot of normal websites.
• 19:22
  SPEAKER_01: But you're not building a normal website, you're building an interactive website for usually work of some kind.
• 19:32
  SPEAKER_01: So, yeah, it's a full application.
• 19:35
  SPEAKER_01: And if you want a full application, you're gonna download a full application.
• 19:38
  SPEAKER_01: And if you download it, if you say, well, I'm gonna use Angular instead, you're gonna build a big application.
• 19:44
  SPEAKER_01: Um it's gonna be something similar.
• 19:47
  SPEAKER_01: Okay, it's not gonna be a megabyte or two, you're gonna have a lot more than that.
• 19:51
  SPEAKER_01: So there's always gonna be that trade-off.
• 19:54
  SPEAKER_01: If you want the client side interactivity and you don't want to use Blazor server because you don't want to have the always-on connection, then you're gonna have to download something initially.
• 20:03
  SPEAKER_01: But once you download it, you can cache it locally.
• 20:06
  SPEAKER_01: The browser's gonna do it automatically for you.
• 20:09
  SPEAKER_01: So um, the 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.
• 20:16
  SPEAKER_01: And then you can even use things like uh CDNs to make your downloads faster if possible.
• 20:23
  SPEAKER_01: So those are the five project types, those are the the different trade-offs, the benefits, the drawbacks.
• 20:29
  SPEAKER_01: I go into a lot more detail.
• 20:31
  SPEAKER_01: I've got a whole course on this.
• 20:33
  SPEAKER_01: It's I forget how many hours it is, but we build uh so yeah, I go to five project types, the the pros and the cons for each of them.
• 20:41
  SPEAKER_01: I build out a little project for each of them just to show it off, and then I build a um a complete crud application.
• 20:49
  SPEAKER_01: Now it's when I say complete crud, I'm not saying this is an application that does, you know, it's a complete as in I'd publish in a store somewhere.
• 20:59
  SPEAKER_01: It does all the CRUD operations: create, read, update, and delete.
• 21:04
  SPEAKER_01: Okay, for against a database.
• 21:07
  SPEAKER_01: So all five prototypes do all five or all four of those actions against a real database they build out.
• 21:15
  SPEAKER_01: Um 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.
• 21:26
  SPEAKER_01: And we publish all five of those prototypes just to see how that works.
• 21:32
  SPEAKER_01: So we publish it to a third-party uh web host called Intra Server, um, where I do my hosting because it's$5 a month for lots of web pages in uh lots of different domain names and unlimited subdomains and unlimited SQL servers.
• 21:50
  SPEAKER_01: So pretty cheap for 60 bucks a year.
• 21:52
  SPEAKER_01: Um but in that course, I go over all that in a lot more depth because there's a lot more to cover here, and you should know all five project types so you can make an informed decision.
• 22:05
  SPEAKER_01: I've just covered the surface of this, but uh if you want to go more depth, check out the Getting Started ASPNet Core course on my website, imtimcorey.com.
• 22:16
  SPEAKER_01: I'll leave a link in the uh the show notes for this as well.
• 22:20
  SPEAKER_01: All right.
• 22:20
  SPEAKER_01: Thanks for the question, Jack.
• 22:22
  SPEAKER_01: It's a great question.
• 22:23
  SPEAKER_01: If you found this episode helpful, I appreciate it if you'd share it with your social network.
• 22:27
  SPEAKER_01: Thanks for listening.
• 22:28
  SPEAKER_01: As always, I am Tim Corey.
• 22:30
  SPEAKER_00: Thank you for joining us for this episode of Dev Questions.
• 22:33
  SPEAKER_00: Tim is committed to making it easier for you to become a developer.
• 22:36
  SPEAKER_00: If you would like to help make more content like this possible, please like, subscribe, rate, and share Dev Questions.
• 22:44
  SPEAKER_00: You can also send your questions to questions at IamTimcorey.com.
• 22:49
  SPEAKER_00: Until next time, remember, you are too smart and your time too valuable to waste it making all the mistakes Tim did.
• 22:56
  SPEAKER_00: When you're ready to learn to think and code like a professional developer, head over to IamtimCore.com and enroll in a course.