Islands Architectureの共有

Transcript

1. Islands Architecture 
 BEENOS株式会社 テクノロジー推進室 エンジニアリングマネージャー 三上 孝明

2. • @wara_be | 三上 孝明(Takaaki Mikami)
 • エンジニアリングマネージャー at BEENOS
 • 採用、育成、コーディング、アーキテクト、なんでもやります。
 自己紹介

3. • Islands Architectureについて、 
 そういうコンセプトがあるんだ〜と知って頂く 
 今日持ち帰っていただくこと 

4. • SPA(Backbone.js, Angular, Vue.js, React)の台頭
 ◦ 足回りの重い SSRからの脱却 , ユーザー体験の向上 
 • Next.js/Nuxt.jsの福音
 ◦ SSRによるSEO対策, FCPの改善
 ◦ 開発体験の向上 
 • “Simple”への揺り戻し 
 ◦ Next.js(React)の複雑化: Cache機構, App Router, RSC
 ◦ FW: Svelte(kit), Remix, …
 ◦ Islands Architecture
 ◦ （“Web標準”というキーワードもありそう） 
 おさらい

5. Introducing Web Vitals: essential metrics for a healthy site - Chromium Blog: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html Web Vitals

6. Webサイトのパフォーマンスがコンバージョン率に与える影響 - Cloudflare: https://www.cloudflare.com/ja-jp/learning/performance/more/website-performance-conversion-rates/ vs. Conversion Rate

7. Median page weight over time.
 Part IV Chapter 19 Page Weight - Web Almanac By HTTP Archive: https://almanac.httparchive.org/en/2021/page-weight
8. The Future (and the Past) of the Web is Server Side Rendering - Deno: https://deno.com/blog/the-future-and-past-is-server-side-rendering Islands Architecture

9. • 例として ◦ Astro ◦ @11ty/is-land ◦ preact-custom-element • 他にも色々 ◦ Marko ◦ Fresh Islands Architectureの実現方法
10. Astro export default function Greeting() { return ( <div> <strong> Hello from Preact! </strong> </div> ); } --- import Greeting from '../components/Greeting'; --- <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> </head> <body> <Greeting client:load /> </body> </html> • .astroファイルで importし、template内で定義 • `client:*` をつけるとクライアントサイドで Hydrationした状態に • `client:visible` でviewport内の場合に loadする挙動も可能
11. • <is-land src…> タグを配置 • 338行の薄いlib, 2023/05/31から更新止まっている @11ty/is-land w/Preact import { h, render } from 'preact' function HelloComponent () { return ( <p> <strong> Hello from Preact! </strong> </p> ) } const Component = (el) => { render(<HelloComponent />, el) } export default Component <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <is-land on:visible autoinit="preact" import="/assets/js/partials/preact-component.js" ></is-land> <script type="module" src="/assets/js/is-land.js"></script> </body> </html> Eleventy v2で、ページ内の一部要素を Partial Hydration(w/Preact + JSX)する - Aki (Takaaki Mikami), https://zenn.dev/beenos_tech/articles/20230219_eleventy-partial-hydration-with-preact
12. preact-custom-element import register from 'preact-custom-element'; const Greeting = () => ( <p> <strong> Hello from Preact! </strong> </p> ); register(Greeting, 'x-greeting', ['name']); <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <x-greeting /> <script type="module" src="/assets/js/customElement.js"></script> </body> </html> • ほぼCustom Elements • 225行ぐらいの lib, 2023/10/19から更新止まっている • 自分で組む時は Interseciton ObserverとCustom Elementsと使って、こ れに近い形でやることになりそう
13. • コード含めたより詳しいディスカッションは懇親会にて！ • Deno「The Future (and the Past) of the Web is Server Side Rendering」 - Article ◦ 面白い提案 • 最近追えていない情報が多いので、誰か知ってたら教えてください ◦ Fresh(Deno) ◦ Qwik ◦ Lit, Slim.js,… まとめ
14. • Introducing Web Vitals: essential metrics for a healthy site - Chromium Blog: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html
 • Webサイトのパフォーマンスがコンバージョン率に与える影響 - Cloudflare: https://www.cloudflare.com/ja-jp/learning/performance/more/website-performance-conversion-rates/
 • Part IV Chapter 19 Page Weight - Web Almanac By HTTP Archive: https://almanac.httparchive.org/en/2021/page-weight
 • The Future (and the Past) of the Web is Server Side Rendering - Deno: https://deno.com/blog/the-future-and-past-is-server-side-rendering
 • Islands Architecture - patterns.dev, https://www.patterns.dev/vanilla/islands-architecture/
 • Eleventy v2で、ページ内の一部要素を Partial Hydration(w/Preact + JSX)する - Aki (Takaaki Mikami), https://zenn.dev/beenos_tech/articles/20230219_eleventy-partial-hydration-with-preact
 • フロントエンドとSPA職人の目指したものの歴史と概略 - mizchi, https://zenn.dev/mizchi/articles/spa-engineers-history
 • Next.jsから見る Webフロントエンドの歴史 - @yusuke_blog1026, https://speakerdeck.com/youliangdao/next-dot-jskarajian-ru-webhurontoendonoli-shi
 • Next.jsの複雑化について思うこと - 昭和のオッサン, https://note.com/masa_tec_note/n/n4795ca19d67f
 参考文献