Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Micro frontend and web components
Search
Yas
June 19, 2019
Programming
1
120
Micro frontend and web components
Yas
June 19, 2019
Tweet
Share
More Decks by Yas
See All by Yas
Web performance - Browser APIs
yashints
0
130
How cheap serverless realli is?
yashints
0
100
Tensorflowjs 💝 AI
yashints
0
49
JavaScript & AI, V2
yashints
0
110
Machine learning & JavaScript, no you're not dreaming
yashints
1
89
WebAssembly's post MVP future
yashints
0
73
docker for web developers
yashints
0
390
Other Decks in Programming
See All in Programming
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
720
AI Coding Agent Enablement in TypeScript
yukukotani
15
6.3k
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
110
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
220
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
360
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
6
340
抽象データ型について学んだ
ryounasso
0
200
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
120
PT AI без купюр
v0lka
0
170
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.2k
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Music & Morning Musume
bryan
47
6.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
A designer walks into a library…
pauljervisheath
205
24k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
49
8k
Transcript
Microapps Web Components @yashints yashints yashints
Microapps Web Components @yashints yashints yashints
yashints
yashints Agenda ▪ Intro ▪ Core ideas ▪ Meet Ali
and her team ▪ The issue ▪ Trials ▪ Final solution
Lead consultant @Readify Yaser Adel Mehraban @yashints Almond croissant addict
cleverly disguised as a web developer yashints.dev dev.to/yashints
yashints I a good monolith
yashints “ Don’t even consider microservices unless you have a
system that’s too complex to manage as a monolith. Martin Fowler
yashints “ Don’t even consider micro frontend unless you can
vertically slice your system to enable your teams to act independently. Me
yashints Core ideas ▪ Development speed ▪ Autonomous teams ▪
Customer focus ▪ Technology agnostic
yashints Product owner CarZila
yashints The issue Data Layer Business Layer User Interface
yashints Technology agnostic Independent deployment Team ownership Develop independently Fast
loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
yashints First try User Interface Search Insight Test Drive Order
Payment Inventory
yashints Technology agnostic Independent deployment Team ownership Develop independently Fast
loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
yashints Vision Search Insight Test Drive Order Payment Inventory Frontend
Backend Data store
yashints If you want to go fast, go alone. If
you want to go far, go together.
yashints First attempt Hyperlinks
yashints Hyperlinks Search Order Search.html order.html
yashints Fast loading Native support Team ownership Develop independently Run
independently Technology agnostic Independent deployment Corporate identity Sharing state Modular Smooth user interaction
yashints Integration vis composition ▪ Build time ▪ Run time
on client side ▪ Run time on server side
yashints Build time
yashints Build time { Search } { Insight } {
Test Drive } { Order } { Payment } { Inventory } Build Bundle
yashints Fast loading Native support Team ownership Develop independently Technology
agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
yashints Server Side composition
yashints SSI (Server Side Includes)
yashints SSI (Server Side Include)
yashints ESI (Edge Side Includes) Get Get Order
yashints Fast loading Native support Team ownership Develop independently Technology
agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
yashints Client Side composition
yashints IFrames
yashints Fast loading Native support Team ownership Develop independently Technology
agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
yashints Web components
yashints Custom Elements Shadow DOM ES6 Modules HTML Templates
yashints API
yashints API
yashints API
yashints App Shell
yashints Framework support
yashints Angular Elements Vue CLI Manual Community Soluttions Lit
yashints Fast loading Native support Team ownership Develop independently Technology
agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
yashints Demo
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…
yashints Taking balanced decisions is the secret ingredient for success
yashints
yashints
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
yashints Questions?