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
110
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
89
Tensorflowjs 💝 AI
yashints
0
45
JavaScript & AI, V2
yashints
0
110
Machine learning & JavaScript, no you're not dreaming
yashints
1
80
WebAssembly's post MVP future
yashints
0
68
docker for web developers
yashints
0
340
Other Decks in Programming
See All in Programming
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
2024 컴포즈 정원사
jisungbin
0
150
What is Parser
yui_knk
9
3.9k
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.5k
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
220
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
230
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.5k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
640
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
220
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
570
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
What the flash - Photography Introduction
edds
67
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
RailsConf 2023
tenderlove
27
800
It's Worth the Effort
3n
182
27k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
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?