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

by itkrt2y

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ݱࡏͷΤίγεςϜ

Slide 7

Slide 7 text

ݴޠ

Slide 8

Slide 8 text

ݴޠ TypeScript TS ʹग़དྷͳ͍ཧ༝͕͋Δ৔߹ͷΈ ESNext ʮTS Λಋೖ͢΂͖͔ʯͰ೰Ή࣌୅͸ط ʹऴΘ͍ͬͯΔ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

DOM ؅ཧ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

lit-html Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ ϥΠϒϥϦ Ծ૝ DOM Ͱ͸ͳ͍͚ͲɺDOM ͷ diff Λऔͬͯࠩ෼ߋ৽ग़དྷͯɺԾ૝ DOM ܥ ΑΓ΋଎͍ ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ ஌͓͍ͬͯͯଛ͸ͳ͍Ͱ͢

Slide 14

Slide 14 text

Editor

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Linter

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Formatter

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

module bundler

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Test

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ඇಉظॲཧ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Web Components

Slide 27

Slide 27 text

Web Components polyﬁll ΛೖΕΕ͹࢖͑Δٕज़ʹ͸ͳ͍ͬͯΔɻ ͨͩɺpolyﬁll ͷग़དྷ͕ѱ͍ͱ͍͏࿩͕͋ΔͷͰɺ࢖͏࣌͸஫ҙ ͕ඞཁɻ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

࠷ۙͷ஫໨ͷ࿩୊

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

CDN Worker

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

CDN Worker ͷ ೤͍ͱ͜Ζ

Slide 39

Slide 39 text

BFF Λ Τοδϩέʔγϣϯʹ ஔ͚Δ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

SPA ٕज़Λ༻͍ͨ؀ڥͰ ͜Ε·Ͱ΍Γ͔ͨͬͨ͜ͱͱ ͦͷ՝୊

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Ҏ্ɺCDN Worker Ͱͨ͠

Slide 47

Slide 47 text

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