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 Frontends (example from micro-frontends.org)
Search
nobuhikosawai
July 31, 2018
Programming
0
970
Micro Frontends (example from micro-frontends.org)
Microservices meetup vol.7の発表資料です。
マイクロフロントエンドの概要とサンプルをmicro-frontends.orgの例をもとに解説しています。
nobuhikosawai
July 31, 2018
Tweet
Share
More Decks by nobuhikosawai
See All by nobuhikosawai
GraphQLを用いたサイトに おけるパフォーマンス改善 (ECサイトを題材に)/ Improving online shopping site performance which using the GraphQL
nobuhikosawai
3
5.9k
Micro Frontends の理論と実践 -価値提供を高速化する真のマイクロサービスのあり方- / The Theory and Practice of Micro Frontends
nobuhikosawai
17
40k
Railsのタイムゾーン
nobuhikosawai
4
2.4k
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
680
Porting a visionOS App to Android XR
akkeylab
0
660
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
840
AIともっと楽するE2Eテスト
myohei
8
2.9k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Rails Girls Zürich Keynote
gr2m
95
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Making Projects Easy
brettharned
116
6.3k
Practical Orchestrator
shlominoach
189
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Designing for humans not robots
tammielis
253
25k
Become a Pro
speakerdeck
PRO
29
5.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
.JDSP'SPOUFOET .JDSPTFSWJDFT.FFUVQ7PM
ࣗݾհ !2 • ໊લ: ᖒҪ એ ʢ͞Θ͍ ͷͿͻ͜ʣ • twitter/github:
nobuhikosawai • ΤϯδχΞྺ: 2ͪΐ͍ • αʔόʔαΠυ(Rails) • ϑϩϯτΤϯυ(React.js)
͍͖ͳΓͷએ !3 IUUQTPUBZCPPUIQNJUFNT ٕज़ॻయ4ͰʮMicroservices architecture ΑΖͣຊʯͱ͍͏ຊΛग़͠·ͨ͠ɻ ୈ5ষͰMicro Frontends৮Ε͍ͯ·͢ɻ ΈΜͳങͬͯͶ
.JDSP'SPOUFOETʹཉ͍͠ͷ !4 • 6*ίϯϙʔωϯτͷఏڙ • 6*ίϯϙʔωϯτؒͷڠௐ • 6*ίϯϙʔωϯτؒͷΠϕϯτϋϯυϦϯά • 6*ɾϢʔβʔମݧͷ౷Ұ
.JDSP'SPOUFOETͷύλʔϯ !5 • نͱΓ͍ͨ͜ͱͰ͍͔ͭ͘ͷύλʔϯ͕͋Δ • ϖʔδભҠΛͯ͠ྑ͍ύλʔϯ • ϖʔδʹෳίϯϙʔωϯτΛද͍ࣔͨ͠ύλʔϯ
ϖʔδભҠΛͯ͠ྑ͍ύλʔϯ !6 • ैདྷͷϝχϡʔόʔͳͲ͔ΒભҠ͢Δύλʔϯɻ • جຊతʹͭͷαʔϏε͕ͭͷ7JFXΛ࣋ͭɻ • ମݧͷҰ؏ੑΛ୲อ͢ΔͨΊʹҎԼ͕ඞཁ • 4JOHMF4JHO0O
• 6*ͷ౷Ұ • ϔομʔͳͲͷϩδοΫΛؚΉΑ͏ͳίϯϙʔωϯτ – ίϐϖ – ϥΠϒϥϦͰఏڙ͢Δ – ͭͷαʔϏε͕ฦ͢ JGSBNFͰදࣔ͢Δʣ • ϘλϯͳͲͷγϯϓϧͳ6*ύʔπ
ϖʔδʹෳίϯϙʔωϯτΛද͍ࣔͨ͠ύλʔϯ !7 ෳίϯϙʔωϯτͷදࣔํ๏େ͖͚ͯͭ͘ • JGSBNFΛ͏ύλʔϯ • 8FC$PNQPOFOUTΛ͏ύλʔϯ
JGSBNFΛ͏ํ๏ !8 • 6*ίϯϙʔωϯτͷఏڙ֤νʔϜ͕)5.-Λఏڙ • 6*ίϯϙʔωϯτؒͷΠϕϯτϋϯυϦϯάJGSBNF ͷQPTU.FTTBHF
JGSBNFΛ͏߹ͷίʔυΠϝʔδ !9 • ࢠίϯϙʔωϯτ function receiveMessage(event) { if (event.origin !==
'http://example.com') { return; } ɹif (event.data === 'getHelloWorld') { event.source.postMessage( 'hello world', event.origin ); } } window.addEventListener('message', receiveMessage, false);
JGSBNFΛ͏߹ͷίʔυΠϝʔδ !10 • ίϯϙʔωϯτ class Parent extends React.Component { componentDidMount()
{ window.addEventListener('message', this.doSomething, false); } componentWillUnmount() { window.removeEventListener('message', this.doSomething, false); } doSomething() { // do something } }
8FC$PNQPOFOUTΛ͏ํ๏ !11 • ͏ͪΐͬͱϞμϯͳํ๏ͱͯ͠8FC$PNQPOFOUTΛ ༻͢Δ
ͪΐͬͱͦΕͯ8FC$PNQPOFOUTͱͳʹ͔ !12 • શʹཧղ͔ͨ͠Γ ͪΐͬͱυΩϡϝϯτݟͨͩ ͚ʣͳͷͰɺϚαΧϦ͓खॊΒ͔ʹ͓ئ͍͠·͢
8FCDPNQPOFOUTͱͳʹ͔ !13 • 8FCDPNQPOFOUTBSFBTFUPGXFCQMBUGPSN"1*T UIBUBMMPXZPVUPDSFBUFOFXDVTUPN SFVTBCMF FODBQTVMBUFE)5.-UBHTUPVTFJOXFCQBHFTBOE XFCBQQT •
8FCDPNQPOFOUTͱɺΣϒϖʔδΣϒΞϓϦͷ தͰར༻Մೳͳɺಠࣗͷ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ )5.-λάΛ࡞ΔͨΊͷXFCϓϥοτϑΥʔϜͷ"1*Ͱ͢ɻ
8FCDPNQPOFOUTͱͳʹ͔ !14 • ҎԼͷओͳ༷͔ΒΔɻ • $VTUPN&MFNFOUT • 4IBEPX%0. • )5.-JNQPSUT
• )5.-5FNQMBUF
γϣοϐϯάαΠτͷྫ !15 • NJDSPGSPOUFOETPSHͷαϯϓϧΛྫʹ • γϣοϐϯάαΠτͷػೳ • બ • ߪೖϘλϯ
• Ϩίϝϯυ
γϣοϐϯάαΠτͷྫ !16 • ػೳ͝ͱʹνʔϜ͕ಠཱ • ͋ͳͨߪೖνʔϜʢ੨νʔϜʣʹଐ͍ͯ͠·͢ • ͜ΕΛ8FC$PNQPOFOUTͰ.JDSP'SPOUFOETͯ͠ΈΔ
$VTUPN&MFNFOUTͷྫ !17 • ·ͣϘλϯΛදࣔͤ͞Δ • 6*ίϯϙʔωϯτͷఏڙ 8FC$PNQPOFOUTΛར༻ • ͱ͘ʹ$VTUPN&MFNFOUTΛར༻
$VTUPN&MFNFOUTͷྫ !18 • $VTUPN&MFNFOUTͷఆٛͱݺͼग़͠ – λά໊͕িಥ͠ͳ͍Α͏ʹҙʢQSFGJYͳͲʣ class BlueBuy extends HTMLElement
{ constructor() { super(); this.innerHTML = `<button type="button">buy for 66,00 €</button>`; } disconnectedCallback() { ... } } window.customElements.define('blue-buy', BlueBuy); <blue-buy></blue-buy>
͔Βࢠͷ௨৴%0.ͷमਖ਼ͷํ๏ !19 • ࣍ʹͷը૾Λબͨ͠ΒɺߪೖϘλϯͷֹۚදࣔΛ ม͑Δํ๏Λߟ͑Δ • $VTUPN&MFNFOUTͷଐੑͰදࣔΛม͑Δ • PCTFSWFE"UUSJCVUFTʹ؍ଌଐੑΛઃఆ •
BUUSJCVUF$IBOHFE$BMMCBDLͰ࠶SFOEFSΛ࣮ߦ • 3FBDUͰ͍͏ͱ͜ΖͷQSPQTͷมߋ ʢ$PNQPOFOU8JMM3FDFJWF1SPQTΈ͍ͨͳʣ
͔Βࢠͷ௨৴%0.ͷमਖ਼ͷํ๏ !20 • BUUSJCVUFTΛड͚औΕΔ༻ʹઃఆ • 3FBDUQSPQTΈ͍ͨͳ • )5.-EBUBଐੑ <blue-buy sku="t_fendt"></blue-buy>
͔Βࢠͷ௨৴%0.ͷमਖ਼ͷํ๏ !21 const prices = { t_porsche: '66,00 €', t_eicher:
'58,00 €’, … }; class BlueBuy extends HTMLElement { static get observedAttributes() { return ['sku']; } constructor() { super(); this.render(); } render() { const sku = this.getAttribute('sku'); const price = prices[sku]; this.innerHTML = `<button type="button">buy for ${price}</button>`; } attributeChangedCallback(attr, oldValue, newValue) { this.render(); } disconnectedCallback() {...} } window.customElements.define('blue-buy', BlueBuy);
ࢠ͔ΒPSܑఋཁૉಉ࢜ͷ௨৴%0.&WFOUT !22 • ߪೖϘλϯΛΫϦοΫ͢ΔͱΧʔτͷࣈ͕มߋ͞Εͯ ཉ͍͠ • &WFOUϞσϧΛ༻ 1VC4VC •
ૄ݁߹ • $VTUPN&WFOUTʹΑΓಠࣗͷ&WFOUఆ͕ٛՄೳ
ࢠ͔ΒPSܑఋཁૉಉ࢜ͷ௨৴%0.&WFOUT !23 class BlueBuy extends HTMLElement { [...] connectedCallback() {
[...] this.render(); this.firstChild.addEventListener('click', this.addToCart); } addToCart() { // maybe talk to an api this.dispatchEvent(new CustomEvent('blue:basket:changed', { bubbles: true, })); } render() { this.innerHTML = `<button type="button">buy</button>`; } disconnectedCallback() { this.firstChild.removeEventListener('click', this.addToCart); } } • ߪೖϘλϯଆ QVCMJTI
ࢠ͔Βͷ௨৴PSܑఋཁૉಉ࢜ͷ௨৴%0.&WFOUT !24 class BlueBasket extends HTMLElement { connectedCallback() { [...]
window.addEventListener('blue:basket:changed', this.refresh); } refresh() { // fetch new data and render it } disconnectedCallback() { window.removeEventListener('blue:basket:changed', this.refresh); } } • ΧʔτଆʢTVCTDSJCF
ͦͷଞͷ !25 • ಈ࡞͢Δ͜ͱʹޭ͕ͨ͠ଞʹߟྀ͖͢͜ͱ͕ͨ͘ ͞Μɻ • ྫͱͯ͠ҎԼΛߟ͢Δɻ • 6*ͷ౷Ұ •
3PVUJOH
6*ͷ౷Ұ !26 • HMPCBMͳ$44Λఏڙ͢Δ • ϥΠϒϥϦΛఏڙ͢Δ • OQN • CPPUTUSBQͳͲ
• 8FC$PNQPOFOUT • ϘλϯͷΑ͏ͳ6*ύʔπͳͲ
6*ͷ౷Ұ !27 • HMPCBMͳ$44 • ϝϦοτಋೖ͕؆୯ɺҰ؏ੑͷ୲อ͕༰қ • σϝϦοτංେԽ͍͢͠ɺϦϑΝΫλϦϯά͕ࠔ • MJCSBSZ
• ϝϦοτಠཱͯ͠मਖ਼Մೳ • σϝϦοτCVJMEπʔϧʹґଘ͢Δ߹͕͋Δɺόʔδϣ ϯࠩʹΑΔ6*ͷෆҰக
3PVUJOH !28 • ભҠ͍Ζ͍Ζ • νʔϜ෦ͷϧʔςΟϯάͷભҠWTνʔϜؒΛ·͙ͨભҠ • ϑϧϨϯμϦϯάWTύʔγϟϧϨϯμϦϯά IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE
3PVUJOH !29 • νʔϜ෦͚ͩεϜʔζʹҠಈͰ͖Δྫ • ࣮ൺֱత୯७ • νʔϜΛ·͙ͨͱ͖ʹ69͕Լ͢Δ IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE
3PVUJOH !30 • νʔϜؒΛ·͙ͨભҠΛύʔγϟϧϨϯμϦϯάͰΔ ྫ • ϧʔςΟϯάͱͦΕʹରԠ͢ΔGSBHNFOUͷϚοϐϯάΛ ࣮࣋ͬͯݱ͢Δ IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE
ύωϧσΟεΧογϣϯͷఏى !31 • .JDSP'SPOUFOETΛΊ͙Δ • νʔϜׂ • 8FC$PNQPOFOUTͷຊ൪ೖ • 6*ϥΠϒϥϦͷఏڙ
• ೝূͲ͏͢Δ͔ • 'SBNFXPSLDPNQBUJCJMJUZ • ύϑΥʔϚϯε • ΞʔΩςΫνϟ • ͳͲ • ϑϩϯτΤϯυͷະདྷͱະདྷʹ͚ͯԿ͕Ͱ͖Δͷ͔Λ ͍ٞͨ͠ͱࢥ͍·͢ɻ
ࢀߟࢿྉ !32 • IUUQTNJDSPGSPOUFOETPSH • IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOET UIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠