Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

qsona
July 31, 2018

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

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

qsona

July 31, 2018
Tweet

More Decks by qsona

Other Decks in Programming

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