Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hydrogenで 2022年〜を感じる

Ryusou
December 15, 2021

Hydrogenで 2022年〜を感じる

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

Ryusou

December 15, 2021
Tweet

More Decks by Ryusou

Other Decks in Programming

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