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
Cursorハンズオン実践!
eltociear
2
1.1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
理論と実務のギャップを超える
eycjur
0
140
Software Architecture
hschwentner
6
2.3k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
CSC305 Lecture 08
javiergs
PRO
0
200
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
280
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
Side Projects
sachag
455
43k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Scaling GitHub
holman
463
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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
ͱ͔ͷϑϨʔϜϫʔΫͳ͘ͳͬͯ ΑΓྑ͘ͳΔɻ