Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
サーバーサイドエンジニアも知っておくべきフロントエンドの今
itkrt2y
March 22, 2019
Technology
54
120k
サーバーサイドエンジニアも知っておくべきフロントエンドの今
Rails Developers Meetup 2019
itkrt2y
March 22, 2019
Tweet
Share
More Decks by itkrt2y
See All by itkrt2y
ざっくり学ぶ言語のしくみ
itkrt2y
4
3.7k
Other Decks in Technology
See All in Technology
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
430
Citizen 개발기
outsider
0
210
Custom GitHub Actions by Java
kazamori
0
280
UIKitのアップデート #WWDC22
akatsuki174
4
300
ROS再入門-はじめてのSLAM-
miura55
0
400
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1.1k
Camp Digital 2022: tailored advice
kyliehavelock
0
140
Meet passkeys
satotakeshi
1
110
HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る
iwaken71
0
190
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9k
2022年度新卒技術研修「良いコードの書き方」講義
excitejp
PRO
0
300
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
94
4.6k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Optimizing for Happiness
mojombo
365
63k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
For a Future-Friendly Web
brad_frost
166
7.4k
How to Ace a Technical Interview
jacobian
265
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Designing for humans not robots
tammielis
241
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
Transcript
αʔόʔαΠυΤϯδχΞ ͓͖ͬͯ͘ ϑϩϯτΤϯυͷࠓ
ࣗݾհ • ൘ ୡ (@itkrt2y) • λέϢʔɾΣϒגࣜձࣾ • Ruby on
Rails ͷडୗ։ൃձࣾ • RubyKaigi 2019 Platinum εϙϯαʔ • Ruby on Rails ͷ͓ࣄืूதʂ
None
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ <= 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ
ݱࡏͷΤίγεςϜ
ݴޠ
ݴޠ TypeScript TS ʹग़དྷͳ͍ཧ༝͕͋Δ߹ͷΈ ESNext ʮTS Λಋೖ͖͔͢ʯͰΉ࣌ط ʹऴΘ͍ͬͯΔ
ίϯύΠϧʢτϥϯεύΠϧʣઌ Ұൠతʹ ES5 ͨͩɺͦΖͦΖ IE11 ඇରԠͷܾஅΛͯ͠ɺES2015 Ҏ্ʹͯ͠ ͍͍࣌
DOM ཧ
DOM ཧ Ծ DOM ܥʢએݴత Viewʣ • React • Vue
• Angular • Elm
એݴత View ʹΑΓ DOM ͕ཧՄೳʹ Ҏલ jQuery ͳͲͰखଓ͖తʹ DOM Λૢ࡞͍ͯͨ͠ɻ
Ծ DOM ʹΑͬͯαʔόʔαΠυతͳʮ͋Δঢ়ଶʹରͯ͋͠ Δ͖ DOM Λఆٛ͢Δʯͱ͍͏એݴత View ͷύϥμΠϜ͕ϑ ϩϯτΤϯυʹ࣋ͪࠐ·ΕɺJS Ͱ DOM ΛཧͰ͖ΔΑ͏ʹ ͳͬͨɻ
lit-html Google ͷ Polymer νʔϜ͕࡞͍ͬͯΔ ϥΠϒϥϦ Ծ DOM Ͱͳ͍͚ͲɺDOM ͷ
diff Λऔͬͯࠩߋ৽ग़དྷͯɺԾ DOM ܥ ΑΓ͍ ·ͩྲྀߦΒͳ͍ͱࢥ͏͚Ͳɺ ͓͍ͬͯͯଛͳ͍Ͱ͢
Editor
Editor Visual Studio Code vscode + TypeScript + ESLint +
Prettier ͷ։ൃମݧ͕ྑ͗͢Δɻ ଞͷΤσΟλΛ͍͍ͨਓɺ·ͣ͜ ͷ։ൃମݧΛຯΘ্ͬͨͰଞͷΤσΟλ Λ͍ͬͯͩ͘͞ɻ
Linter
Linter • ESLint • TSLintʢͨͩ͠ɺۙʑ deprecated ʹ ͳΔʣ ੲ JSHint,
JSLint ͳͲ͋Γ·͕ͨ͠ɺ ࠓ ESLint Ұڧ
Formatter
Formatter Prettier ࠓʹೖ͔ͬͯΒ prettier-ruby ͷ։ൃ ͕ٸܹʹਐΜͰ͍Δͷ͕ͱͯخ͍͠
module bundler
module bundler • WEB αʔϏε։ൃ => webpack • ϥΠϒϥϦ։ൃ =>
Rollup pika ͷಈཁνΣοΫ webpacker Θͳ͍ํ͕͍͍Ͱ͢
Test
Test • Jest • E2E ςετ Jest + Puppeteer ੲ
Mocha, Chai, Karma, Jasmine ͳͲ ৭ʑ͋Γ·͕ͨ͠ɺࠓجຊ Jest
ඇಉظॲཧ
ඇಉظॲཧ axios GET ͚ͩͳΒ fetch Ͱ͍͍Ͱ͕͢ɺGET Ҏ֎Λ࢝͠ΊΔͱ໘ ʹͳΔͷͰ axios ͕Φεεϝ
ajax ࠓ͔Βಋೖ͢Δٕज़Ͱ͏ͳ͍Ͱ͢
Web Components
Web Components polyfill ΛೖΕΕ͑Δٕज़ʹͳ͍ͬͯΔɻ ͨͩɺpolyfill ͷग़དྷ͕ѱ͍ͱ͍͏͕͋ΔͷͰɺ͏࣌ҙ ͕ඞཁɻ
Web Components ͰԾ DOM ࢮ͵ʁ ݱঢ়ͷ Web Components Ծ DOM
ʹൺͯ໌Β͔ʹػೳ ͕Γ͍ͯͳ͍͠ෆࣗ༝ͳͷͰɺࠓͷͱ͜ΖͦΕͳ͍ ͨͩɺWeb Components Ͱॻ͚Δͷ Web Components Ͱ ॻ͘ྲྀΕʹͳ͖͍ͬͯͯΔɻ
Ҏ্ɺݱࡏͷΤίγεςϜͰͨ͠
ࠓ͢͜ͱ ϑϩϯτΤϯυͷ 1. ݱࡏͷΤίγεςϜ 2. ࠷ۙͷͷ͔ΒҰͭϐοΫΞοϓ <=
࠷ۙͷͷ
࠷ۙͷͷ • CDN Worker • Micro Frontends • PWA •
ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
࠷ۙͷͷ • CDN Worker <= ࠓ͜Ε͚ͩ • Micro Frontends •
PWA • ϨϯμϦϯά࠷దԽ • Web Payments / Web Authentication
CDN Worker
͓͜ͱΘΓ ਖ਼໊ࣜশ͕ଟଘࡏ͠ͳ͍ͷͰɺCDN Worker ԾͷදݱͰ͢
CDN Worker ͱʁ CDN ͷϦΫΤετɾϨεϙϯεʹϑοΫͯ͠ɺCDN ͷ͋Δ ΤοδϩέʔγϣϯͰॲཧΛΒͤΔ͜ͱͷͰ͖Δ JS ࣮ߦڥ
ϓϥοτϑΥʔϜ • AWS Lambda@Edge + CloudFront • Cloudflare Workers •
Google Cloud Functions + Firebase Hosting Cloud Functions ͷ࣮ߦڥΤοδϩέʔγϣϯͰͳ͍͕ɺΕΔ͜ͱେମಉ͡
CDN Worker ͷ ͍ͱ͜Ζ
BFF Λ Τοδϩέʔγϣϯʹ ஔ͚Δ
BFF Backend For Frontend ϑϩϯτΤϯυͱόοΫΤϯυͷհ ׂͷྫ • ೝূ • API
Aggregation • Server Side Rendering • Cache
SPA ٕज़Λ༻͍ͨڥͰ ͜Ε·ͰΓ͔ͨͬͨ͜ͱͱ ͦͷ՝
Γ͔ͨͬͨ͜ͱ 1 1. FMP / SEO Λ࠷దԽ͍ͨ͠ 2. ͦͷͨΊʹɺϨϯμϦϯάࡁΈ HTML
ΛΫϥΠΞϯτʹૹΓͨ ͍ 3. ͭ·ΓɺSSR ͍ͨ͠ ՝ SSR ʹ JS ࣮ߦڥ͕ඞཁ
Γ͔ͨͬͨ͜ͱ 2 1. RTT ΛߴԽ͍ͨ͠ 2. ͦͷͨΊʹɺ௨৴ڑΛ࠷ʹ͍ͨ͠ 3. ͭ·ΓɺΤοδϩέʔγϣϯͰ௨৴Λ͍݁ͨ͠ ՝
ಈతαΠτͷ߹ɺΦϦδϯαʔόʔͰ HTML Λ࡞ͬͯૹͬͯΒΘ ͳ͚ΕͳΒͳ͍
CDN Worker ͳΒղܾͰ͖Δ • ΤοδϩέʔγϣϯͰϨϯμϦϯάͯ͠ϨεϙϯεΛฦͤΔ • ϨϯμϦϯάࡁΈ HTML Λ CDN
ʹΩϟογϡ͢Δ͜ͱͰɺ2 ճҎ߱ͷϨε ϙϯε͞Βʹ͍ • ࠷ߴͷ RTT / FMP / SEO • ϨϯμϦϯά༻ͷ Node.js αʔόʔΛࣗલͰݐͯͳ͍͍ͯ͘ • ΦϦδϯαʔόʔΛͲͷϦʔδϣϯʹஔ͍͕ͯͳ͘ͳΔ • ίετͷ͍҆ɾαʔϏεఏڙͷૣ͍ϦʔδϣϯΛબͰ͖ΔΑ͏ʹͳΔ • ΦϦδϯαʔόʔͷϦΫΤετΛ࠷খԽͰ͖Δ
Ұ൪ظ͍ͯ͠ΔϓϥοτϑΥʔϜ
Ҏ্ɺCDN Worker Ͱͨ͠
࠷ޙʹɺϑϩϯτΤϯυʹ͍͍ͭͯ͑ͨ͜ͱ • ΤίγεςϜेʹख़͍ͯ͠Δ • ։ൃମݧ͕ͷ͘͢͝ྑ͘ͳ͍ͬͯΔ • ϥΠϒϥϦͷཚཱམͪண͍͍ͯͯɺมԽૣ͘ͳ͍ • ࠷ۙͷ UX
ʹ݁͢Δͷ͕ଟ͍ • ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ