Microapps
Web Components
@yashints yashints yashints
Slide 2
Slide 2 text
Microapps
Web Components
@yashints yashints yashints
Slide 3
Slide 3 text
yashints
Slide 4
Slide 4 text
yashints
Agenda
▪ Intro
▪ Core ideas
▪ Meet Ali and her team
▪ The issue
▪ Trials
▪ Final solution
Slide 5
Slide 5 text
Lead consultant @Readify
Yaser Adel Mehraban
@yashints
Almond croissant addict cleverly
disguised as a web developer
yashints.dev
dev.to/yashints
Slide 6
Slide 6 text
yashints
I a good monolith
Slide 7
Slide 7 text
yashints
“
Don’t even consider microservices unless you
have a system that’s too complex to manage as
a monolith.
Martin Fowler
Slide 8
Slide 8 text
yashints
“
Don’t even consider micro frontend unless you
can vertically slice your system to enable your
teams to act independently.
Me
Slide 9
Slide 9 text
yashints
Core ideas
▪ Development speed
▪ Autonomous teams
▪ Customer focus
▪ Technology agnostic
Slide 10
Slide 10 text
yashints
Product owner
CarZila
Slide 11
Slide 11 text
yashints
The issue
Data Layer
Business Layer
User Interface
Slide 12
Slide 12 text
yashints
Technology agnostic
Independent deployment
Team ownership
Develop independently
Fast loading
Smooth user interaction
Sharing state
Corporate identity
Run independently Modular
Native support
Slide 13
Slide 13 text
yashints
First try
User Interface
Search Insight
Test Drive Order Payment
Inventory
Slide 14
Slide 14 text
yashints
Technology agnostic
Independent deployment
Team ownership
Develop independently
Fast loading
Smooth user interaction
Sharing state
Corporate identity
Run independently Modular
Native support
Slide 15
Slide 15 text
yashints
Vision
Search Insight
Test Drive Order Payment Inventory
Frontend
Backend
Data store
Slide 16
Slide 16 text
yashints
If you want to go fast, go alone.
If you want to go far, go together.
Slide 17
Slide 17 text
yashints
First attempt
Hyperlinks
Slide 18
Slide 18 text
yashints
Hyperlinks
Search Order
Search.html order.html
Slide 19
Slide 19 text
yashints
Fast loading
Native support
Team ownership
Develop independently
Run independently
Technology agnostic
Independent deployment
Corporate identity
Sharing state
Modular
Smooth user interaction
Slide 20
Slide 20 text
yashints
Integration vis composition
▪ Build time
▪ Run time on client side
▪ Run time on server side
Slide 21
Slide 21 text
yashints
Build time
Slide 22
Slide 22 text
yashints
Build time
{ Search }
{ Insight }
{ Test Drive }
{ Order }
{ Payment }
{ Inventory }
Build Bundle
Slide 23
Slide 23 text
yashints
Fast loading
Native support
Team ownership
Develop independently
Technology agnostic
Independent deployment
Run independently
Corporate identity
Sharing state
Modular
Smooth user interaction
Slide 24
Slide 24 text
yashints
Server Side composition
Slide 25
Slide 25 text
yashints
SSI (Server Side Includes)
Slide 26
Slide 26 text
yashints
SSI (Server Side Include)
Slide 27
Slide 27 text
yashints
ESI (Edge Side Includes)
Get
Get Order
Slide 28
Slide 28 text
yashints
Fast loading
Native support
Team ownership
Develop independently
Technology agnostic
Independent deployment
Run independently
Corporate identity
Sharing state
Modular
Smooth user interaction
Slide 29
Slide 29 text
yashints
Client Side composition
Slide 30
Slide 30 text
yashints
IFrames
Slide 31
Slide 31 text
yashints
Fast loading
Native support
Team ownership
Develop independently
Technology agnostic
Independent deployment
Run independently
Corporate identity
Sharing state
Modular
Smooth user interaction
Slide 32
Slide 32 text
yashints
Web components
Slide 33
Slide 33 text
yashints
Custom Elements Shadow DOM
ES6 Modules HTML Templates
Slide 34
Slide 34 text
yashints
API
Slide 35
Slide 35 text
yashints
API
Slide 36
Slide 36 text
yashints
API
Slide 37
Slide 37 text
yashints
App Shell
Slide 38
Slide 38 text
yashints
Framework support
Slide 39
Slide 39 text
yashints
Angular Elements Vue CLI
Manual
Community Soluttions Lit
Slide 40
Slide 40 text
yashints
Fast loading
Native support
Team ownership
Develop independently
Technology agnostic
Independent deployment
Run independently
Corporate identity
Sharing state
Modular
Smooth user interaction
Slide 41
Slide 41 text
yashints
Demo
Slide 42
Slide 42 text
yashints
Real use cases
▪ Migrate a large app to another framework
▪ Fix a bug in one app and deploy independently
▪ Reuse an entire app
▪ And more…
Slide 43
Slide 43 text
yashints
Taking balanced decisions is the
secret ingredient for success
Slide 44
Slide 44 text
yashints
Slide 45
Slide 45 text
yashints
Slide 46
Slide 46 text
yashints
References
▪ The demo is on my GitHub repo yas.fyi/2FeIrI3
▪ Slides yas.fyi/2Kspzt8
▪ https://micro-frontends.org/
▪ A good reference list yas.fyi/2KXHaZD