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
フロントエンドトレンドのふりかえりと事業に合わせた選択
Search
sunnyone
July 31, 2023
Technology
0
90
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
July 31, 2023
Tweet
Share
More Decks by sunnyone
See All by sunnyone
シンプルじゃないテーブルの見つけ方
sunnyone
1
270
Next.js App Router登場後の話
sunnyone
0
53
はやい開発のためのJSONデータ型の活用
sunnyone
0
110
メタプログラミングとは
sunnyone
0
2.1k
RustからPythonを呼び出す
sunnyone
1
4.2k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.5k
Other Decks in Technology
See All in Technology
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
2
120
【shownet.conf_】クロージングセッション
shownet
PRO
0
220
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
140
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
200
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
トークナイザー入門
payanotty
2
380
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
150
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
500
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.4k
How CERN serves 1EB of data via FUSE
ennael
PRO
0
16k
[JAWS-UG GameTech] 第6回 各種事例紹介_18TRIPにおけるAWSサービスを活用した負荷テスト・障害テスト
naoto_yasuda
0
100
Understanding and Optimising INP
akshayysharma
0
150
Featured
See All Featured
Done Done
chrislema
181
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
37
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
In The Pink: A Labor of Love
frogandcode
139
22k
Testing 201, or: Great Expectations
jmmastey
38
7k
Facilitating Awesome Meetings
lara
49
6k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Clear Off the Table
cherdarchuk
91
320k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
What's new in Ruby 2.0
geeforr
341
31k
Git: the NoSQL Database
bkeepers
PRO
425
64k
GraphQLとの向き合い方2022年版
quramy
43
13k
Transcript
フロントエンドトレンドのふりかえりと 事業に合わせた選択 1
今日お話すること フロントエンドあるあるありますよね SPA でなくて良くない? 今は◦◦ よりも×× .js の500KB って工数かけて削る必要ある? これらを踏まえながらトレンドをふりかえります
2
約10 年のフロントエンドのトレンド 3
サーバサイドテンプレート時代 サーバサイドテンプレートでHTML を生成し、js/css が装飾する形 JSP, erb, jade/pug, mustache/handlebars, etc HTML
JS CSS ↑ ブラウザ ↓ サーバ HTML 相当 4
Single Page Application (SPA) の登場 サーバが用意した要素にjs からページ全域を描画する HTML 片の2 重管理からの解放
CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ HTML ( プレースホルダー) 5
SPA ライブラリの流行 - 2015 年頃 双方向バインディングや単方向データフローでSPA が実用的に AngularJS / React
/ Vue Angular v2beta 2015/4, React 0.14 2015/10, Vue.js 1.0 2015/10 6
Server Side Rendering (SSR) の登場 サーチエンジン向けにはSPA の利用は難があった クローラーボットはjs を解釈できなかった/ 制限があった
サーバでHTML をプリレンダリングするSSR の登場 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (prerender) HTML 7
SSR フレームワークの発展 - 2018 年頃 ライブラリ単体でのSSR (Server Side Rendering) はだいぶ手間
SSR フレームワークでお手軽にSSR が利用可能に Nuxt.js 1.0 2018/1, Next.js 0.9 2019/7 8
Partial Hydration - 2022 年頃 フルページでSSR すると動的管理化に置くためのhydration がネック に →hydration
の対象を減らす Partial Hydration / Island Architecture / etc Astro, React Server Components, Qwik CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (hydration 対象) HTML (hydration 対象外) HTML 9
まとめ? 仕組みの改善から選択する HTML の二重管理が厳しい / 書き換える部分が多い→SPA に サーチエンジンが必要→SSR に hydration
のコストが問題→Partial Hydration / Island Architecture に 10
本当に? 11
忘れていること ↓ エコシステムの進化 12
SPA ライブラリと共に発展したもの コンポーネント指向 HTML←CSS/JS からコンポーネント←HTML/CSS/JS へ HTML JS CSS HTML
CSS JS コンポーネント HTML CSS JS コンポーネント HTML CSS JS コンポーネント 13
コンポーネント指向の効果 HTML/CSS/JS の接地面が狭くなるため凝集度↑ 「このCSS どこで使っているかわからない」「このJS 何に処理さ れるの?」が起こりにくくなる 使い捨てでないプロダクト/事業で重要 型安全な構造化が可能、かつ使われている仕組みが使える 「SPA
でなくて良いか?」→yes, SPA でない選択肢→[ ] 14
SSR フレームワークと共に発展したもの hooks / local state management の進化 同時期のReact Hooks
の登場で状態管理がRedux 一強から変わっ た Hooks がなければ世の中Vue だったかもしれない .js bundle 民主化 素のbundler / webpack では配慮しないと巨大js ができがち(数 MB 〜の.js ) SSR フレームワークはページを配慮して分割する 15
500KB のサイズ感 Mobile (1.6Mbps Down) で500KB は転送だけで300ms First Contentful Paint
(FCP) のGood は〜1.8s ビジネスインパクトはDesktop < Mobile < 埋め込みjs 水戸駅の様子 16
サーバーコンポーネントと共に発展するもの BFF 役割の移動? React Server Component はBFF 役割の一部を内包する hooks の登場→Redux
の衰退のようにgame change が発生する可 能性 スタイリング(CSS) の変化 Runtime CSS-in-JS が厳しく 過渡期なので半年後に注目! 17
まとめ 枠組みの機能に加えて、エコシステムの進化を加味して考慮する必 要あり 何の機能が増えたか?だけでなく何を解決しようとしているのか? という目線で見るのがおすすめ 18