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
55
120k
サーバーサイドエンジニアも知っておくべきフロントエンドの今
Rails Developers Meetup 2019
itkrt2y
March 22, 2019
Tweet
Share
More Decks by itkrt2y
See All by itkrt2y
ざっくり学ぶ言語のしくみ
itkrt2y
4
3.8k
Other Decks in Technology
See All in Technology
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
240
Hatena Engineer Seminar #23 「チームとプロダクトを育てる Mackerel 開発合宿」
arthur1
0
650
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
510
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
0
160
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
1
170
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
420
初めてのデータ移行プロジェクトから得た学び
tjmtmmnk
0
420
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
130
01_ユーザーリサーチ実施の進め方
kouzoukaikaku
0
780
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
339
18k
Atom: Resistance is Futile
akmur
256
24k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Statistics for Hackers
jakevdp
785
210k
Teambox: Starting and Learning
jrom
124
7.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
GitHub's CSS Performance
jonrohan
1020
430k
Adopting Sorbet at Scale
ufuk
65
7.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
8k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
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
[email protected]
+ 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
ʹ݁͢Δͷ͕ଟ͍ • ϢʔβʔͷͨΊʹɺαʔόʔαΠυΤϯδχΞཧղ࣮͠ફ͢Δ͖ • ϑϩϯτΤϯυΛϑϩϯτΤϯυٕज़Ͱཧ͍ͯ͠ͳ͍ͱग़དྷͳ͍࠷దԽ͕ଟʑ ଘࡏ͢Δ • ࠷దͳઃܭΛߟ͑ΔʹɺϑϩϯτΤϯυͷࣝඞਢ