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

サーバーサイドエンジニアも知っておくべきフロントエンドの今

itkrt2y
March 22, 2019

 サーバーサイドエンジニアも知っておくべきフロントエンドの今

Rails Developers Meetup 2019

itkrt2y

March 22, 2019
Tweet

More Decks by itkrt2y

Other Decks in Technology

Transcript

  1. αʔόʔαΠυΤϯδχΞ΋
    ஌͓ͬͯ͘΂͖
    ϑϩϯτΤϯυͷࠓ

    View Slide

  2. ࣗݾ঺հ
    • ൘૔ ୡ໵ (@itkrt2y)
    • λέϢʔɾ΢Σϒגࣜձࣾ
    • Ruby on Rails ͷडୗ։ൃձࣾ
    • RubyKaigi 2019 Platinum εϙϯαʔ
    • Ruby on Rails ͷ͓࢓ࣄืूதʂ

    View Slide

  3. View Slide

  4. ࠓ೔࿩͢͜ͱ
    ϑϩϯτΤϯυͷ
    1. ݱࡏͷΤίγεςϜ
    2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ

    View Slide

  5. ࠓ೔࿩͢͜ͱ
    ϑϩϯτΤϯυͷ
    1. ݱࡏͷΤίγεςϜ <=
    2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ

    View Slide

  6. ݱࡏͷΤίγεςϜ

    View Slide

  7. ݴޠ

    View Slide

  8. ݴޠ
    TypeScript
    TS ʹग़དྷͳ͍ཧ༝͕͋Δ৔߹ͷΈ
    ESNext
    ʮTS Λಋೖ͢΂͖͔ʯͰ೰Ή࣌୅͸ط
    ʹऴΘ͍ͬͯΔ

    View Slide

  9. ίϯύΠϧʢτϥϯεύΠϧʣઌ
    Ұൠతʹ͸ ES5
    ͨͩɺͦΖͦΖ IE11 ඇରԠͷܾஅΛͯ͠ɺES2015 Ҏ্ʹͯ͠
    ΋͍͍࣌୅

    View Slide

  10. DOM ؅ཧ

    View Slide

  11. DOM ؅ཧ
    Ծ૝ DOM ܥʢએݴత Viewʣ
    • React
    • Vue
    • Angular
    • Elm

    View Slide

  12. એݴత View ʹΑΓ DOM ͕؅ཧՄೳʹ
    Ҏલ͸ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻ
    Ծ૝ DOM ʹΑͬͯαʔόʔαΠυతͳʮ͋Δঢ়ଶʹରͯ͋͠
    Δ΂͖ DOM Λఆٛ͢Δʯͱ͍͏એݴత View ͷύϥμΠϜ͕ϑ
    ϩϯτΤϯυʹ࣋ͪࠐ·ΕɺJS Ͱ DOM Λ؅ཧͰ͖ΔΑ͏ʹ
    ͳͬͨɻ

    View Slide

  13. lit-html
    Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ
    ϥΠϒϥϦ
    Ծ૝ DOM Ͱ͸ͳ͍͚ͲɺDOM ͷ diff
    Λऔͬͯࠩ෼ߋ৽ग़དྷͯɺԾ૝ DOM ܥ
    ΑΓ΋଎͍
    ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ
    ஌͓͍ͬͯͯଛ͸ͳ͍Ͱ͢

    View Slide

  14. Editor

    View Slide

  15. Editor
    Visual Studio Code
    vscode + TypeScript + ESLint + Prettier
    ͷ։ൃମݧ͕ྑ͗͢Δɻ
    ଞͷΤσΟλΛ࢖͍͍ͨਓ΋ɺ·ͣ͸͜
    ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλ
    Λ࢖͍ͬͯͩ͘͞ɻ

    View Slide

  16. Linter

    View Slide

  17. Linter
    • ESLint
    • TSLintʢͨͩ͠ɺۙʑ deprecated ʹ
    ͳΔʣ
    ੲ͸ JSHint, JSLint ͳͲ͋Γ·͕ͨ͠ɺ
    ࠓ͸ ESLint Ұڧ

    View Slide

  18. Formatter

    View Slide

  19. Formatter
    Prettier
    ࠓ೥ʹೖ͔ͬͯΒ prettier-ruby ͷ։ൃ
    ͕ٸܹʹਐΜͰ͍Δͷ͕ͱͯ΋خ͍͠

    View Slide

  20. module bundler

    View Slide

  21. module bundler
    • WEB αʔϏε։ൃ => webpack
    • ϥΠϒϥϦ։ൃ => Rollup
    pika ͷಈ޲͸ཁνΣοΫ
    webpacker ͸࢖Θͳ͍ํ͕͍͍Ͱ͢

    View Slide

  22. Test

    View Slide

  23. Test
    • Jest
    • E2E ςετ͸ Jest + Puppeteer
    ੲ͸ Mocha, Chai, Karma, Jasmine ͳͲ
    ৭ʑ͋Γ·͕ͨ͠ɺࠓ͸جຊ Jest

    View Slide

  24. ඇಉظॲཧ

    View Slide

  25. ඇಉظॲཧ
    axios
    GET ͚ͩͳΒ fetch Ͱ΋͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘
    ౗ʹͳΔͷͰ axios ͕Φεεϝ
    ajax ͸ࠓ͔Βಋೖ͢Δٕज़Ͱ͸΋͏ͳ͍Ͱ͢

    View Slide

  26. Web Components

    View Slide

  27. Web Components
    polyfill ΛೖΕΕ͹࢖͑Δٕज़ʹ͸ͳ͍ͬͯΔɻ
    ͨͩɺpolyfill ͷग़དྷ͕ѱ͍ͱ͍͏࿩͕͋ΔͷͰɺ࢖͏࣌͸஫ҙ
    ͕ඞཁɻ

    View Slide

  28. Web Components ͰԾ૝ DOM ͸ࢮ͵ʁ
    ݱঢ়ͷ Web Components ͸Ծ૝ DOM ʹൺ΂ͯ໌Β͔ʹػೳ
    ͕଍Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕ͸ͳ͍
    ͨͩɺWeb Components Ͱॻ͚Δ΋ͷ͸ Web Components Ͱ
    ॻ͘ྲྀΕʹ͸ͳ͖͍ͬͯͯΔɻ

    View Slide

  29. Ҏ্ɺݱࡏͷΤίγεςϜͰͨ͠

    View Slide

  30. ࠓ೔࿩͢͜ͱ
    ϑϩϯτΤϯυͷ
    1. ݱࡏͷΤίγεςϜ
    2. ࠷ۙͷ஫໨ͷ࿩୊͔ΒҰͭϐοΫΞοϓ <=

    View Slide

  31. ࠷ۙͷ஫໨ͷ࿩୊

    View Slide

  32. ࠷ۙͷ஫໨ͷ࿩୊
    • CDN Worker
    • Micro Frontends
    • PWA
    • ϨϯμϦϯά࠷దԽ
    • Web Payments / Web Authentication

    View Slide

  33. ࠷ۙͷ஫໨ͷ࿩୊
    • CDN Worker <= ࠓ೔͸͜Ε͚ͩ
    • Micro Frontends
    • PWA
    • ϨϯμϦϯά࠷దԽ
    • Web Payments / Web Authentication

    View Slide

  34. CDN Worker

    View Slide

  35. ͓͜ͱΘΓ
    ਖ਼໊ࣜশ͕ଟ෼ଘࡏ͠ͳ͍ͷͰɺCDN Worker ͸ԾͷදݱͰ͢

    View Slide

  36. CDN Worker ͱ͸ʁ
    CDN ΁ͷϦΫΤετɾϨεϙϯεʹϑοΫͯ͠ɺCDN ͷ͋Δ
    ΤοδϩέʔγϣϯͰॲཧΛ૸ΒͤΔ͜ͱͷͰ͖Δ JS ࣮ߦ؀ڥ

    View Slide

  37. ϓϥοτϑΥʔϜ
    • AWS Lambda@Edge + CloudFront
    • Cloudflare Workers
    • Google Cloud Functions + Firebase Hosting
    Cloud Functions ͷ࣮ߦ؀ڥ͸ΤοδϩέʔγϣϯͰ͸ͳ͍͕ɺ΍ΕΔ͜ͱ͸େମಉ͡

    View Slide

  38. CDN Worker ͷ
    ೤͍ͱ͜Ζ

    View Slide

  39. BFF Λ
    Τοδϩέʔγϣϯʹ
    ஔ͚Δ

    View Slide

  40. BFF
    Backend For Frontend
    ϑϩϯτΤϯυͱόοΫΤϯυͷ஥հ໾
    ໾ׂͷྫ
    • ೝূ
    • API Aggregation
    • Server Side Rendering
    • Cache

    View Slide

  41. SPA ٕज़Λ༻͍ͨ؀ڥͰ
    ͜Ε·Ͱ΍Γ͔ͨͬͨ͜ͱͱ
    ͦͷ՝୊

    View Slide

  42. ΍Γ͔ͨͬͨ͜ͱ 1
    1. FMP / SEO Λ࠷దԽ͍ͨ͠
    2. ͦͷͨΊʹ͸ɺϨϯμϦϯάࡁΈ HTML ΛΫϥΠΞϯτʹૹΓͨ
    ͍
    3. ͭ·ΓɺSSR ͍ͨ͠
    ՝୊
    SSR ʹ͸ JS ࣮ߦ؀ڥ͕ඞཁ

    View Slide

  43. ΍Γ͔ͨͬͨ͜ͱ 2
    1. RTT Λߴ଎Խ͍ͨ͠
    2. ͦͷͨΊʹ͸ɺ௨৴ڑ཭Λ࠷୹ʹ͍ͨ͠
    3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ׬͍݁ͨ͠
    ՝୊
    ಈతαΠτͷ৔߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯ΋ΒΘ
    ͳ͚Ε͹ͳΒͳ͍

    View Slide

  44. CDN Worker ͳΒղܾͰ͖Δ
    • ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ
    • ϨϯμϦϯάࡁΈ HTML Λ CDN ʹΩϟογϡ͢Δ͜ͱͰɺ2 ճ໨Ҏ߱ͷϨε
    ϙϯε͸͞Βʹ଎͍
    • ࠷ߴͷ RTT / FMP / SEO
    • ϨϯμϦϯά༻ͷ Node.js αʔόʔΛࣗલͰݐͯͳ͍͍ͯ͘
    • ΦϦδϯαʔόʔΛͲͷϦʔδϣϯʹஔ͍ͯ΋଎౓͕໰୊ͳ͘ͳΔ
    • ίετͷ͍҆ɾαʔϏεఏڙͷૣ͍ϦʔδϣϯΛબ୒Ͱ͖ΔΑ͏ʹͳΔ
    • ΦϦδϯαʔόʔ΁ͷϦΫΤετ਺Λ࠷খԽͰ͖Δ

    View Slide

  45. Ұ൪ظ଴͍ͯ͠ΔϓϥοτϑΥʔϜ

    View Slide

  46. Ҏ্ɺCDN Worker Ͱͨ͠

    View Slide

  47. ࠷ޙʹɺϑϩϯτΤϯυʹ͍ͭͯ఻͍͑ͨ͜ͱ
    • ΤίγεςϜ͸े෼ʹ੒ख़͍ͯ͠Δ
    • ։ൃମݧ͕΋ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ
    • ϥΠϒϥϦͷཚཱ΋མͪண͍͍ͯͯɺมԽ͸ૣ͘ͳ͍
    • ࠷ۙͷ࿩୊͸ UX ʹ௚݁͢Δ΋ͷ͕ଟ͍
    • ϢʔβʔͷͨΊʹ΋ɺαʔόʔαΠυΤϯδχΞ΋ཧղ࣮͠ફ͢Δ΂͖
    • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱ؅ཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ
    ଘࡏ͢Δ
    • ࠷దͳઃܭΛߟ͑Δʹ͸ɺϑϩϯτΤϯυͷ஌ࣝ΋ඞਢ

    View Slide