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
2.9k
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.3k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.9k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.4k
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
130
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
390
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
160
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
420
SCSAから学ぶセキュリティ管理
masakamayama
0
130
DeepSeek on AWS
hariby
1
200
FastConnect の冗長性
ocise
1
9.5k
Amazon GuardDuty Malware Protection for Amazon S3のここがすごい!
ryder472
1
110
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
310
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
130
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
3
330
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Code Reviewing Like a Champion
maltzj
521
39k
KATA
mclloyd
29
14k
Practical Orchestrator
shlominoach
186
10k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Cult of Friendly URLs
andyhume
78
6.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Language of Interfaces
destraynor
156
24k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fireside Chat
paigeccino
34
3.2k
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モードは流行ってほしい
完