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
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
Search
Yukiya Nakagawa
January 26, 2024
Technology
39
14k
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです
https://niigata-5min-tech.connpass.com/event/307076/
Yukiya Nakagawa
January 26, 2024
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
30
17k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.4k
青い空の歩き方 / Flying in the bluesky
nkzn
1
160
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
20
5.7k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
6
3.1k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
React Nativeエコシステム概論 / react-native ecosystem
nkzn
1
820
React Native for Webのこれまでから読み解くReact GUIのこれから
nkzn
7
6k
Hooks時代の設計の話 #agrinoteinside
nkzn
42
12k
Other Decks in Technology
See All in Technology
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
190
OPENLOGI Company Profile for engineer
hr01
1
2.2k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
880
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
4.1k
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
8
3.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
240
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
12
3.4k
データベース04: SQL (1/3) 単純質問 & 集約演算
trycycle
0
180
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
140
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Code Review Best Practice
trishagee
56
15k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Embracing the Ebb and Flow
colly
80
4.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Clear Off the Table
cherdarchuk
86
310k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Building an army of robots
kneath
300
42k
Faster Mobile Websites
deanohume
300
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Transcript
SPAの歴史と Remix SPAモードという到達点 Niigata 5分 Tech #4 Yukiya Nakagawa a.k.a
Nkzn
自己紹介 • 中川幸哉 a.k.a Nkzn(な ざん) • ‘86世代🐰の36歳(来月37になります) • 新潟生まれ新潟育ち
• 8歳と4歳の父で妻の夫 • 2011〜2021年は農業IT🌾の人 • 2021年 ら株式会社モニクル ◦ 資産運用 手伝いサービス「マネイロ」のIT裏方
SPAとは • Single Page ApplicationというWebアプリケーションの一形態 • [狭義] Webサイトに訪問したと にHTML +
CSS + JavaScriptを一 度だけダウンロードして、その後そのWebサイト内にいる間は、 バックグラウンドで簡単な通信(Ajax)は行うものの、画面をリ ロードせずに動 続けるやつ • システム上の特性としては、Webサイトの訪問によってメモリ上に インストールを行い、Webサイト ら出てい とアンインストール されるアプリ、みたいな抽象度で捉えてもいい
SPAで大抵必要になるもの • インフラ ◦ 静的ファイルの配信サーバー • ビルド ◦ 記述したJavaScript文法を動作 するJavaScript文法に変換する
トランスパイラー ◦ JavaScriptファイルをモジュー ルとしてモジュール間やライブ ラリ間の依存性解決を行い、適 切な粒度のファイルにまとめる バンドラー • 特殊な役割のライブラリ ◦ バックグラウンド通信 ▪ だいたいfetchでいい ◦ 画面の動的書 換え ▪ 今回の文脈ではReact ◦ 画面の動的書 換えとHistory (アドレスバー&履歴)を同期 させる画面遷移ライブラリ • サーバーサイドレンダリング(SSR) ◦ [狭義]外部 らのアクセスに対 し適切なHTMLを返せる仕組み
React向けSPAツールチェインの歴史
• 一通り自分で組んでいました • .babelrcと webpack.config.jsと を頑張って書いてた • Babel筋やwebpack筋という言葉 生まれた ◦
英語圏ではbebel-fuと webpack-fu(クンフーに由来) • SSRは気合いで小さなサーバーサイドアプリケーションを書 ビルド職人の朝は早い時代 トランスパイラー バンドラー 画面遷移 SSR Babel webpack React Router等 Express + JSDOM ※ browserifyやbower等は紀元前の歴史として割愛しました
• Create React Appという小さなフレームワーク 登場 • React 動いてビルドして れる •
画面遷移は自分で追加する必要あり • 設定ファイルを隠蔽しす てて使いづら った • SSRは気合いで小さなサーバーサイドアプリケーションを書 Create React App時代 トランスパイラー バンドラー 画面遷移 SSR (Babel) 隠蔽 (webpack) 隠蔽 React Router等 Express + JSDOM
• フォルダとファイルで画面遷移 組めるようになった • babelやwebpackの設定に介入するのもそれなりに容易で拡張性⭕ • SSRを前提としたフレームワークで厳密にはSPAではない • React Router
ビッグバンリリースでヘイトを貯めていたり、CRA の開発 遅 ったりしたこと ら、SSRの要否とは別の要因で導入 進んだ Next.js Pages Router時代前期 トランスパイラー バンドラー 画面遷移 SSR Babel webpack next/router 標準サポート
Vite登場 • 粒度としてはCreate React Appに近い • Vue向けのツールとして誕生した 、他プラットフォームにも対応 を進めて れたので足を向けて眠れない
• 後発だけあってSSR向けのプラグインも出て て手厚い • 相変わらず画面遷移は自前で入れる • Go製のesbuildでの開発時ビルド っそ早い トランスパイラー バンドラー 画面遷移 SSR esbuild + Rollup Rollup React Router等 Vike (vite-plugin-ssr)
• ビルドの速度面の不満をBabelやwebpackでは解決で な ったので 引越し • TurbopackはRust製webpack後継なので考え方は割と近いっぽい • Rust製のSWCでのビルド っそ早い
• もちろんSPAではないけど歴史的経緯で代わりに使う人 多い • next exportでSPAとしての出力もで んこともない Next.js Pages Router時代後期 トランスパイラー バンドラー 画面遷移 SSR SWC Turbopack next/router 標準サポート
• React Routerチーム 作ったNext.jsみたいなやつ • 学習コストを減らすためのアイデア た さん入って り、 これにインスパイアされる形でApp
Router 生まれている • 通信と画面遷移を高度に連携していて使い勝手 いい • Viteを使っている 、remix.config.jsで隠蔽されてて弄りづらい • これもサーバー 手厚いのでSPAではない Remix トランスパイラー バンドラー 画面遷移 SSR (Vite) 隠蔽 (Vite) 隠蔽 (React Router) 隠蔽 標準サポート
• Next.jsチーム 作ったRemixみたいなやつ • Meta社Reactチームと組んで、React Server Componentsという サーバーだけで実行するPHPみたいなReact(語弊)の実験場 初めての導入事例となる •
画面遷移や通信周りの考え方 そこそこ変わった • もうSPAでもなんでもないんだけど惰性で初手で選ぶ人も多い Next.js App Router トランスパイラー バンドラー 画面遷移 SSR SWC Turbopack next/navigation 標準サポート
いまここ Ima koko App Router Remix SPA
もう小さくSPAやる方法が Viteしかおらん
SPAやるならVite一択? • SSR いらない社内システムやBtoB向けのSaaSを作ってると に、 SSRを軸に設計されたフレームワークを使うのはtoo muchなので SPAで済ませたい • とはいえFile-system
based routing 意外と気持ちいいので、その ためだけに必要以上に重いNext.jsやRemixでプロジェクトを立ち上 げ ち • 画面遷移ライブラリ 上手いこと統合されたVite あればなあ
Remix SPA mode
• 別件でvite.config.jsを露出するモード で た(experimental) ◦ このモードではremix.config.jsは使用禁止 • サーバーに頼らずにブラウザだけの範囲で通信と画面遷移を統合さ せる方法も実装された(v2.5.0 clientLoader/clientAction)
• Vite製SPAの手厚いプラグインとして動作するRemix 生まれた • SSRした なったらSPAモードを外して普通のRemixになればいい Remix SPAモード (experimental) トランスパイラー バンドラー 画面遷移 SSR Vite Vite (React Router) 隠蔽 不要
通信と画面遷移が統合された Vite管理のSPA
長らく空席だった 業務用SaaSと相性のいい SPAフレームワーク
Remixは流行らなくてもいいけど Remix SPAモードは流行ってほしい
完