Micro Frontends (example from micro-frontends.org)

Transcript

1. .JDSP
   'SPOUFOET .JDSPTFSWJDFT
   .FFUVQ
   7PM
   

2. ࣗݾ঺հ !2 • ໊લ: ᖒҪ એ඙
 ʢ͞Θ͍ ͷͿͻ͜ʣ • twitter/github:

   nobuhikosawai • ΤϯδχΞྺ: 2೥ͪΐ͍ • αʔόʔαΠυ(Rails) • ϑϩϯτΤϯυ(React.js)

3. ͍͖ͳΓͷએ఻ !3 IUUQTPUBZCPPUIQNJUFNT ٕज़ॻయ4ͰʮMicroservices architecture ΑΖͣຊʯͱ͍͏ຊΛग़͠·ͨ͠ɻ ୈ5ষͰMicro Frontends΋৮Ε͍ͯ·͢ɻ ΈΜͳങͬͯͶ

4. .JDSP
   'SPOUFOETʹཉ͍͠΋ͷ !4 • 6*ίϯϙʔωϯτͷఏڙ
   • 6*ίϯϙʔωϯτؒͷڠௐ
   • 6*ίϯϙʔωϯτؒͷΠϕϯτϋϯυϦϯά
   • 6*ɾϢʔβʔମݧͷ౷Ұ

5. .JDSP
   'SPOUFOETͷύλʔϯ !5 • ن໛ͱ΍Γ͍ͨ͜ͱͰ͍͔ͭ͘ͷύλʔϯ͕͋Δ
   • ϖʔδભҠΛͯ͠΋ྑ͍ύλʔϯ
   • ϖʔδʹෳ਺ίϯϙʔωϯτΛද͍ࣔͨ͠ύλʔϯ

6. ϖʔδભҠΛͯ͠΋ྑ͍ύλʔϯ !6 • ैདྷͷϝχϡʔόʔͳͲ͔ΒભҠ͢Δύλʔϯɻ
   • جຊతʹͭͷαʔϏε͕ͭͷ7JFXΛ࣋ͭɻ
   • ମݧͷҰ؏ੑΛ୲อ͢ΔͨΊʹҎԼ͕ඞཁ
   • 4JOHMF
   4JHO
   0O
   

   • 6*ͷ౷Ұ
   • ϔομʔͳͲͷϩδοΫΛؚΉΑ͏ͳίϯϙʔωϯτ
   – ίϐϖ
   – ϥΠϒϥϦͰఏڙ͢Δ
   – ͭͷαʔϏε͕ฦ͢ JGSBNFͰදࣔ͢Δʣ
   • ϘλϯͳͲͷγϯϓϧͳ6*ύʔπ

7. ϖʔδʹෳ਺ίϯϙʔωϯτΛද͍ࣔͨ͠ύλʔϯ !7 ෳ਺ίϯϙʔωϯτͷදࣔํ๏͸େ͖͘෼͚ͯͭ
   • JGSBNFΛ࢖͏ύλʔϯ
   • 8FC
   $PNQPOFOUTΛ࢖͏ύλʔϯ

8. JGSBNFΛ࢖͏ํ๏ !8 • 6*ίϯϙʔωϯτͷఏڙ
   
   ֤νʔϜ͕)5.-Λఏڙ
   • 6*ίϯϙʔωϯτؒͷΠϕϯτϋϯυϦϯά
   
   JGSBNF ͷQPTU.FTTBHF

9. 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);

10. JGSBNFΛ࢖͏৔߹ͷίʔυΠϝʔδ !10 • ਌ίϯϙʔωϯτ class Parent extends React.Component { componentDidMount()

    { window.addEventListener('message', this.doSomething, false); } componentWillUnmount() { window.removeEventListener('message', this.doSomething, false); } doSomething() { // do something } }

11. 8FC
    $PNQPOFOUTΛ࢖͏ํ๏ !11 • ΋͏ͪΐͬͱϞμϯͳํ๏ͱͯ͠8FC
    $PNQPOFOUTΛ ࢖༻͢Δ

12. ͪΐͬͱͦΕͯ8FC
    $PNQPOFOUTͱ͸ͳʹ͔ !12 • ׬શʹཧղͨ͠͹͔Γ
    
    
    ͪΐͬͱυΩϡϝϯτݟͨͩ ͚ʣͳͷͰɺϚαΧϦ͸͓खॊΒ͔ʹ͓ئ͍͠·͢

13. 8FC
    DPNQPOFOUTͱ͸ͳʹ͔ !13 • 8FC
    DPNQPOFOUT
    BSF
    B
    TFU
    PG
    XFC
    QMBUGPSN
    "1*T
    UIBU
    BMMPX
    ZPV
    UP
    DSFBUF
    OFX
    DVTUPN
    SFVTBCMF
    FODBQTVMBUFE
    )5.-
    UBHT
    UP
    VTF
    JO
    XFC
    QBHFT
    BOE
    XFC
    BQQT
    •

    8FC
    DPNQPOFOUTͱ͸ɺ΢Σϒϖʔδ΍΢ΣϒΞϓϦͷ தͰར༻Մೳͳɺಠࣗͷ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ )5.-λάΛ࡞ΔͨΊͷXFCϓϥοτϑΥʔϜͷ"1*Ͱ͢ɻ

14. 8FC
    DPNQPOFOUTͱ͸ͳʹ͔ !14 • ҎԼͷओͳ࢓༷͔Β੒Δɻ
    • $VTUPN
    &MFNFOUT
    • 4IBEPX
    %0.
    • )5.-
    JNQPSUT
    

    • )5.-
    5FNQMBUF

15. γϣοϐϯάαΠτͷྫ !15 • NJDSPGSPOUFOETPSHͷαϯϓϧΛྫʹ
    • γϣοϐϯάαΠτͷػೳ
    • ঎඼બ୒
    • ߪೖϘλϯ
    

    • Ϩίϝϯυ

16. γϣοϐϯάαΠτͷྫ !16 • ػೳ͝ͱʹνʔϜ͕ಠཱ
    • ͋ͳͨ͸ߪೖνʔϜʢ੨νʔϜʣʹଐ͍ͯ͠·͢
    • ͜ΕΛ8FC
    $PNQPOFOUTͰ.JDSP
    'SPOUFOETͯ͠ΈΔ

17. $VTUPN
    &MFNFOUTͷྫ !17 • ·ͣ͸ϘλϯΛදࣔͤ͞Δ
    • 6*ίϯϙʔωϯτͷఏڙ
    
 
    8FC
    $PNQPOFOUTΛར༻
    • ͱ͘ʹ$VTUPN
    &MFNFOUTΛར༻

18. $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>

19. ਌͔Βࢠ΁ͷ௨৴
    
    %0.ͷमਖ਼ͷํ๏ !19 • ࣍ʹ঎඼ͷը૾Λબ୒ͨ͠ΒɺߪೖϘλϯͷֹۚදࣔΛ ม͑Δํ๏Λߟ͑Δ
    • $VTUPN
    &MFNFOUTͷଐੑ஋ͰදࣔΛม͑Δ
    • PCTFSWFE"UUSJCVUFTʹ؍ଌଐੑΛઃఆ
    •

    BUUSJCVUF$IBOHFE$BMMCBDLͰ࠶SFOEFSΛ࣮ߦ
    • 3FBDUͰ͍͏ͱ͜ΖͷQSPQTͷมߋ ʢ$PNQPOFOU8JMM3FDFJWF1SPQTΈ͍ͨͳʣ

20. ਌͔Βࢠ΁ͷ௨৴
    
    %0.ͷमਖ਼ͷํ๏ !20 • BUUSJCVUFTΛड͚औΕΔ༻ʹઃఆ
    • 3FBDU
    QSPQTΈ͍ͨͳ
    • )5.-
    
    EBUBଐੑ <blue-buy sku="t_fendt"></blue-buy>

21. ਌͔Βࢠ΁ͷ௨৴
    
    %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);

22. ࢠ͔Β਌
    PS
    ܑఋཁૉಉ࢜ͷ௨৴
    
    %0.
    &WFOUT !22 • ߪೖϘλϯΛΫϦοΫ͢ΔͱΧʔτͷ਺ࣈ͕มߋ͞Εͯ ཉ͍͠
    • &WFOUϞσϧΛ࢖༻ 1VC4VC
    •

    ૄ݁߹
    • $VTUPN
    &WFOUTʹΑΓಠࣗͷ&WFOUఆ͕ٛՄೳ

23. ࢠ͔Β਌
    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

24. ࢠ͔Β਌΁ͷ௨৴
    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. ͦͷଞͷ࿦఺ !25 • ಈ࡞͢Δ͜ͱʹ੒ޭ͕ͨ͠ଞʹ΋ߟྀ͢΂͖͜ͱ͕ͨ͘ ͞Μɻ
    • ྫͱͯ͠ҎԼΛߟ࡯͢Δɻ
    • 6*ͷ౷Ұ
    •

    3PVUJOH

26. 6*ͷ౷Ұ !26 • HMPCBMͳ$44Λఏڙ͢Δ
    • ϥΠϒϥϦΛఏڙ͢Δ
    • OQN
    • CPPUTUSBQͳͲ
    

    • 8FC
    $PNQPOFOUT
    • ϘλϯͷΑ͏ͳ6*ύʔπͳͲ

27. 6*ͷ౷Ұ !27 • HMPCBMͳ$44
    • ϝϦοτ
    ಋೖ͕؆୯ɺҰ؏ੑͷ୲อ͕༰қ
    • σϝϦοτ
    ංେԽ͠΍͍͢ɺϦϑΝΫλϦϯά͕ࠔ೉
    • MJCSBSZ
    

    • ϝϦοτ
    ಠཱͯ͠मਖ਼Մೳ
    • σϝϦοτ
    CVJMEπʔϧʹґଘ͢Δ৔߹͕͋Δɺόʔδϣ ϯࠩ෼ʹΑΔ6*ͷෆҰக

28. 3PVUJOH !28 • ભҠ͍Ζ͍Ζ
    • νʔϜ಺෦ͷϧʔςΟϯάͷભҠ
    WTνʔϜؒΛ·͙ͨભҠ
    • ϑϧϨϯμϦϯά
    WT
    ύʔγϟϧϨϯμϦϯά IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE

29. 3PVUJOH !29 • νʔϜ಺෦͚ͩεϜʔζʹҠಈͰ͖Δྫ
    • ࣮૷͸ൺֱత୯७
    • νʔϜΛ·͙ͨͱ͖ʹ69͕௿Լ͢Δ IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE

30. 3PVUJOH !30 • νʔϜؒΛ·͙ͨભҠΛύʔγϟϧϨϯμϦϯάͰ΍Δ ྫ
    • ϧʔςΟϯάͱͦΕʹରԠ͢ΔGSBHNFOUͷϚοϐϯάΛ ࣮࣋ͬͯݱ͢Δ IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOETUIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE

31. ύωϧσΟεΧογϣϯ΁ͷ໰୊ఏى !31 • .JDSP
    'SPOUFOETΛΊ͙Δ໰୊
    • νʔϜ෼ׂ
    • 8FC
    $PNQPOFOUTͷຊ൪౤ೖ
    • 6*ϥΠϒϥϦͷఏڙ
    

    • ೝূͲ͏͢Δ͔
    • 'SBNFXPSL
    DPNQBUJCJMJUZ
    • ύϑΥʔϚϯε
    • ΞʔΩςΫνϟ
    • ͳͲ
    • ϑϩϯτΤϯυͷະདྷͱະདྷʹ޲͚ͯԿ͕Ͱ͖Δͷ͔Λ ٞ࿦͍ͨ͠ͱࢥ͍·͢ɻ

32. ࢀߟࢿྉ !32 • IUUQTNJDSPGSPOUFOETPSH
    • IUUQTTQFBLFSEFDLDPNOBMUBUJTNJDSPGSPOUFOET UIJOLTNBMMFSBWPJEUIFNPOPMJUIMPWFUIFCBDLFOE

33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠