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
43
15k
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
5分で流し読むCloudflare Developer Platform
nkzn
0
80
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
30
17k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.5k
青い空の歩き方 / Flying in the bluesky
nkzn
1
190
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
21
6.5k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.4k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
React Nativeエコシステム概論 / react-native ecosystem
nkzn
1
870
React Native for Webのこれまでから読み解くReact GUIのこれから
nkzn
7
6.1k
Other Decks in Technology
See All in Technology
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
190
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
How to Think Like a Performance Engineer
csswizardry
4
590
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
GraphQLとの向き合い方2022年版
quramy
36
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Clear Off the Table
cherdarchuk
89
320k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
BBQ
matthewcrist
82
9k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
A Modern Web Designer's Workflow
chriscoyier
689
190k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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モードは流行ってほしい
完