Hydrogenで 2022年〜を感じる

PWA Night vol.34 ～2021年最後はLT会！〜
https://pwanight.connpass.com/event/231422/

Transcript

1. Hydrogenで
   2022年〜を感じる
   @ryusou
   

   View Slide

2. Hydrogenとは？
   Shopifyが開発している
   React basedのフレームワーク
   https://hydrogen.shopify.dev/
   ※現在開発者プレビュー段階のものになり
   ます。
   

   View Slide

3. Hydrogenの注目ポイント
   ①React Server Componentsをいち早く試せる
   React は正式リリースされていない(α)
   
   
   Hydrogenは独自にラップすることで実現している
   → DEMO
   

   View Slide

4. Hydrogenの注目ポイント
   ①React Server Componentsをいち早く試せる
   useQuery(useShopQuery)
   Hooksがサーバー側で動く....！！
   

   View Slide

5. Hydrogenの注目ポイント
   ②「ヘッドレス」コマース + UIの提供
   コマンド一つでECサイトの雛形が作れる
   TailwindCSS/Headless UIを利用
   Next.js/Gatsby側にUIを組み込むこともできるらしい
   ヘッドレス　良い　＝独自にUIを組み立てられる
   　　　　　　微妙　＝作るの大変(表裏一体ではあるが..)
   

   View Slide

6. Hydrogenの注目ポイント
   ③ ViteでPWA(試したわけではないので....)
   vite-plugin-pwa：
   https://www.npmjs.com/package/vite-plugin-pwa
   

   View Slide

7. まとめ
   Hydrogenには2022〜がつまっていた
   ヘッドレスコマース..etc + ヘッドレスUI は
   流行りそう
   外部APIは部分的に部分的に採用するのが
   良さそう
   

   View Slide

8. りゅーそう
   株式会社 microCMS エンジニア
   Twitter @ryusou_mtkh
   イベントやっているので、ぜひ！
   

   View Slide

9. 良いお年を！
   @ryusou
   ありがとうございました
   

   View Slide