Here's the Best Architecture for Your Blazor Web Apps in .NET 8 🔥

hey friends Patrick here and today I can already hear the mean comments it's about an architecture that is maybe rather suited for medium-sized to larger applications but maybe if you just start building an application and it's small then it might grow eventually so it might make sense to take this architecture into account and of course I'm talking about a clean architecture now with blazer in net 8 so to be more precise Blazer would be the web UI or the presentation layer but in this tutorial we will dive really only a little bit into the surface of all that and what I mean by that is that I want to show you how to create the layers the projects in the end in visual studio for your net8 Blazer web application and speaking about diving into clean architecture maybe even with cqrs and the mediator pattern I am happy to tell you wait the net Web Academy is open for enrollment but only for a couple more days so if you want to have a look check out the link in the video description and make sure to use the coupon code start 2024 to get a discount there the do Web Academy all things.net web development and Blazer of course if you want to check it out the links in the video description thank you very much for that and now let's continue with the tutorial so you see that I really just started Visual Studio 2022 here and I want to create a new project and I will not start with the Blazer web app here what you want to do here is you want to set or select the blank solution all right you can of course also search for it here we had blank for instance and uh it already created the blank solution but now it is filtering and here it is blank solution create an empty solution containing no projects because what you usually do and let me call that clean architecture Blazer example what you usually do is you first create a folder which is simply called SRC for Source this is a source code and if you also want to create testing projects then you would also create this test folder here but this not in this tutorial today here we just say Source like that this is the first step and after that we are ready to already create our layers but before we do that maybe we can have a look at the clean AR architecture image there it is I'm pretty sure you've already seen that strange thingy here well you see different layers domain application presentation and infrastructure and you also see that the domain is the core of the clean architecture and this is already one of the main points here of the clean architecture you see the arrows and everything is drawn to the domain right this is the core of your architecture and the arrows also mean that this is the direction how you reference the different layers than the projects in the end because this means that the domain has no reference to any other layer here we've got the next one which is the application layer referencing the domain and then the presentation and the infrastructure also then reference the application layer and you might need also to reference the infrastructure layer maybe I can show you this with the mouse right the infrastructure layer down here um you reference that in the presentation layer so everything then makes sense and you have access to everything that you need now why clean architecture in the end well in the end it is said that it's more maintainable and flexible you know separation of concerns all that stuff it is just more well clean as they say of course and in the end it's very adaptable so if your application evolves over time then you might be better suited with a clean architecture but it is more complex in the beginning to set everything up so you really have have to decide for yourself what you want to do and today again I want to show you how to set things up here with a clean architecture but first regarding the uh layers what is going into the layers what would you see there well in the domain layer first you would start this thing here right in the in the center in the core of that thing you would see business logic and entities so for instance in the D Web Academy we will build a block now you might think well a block that's not that complex well it can get complex over time when you for instance take into account the whole Administration panel there the dashboard maybe even a pay wall when you implement all that checking out and so on then it might get big over time and that's why the clean architecture makes a lot of sense here another example would be an e-commerce application for instance there again can start very simple but then can grow and get very complex over time and that's I think where the clean architecture really shines and you can also later then can decide if you want to use the service pattern you know the services right I did a lot with services on my Channel or cqrs and the mediator pattern this is also something of course where we dive deep in the do Web Academy but here now again only the architecture so entities domain logic in domain logic business logic in the domain layer then in the application layer you already have some implementations when you have a look at your services when you want to use service pattern the service pattern and by the way I really have to make this clear here because I always see tutorials clean architecture and cqrs you don't have to use cqrs with a clean architecture it makes sense to use cqrs because again separation of concerns and stuff but you can still use the service pattern there and you would see implementations of a service for instance then in the application layer you might see an interface of a repository for instance or a service can do that in the domain layer and then the implementation would be then in the application layer so could totally work when you then again have a look at cqrs regarding the requests then you might see them in the application layer okay so this is one of the big differences and then we also have the infrastructure and presentation layer first in the infrastructure layer which is pretty much the the one after the application layer you would see external services and the best example for that is something like data persistence meaning database access Entity framework I'm looking at you you have your place in the infrastructure layer and then we've got the presentation and already told you this is the user interface in the end so often also called just web UI for a web application so in Blazer it would make sense to call this than the web UI project all right quick introduction here and now let's uh go back to visual studio so domain application and infrastructure layer here would be class libraries pretty simple so just right click the source folder and then we add a new project which is a class Library we hit next and then naming this is is a big question here because what you can do here you see the solution name would be clean architecture Blazer example now what you would like to do maybe is when you have a better name for an application or your whole solution the whole project then you would say okay now I want to build the domain layer so I call this thing clean architecture Blazer example let me just copy that all right and then domain of of course net8 is the target framework for that and we're done actually when my machine wants to and visual studio so here we are and then we have the class one which of course you can remove and then add your entity there for instance in the Blazer block case uh what we're doing in the D Web Academy this would be an article for instance but this then again can be found in uh specific folders like not entities because this is also a debate in the web of of course or between developers do you want to use the type for your folders like entities and the article in there or do you want to actually use the feature which then would be an articles folder and then put the article entity in there lots of stuff to think about so this already is the domain layer but there will come one thing in the end and this will be the dependency injection so how bring how would you bring everything together but but let's talk about that later this is the domain layer next up would be the application layer so again we add a new class Library project we hit next and you don't see that because I am there so next then we paste our great name clean architecture Blazer example and then this would be the almost the application we hit create again pretty much same thing and here then again and you would have some implementations maybe already of services or again using cqrs you would use requests queries stuff like that all right next one then already and in the end we bring everything together is then the infrastructure again this is a class Library we call this infra structure like that create all right and then the last last thing actually in this example at least is the presentation layer but for that this is not class Library I want to use Blazer web app here so we choose the Blazer web app and here we can then say web UI and this is typically first the server so we hit next and then comes the Blazer configuration but this is for other tutorials already did that a lot so here let's just say we just want to use static service at rendering but for the future maybe we want to add web assembly or um using websockets with bler server later so this would be the configuration then but first again just static server side rendering if you then want to add web assembly later then you would also add a client project and then regarding the name I would name this web ui. client for instance all right so that's it and we make this the starting project set as startup project great okay now what you might already know when you just have your Blazer project for instance and then you have this program CS here you build your services maybe you use mediator whatever it is Entity framework all right and you want to register that stuff here in the service collection well then you would just right Builder Services add service add DB context whatever it is but uh this maybe does not work or even if it works it's not again not separated as it is meant to be with the clean architecture so what you want to use is you would actually write extension methods to well add something to the service collection in the other layers now how would we do that well we just go to the uh corresponding layer for instance we start with the application layer because in the domain layer there is nothing to inject really this is just about entities and abstractions maybe interface definitions and so on so we do not need that here but in the application layer at the latest this is where you start with dependency injection so in the application project we add a new item we call this dependency in injection because that's what it is in the end and we call this public static class dependency injection and then here regarding the method this is also public static method returning the though an i service collection and as you can see Visual Studio has no idea what that is so we have to install the package Microsoft extensions dependency injection abstractions find and install the latest version that's the one and then we can give this thing a name for instance add application this is really not a convention nothing like that this is just how uh well devs in the end are used to it and of course it's more readable if we call it that because we will need or use the ad application function then in the uh the program CS of our presentation layer so we know what we are actually adding there so add application it is and since this is an extension method really we say this I service collection services and here now well in the end you can do whatever you want to do here but uh for now we just return the services again I know it's lots of passwords here but when you're using the mediator pattern for instance then you would add it here okay if you're interested by the way then uh tell me that in the comments and then I of course can make an extended video out of this one to also add the cqrs and the mediator pattern for instance and the mediator package as well so then you would see how this would work anyways this is the application layer all right and now what we can do is we first add a reference uh not add here in the dependencies actually we okay now we have a package but here we now add a project reference to The Domain all right and this is now what we've seen in the image that the application layer then uh has an arrow a reference to The Domain layer to that project all right and when you're done with that then you can go back to the program CS of your presentation layer or the web UI Blazer server project and then here you will see the new Option services at application well you don't see it here and why is that we haven't added the references see that so I just wanted to show you that you really have to pay attention here and you have to set the references let's do that real quick we have the application layers uh pointing to the domain now we also add the infrastructure so uh again in the dependency folder of course so here now add a project reference to the application now not the domain application great thing is then of course since we now have a reference to the application we also have a reference to The Domain layer so an entity would be known here now you have the option to here in the presentation layer add also a project reference reference either to the application and the infrastructure but it's actually totally sufficient to just reference the infrastructure layer because same effect here we have the uh infrastructure referenced and then also the application layer with that and also the domain so now we should know everything and now I can add something like that using the beautiful name here that one and then application and with that the error is gone and we can see everything that is registered in the application layer is also then available in the program Cs and you do exactly the same thing in the end here in your infrastructure layer so we can remove the class and then here we add a new item call this dependency injection and let me just because I'm really lazy copy the code from here so that would be that and here but here now we just say add infrastructure like that we save this and now in the program CS for instance we say Builder services not razor Pages now it's add infrastructure like that still not known all right but of course we can add the using directive here manually and that's it okay and this is really the whole frame let's say you still have the class here so let's remove this thing in the end you have your presentation layer which is also the starting project and side note here if you are using AET web API for instance with a controller or minimal API also possible then this is also the presentation layer okay okay might be a bit confusing in the beginning because you're thinking well why I'm actually isn't that the back end right I'm doing a call nope this is still presentation okay and then when you go further down you get to the infrastructure and then also application and domain layer you really have to get used to this all right you have to build applications and get a feeling for all that how this works but if you just practice this a little bit and and um try to think about what is going into uh what layer then you will get the hang of it and in the end it's actually also a lot of fun to see a clean architecture here in your project but I know again um it's not a lot you can see here but this again I just wanted to show you the whole frame the shell how this would uh work what the start actually is of such a project and how to combine these layers then because this is really one of the beginner questions was for me at least that when I have all these layers well how can I access an entity how can I access Entity framework then again this would be done here right so here then you would write all your add DB context and so on stuff and configure SQL Server whatever you want to configure here and again in the application layer then you would for instance there it is you would for instance do something like that ser is at scoped right and then I article service or I when you can write this properly I repository in the end right I repository and then the repository uh implementation something like that okay is then done here and again for the infrastructure layer then that would be something like Entity framework or any other third Library framework then that you might want to use there okay I hope this was clear I hope this is not too basic I hope this is not too advanced tell me that in the comments do you want to see more about that cqrs again for instance mediator all that stuff it is very interesting but it's not that beginner friendly maybe but I really try to make it beginner friendly so you still also get uh the idea of how you can work with all that feedback guys thank you very much for watching if you like the video you know the drill and if you learned something hit the like button please subscribe to my channel check out my patreon page maybe you want to support me that would be very nice thank you very much and don't forget do Web Academy still open but only for a couple of days so check out the link in the video description again thank you very much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 19,904

Keywords:

Id: D-Kp02NNUrE

Length: 19min 46sec (1186 seconds)

Published: Tue Feb 06 2024