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
130
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
140
How cheap serverless realli is?
yashints
0
110
Tensorflowjs 💝 AI
yashints
0
55
JavaScript & AI, V2
yashints
0
120
Machine learning & JavaScript, no you're not dreaming
yashints
1
100
WebAssembly's post MVP future
yashints
0
76
docker for web developers
yashints
0
410
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
170
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
390
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Thoughts on Productivity
jonyablonski
70
4.8k
Why Our Code Smells
bkeepers
PRO
339
57k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Language of Interfaces
destraynor
161
25k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Music & Morning Musume
bryan
46
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.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?