Microfrontends with Blazor
Вставка
- Опубліковано 31 тра 2024
- Microfrontends is an architectural pattern in frontend applications that promotes the idea of an application being composed by several self-contained and totally independent modules. But can we do this with Blazor apps? Well, we can! And it's actually very easy! Join me in this video and I'll show you stept by step how to implement a microfrontends architecture in Blazor apps!
#aspnetcore #blazor #csharp #microfrontends
Join this channel to get source code access and other perks:
/ @codewrinkles
Content:
1. Intro: 00:00
2. What are microfrontends? 00:17
3. Index as a microfrontend: 02:17
4. Counter as a microfrontend: 05:13
5. Weatherforecast as microfrontend: 06:48
6. Dealing with module dependencies: 09:26
7. Conclusions: 11:44
Also follow me here (especially if you are a self taught developer):
✅My other channel: / @danpatrascutech
✅Instagram: / danpatrascutech
✅TikTok: / danpatrascutech - Наука та технологія
This is a good introduction, but there is a lot more involved in having a functioning micro-frontend in the same way microservices are nothing but complex. I understand this is just a sample, but I'd love to see this become a small series including dynamic navigation to pages in modules, adding components to pages from other modules, etc. maybe watch Florian Rappl's NetConf presentation. Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. This should not be downplayed.
I don't see this as the way for building microfronteds in Blazor. This is should separating some code in different libraries. A micro-fronted should be hosted on it's own service, to be able to scale it. It is not that simple to build a microfrontend app.
Thanks a lot Mr.Dan and welcome back
you look awesome
Thanks!
Very nice and useful video, like it a lot. A small suggestion: I am using an AssemblyInfo class in each project that is just an empty class to reference the project. The reason is that though unlikely, but the classes you used might be renamed / removed at some point due to a refactor or new business requirement, while the AssemblyInfo class is dedicated for exactly this.
That's actually a very good tip. Thanks for sharing it!
Cool introduction! But in this video the hosting application still has to know every module and should also contain the hard-coded registration logic.
How the host should be modified to be able to load unknown modules and register them on the fly?
Awesome - just what I have been looking for
Ver nice video! It helped me right in a new project where I've struggled with classes sharing the same name. Now I can seperate them into their own modules! 🥳 Would love a series about this topic!
use namespaces?
If you do this in webassembly, is it loading the modules as they are needed? I assume the answer is no because you referenced everything in the shell project.
Is there a way to do this more dynamically, without having to reference directly, maybe with some type of module discovery? Also, only load a module when it is first needed, rather than on initial login, to speed up time to home page.
@codewrinkles do you know how to get isolated JavaScript files to work in this scenario? For example: Index.razor.js
well, I can't find anything more than just breaking a project down into smaller ones.
I thought the point with micro frontends is we could get as granular as components on a page coming from even different tech stacks, e.g. a mix of blazor and react. Breaking a project up into RCLs whilst good, doesn't really translate to micro frontend.
What about having different database in every/some modules?
How difficult is that?
It's actually not that difficult as each module cand handle its own database.
thats not a microfrontends. that's just component libraries
Simply not worth the hassle same for distributed systems not sure why people not stick monolithic like you are not reaching google & facebook scale relex