I read and watch a lot development content and recently have been watching Manfred Steyer's angular enterprise architecture talks. Years ago while at the Angular Connect conference in London there was a demo of the new lazy loading features available. After the demos there was a Q&A and I asked "would it be possible to lazy load from a different URL with the idea of providing a microfrontend along with a microservice". The response I got was it may be possible but why would you want to do that.
The new lazy loading features and the thought of microfrontends got my brain flowing with ideas. In my day job we develop enterprise applications and have quite a few angular applications. Most of these applications have very similar functionality which has led to the development of some shared micro-services which multiple application use. This is all good for sharing the backend services but what I noticed was a lot of the applications had developed very similar UI's which used the microservices.
So I always have plenty of ideas flowing around in my head but never seem to get the time to explore these ideas. Watching Manfred Steyer's talks about enterprise angular architecture has sparked my interest in exploring this idea again, so to make sure I actually follow through with this I have set myself the #100daysofcode challenge to ensure I make time to explore these ideas.
I've put together a list of things I want to explore during my #100daysofcode and also put a final goal statement for something to aim for.
What i'd like to do
Investigate structure of enterprise applications with Angular
- Nx Workspaces
Create an application shell
Create a micro-frontend that can be loaded into the shell as libraries
- Potentially enabling a micro-frontend to be installed using an NPM package
Themeing, Microfrontend to take on the application shell theme
Integration with the shell
- Navigation Menu integration
- Security Roles/Permissions
- Microfrontend should be able to provide permissions to application which can be managed in the user management areas of the shell
Investigate ability to dynamically add features which would dynamically load microfrontends into the shell
- VSCode market place, admins can browse and select features
- Investigate a feature been a microservice with a microfrontend
The final goal I would like to achieve at the end of my #100daysofcode is
Angular application shell for hosting multiple microfrontends which can be used to build up an enterprise application. The microfrontends can be developed within a mono-repo which includes the shell or can be developed in isolation to the main application, this would enable development of new features which can be easily added to a new project via npm or even dynamically from a market place. Each feature would provide the frontend and will integrate with the shells core features such as navigation and authentication. The ultimate goal would be an application where microfrontends can be added from a marketplace similar to how VSCode extensions are managed