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
100
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
110
How cheap serverless realli is?
yashints
0
76
Tensorflowjs 💝 AI
yashints
0
44
JavaScript & AI, V2
yashints
0
96
Machine learning & JavaScript, no you're not dreaming
yashints
1
79
WebAssembly's post MVP future
yashints
0
62
docker for web developers
yashints
0
280
Other Decks in Programming
See All in Programming
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.1k
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
660
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
100
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
850
OpenTelemetry のサービスという概念について
azukiazusa1
1
390
[スクリプト] Swiftの型推論を学ぼう
omochi
0
110
Understanding Ast By Looking
inouehi
0
120
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
510
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
6.9k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
Featured
See All Featured
Facilitating Awesome Meetings
lara
39
5.5k
Gamification - CAS2011
davidbonilla
76
4.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Music & Morning Musume
bryan
39
5.5k
Web Components: a chance to create the future
zenorocha
304
41k
Side Projects
sachag
451
41k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Visualization
eitanlees
135
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
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?