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...
Search
Yukiya Nakagawa
January 26, 2024
Technology
48
17k
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
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.1k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3k
5分で流し読むCloudflare Developer Platform
nkzn
3
310
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
31
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.8k
青い空の歩き方 / Flying in the bluesky
nkzn
1
290
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.4k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.4k
Other Decks in Technology
See All in Technology
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
190
内製化を加速させるlaC活用術
nrinetcom
PRO
2
130
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
190
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
150
手を動かしてレベルアップしよう!
maruto
0
170
分解して理解する Aspire
nenonaninu
2
880
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
15k
実は強い 非ViTな画像認識モデル
tattaka
2
1.1k
Pwned Labsのすゝめ
ken5scal
1
310
デスクトップだけじゃないUbuntu
mtyshibata
0
770
Amazon Aurora のバージョンアップ手法について
smt7174
2
130
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Bash Introduction
62gerente
611
210k
Building Your Own Lightsaber
phodgson
104
6.2k
Speed Design
sergeychernyshev
27
810
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualization
eitanlees
146
15k
How to Ace a Technical Interview
jacobian
276
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
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モードは流行ってほしい
完