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
600
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
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
Cursorハンズオン実践!
eltociear
2
1k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
640
Serena MCPのすすめ
wadakatu
4
980
オープンソースソフトウェアへの解像度🔬
utam0k
13
2.6k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
560
CSC305 Lecture 05
javiergs
PRO
0
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
260
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Gamification - CAS2011
davidbonilla
81
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Facilitating Awesome Meetings
lara
56
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
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
ͱ͔ͷϑϨʔϜϫʔΫͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ