Islands Architectureの共有

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

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

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

• 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標準”というキーワードもありそう）   おさらい 

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 

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

Median page weight over time.  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 

• 例として ◦ Astro ◦ @11ty/is-land ◦ preact-custom-element • 他にも色々
◦ Marko ◦ Fresh Islands Architectureの実現方法

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する挙動も可能

• <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

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と使って、これに近い形でやることになりそう

• コード含めたより詳しいディスカッションは懇親会にて！ • Deno「The Future (and the Past) of the
Web is Server Side Rendering」 - Article ◦ 面白い提案 • 最近追えていない情報が多いので、誰か知ってたら教えてください ◦ Fresh(Deno) ◦ Qwik ◦ Lit, Slim.js,… まとめ

• Introducing Web Vitals: essential metrics for a healthy site
- Chromium Blog: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html  • Webサイトのパフォーマンスがコンバージョン率に与える影響 - Cloudﬂare: https://www.cloudﬂare.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  参考文献 

Islands Architectureの共有

Islands Architectureの共有

Takaaki Mikami

Featured

Transcript

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

• @wara_be | 三上孝明(Takaaki Mikami)  • エンジニアリングマネージャー at BEENOS

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

• SPA(Backbone.js, Angular, Vue.js, React)の台頭  ◦ 足回りの重い SSRからの脱却 , ユーザー体験の向上

Introducing Web Vitals: essential metrics for a healthy site -

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

Median page weight over time.  Part IV Chapter 19 Page

The Future (and the Past) of the Web is Server

• 例として ◦ Astro ◦ @11ty/is-land ◦ preact-custom-element • 他にも色々

Astro export default function Greeting() { return ( <div> <strong>

• <is-land src…> タグを配置 • 338行の薄いlib, 2023/05/31から更新止まっている @11ty/is-land w/Preact import

preact-custom-element import register from 'preact-custom-element'; const Greeting = () =>

• コード含めたより詳しいディスカッションは懇親会にて！ • Deno「The Future (and the Past) of the

• Introducing Web Vitals: essential metrics for a healthy site