Micro Frontendsのモチベーション / Motivation for Micro Frontends

Microservices Meetup Vol.7 (Micro Frontends) @ FiNC https://microservices-meetup.connpass.com/event/93862/

Transcript

1. .JDSP'SPOUFOETͷϞνϕʔγϣϯ
   

   View Slide

2. ࣗݾ঺հ
   2
   • ໊લ৿ٱଠ࿠ !RTPOB
   
   • גࣜձࣾ'J/$
   • ओʹαʔόαΠυΤϯδχΞ ͓खॊΒ͔ʹʂ
   
   • .JDSPTFSWJDFT.FFUVQओ࠵
   

   View Slide

3. ϚΠΫϩαʔϏεͱ͸ʁ
   3
   • ڠௐͯ͠ಈ࡞͢Δɺখن໛Ͱࣗ཯తͳαʔϏε
   • 03FJMMZ+BQBOϚΠΫϩαʔϏεΞʔΩςΫνϟΑΓҾ༻
   • ͭͷϓϩμΫτΛෳ਺ͷαʔϏε͔Βߏ੒͢Δख๏
   • ͜͜Ͱ͍͏ʮϓϩμΫτʯ͸ɺΤϯυϢʔβ͔Βͷݟ͑ํ
   • ΤϯυϢʔβ͸;ͭ͏෼ׂΛҙࣝ͠ͳ͍
   

   View Slide

4. ϚΠΫϩαʔϏεͷϝϦοτ
   4
   •
   σϓϩΠͷ෼཭
   •
   ٕज़બ୒ͷಠཱ
   •
   ૊৫ͷ෼ׂͱࣗ཯
   •
   ϨδϦΤϯε ճ෮ੑ
   
   

   View Slide

5. 
   σϓϩΠͷ෼཭
   5
   • ֤αʔϏε͸ଞαʔϏεͱಠཱͯ͠σϓϩΠͰ͖Δ
   • ґଘؔ܎͕গͳ͍ঢ়ଶͰɺ҆શʹσϓϩΠՄೳ
   • "1*Ͱ࿈ܞ͢Δ͜ͱ͕લఏ %#ϨϕϧͰ݁߹͍ͯͨ͠Γ͢
   Δͱಠཱͯ͠σϓϩΠͰ͖ͳ͘ͳΔ
   
   • ֤ϏδωεͰಠཱʹϦϦʔεαΠΫϧΛ࣋ͪɺߴ଎ʹ
   1%$"Λճ͢͜ͱ͕Ͱ͖Δ
   

   View Slide

6. 
   ٕज़બ୒ͷಠཱ
   6
   • ֤αʔϏε͸ಠཱٕͯ͠ज़Λબ୒Ͱ͖Δ
   • ϓϩάϥϛϯάݴޠ
   • ϥΠϒϥϦ
   • σʔλετΞ
   • FUD
   • ڞ௨Ͱར༻͍ͯ͠Δ࿈ܞख๏ "1*ͷܗࣜ
   Λ

   कΔ͜ͱ͚͕ͩ৚݅
   

   View Slide

7. 
   ૊৫ͷ෼ׂͱࣗ཯
   7
   • ͦΕͧΕͷαʔϏεΛத৺ʹ૊৫Λ෼ׂͰ͖Δ
   • σϓϩΠɾٕज़બ୒ͳͲɺͦͷ૊৫ͰಠཱʹҙࢥܾఆͰ
   ͖ΔϙΠϯτ͕ଟ͍
   • ྫσϓϩΠ͕෼཭͞Ε͍ͯΔ֤νʔϜ͕޷͖ͳλΠϛ
   ϯάͰαʔϏεΛσϓϩΠͰ͖ΔͷͰɺͦͷνʔϜͷࣗ༝
   ౓͕ߴ͍
   • ݁Ռͱͯ͠ɺ૊৫͕Ϗδωε୯ҐͰࣗ཯Ͱ͖Δ
   

   View Slide

8. 
   ϨδϦΤϯε ճ෮ੑ
   
   8
   • αʔϏεڥք͕ʮִนʯͱͳΓɺো֐ͷ࿈࠯Λ๷͙
   • ݁Ռͱͯ͠ɺϓϩμΫτશମͰͷ

   αʔϏεϨϕϧΛߴΊΔ͜ͱ͕Ͱ͖Δ
   

   View Slide

9. ϚΠΫϩαʔϏε͸࠷ߴ
   

   View Slide

10. View Slide

11. ΤϯυϢʔβͷࢹ఺
    11
    • ϓϩμΫτΛར༻͢ΔϢʔβ͸ɺجຊతʹ

    ϚΠΫϩαʔϏεΛҙࣝ͠ͳ͍
    • ϚΠΫϩαʔϏε͕౷߹͞Εͨɺ

    ͭͷϓϩμΫτΛ࢖͏
    

    View Slide

12. ϑϩϯτΤϯυͰͷ౷߹
    12
    • ϑϩϯτΤϯυ͸ɺΤϯυϢʔβʹ޲͚ͯ

    ౷߹͞ΕͨମݧΛఏڙ͠ͳ͚Ε͹ͳΒͳ͍
    • ϖʔδʹෳ਺ͷϏδωευϝΠϯ
    • 6*ɾ69ͷ౷Ұײ
    • γʔϜϨεͳભҠ
    

    View Slide

13. ϑϩϯτΤϯυɾϞϊϦε
    13
    • ౷߹͞ΕͨମݧΛఏڙ͢ΔͨΊɺϑϩϯτΤϯυ͸

    ϞϊϦγοΫͳΞϓϦέʔγϣϯʹͳΓ΍͍͢
    • ෳ਺ͷϚΠΫϩαʔϏεΛ౷߹͍ͯ͠Δ
    https://micro-frontends.org
    

    View Slide

14. ϑϩϯτΤϯυɾϞϊϦεͷ໰୊఺
    14
    • ϚΠΫϩαʔϏεͰ͋Ε͹ಘΒΕΔ͸ͣͷϝϦοτ͕ɺ
    ಘΒΕͳ͘ͳͬͯ͠·͏
    •
    σϓϩΠ͕෼཭͠ͳ͍
    •
    ٕज़બ୒͕ಠཱ͠ͳ͍
    •
    ૊৫͕෼ׂࣗ཯͞Εͳ͍
    •
    ϨδϦΤϯε ճ෮ੑ
    ͕௿͍
    

    View Slide

15. 
    σϓϩΠ͕෼཭͠ͳ͍
    15
    • όοΫΤϯυ୯ମͰσϓϩΠͰ͖Δػೳ͸໰୊ͳ͍
    • ϑϩϯτΤϯυ·ͰؚΜͩػೳͷ৔߹ɺͦͷϏδωε୯
    ମͰ͸σϓϩΠͰ͖ͣɺϑϩϯτΤϯυશମͰௐ੔͢Δ
    ͜ͱʹͳΔ
    

    View Slide

16. 
    ٕज़બ୒͕ಠཱ͠ͳ͍
    16
    • جຊతʹ͸ಉ͡ݴޠɾϑϨʔϜϫʔΫʹറΒΕΔ
    • ྫ'MPX3FBDU3FEVYSFEVYTBHB
    • ޙ൒ͷํʹߦ͚͹͍͘΄Ͳɺผͷ΋ͷͱڞଘͰ͖ͳ͘͸ͳ͍
    ͕
    
    

    View Slide

17. 
    ૊৫͕෼ׂࣗ཯͞Εͳ͍
    17
    • ૊৫Λ෼ׂ͠ͳ͍৔߹
    • ϑϩϯτΤϯυνʔϜ͕։ൃ
    • ৬ೳͱͯ͠ͷ૊৫ʹͳΔͨΊɺϏδωε্ͷ,1*ΛҰॹʹ௥
    ͏ͷ͕೉͍͠
    • ૊৫Λ෼ׂ͢Δ৔߹ جຊతʹ͸ͦ͏͍͕ͨ͠
    
    • ෳ਺ͷϏδωενʔϜͰͭͷϑϩϯτΤϯυΛ։ൃ
    • σϓϩΠ͕෼཭͠ͳ͍ͷͰɺ౎౓ௐ੔͕ඞཁ
    • ٕज़બఆ΋റΒΕΔ
    • ࣗ཯Ͱ͖͍ͯͳ͍
    

    View Slide

18. 
    ϨδϦΤϯε ճ෮ੑ
    ͕௿͍
    18
    • Ͳ͔͜ͷίϯϙʔωϯτ͕+BWB4DSJQUͷΤϥʔΛు͍ͨ
    Βɺϖʔδશମ͕ࢭ·Δ
    • ͦͷΤϥʔ͸HMPCBMʹӨڹ͍ͯ͠ΔՄೳੑ͕͋ΔͨΊɺϋ
    ϯυϦϯά͢Δ৔ॴ͕೉͍͠
    • ͔ͤͬ͘όοΫΤϯυͰো֐ΛہॴԽͯ͠΋ɺ

    ΤϯυϢʔβͷͱ͜ΖͰো֐͕࿈࠯ͯ͠͸ҙຯ͕ͳ͍
    

    View Slide

19. ϑϩϯτΤϯυʹ΋

    ϚΠΫϩαʔϏεΛಋೖ͍ͨ͠
    

    View Slide

20. .JDSP'SPOUFOET
    20
    • όοΫΤϯυ͚ͩͰͳ͘ɺϑϩϯτΤϯυ·ͰؚΊͨ

    ϚΠΫϩαʔϏε෼ׂʹ͍ͨ͠
    https://micro-frontends.org
    

    View Slide

21. .JDSP'SPOUFOET
    21
    • όοΫΤϯυ͚ͩͰͳ͘ɺϑϩϯτΤϯυ·ͰؚΊͨ

    ϚΠΫϩαʔϏε෼ׂʹ͍ͨ͠
    • ϑϩϯτΤϯυ΋όοΫΤϯυͱಉ͡Α͏ʹϝϦοτΛ
    ڗड͍ͨ͠
    

    View Slide

22. .JDSP'SPOUFOETͷ౷߹
    22
    • ҰํͰɺΤϯυϢʔβʹ͸౷߹͞ΕͨମݧΛఏڙ͍ͨ͠
    • ֤αʔϏεͰఏڙ͢Δ6*Λ߹੒͢Δඞཁ͕͋Δ
    • ϑϩϯτΤϯυɾϞϊϦεͷ৔߹
    • ֤αʔϏε͸+40/ͳͲͷσʔλΛ"1*Ͱఏڙ
    • σʔλΛ߹੒ͯ͠ɺΞϓϦέʔγϣϯΛ࡞͍ͬͯΔ
    • ϚΠΫϩϑϩϯτΤϯυͷ৔߹
    • ֤αʔϏε͸ɺ6*Λఏڙ͢Δ
    • 6*Λ߹੒ͯ͠ɺΞϓϦέʔγϣϯΛ࡞͍ͬͯΔ
    • ߹੒͢ΔϨΠϠ͕ඞཁͳͷ͸มΘΒͳ͍͕ɺബͯ͘ࡁΉ
    

    View Slide

23. .JDSP'SPOUFOETͰඞཁͳ͜ͱ
    23
    • ֤αʔϏεͷ6*Λ߹੒͢Δ
    • 6*ύʔπ΍ελΠϧͷڞ௨Խ
    • αʔϏεؒͷ࿈ܞ
    • ٕज़બ୒ͷಠཱͷͨΊɺඪ४ͷٕज़Λ࢖͍͍ͨ
    

    View Slide