MICRO ANGULAR APPS
What does it mean?Why do we need it?
Frontend application
Reports
User
Data
Payments
Reports
Service
User
Service
Data
Service
Payments
Service
Backend services
Monolithic Frontends
One team to rule them ALL!
Reports
Team
User
Team
Data
Team
Payments
Team
Front End
Data
Back End
Organisation in Verticals
Encapsulation
Performance
Ownership
Communication
Seamless
Common Resources
Backward Compatible
WHAT CAN WE DO?
IFrames
Web components
IFrames
Performance
Performance
Performance
Performance
Performance
Performance
Web Components
JS encapsulation
Vague definition
Communication
CSS, HTML encapsulation
Our solution
Lazy Load Angular Feature Modules
Pros:
- Cant be used immediately in all Angular current applications
- Provides CSS and HTML encapsulation via ShadowDOM
- JS encapsulation with webpack
- Compatible with Web component standard proposal
Cons:
- Cant use other frameworks for now(maybe Angular-element in the future)
- Angular versions need to be compatible
- Cant load from remote url's... unless... :)
Lazy Load Angular Feature Modules
Module
Container app
Reports team
Module
Module
Webpack build
Share-loader
Payments team
Data team
Module bundle
Independent deployment
Reports team
{ }
Payments team
Data team
All modules loaded at runtime to container app
At runtime all modules share common resources via a global namespace
Discovery service
THANK YOU!
Come again...
deck
By Maor Frankel
