Clean Architecture with Blazor Web Apps in NET 7 by Rijwan Ansari

so hello everyone greeting again and it might be like uh good morning good afternoon or good evening based on your location I'm in Manila Manila Philippines so it's afternoon here and uh thank you for such a nice introduction uh I also appreciate uh Pune Tech Community for organizing.net conference uh for the community and uh this is my first session with the your community so it's my pleasure to connect with your community thank you uh so today for today uh we will discuss uh about clean architecture and then um uh we will Implement a kind of clean architecture solution with the Blazer web templates a Blazer project templates uh with dotnet 7. so as we know like dotnet7 is officially released on November 8th so for now now we can use the dotnet 7 as well in our application officially released and also they organize this event also to make it like a successful event and also the discuss about the new features upcoming activities likewise now uh for my uh this session I'll be covering like uh what is a clean architecture definition and what is the principle behind it also we will see the diagram and what are the layers comes under the clean architecture then I will give a brief introduction about Blazer which uh I like uh our previous uh speaker sundaram also gave a good uh insight about the Blazer and also it's a you know implementation with ma UI which is another like advantage that is going to add for if someone is developing application for multi multiple platform like uh Android iOS window all like Linux environment so and with that I'll try to design a quick uh clean architecture solution with a Blazer app within this time frame like I won't be able to implement all the standard practices uh so for that what I will do I will add some recommendation at the last last like uh what are the things that you can add with that solution to improve it and also I'll Implement repository pattern with Entity Framework 7. so let's begin about me like uh I'm dijohn Ansari I'm my application manager at techon Global uh uh with that uh like I'm a Microsoft MBP also the MVP in C sharp corner I'm also a certified trainer I love coming speaking into Community writing Tech blogs I'm also a trainer and YouTube so you can follow my blogs reset.com so let's begin with our session um screen architecture so like the core idea behind the clean architecture is like to make the solution a bit of more uh you know flexible and it should be uh ready to cope up with the latest uh like Technologies and changing Trends or changing in the activities so with the minimal changes we should be able to use the same solution instead of creating something from the new so so that uh it it suggests like to keep our core part core of the application that consensus consists of our like uh entity or like applications logic or like some we call it service layer or business logic layer independent upon Opera front-end database and external Frameworks so that when we are changing our application let's say front-end we can completely use those hour like a core application that we have developed writing like entities and business logic those also like if we are changing the database with the minimal changes we will be able to use all the solutions that we have already developed and even if we are upgrading it we will have a list difficulties earlier it has a say given like a several name it uh was called as like a hexagonal architecture uh onion architecture vertical slice architecture domain driven design or domain Centric architecture so it has got a several name but uh you know the primary idea or the core party or the concept is same so the concept is to keep the you know application and domain at the center of the application independent upon uh you know front-end and databases or like external Frameworks like we never know like um uh the way the fronted or like database is changing we might take decision to you know let's say today we are using angular we might take decision to use blazer for the next uh you know release or or even like we take decision okay we are using uh SQL database let's use the mongodb or nosql also because these day things are changing so changing so rapidly so we should design a solution in such a way that we should be able to cope with those changes with the minimal changes we can do some optimization or some changes in our code and we should be able to use that uh decisions we should be able to implement those changes so uh as I said the basic principle is uh like the core application which consists of entities and business logic uh should be independent upon the front-end UI also it should be independent upon independent with the database independent with the external Service Agency devices or like external apis external stories and it should be also independent with the framework and the best thing is it should be testable we should be easily we should be able to test it without affecting the core business so if you uh Google you will find numerous uh you know uh diagram about the clean architecture all those Architects those diagram try to give the same idea like uh what is the mean you know logic or main concept or main uh idea behind the clean architecture so among them like this is one of the my uh best uh diagram that I I feel like it's uh shared by Uncle Bob by Robert C Martin so this this gives a pretty much good idea how the applications or the diagram or the architecture should look like so here we can see like let me just take out my mouse yeah so here we can see entity at the center of the application that's why we call domain Centric or domain driven application design so entity at the center then it is uh referred by like use cases then at last it is covered by controller Gateway of presenter and UI wave devices are at the external most outer part so which means like your entity has no any dependency use cases depend upon the entities controllers presenters or Gateway those are depend upon the use cases and again UI wave these are how they are using this controllers or Gateway or presenters so you can see the dependencies following from external to internal which means like internal has list dependency or there is no any dependency at the entities so that's how like uh these business entities are covered by uh use cases called sometime we called it application rules or like sometimes we called it services or like some we called it as a features likewise so those are again covered from you know uh controllers Gateway and at the last we have a DV uh and UI wave those things now here let's see if we change any of this component we are keeping the core part as it is so that's the what benefit we are getting from a clean architecture so the main you know principle is this one like you try to make your core part as much as flexible and less dependent with the external or UI or database so that it is ready to you know cope up with the changes so uh if we see the current application development approach uh mostly we use two approaches that is like three tire and clean architecture there are several other approaches but these all approaches are coming with these two uh you know architecture so if we see entire or Theta architecture uh we have database uh data access layer then business logic layer then UI is there maybe we can organize the application in a different way but if we are following this three Tire the concept is this one so data follow from UI to business logic business logic to data access layer and then it goes to database so here data access layer is referred to the business logic and business logic is lastly referred to the interface now if you do any changes in your database or data access layer obviously your business logic is going to effect because this application is uh X data access layer is referred to the business logic layer similarly if we do any changes in the business logic layer it will also affect the interface as well now how it is a bit different with the clean architecture now the clean architecture if you see we put entities at the bottom and on top of that we build application logic and use cases so what will happen like now your application is uh like whole use cases is using the entities that are independent with any project or any framework now with this now we can use this from interface from infrastructure now if we want to use external services that infrastructure will communicate with those external services like um file storage or like if you are using Azure blob storage or like if you want to use some third-party software or services or web services so those all we connect through the infrastructure and infrastructure is again responsible for communicating with the database but we are not referring infrastructure to the application instead we refer application to the infrastructure so the the this is what the clean artist said so that you can make your you know core part independent of UI and infrastructure now core application what are the things we normally uh these are not limited to this but these are the general things that we include under core application first thing our all the you know um uh entities and enum will be here this entities and enamor like our core you know entities uh then we have all the interfaces we will try to we try to put more all those interfaces into application layer so that we can implement this interfaces to any of the you know layer and we can make this a core part independent now we have our all the services or we called it managers or like sometimes we called it providers likewise some care shared functions will also come under this one common part common uh common uh common way common things that we use in our application or common helper classes that also we can include on under like application we also try to handle the acceptance uh those are uh handling mostly these uh business layer applications errors exceptions we also use validators event handlers guards under this core component uh infrastructure so infrastructure contents of DB context repositories anywhere like reported repositories interfaces are on application layer but we implement it here so that we we can make it uh as external uh you know communication so we can use any database without changing the application our external Services apis email SMS file system SDK we all keep under infrastructure UI so since we are making this as an independent with you know a core part so we can use any car any UI we don't have restriction that like we can use asp.net go uh like MBC one or like Blazer or even like uh if we can use uh we can use web API likewise we can build any uh presentation layer and also we can Implement API with a front-end different Frameworks like if we want to use angular view JS for the fronting that also we can do we can use razor pages and we also include some filters uh but uh there are different uh approaches as well people sometimes they include their you know um API models or like sometime view models so that depend upon like your design even you can put that dto in your application as well or even in the uh like web API as well because those are only using uh used as a you know data transfer object so those thing you can do that now uh we uh we will uh today we are gonna Implement uh uh clean architecture with the Blazer templates so uh I'd like to give some idea about the Blazer so um the background is like uh these day we have lots of uh you know wide range of platforms Technologies for the web development and uh which creates a kind of you know a bit of gives people deciding which framework to use for your for wave development and to develop a complete web application you need two different skills like that one is back-end developer and another one you need the front-end developer so both developer comes with a different skill set back in the one of the most popular backend uh we use is uh c-sharp and dotnet platform so you need a guy who know the.net platforms uh dotnet and csap language now for the front end we have several options like uh if you see the the populars are like uh when people use uh angular pujs JavaScript related Frameworks so and even MBC applications we use but those are not complete like you know uh client application it to use server rendering as well so now we have always like uh you know uh to to get up kind of you know good uh experience uh we need a Twist skill set like uh you know to use a spa templates also like we need someone who know more JavaScript or like more front-end Frameworks so uh to overcome this one like uh Blazer is one of the best uh you know choice uh so that uh you can use the same skill set uh same person to do both front in and back end which means like uh you can we can use our uh um csap knowledge to build a complete framework with this pass a single page application so uh in sort like uh what I can say Blazer is uh one of the web development platform best for dotnet family and uh it is uh it provides the flexible to develop both back in and front-end same using same language that is c-sharp with a smart template so uh if you want to know more about like uh how to develop the Blazer web application I have shared one of the link like I have put up a bit more exploration so uh like a normal uh when we are developing any web application we use JavaScript node to control all the activities in the fronting side but here the best thing is like we can write the JavaScript sorry csap instead of JavaScript that will be running uh on the web browser using webassembly and it is also like it you will get the same flavor that you are getting with the JavaScript and with that you will have some advantages also like when we write JavaScript we have to write lots of JavaScript to do the simple simple list of some simple validation or we try to use lots of uh uh you know JavaScript libraries or plugins so with that use with the use of laser you will overcome with those of uh you know libraries because you will be able to write your logic with this is up and uh in the front end itself so that's the uh one of the main advantage it comes with the two different uh template one is for Server one is for wave assembly so it has both has a different uh purpose first thing is like um Blazer server operates on the server side uh like asp.net core applications and it hands all the user interaction over a signal or connection where is uh the Blazer wave assembly uh you can run as a asp.net core hosted also or you can run it as a static files uh without the need of server side rendering uh in a Blazer server any change in the Dom content uh generate the webs uh server and it gets automatically update via signal uh with the wave assembly when you can develop a progressive web app uh the advantage with the server Blazer server is that you have a better uh accessibility or like you can easily access the network and server whereas uh the Blazer value assembly it do the interaction with the data over uh with the standard HTTP Service uh can benefit uh like server can benefit with the distributed application operation in the data center and uh where is the web assembly uh it's a client native it can take the advantage of client native your processor is speed now I'll be designing a solution that uh clean architecture Solution One demo so that demo uh I'm gonna use a Blazer and uh dotnet 7 in TT framework core 7 I'll use code first approach I'll also use automapper to map our you know um entity with the dtus and I'll use repository pattern generic one and SQL Server database so let's begin let me open my environment I'm using visual studio 2022 mm-hmm so I'll create a new project you might experience slight slow because I'm using one of my VM I just restarted it let's create a new project then we'll choose a Blazer server app I'll give one example with the Blazer server app as well as uh webassembly so because most of the things what I will do I will uh I'll reuse most of my uh code so dot Net 7 now it is already a standard term support is there like Tower earlier um uh organizer they said so okay let me first go back instead of uh I'll create some first a blank solution so that first I'll focus on designing the clean architecture so just to align with some of the standard we will create a core folder uh then we'll add another folder infra then post now uh four part we need to add like uh first will be our plus Library uh first we need domain because this is our this is the center part of our application domain or we called it entity let me delete it now what I will do most of the things I'll just copy from one of my sample so I created two folder one is a common one is master so common I put like a common that thing we need point it is like let's say base entity uh auditable with entity based entity also I have made it a bit of uh Dynamic like which which kind of uh base unit ID like ID you can Define either integer or like uh uid or like long likewise even string and uh iot table is there so that these are the common fields that we need for like uh auditable popper slide is deleted created author modify editor so these are the some things that you can put inside the common that and then I created two entities uh one is app setting and reference field so this app setting uh it is using auditable with the base which means like uh we have already these fields these fields and with these fields we have a base entity also so basic DT what we have defined in app setting is integer so which means like our primary key will be the integer so our domain we can Define like this now another thing I can recommend like when we Define the model just you define your model and create a folder based on your use cases or like features so that your model can be you know easily grouped so this is my domain so this application we will not add any references this is the course so now we will add another part is applications so application I will refer our entity so domain will be there for here now after domain we are not going to add any reference any reference project in this application so let me delete this one and here also what I will do I will copy most of the part so first let me copy the common part so common part what I have done like you can write error handling methods here like common exception handling or error message log capture then we can Define all the interfaces here so this is application DB uh context and then I current services our repository interfaces unit of work so but with that I need some reference supporting libraries as well let me add those libraries sorry those nuget packages so for this application I'm gonna use automapper and also dependency injection I want to put the application dependency related abstraction within this class Library so let me first add those nougats so I need first is uh entity I need Entity Framework core seven point is already 7.1 is already here so let's use this one then I'm gonna use Auto mapper and also I need the dependency injection of this Auto mapper it's then I need that dependency injection of Stack so this is the one and sometime we need your soft Json yes now uh my core part like I said I have the interfaces so since I use those libraries let me check some of the classes already using Entity Framework uh if we need current user in our application most of the time we need it for like uh auditable purpose or some different purpose we can Define the interface here and we're gonna implement this into another class and uh also like I have a repository one so I'm using generic repository so I have just kept all my reposite related uh uh definition here and then you need of work now also I have used the auto mapper profiling for mapping my uh view model with a database model or you can say entity so I still my view model is missing that's why it is error here because since I copied the entire class from one of my existing application actually existing demo now let me um copy another class service class so the common contains all the common things I need even I have defined some common models like Clover variables response model or user model that I need common for other services now I created one of the master uh use case you can Define separate your services based on use case or even based on the features likewise so I have used the D2 also here so I will I will explain a bit uh later like why I'm using D2 here now I have my application service that application Service uh I'm using unit of work logger and then mapper error now I'm with this I have a Constructor so all my interface are used here this is um I have used custom error login now my application setting like uh I have a command like upset that will do uh insert an update port and delete is also here so these are command and queries are like uh all app setting and get by IDs so these are the functions I have used for app setting and I'm returning a common response so that uh it will be easy for me to know all the cases giving common response model now I need to have a dependency injection here also so that also I will just copy you can actually add this dependency injection in your front end as well but I I think since we don't know like if we want to change the front in some time you know uh it will create another dependency so better to add the front-end class here itself sorry dependency related all the things so all the dependency of this class will remain within this so I have a scope like I have a dependency injection of application service and also Auto mapper so these are the two dependency injection I have available in this service now now you can see like our domain is there which is independent we don't add any reference no packages application uh it depend with the domain and we are using some packages for the tool but we are not depending upon external services now I will Define our infrastructure so let me add infrastructure class infrastructure with infrastructure also um I will copy most of the class let me copy from yeah so so first what I will do I will Define my persistence yeah so let me give you a bit so now you can see uh uh I have some common interfaces I application DB context which is already uh interface is here but it is implemented in the external uh Library so that it is not we are keeping it uh a bit you know it independent with our application so interface is there and we have implemented here so now if in the future want to change it uh let me first complete nugget packages so for this nuget packages uh what are the packages I need and it look at packages yeah so here also I need Entity framework code design so I need this design because I am using cost First approach and also I you will use SQL Server database so I will choose SQL Server I need this tool also then I need some time we use uh some configuration let's say if we want to get some application uh let's say app setting related data or application configuration so we might need to get some you know configuration variable as well so for that I will use configuration environment related creation environment variable then I need configuration file extension also sometime first what it comes liquidation now again I will use dependency injection of this one with I'll put all the dependency required for this infrastructure within this class Library so my all let me double check whatever the things I need yeah all done so my all red now I need to add the reference of application here yes now over all the errors are gone so let me explain like uh application DB context so we implemented it here so here also what I have done like um while saving like uh since I use ird table so every time I don't need to get the current user email or like current time I can directly write this a loop like whenever we are doing any changes in the in details this information will update automatically so when we are adding it we need all the four information and when we are modifying it we only need the editor and modified it so that we can do and my data set division are here applications and references uh it is one so sorry to distribute uh can you please increase the font size in video studio so that code will be readable uh sure thanks thank you for reminding yeah is it okay yeah yeah it looks very good thank you thank you thank you for reminding yeah so now uh we have our DB context and also I'm getting current user uh so that if ever I need a current user I can get it from my uh front in mostly so this is my uh DB context class now I have a Entity framework repository which is a implementation of our repository class so here also like uh I have defined the application context and entities and uh I have used all our you know repository implementation so this uh this is a generic repository so I'm using t uh different person use different way of implementing it so this is a one way that I'm doing but there can be several way of implementing it even uh I have seen like uh many uh times like uh some people don't go for generic they use uh you repository pattern but they create a repository uh interface and implementation for you know each of their uh entity so that's also okay it depends upon the you know how they organize the project and what is the scope behind this so Boston but most of the my project like uh with generic repository pattern I am able to do most of the things but sometime even we use a edu.net also in some of the case like if we want to get something for report or this day even uh within DT framework you can easily run store procedure but performance uh sometime you know if we have to load huge data so sometime we Face uh uh some delay with the Entity framework but as I know like the latest Entity framework code is much faster and I have added some configuration here so configuration means like for my entity if I want to provide like some setting while you know updating into database like let's say um I have like applied uh like a reference key max length 100 and is required Max lens so those length and required field you can Define here so that when you will migrate into your database and update it uh this setting will be applied similarly I have applied for references it is required and a Max 200 even you can Define your you know uh foreign key uh primary key relationships so your table relationships also here in the configuration and these configurations are being called here somewhere let me check yeah call apply the configuration from assembly on model creating so this is my persistence now uh uh with that I will add let's say a few more class for example I want to do configuration extension so sometimes we write configuration extension to get the data our app setting relatives data and uh also I have applied a log capture here like I have my own lock capture like I try to put logs into some of the text file so that it's easy for troubleshooting so let me copy those files also here not sure yes so now my dependency injection of this is also here so I am using like uh I need configuration to get the app database connection string and uh scope for like my application DB context repository unit of work and error message log so for which I have put a separate error uh implementation so that I can write those into some of the log file based on you know layer class methods error time so it's easy for someone to go and check the file and get the error easily even we have option like if we are using cloud services um we can use Azure app service it has its own log analytics and some many features are there those also you can use so with this now our clean architecture is ready now we will add the host so now host you can hit add anything like when you can add um ESP like web API or like Blazer server Blazer webassembly it doesn't matter because this part remains as it is so first I will start with the Blazer server so here https uh I will not I'll go the default options yeah so my blazer app is ready and about the Blazer our previous uh speaker sundaram he has already shared like we have a Razer app here so these are the things now I will not uh explain it again now what we need to do here now uh this application will refer our few of the application SQ of the class like we will refer our application here infrastructure here now you can see like what we did here um instead of uh you know uh referring infrastructure to application then application again to web we did we added this here independently and this independently also our application is not getting any reference from other than domain so and domain has no any reference it is independent so now dependency will follow like uh from uh like let's say external to internal like web web to app or web to infrastructure then app to domain so which means like our application domain is in the center which is covered by our use cases or like business logic which is again covered by infrastructure and then our web or like even we can develop we can add web API application here likewise but uh I have to now do some configuration here since I added my dependency injection I need to register in my web app so let me register it these are the default now I added my few I registered few services so Uh current user I need to implement somewhere here a class I use here because most of the time we get user from front in because we might Implement you know um uh some authentication method so I'm using it here so most of the time we get user from interface so now here uh this is my application related dependency injection which is here so this is my application so application related all the uh dependency injection and Service registration I'm doing here and this is my uh infrastructure so this is here persistence so here I can use DB context Entity framework and even if required if you are using some other like configuration extension or blob storage those thing also we register here and we implement it here it can have an interface in application but implementation will be here so now we almost ready to test it so let me add my uh connection string setting so I'll copy one of my connection strings this is my local database uh let me check my database whether it is on let me save and build the application yes profit so it is spelled now what I will do I am not able to open my SQL Server I'm trying wait I have another screen I'm trying to check call server all right it's opening so that I can actually run one quick migration and run the demo as well so since it is opening meantime what I can do I can uh write some logic tools and also Define some UI to save the data so let me come here I'll create one Blazer base app setting so here also what I will do I will create one master my use case I have used Master under master I will add one uh it's uh sorry I'll use Blazer component and app settings now our app setting page is here let me just build it my database is almost open so I'll just create one foreign just update the database in my connection string so let me show you my total connection string um this is one of the error you might face so because of which we gonna add at last like uh sometime uh with the recent release of SQL Server also by default the encryption is uh on so because of which we might face some error sometimes so we'll make it uh enable false by default now what I will do I will add migration to add migration I need one Library here let me just add those one lap that one Library design uh you know front ends for the science now I will choose my infrastructure add migration moisturized teachings the domain difference does not content maybe uh if this error come because my default project maybe it is considered getting domain so let me set this as a startup project set as a startup now if I run this command again yeah it created my uh migration class now I'll update the database yeah my database is created let me just show you the examples uh here is my database now let me refresh it so our two tables is create tables are created and also like uh our column the way the length we defined and not know so those requirements that we give here in uh configuration whatever the uh like whatever the changes we want to make that we can make from this configuration how to share so with this configuration whatever the setting I have applied those also coming here now let me now create one app setting complete so what I'm going to do I will just copy from one sample I have so now uh I am calling my app setting service and this is my path route now I'll change this into H4 first I will try to run one time let me check my time how much it's almost 56 so just I will try to quickly show the demo um I might take more time so I just I will just paste it one of my class so that at least I can show at least one door move now I will run it uh nandip let me know like if I'm going over time uh so that I will uh try to conclude my session please take your time no problem but we still have 10 more minutes so no issues even if you overrun not not an issue all right thank you so I run this application so I'll just run my app settings yeah so my app settings so since I have some time I can explain it I I just injected my app setting service that I have defined here and my app setting what I'm doing uh sorry interface is implemented here so let's say for gate all simply I'm using unit of work a common repository I'm passing app setting entity uh I'm not I'm doing table no tracking order by reference key and get list and those uh the response I am getting I'm just using automobile to convert that into uh like app setting uh view model viewmodel or dto or sometime we called it as a like front-end models so it is here now and here the thing is uh best Advantage like since I can use all my validation coding let's say like for example I can use app setting VM so I zero so I can write even like my C sub code and condition everything in the interface like a Java Script not even Java Script mostly like angular like with angular also we write all the like if condition everything on the front end even we bind the model directly here so my VM like uh view model I have defined here so I my view model is here that I can directly bind with my interface like uh text is here even if I have a validation things I can apply those required field and everything it will handle uh directly from that so we can bind that object directly in the interface and we can use that object in our like save save our load everything those object we can reuse so this is one of the advantage like now we can write our C sub code directly on the interface and that will run as a wave assembly so it means like you will get that JavaScript experience like even here also um if I click it's a you know single page application and uh let me just uh get app setting also now if I add let's say one of the reference is uh uh blocks enable so value is let's say true and description uh manual logs and it's a Boolean value so it is saving within a few seconds and it's already saved in our database also so within a few seconds like we did not even feel that you know um because this is a single page application so even if you see here it's already saved it's saved recently and the author I have put initiated because I'm I have not implemented any authentication so for but here like uh in this solution like uh I have put here in my DB context like if you have a real let's say like initiator you can get that initiator ID and shift uh send it directly to the database now so so same thing like uh uh let's come to Reza so now even for like uh this is I'm using page load this initial uninitialize means I'm getting all the things in my table uh for Save I have you save when I can write my all things I can display warning so uh I'm using uh common response model so that I can check every time if my response is success I will show my output is I will display the error message on the warning so this is how it is now if I want to edit it I'll click now it change into update so this update like for that we are writing the code itself in the here if the VM our like view model is having ID uh more than zero it means it is already saved record so it will show update and if it is uh zero then it will show the save button so this kind of you know sees up and condition you can directly write on the interface itself and all the things is quite easy here so I update manual log enable and I update it it got warning means maybe something wrong it could not update my uh record so that's how I I can you know directly play with the interface itself whatever the things is happening now let me rephrase it again now if uh I want to delete it just I click the delete maybe disability is having some issue so it can be because I have just created some sample I I have not test all the function so delete is here and my record also like I'm showing on front end so here also I can directly use my you know list uh and bind it directly from the interface itself so this is how I have done for server for client I'll just give you one simple sample because I don't have that time so I'll just use one of my existing application not existing this I created another one sample yesterday so this is also the same approach uh all the things are same we have interface application domain and this is the Blazer uh wave assembly so when we create a web assembly it creates three projects one for client one for server and one is shared so that shared you can use for you know Common objects that you want to use in the front in as well as your backend so webassembly the advantage I said like you can deploy it independently it doesn't require you know um uh server so here uh server I'm using this as a you know web API so my app setting web API I'm using same uh like uh earlier I used Blazer now here also my entire thing will be same only thing is I need to implement that uh inject that interface and I can build my API so this also like uh client I will communicate like I have created one Masters let's say uh a manager so that I can handle it easily so here we communicate with the HTTP request so I'm calling HTTP get all and based on my success I am binding the things with my response model and I will pass my response model to the now interface so here also my interface if you see I'm using same interface here there is no any change in the UI only the thing is there is some changes here I'm using managers to save and those managers are here itself so our front end is completely independent with the webs API server so this is another approach that we are using for webassembly so that's how like we can Implement actually clean architecture the code thing is still same there is no much change only for the you know front-end part we are using Blazer so Blazer we used we can use Blazer server or browser Blazer webassembly anyone so that's how we can you know create our complete applications clean architecture following the clean architectures with the Blazer now I'll be adding some recommendation that uh within this short period of time I could not capture with uh with this application so uh this is one way of Designing the solution but it is not necessary that it is only the one way like designing clean architecture you can follow different way you can organize your class your libraries in different uh methods or different way but we need to make sure that your primary principles or the core principles is same like your core application is independent with the front-end and the infrastructure or external services and this day like uh to get uh you know better uh uh you know maintainability for code for future and also uh more responsive uh faster uh implement cqrs this is also one way like it gives better experience with the clean architecture and another thing the entities that we use uh for the database or like core entities we should not use any Frameworks there even not any data annotation like if you want to make it uh let's say required or column width we need to Define that into the configuration of infrastructure uh for validation you can use the fluent validation this is also one of the popular and used Library when we validate any view models uh so this filament validation mostly we use for you know uh front-end uh or like let's say uh data validation we should organize our services and entities based on use cases features or products or features likewise so that it will be easy for you to manage your uh if you know if the application is complex uh domain events this is also one of the things that we should Implement uh separate details from The View model this is one of the main thing like sometime what happened people they implement the solution but they use our entity class which is the core entity or database model into frontin also so we should not do that we should try to use separate view model or API model which is different from the core entity because sometimes you might export some data which is not required for that user so and also the test cases like we did not Implement here any test so it's uh with a dependency like uh we should Implement test and test should not depend upon you know uh with the list dependenties and also it should not affect your application Blazer we use comp browser is we use our like default one but Blazer comes with the central you know uh component framework like and design mud Blazer so those also if you use you will get a good uh you know user experience and most of the components are already designed there you can reuse those components and also like uh I I have I use you know same Blazer to write the you know HTML also and csap for that Blazer but if your C sub code is too much you can separate that with the partial class that I think uh sundaram also told earlier in his session so that's how you can do it and here are some differences which you can follow like in my blog if you go like I have wrote several articles on clean architecture even there are several videos with Microsoft learn also they have lots of good articles for clean architecture and practices also in Microsoft there is a sorry C sharp corner if you want to know the more detail concept you can go there and uh Robert C Martin the diagram I used uh that also give a good explanation there are some good videos in the YouTube by address and also Jason Taylor they have also a better video for clean architecture that also you can follow so uh I'll be happy if you have any questions

Channel: Pune Tech Community

Views: 4,338

Keywords: .NET, Blazor, Clean Architecture, Blazor Server, Blazor WebAssembly, .NET 7, Repository Pattern, Entity Framework

Id: Sx0ytsHc1kk

Length: 69min 56sec (4196 seconds)

Published: Sun Dec 18 2022