Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
crosstalk
Search
Yosuke Furukawa
PRO
March 24, 2018
Programming
0
590
crosstalk
manabiya.tech でみんなで話した内容の議事録です。
Yosuke Furukawa
PRO
March 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
540
Cache Me If You Can
ryunen344
1
560
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
460
速いWebフレームワークを作る
yusukebe
5
1.7k
Rancher と Terraform
fufuhu
2
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
110
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
170
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Why Our Code Smells
bkeepers
PRO
339
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Unsuck your backbone
ammeep
671
58k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How to train your dragon (web standard)
notwaldorf
96
6.2k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Code Review Best Practice
trishagee
70
19k
A better future with KSS
kneath
239
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
It's Worth the Effort
3n
187
28k
Transcript
Web Cross Talk @yosuke_furukawa @laco2net @1000ch @kazu_pon
ΈΜͳԿΛͬͯΔਓʁ 1000ch: Web ։ൃશൠ laco2net: ࣾπʔϧߏஙɺSPA։ൃ kazu_pon: ελʔτΞοϓͷϑϧε λοΫΤϯδχΞɺγεςϜશൠɺ Web/backend
ԿͰ͞Μ
full single page application vs partial single page application kazu_pon:
Vue.js ෦తʹ͍ͬͯΔ 1000ch: SSRαʔόΛ࡞ͬͯɺ͔ͦ͜Βฦͨ͠ޙSSR x Full SPA Ͱͬͯͨɻpartial SPA΄΅ແ͍ɻ merpayͰɺVue.js Nuxt.js ͰͬͯΔ laco2net: SSRͬͯͳ͍͕ɺAngularͷfull SPA, Service Worker Λ͍ͬͯΔɻReactͷϧʔλʔηϯε͕ѱ͔ͬͨ
Router: Angularͷ߹ angular/router Vue.js ͷ߹ vue-router ͕͋Δ React react-router͕ͩɺർฐ͠
͍ͯΔ
ΈΜͳ͕SPAͰ࡞ͬͯΔͷ kazu_pon: Α͋͘ΔΞϓϦ͕ͩɺࠓ·Ͱͬͨ࣌ʹεΫ ϩʔϧҐஔ͕ճؼͯ͘͠Εͳ͍͜ͱ͕͋ͬͨɻ laco2net: ࣾͷਓͱࣾ֎ͷਓ͕Ұॹʹ͏πʔϧɺ Service Worker ͰΩϟογϡ͕ύʔδ͞Εͳ͍ɻɻɻ QAͯ͘͠ΕͯΔਓͷΩϟογϡͷύʔδΊͬͪΌΊΜͲ
͍ɻService Worker ʹߋ৽͕͋Δ࣌ʹ࣮ࡍʹऔ͖ͬͯͯߋ ৽͢Δͱ͍͏ॲཧΛඪ४Ͱཉ͍͠ɻ
ΈΜͳ͕SPAͰ࡞ͬͯΔͷ 1000ch: ঢ়ଶཧ͕ۤ࿑͍ͯ͠Δ JSͷঢ়ଶͱϖʔδͷঢ়ଶͷsync τϥϯβΫγϣϯڥք͕յΕΔ
ΈΜͳ͕SPAͰࠔͬͨ͜ͱ োͳͲ
JS Fatigue ࣮ײ͋Δʁ kazu_pon: Vue.js͕͖ͳ͚ͩͰͬͯΔΘ͚͡Όͳ͍ͷͰ࣮ײͳ͍͕ɺ৽ ͍͠bundleπʔϧͱ͔͕ग़ͯ͘ΔͱɺͦΕʹରԠ͠ͳ͍ͱ͍͚ͳ͍ͷͰେม Vue.jsFlow/TypeScriptͰॻ͚Δ͕ɺࠓͷͱ͜ΖTypeScript͕ϝϯςφ͕ ڧ͍͕தFlow laco2net: Angular
جຊTypeScript, Firefox͘Shadow DOM࣮͞ΕΖͱ ࢥͬͯΔɻNode.jsͷϒϥβͱcommonjsͱͰർฐ͢Δ͜ͱ͋Δɻ Custom ElementsͰԿ͔࣮͢ΔͱɺFirefoxͷͨΊʹPolyfill͕ඞཁɻ 1000ch: webpack͕ݏͩɻCSS in JS͕Ұൠతʹͳͬͯͬ͘͠Γདྷͯͳ͍ɻ
ࠓޙͷWebඪ४Ͱظ͍ͨ͜͠ͱʁ kazu_pon: WebAssemblyɺϙʔλϏϦ ςΟ͕૿ͯ͠ϥΠϒϥϦͱͯ͠ೖΕΒΕΔ Α͏ʹͳͬͨΓɺWebҎ֎ͷϥΠϒϥϦ ͖࣋ͬͯͯಈ͘ͱ໘ന͍
ࠓޙͷWebඪ४Ͱظ͍ͨ͜͠ͱʁ laco2net: template-instantiation, DOMChangeList https://github.com/whatwg/dom/ issues/270
ࠓޙͷWebඪ४Ͱظ͍ͨ͜͠ͱ ʁ 1000ch: vdom͕ͬͯΔ͜ͱΛඪ ४Ͱͬͯ΄͍͠
ࠓޙͷWebඪ४Ͱظ͍ͨ͜͠ͱ ʁ
ࠓޙͷAngular SPAͷ։ൃϓϥοτϑΥʔϜ ࡁΈɿΓͲ͏͘͢Δ͔ SPA͡Όͳ͍จ຺ͰϢʔεέʔεΛ ૿͢
ࠓޙͷVue.js kazu_pon: WebͰՁͷ͋ΔͷΛ ͙͢ʹఏڙͰ͖ΔΑ͏ʹͯ͘͠ɻෳ ࡶͳͷΛ؆୯ʹ͢ΔͨΊͷΈ Λఏڙ͢Δɻ
ࠓޙͷWebඪ४ Service Worker, Web Components, Web Payments ͜ΕΒ͕ਐΜͰཉ͠ ͍ɻ ීٴ͖͠ΕAngularͱ͔Vue
ͱ͔ͷϑϨʔϜϫʔΫͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ