Tweet
Tweet

Slide 1

Slide 1 text

フロントエンドトレンドのふりかえりと 事業に合わせた選択 1

Slide 2

Slide 2 text

今日お話すること フロントエンドあるあるありますよね SPA でなくて良くない？ 今は○○ よりも×× .js の500KB って工数かけて削る必要ある？ これらを踏まえながらトレンドをふりかえります 2

Slide 3

Slide 3 text

約10 年のフロントエンドのトレンド 3

Slide 4

Slide 4 text

サーバサイドテンプレート時代 サーバサイドテンプレートでHTML を生成し、js/css が装飾する形 JSP, erb, jade/pug, mustache/handlebars, etc HTML JS CSS ↑ ブラウザ ↓ サーバ HTML 相当 4

Slide 5

Slide 5 text

Single Page Application (SPA) の登場 サーバが用意した要素にjs からページ全域を描画する HTML 片の2 重管理からの解放 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ HTML ( プレースホルダー) 5

Slide 6

Slide 6 text

SPA ライブラリの流行 - 2015 年頃 双方向バインディングや単方向データフローでSPA が実用的に AngularJS / React / Vue Angular v2beta 2015/4, React 0.14 2015/10, Vue.js 1.0 2015/10 6

Slide 7

Slide 7 text

Server Side Rendering (SSR) の登場 サーチエンジン向けにはSPA の利用は難があった クローラーボットはjs を解釈できなかった/ 制限があった サーバでHTML をプリレンダリングするSSR の登場 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (prerender) HTML 7

Slide 8

Slide 8 text

SSR フレームワークの発展 - 2018 年頃 ライブラリ単体でのSSR (Server Side Rendering) はだいぶ手間 SSR フレームワークでお手軽にSSR が利用可能に Nuxt.js 1.0 2018/1, Next.js 0.9 2019/7 8

Slide 9

Slide 9 text

Partial Hydration - 2022 年頃 フルページでSSR すると動的管理化に置くためのhydration がネック に →hydration の対象を減らす Partial Hydration / Island Architecture / etc Astro, React Server Components, Qwik CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (hydration 対象) HTML (hydration 対象外) HTML 9

Slide 10

Slide 10 text

まとめ？ 仕組みの改善から選択する HTML の二重管理が厳しい / 書き換える部分が多い→SPA に サーチエンジンが必要→SSR に hydration のコストが問題→Partial Hydration / Island Architecture に 10

Slide 11

Slide 11 text

本当に？ 11

Slide 12

Slide 12 text

忘れていること ↓ エコシステムの進化 12

Slide 13

Slide 13 text

SPA ライブラリと共に発展したもの コンポーネント指向 HTML←CSS/JS からコンポーネント←HTML/CSS/JS へ HTML JS CSS HTML CSS JS コンポーネント HTML CSS JS コンポーネント HTML CSS JS コンポーネント 13

Slide 14

Slide 14 text

コンポーネント指向の効果 HTML/CSS/JS の接地面が狭くなるため凝集度↑ 「このCSS どこで使っているかわからない」「このJS 何に処理さ れるの？」が起こりにくくなる 使い捨てでないプロダクト／事業で重要 型安全な構造化が可能、かつ使われている仕組みが使える 「SPA でなくて良いか？」→yes, SPA でない選択肢→[ ] 14

Slide 15

Slide 15 text

SSR フレームワークと共に発展したもの hooks / local state management の進化 同時期のReact Hooks の登場で状態管理がRedux 一強から変わっ た Hooks がなければ世の中Vue だったかもしれない .js bundle 民主化 素のbundler / webpack では配慮しないと巨大js ができがち（数 MB 〜の.js ） SSR フレームワークはページを配慮して分割する 15

Slide 16

Slide 16 text

500KB のサイズ感 Mobile (1.6Mbps Down) で500KB は転送だけで300ms First Contentful Paint (FCP) のGood は〜1.8s ビジネスインパクトはDesktop < Mobile < 埋め込みjs 水戸駅の様子 16

Slide 17

Slide 17 text

サーバーコンポーネントと共に発展するもの BFF 役割の移動？ React Server Component はBFF 役割の一部を内包する hooks の登場→Redux の衰退のようにgame change が発生する可 能性 スタイリング(CSS) の変化 Runtime CSS-in-JS が厳しく 過渡期なので半年後に注目！ 17

Slide 18

Slide 18 text

まとめ 枠組みの機能に加えて、エコシステムの進化を加味して考慮する必 要あり 何の機能が増えたか？だけでなく何を解決しようとしているのか？ という目線で見るのがおすすめ 18