Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Hydrogenで 2022年〜を感じる
Search
Ryusou
December 15, 2021
Programming
680
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Hydrogenで 2022年〜を感じる
PWA Night vol.34 ~2021年最後はLT会!〜
https://pwanight.connpass.com/event/231422/
Ryusou
December 15, 2021
More Decks by Ryusou
See All by Ryusou
Astro 3.0入門
nozaki
0
510
再実装 React Testing Library
nozaki
0
270
microCMSでimgixに入門する
nozaki
0
1.2k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.4k
ユーザーが編集中の状態管理について考えよう
nozaki
3
7.2k
はじめてのUniversal JavaScript
nozaki
1
2.8k
Other Decks in Programming
See All in Programming
Vapor Mode でアクセシビリティは 壊れないか検証した話
fuqda
1
300
PumaからFalconに移行したRailsアプリケーションでの実践
falcon8823
0
320
Web3Dライブラリを作ってVue Custom Rendererの仕組みを理解しよう / lets learn vue custom renderer by making 3d library
drumath2237
1
110
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
nabondance
0
130
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
kasacchiful
PRO
0
260
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
ochtum
0
180
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
bicstone
2
350
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
giljongyu
0
690
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
530
パスワード再設定メールのURLについて知っておこう
uyuki234
0
200
Modernizing iOS Apps
seyfoyun
0
140
AI Augmentation Techniques with Liberty
ivargrimstad
0
240
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
Building a Scalable Design System with Sketch
lauravandoore
464
34k
Music & Morning Musume
bryan
48
7.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
A Modern Web Designer's Workflow
chriscoyier
699
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
320
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimizing for Happiness
mojombo
378
71k
Evolving SEO for Evolving Search Engines
ryanjones
0
350
Site-Speed That Sticks
csswizardry
13
1.6k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
Transcript
Hydrogenで 2022年〜を感じる @ryusou
Hydrogenとは? Shopifyが開発している React basedのフレームワーク https://hydrogen.shopify.dev/ ※現在開発者プレビュー段階のものになり ます。
Hydrogenの注目ポイント ①React Server Componentsをいち早く試せる React は正式リリースされていない(α) Hydrogenは独自にラップすることで実現している → DEMO
Hydrogenの注目ポイント ①React Server Componentsをいち早く試せる useQuery(useShopQuery) Hooksがサーバー側で動く....!!
Hydrogenの注目ポイント ②「ヘッドレス」コマース + UIの提供 コマンド一つでECサイトの雛形が作れる TailwindCSS/Headless UIを利用 Next.js/Gatsby側にUIを組み込むこともできるらしい ヘッドレス 良い =独自にUIを組み立てられる 微妙 =作るの大変(表裏一体ではあるが..)
Hydrogenの注目ポイント ③ ViteでPWA(試したわけではないので....) vite-plugin-pwa: https://www.npmjs.com/package/vite-plugin-pwa
まとめ Hydrogenには2022〜がつまっていた ヘッドレスコマース..etc + ヘッドレスUI は 流行りそう 外部APIは部分的に部分的に採用するのが 良さそう
りゅーそう 株式会社 microCMS エンジニア Twitter @ryusou_mtkh イベントやっているので、ぜひ!
良いお年を! @ryusou ありがとうございました