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
76
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
July 31, 2023
Tweet
Share
More Decks by sunnyone
See All by sunnyone
Next.js App Router登場後の話
sunnyone
0
23
はやい開発のためのJSONデータ型の活用
sunnyone
0
81
メタプログラミングとは
sunnyone
0
2k
RustからPythonを呼び出す
sunnyone
1
4k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.3k
Other Decks in Technology
See All in Technology
ServiceNow Knowledge Learning Rise up
manarobot
0
210
Cypress or Playwright?
rainerhahnekamp
0
120
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
780
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
web-application-security
matsuihidetoshi
0
170
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
7
3.8k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
410
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
3.9k
Optimizing for Happiness
mojombo
370
69k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Done Done
chrislema
178
15k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building an army of robots
kneath
300
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Practical Orchestrator
shlominoach
182
9.7k
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