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

Hydrogenで 2022年〜を感じる

4bffe6720aa22b10feef2456e5d495bb?s=47 Ryusou
December 15, 2021
Programming
0
280

Hydrogenで 2022年〜を感じる

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

4bffe6720aa22b10feef2456e5d495bb?s=128

Ryusou

December 15, 2021
Tweet

More Decks by Ryusou

See All by Ryusou
microCMSでimgixに入門する
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
470
Jamstack Conf 2021を見てブログ構成を見直した話
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
1
700
ユーザーが編集中の状態管理について考えよう
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
3
5.3k
Jamstackの社内プレゼン
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
730
はじめてのUniversal JavaScript
4bffe6720aa22b10feef2456e5d495bb?s=48 nozaki
0
620

Other Decks in Programming

See All in Programming
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
900
Atomic Design とテストの○○な話
Fd3e212c7b5255c6164d7d52bfe79dfb?s=48 takfjp
2
810
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
1
140
kintone × LINE Bot で餃子検定Botを作った話
9452778272d5d1a19e897f4b75204fb2?s=48 naberina
0
330
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
240
レビュー駆動学習のススメ_StaPy#83
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
320
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
140
How to start contributing to Kubernetes Projects
Db3181d9b15867e445d87720bfc59577?s=48 ydfu
0
140
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
0
150
閱讀原始碼 - 再戰十年的 jQuery
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
300
Pythonで鉄道指向プログラミング
Cc15f7fbb06e96bdb56992e3d42ea8cd?s=48 usabarashi
0
130
パスワードに関する最近の動向
8fd1ae6548d5ab14139c8d8032b76ee1?s=48 kenchan0130
1
330

Featured

See All Featured
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
47
4k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.3k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenintech
48
2.6k

Transcript

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

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

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

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

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

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

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

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

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