Shopify just announced a React-based JavaScript framework called Hydrogen. It is similar to Next.js, but has extra features for ecommerce and data fetching with GraphQL.

#shopify #react #firstlook

🔗 Resources

Hydrogen Docs https://hydrogen.shopify.dev/
React server components https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

📚 Chapters

00:00 Shopify Hydrogen
00:28 Why use it?
01:24 Developer Experience
03:57 Analysis

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Shopify Hydrogen Overview
- Hydrogen vs Next.js
- React server components
- React SSR and SEO for ecommerce
- Headless shopify graphql API
2024-02-04T13:53:09.800Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
781e6433-b594-4288-8e7d-f12c6f15b910
b81f742eec0888aec59e053dbae71cd8a1f1dd8dd6ee1ae777077397c38c4e23
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Just when you thought there wouldn't be another JavaScript framework, along comes another JavaScript framework.
This one's called Hydrogen, and it's a React based framework for building custom ecommerce sites using Shopify.
It's focused on server side rendering, kind of like Next JS, but comes with a bunch of predefined components and hooks to manage the data and UI of a storefront.
It was just announced yesterday, so let's put it to the test and see if it's something we would actually want to use.
But first, make sure to hit the like button and subscribe.
And let me know what you think about Hydrogen in the comments.
Your first question might be, what is the point of Hydrogen?
We already have Next.
Js and Gatsby, speed, both of which have e commerce templates.
And then, Shopify itself already has a ton of e commerce themes.
So where exactly does Hydrogen come in?
Well, if you've ever built an e commerce site from Scratch, you'll know that it's extremely difficult.
And that's why platforms like Shopify, BigCommerce, and Squarespace are very popular.
But at the same time, when you use a platform like that, Your site has a tendency to feel like a cookie cutter template, and it can be very hard to customize it enough to break out of that.
The cool thing about Shopify is that it has a GraphQL API, allowing you to use it in a headless way.
So Hydrogen basically provides a streamlined way to get a server rendered front end app up and that connects to your Shopify back end with minimal effort.
In other words, it provides a starting point for building fully customizable storefronts.
It's kind of like the Ruby on Rails for Shopify development.
And, I only say that because Shopify itself was built with Ruby on Rails.
Now, let's take a look at the developer experience.
The website is awesome and I actually really like the name Hydrogen.
It's not as cool as Prometheum, but still way better than arsenic.
Create a new app by running npx create hydrogen app.
When you open it, you'll see a project configured with a lot of stuff here.
The starter template it provides you with is definitely opinionated.
You'll notice a Shopify config file.
You can swap out your own Shopify info here to use your own products.
The next thing to notice is a Vite config file.
It uses Vite as the build tool, which I really like because it's minimal, easy to use, and fast.
It also comes with Tailwind by default, which I think is an interesting choice.
I like Tailwind, but but at the same time, it's pretty polarizing, and I don't think a lot of people will actually want Tailwind.
I think plain CSS would have been a better default, but I can always just go and build my own JavaScript framework for something like that.
Now, let's take a look at the server JS file.
As you can see, a Hydrogen app is just an Express JS app with some Hydrogen middleware, and it even includes a Docker file that will run the server when you deploy your app to production.
Now, the application code itself is contained in the source directory, inside of which, you'll see a directory or components and pages.
If we open components, you'll notice that some components end in dot client while others end in dot server.
That's because the framework is leveraging server components in React.
I talked about server components in my recent Next JS video, but basically, they're just React components that can fetch data and be rendered to plain HTML on the server.
If we take a look at one, like the default SEO component, you can see here that it makes a query to the Shopify GraphQL API, but that query will happen on the server, allowing search engine bots and social media link bots to understand the content on the page.
Now, one thing that's interesting here is that there are a ton of pre built components in the framework.
That's a bit unusual because most frameworks aren't really concerned about the UI.
But Hydrogen feels more like a cross between a template and a framework.
Like, you have components for a shopping cart, which you can then go in and to Mize as needed.
Personally, I feel a bit overwhelmed looking at all these components, but it's just in developer preview, and I imagine they'll have a more minimal template in the future.
Now, let's head over to the pages directory, which works just like Next.
Js, where the structure of the pages determine the actual routes or URLs in the application.
I like this approach, and it's a lot easier than trying to configure something like React router.
What you'll notice in these pages is that they use a custom hook from Hydrogen called useShopQuery.
The hook takes a GraphQL query and will automatically fetch that data from the Shopify API.
That makes it very clear and easy to access the data that you need for the UI.
And once again, it's rendered on the server, giving you a search engine friendly web app, which is extremely important for e commerce.
Now, let's move in to my final analysis.
Overall, I think Hydrogen looks awesome, primarily because it looks very similar to Next.
Js.
I think the starting point is a little too complex, but I'm guessing they'll have multiple different templates in the future or maybe a CLI where you can pick and choose the features that you want, kind of like Nuxt JS s in the Vue ecosystem.
I think my biggest question here is why not just build this on top of Next.
Js, rather than build yet another JavaScript framework?
Did monkeys surf the net and corrupt our kids?
Oh, wait a second.
I figured it out.
Shopify will eventually have its own hosting service called Oxygen.
I'm not sure if that'll be free or paid, but it looks like they're creating a model similar to Vercel, where they provide an open source framework that funnels you into their own hosting service.
There's nothing wrong with that, just something to be aware of.
What's more interesting to me is that React server components are going to make way easier for anybody to just create a server rendered React app without needing to rely on a bunch of weird abstractions.
In the near future, You might just be able to build a simple React app with server components, then deploy it to a Node.
Js server, and that could lead to more JavaScript frameworks like Hydrogen that focus on domain specific problems.
I'm gonna go ahead and wrap things up there.
Let me know what you think about Hydrogen in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: Just when you thought there wouldn't be another JavaScript framework, along comes another JavaScript framework. This one's called Hydrogen, and it's a React based framework for building custom ecommerce sites using Shopify. It's focused on server side rendering, kind of like Next JS, but comes with a bunch of predefined components and hooks to manage the data and UI of a storefront. It was just announced yesterday, so let's put it to the test and see if it's something we would actually want to use. But first, make sure to hit the like button and subscribe.

And let me know what you think about Hydrogen in the comments. Your first question might be, what is the point of Hydrogen? We already have Next. Js and Gatsby, speed, both of which have e commerce templates. And then, Shopify itself already has a ton of e commerce themes.

So where exactly does Hydrogen come in? Well, if you've ever built an e commerce site from Scratch, you'll know that it's extremely difficult. And that's why platforms like Shopify, BigCommerce, and Squarespace are very popular. But at the same time, when you use a platform like that, Your site has a tendency to feel like a cookie cutter template, and it can be very hard to customize it enough to break out of that. The cool thing about Shopify is that it has a GraphQL API, allowing you to use it in a headless way.

So Hydrogen basically provides a streamlined way to get a server rendered front end app up and that connects to your Shopify back end with minimal effort. In other words, it provides a starting point for building fully customizable storefronts. It's kind of like the Ruby on Rails for Shopify development. And, I only say that because Shopify itself was built with Ruby on Rails. Now, let's take a look at the developer experience.

The website is awesome and I actually really like the name Hydrogen. It's not as cool as Prometheum, but still way better than arsenic. Create a new app by running npx create hydrogen app. When you open it, you'll see a project configured with a lot of stuff here. The starter template it provides you with is definitely opinionated.

You'll notice a Shopify config file. You can swap out your own Shopify info here to use your own products. The next thing to notice is a Vite config file. It uses Vite as the build tool, which I really like because it's minimal, easy to use, and fast. It also comes with Tailwind by default, which I think is an interesting choice.

I like Tailwind, but but at the same time, it's pretty polarizing, and I don't think a lot of people will actually want Tailwind. I think plain CSS would have been a better default, but I can always just go and build my own JavaScript framework for something like that. Now, let's take a look at the server JS file. As you can see, a Hydrogen app is just an Express JS app with some Hydrogen middleware, and it even includes a Docker file that will run the server when you deploy your app to production. Now, the application code itself is contained in the source directory, inside of which, you'll see a directory or components and pages.

If we open components, you'll notice that some components end in dot client while others end in dot server. That's because the framework is leveraging server components in React. I talked about server components in my recent Next JS video, but basically, they're just React components that can fetch data and be rendered to plain HTML on the server. If we take a look at one, like the default SEO component, you can see here that it makes a query to the Shopify GraphQL API, but that query will happen on the server, allowing search engine bots and social media link bots to understand the content on the page. Now, one thing that's interesting here is that there are a ton of pre built components in the framework.

That's a bit unusual because most frameworks aren't really concerned about the UI. But Hydrogen feels more like a cross between a template and a framework. Like, you have components for a shopping cart, which you can then go in and to Mize as needed. Personally, I feel a bit overwhelmed looking at all these components, but it's just in developer preview, and I imagine they'll have a more minimal template in the future. Now, let's head over to the pages directory, which works just like Next.

Js, where the structure of the pages determine the actual routes or URLs in the application. I like this approach, and it's a lot easier than trying to configure something like React router. What you'll notice in these pages is that they use a custom hook from Hydrogen called useShopQuery. The hook takes a GraphQL query and will automatically fetch that data from the Shopify API. That makes it very clear and easy to access the data that you need for the UI.

And once again, it's rendered on the server, giving you a search engine friendly web app, which is extremely important for e commerce. Now, let's move in to my final analysis. Overall, I think Hydrogen looks awesome, primarily because it looks very similar to Next. Js. I think the starting point is a little too complex, but I'm guessing they'll have multiple different templates in the future or maybe a CLI where you can pick and choose the features that you want, kind of like Nuxt JS s in the Vue ecosystem.

I think my biggest question here is why not just build this on top of Next. Js, rather than build yet another JavaScript framework? Did monkeys surf the net and corrupt our kids? Oh, wait a second. I figured it out.

Shopify will eventually have its own hosting service called Oxygen. I'm not sure if that'll be free or paid, but it looks like they're creating a model similar to Vercel, where they provide an open source framework that funnels you into their own hosting service. There's nothing wrong with that, just something to be aware of. What's more interesting to me is that React server components are going to make way easier for anybody to just create a server rendered React app without needing to rely on a bunch of weird abstractions. In the near future, You might just be able to build a simple React app with server components, then deploy it to a Node.

Js server, and that could lead to more JavaScript frameworks like Hydrogen that focus on domain specific problems. I'm gonna go ahead and wrap things up there. Let me know what you think about Hydrogen in the comments. Thanks for watching, and I will see you in the next one.
Just when you thought there wouldn't be another JavaScript framework, along comes another JavaScript framework. This one's called Hydrogen, and it's a React based framework for building custom ecommerce sites using Shopify.
It's focused on server side rendering, kind of like Next JS, but comes with a bunch of predefined components and hooks to manage the data and UI of a storefront. It was just announced yesterday, so let's put it to the test and see if it's something we would actually want to use.
graphic design
But first, make sure to hit the like button and subscribe. And let me know what you think about Hydrogen in the comments. Your first question might be, what is the point of Hydrogen? We already have Next. Js and Gatsby, speed, both of which have e commerce templates. And then, Shopify itself already has a ton of e commerce themes. So where exactly does Hydrogen come in?
Well, if you've ever built an e commerce site from Scratch, you'll know that it's extremely difficult. And that's why platforms like Shopify, BigCommerce, and Squarespace are very popular. But at the same time, when you use a platform like that, Your site has a tendency to feel like a cookie cutter template, and it can be very hard to customize it enough to break out of that.
commerce
The cool thing about Shopify is that it has a GraphQL API, allowing you to use it in a headless way. So Hydrogen basically provides a streamlined way to get a server rendered front end app up and that connects to your Shopify back end with minimal effort. In other words, it provides a starting point for building fully customizable storefronts. It's kind of like the Ruby on Rails for Shopify development. And, I only say that because Shopify itself was built with Ruby on Rails. Now, let's take a look at the developer experience. The website is awesome and I actually really like the name Hydrogen. It's not as cool as Prometheum, but still way better than arsenic.
Create a new app by running npx create hydrogen app. When you open it, you'll see a project configured with a lot of stuff here. The starter template it provides you with is definitely opinionated. You'll notice a Shopify config file. You can swap out your own Shopify info here to use your own products.
software development
software
The next thing to notice is a Vite config file. It uses Vite as the build tool, which I really like because it's minimal, easy to use, and fast. It also comes with Tailwind by default, which I think is an interesting choice. I like Tailwind, but but at the same time, it's pretty polarizing, and I don't think a lot of people will actually want Tailwind. I think plain CSS would have been a better default, but I can always just go and build my own JavaScript framework for something like that. Now, let's take a look at the server JS file. As you can see, a Hydrogen app is just an Express JS app with some Hydrogen middleware, and it even includes a Docker file that will run the server when you deploy your app to production. Now, the application code itself is contained in the source directory, inside of which, you'll see a directory or components and pages. If we open components, you'll notice that some components end in dot client while others end in dot server. That's because the framework is leveraging server components in React. I talked about server components in my recent Next JS video, but basically, they're just React components that can fetch data and be rendered to plain HTML on the server.
If we take a look at one, like the default SEO component, you can see here that it makes a query to the Shopify GraphQL API, but that query will happen on the server, allowing search engine bots and social media link bots to understand the content on the page.
google
commerce
databases
Now, one thing that's interesting here is that there are a ton of pre built components in the framework. That's a bit unusual because most frameworks aren't really concerned about the UI. But Hydrogen feels more like a cross between a template and a framework. Like, you have components for a shopping cart, which you can then go in and to Mize as needed. Personally, I feel a bit overwhelmed looking at all these components, but it's just in developer preview, and I imagine they'll have a more minimal template in the future. Now, let's head over to the pages directory, which works just like Next. Js, where the structure of the pages determine the actual routes or URLs in the application. I like this approach, and it's a lot easier than trying to configure something like React router. What you'll notice in these pages is that they use a custom hook from Hydrogen called useShopQuery.
The hook takes a GraphQL query and will automatically fetch that data from the Shopify API. That makes it very clear and easy to access the data that you need for the UI. And once again, it's rendered on the server, giving you a search engine friendly web app, which is extremely important for e commerce.
databases
commerce
Now, let's move in to my final analysis. Overall, I think Hydrogen looks awesome, primarily because it looks very similar to Next. Js. I think the starting point is a little too complex, but I'm guessing they'll have multiple different templates in the future or maybe a CLI where you can pick and choose the features that you want, kind of like Nuxt JS s in the Vue ecosystem. I think my biggest question here is why not just build this on top of Next. Js, rather than build yet another JavaScript framework? Did monkeys surf the net and corrupt our kids? Oh, wait a second. I figured it out. Shopify will eventually have its own hosting service called Oxygen. I'm not sure if that'll be free or paid, but it looks like they're creating a model similar to Vercel, where they provide an open source framework that funnels you into their own hosting service. There's nothing wrong with that, just something to be aware of. What's more interesting to me is that React server components are going to make way easier for anybody to just create a server rendered React app without needing to rely on a bunch of weird abstractions. In the near future, You might just be able to build a simple React app with server components, then deploy it to a Node. Js server, and that could lead to more JavaScript frameworks like Hydrogen that focus on domain specific problems.
I'm gonna go ahead and wrap things up there. Let me know what you think about Hydrogen in the comments. Thanks for watching, and I will see you in the next one.
fossil fuels
Just when you thought there wouldn't be another JavaScript framework, along comes another JavaScript framework. This one's called Hydrogen, and it's a React based framework for building custom ecommerce sites using Shopify. It's focused on server side rendering, kind of like Next JS, but comes with a bunch of predefined components and hooks to manage the data and UI of a storefront. It was just announced yesterday, so let's put it to the test and see if it's something we would actually want to use. But first, make sure to hit the like button and subscribe. And let me know what you think about Hydrogen in the comments. Your first question might be, what is the point of Hydrogen? We already have Next. Js and Gatsby, speed, both of which have e commerce templates. And then, Shopify itself already has a ton of e commerce themes. So where exactly does Hydrogen come in? Well, if you've ever built an e commerce site from Scratch, you'll know that it's extremely difficult. And that's why platforms like Shopify, BigCommerce, and Squarespace are very popular. But at the same time, when you use a platform like that, Your site has a tendency to feel like a cookie cutter template, and it can be very hard to customize it enough to break out of that. The cool thing about Shopify is that it has a GraphQL API, allowing you to use it in a headless way. So Hydrogen basically provides a streamlined way to get a server rendered front end app up and that connects to your Shopify back end with minimal effort. In other words, it provides a starting point for building fully customizable storefronts. It's kind of like the Ruby on Rails for Shopify development. And, I only say that because Shopify itself was built with Ruby on Rails. Now, let's take a look at the developer experience. The website is awesome and I actually really like the name Hydrogen. It's not as cool as Prometheum, but still way better than arsenic. Create a new app by running npx create hydrogen app. When you open it, you'll see a project configured with a lot of stuff here. The starter template it provides you with is definitely opinionated. You'll notice a Shopify config file. You can swap out your own Shopify info here to use your own products. The next thing to notice is a Vite config file. It uses Vite as the build tool, which I really like because it's minimal, easy to use, and fast. It also comes with Tailwind by default, which I think is an interesting choice. I like Tailwind, but but at the same time, it's pretty polarizing, and I don't think a lot of people will actually want Tailwind. I think plain CSS would have been a better default, but I can always just go and build my own JavaScript framework for something like that. Now, let's take a look at the server JS file. As you can see, a Hydrogen app is just an Express JS app with some Hydrogen middleware, and it even includes a Docker file that will run the server when you deploy your app to production. Now, the application code itself is contained in the source directory, inside of which, you'll see a directory or components and pages. If we open components, you'll notice that some components end in dot client while others end in dot server. That's because the framework is leveraging server components in React. I talked about server components in my recent Next JS video, but basically, they're just React components that can fetch data and be rendered to plain HTML on the server. If we take a look at one, like the default SEO component, you can see here that it makes a query to the Shopify GraphQL API, but that query will happen on the server, allowing search engine bots and social media link bots to understand the content on the page. Now, one thing that's interesting here is that there are a ton of pre built components in the framework. That's a bit unusual because most frameworks aren't really concerned about the UI. But Hydrogen feels more like a cross between a template and a framework. Like, you have components for a shopping cart, which you can then go in and to Mize as needed. Personally, I feel a bit overwhelmed looking at all these components, but it's just in developer preview, and I imagine they'll have a more minimal template in the future. Now, let's head over to the pages directory, which works just like Next. Js, where the structure of the pages determine the actual routes or URLs in the application. I like this approach, and it's a lot easier than trying to configure something like React router. What you'll notice in these pages is that they use a custom hook from Hydrogen called useShopQuery. The hook takes a GraphQL query and will automatically fetch that data from the Shopify API. That makes it very clear and easy to access the data that you need for the UI. And once again, it's rendered on the server, giving you a search engine friendly web app, which is extremely important for e commerce. Now, let's move in to my final analysis. Overall, I think Hydrogen looks awesome, primarily because it looks very similar to Next. Js. I think the starting point is a little too complex, but I'm guessing they'll have multiple different templates in the future or maybe a CLI where you can pick and choose the features that you want, kind of like Nuxt JS s in the Vue ecosystem. I think my biggest question here is why not just build this on top of Next. Js, rather than build yet another JavaScript framework? Did monkeys surf the net and corrupt our kids? Oh, wait a second. I figured it out. Shopify will eventually have its own hosting service called Oxygen. I'm not sure if that'll be free or paid, but it looks like they're creating a model similar to Vercel, where they provide an open source framework that funnels you into their own hosting service. There's nothing wrong with that, just something to be aware of. What's more interesting to me is that React server components are going to make way easier for anybody to just create a server rendered React app without needing to rely on a bunch of weird abstractions. In the near future, You might just be able to build a simple React app with server components, then deploy it to a Node. Js server, and that could lead to more JavaScript frameworks like Hydrogen that focus on domain specific problems. I'm gonna go ahead and wrap things up there. Let me know what you think about Hydrogen in the comments. Thanks for watching, and I will see you in the next one.
Just
just
when
when
you
you
thought
thought
there
there
wouldn't
wouldn't
be
be
another
another
JavaScript
javascript
framework,
framework
along
along
comes
comes
another
another
JavaScript
javascript
framework.
framework
This
this
one's
one's
called
called
Hydrogen,
hydrogen
and
and
it's
it's
a
a
React
react
based
based
framework
framework
for
for
building
building
custom
custom
ecommerce
ecommerce
sites
sites
using
using
Shopify.
shopify
It's
it's
focused
focused
on
on
server
server
side
side
rendering,
rendering
kind
kind
of
of
like
like
Next
next
JS,
js
but
but
comes
comes
with
with
a
a
bunch
bunch
of
of
predefined
predefined
components
components
and
and
hooks
hooks
to
to
manage
manage
the
the
data
data
and
and
UI
ui
of
of
a
a
storefront.
storefront
It
it
was
was
just
just
announced
announced
yesterday,
yesterday
so
so
let's
let's
put
put
it
it
to
to
the
the
test
test
and
and
see
see
if
if
it's
it's
something
something
we
we
would
would
actually
actually
want
want
to
to
use.
use
But
but
first,
first
make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
And
and
let
let
me
me
know
know
what
what
you
you
think
think
about
about
Hydrogen
hydrogen
in
in
the
the
comments.
comments
Your
your
first
first
question
question
might
might
be,
be
what
what
is
is
the
the
point
point
of
of
Hydrogen?
hydrogen
We
we
already
already
have
have
Next.
next
Js
js
and
and
Gatsby,
gatsby
speed,
speed
both
both
of
of
which
which
have
have
e
e
commerce
commerce
templates.
templates
And
and
then,
then
Shopify
shopify
itself
itself
already
already
has
has
a
a
ton
ton
of
of
e
e
commerce
commerce
themes.
themes
So
so
where
where
exactly
exactly
does
does
Hydrogen
hydrogen
come
come
in?
in
Well,
well
if
if
you've
you've
ever
ever
built
built
an
an
e
e
commerce
commerce
site
site
from
from
Scratch,
scratch
you'll
you'll
know
know
that
that
it's
it's
extremely
extremely
difficult.
difficult
And
and
that's
that's
why
why
platforms
platforms
like
like
Shopify,
shopify
BigCommerce,
bigcommerce
and
and
Squarespace
squarespace
are
are
very
very
popular.
popular
But
but
at
at
the
the
same
same
time,
time
when
when
you
you
use
use
a
a
platform
platform
like
like
that,
that
Your
your
site
site
has
has
a
a
tendency
tendency
to
to
feel
feel
like
like
a
a
cookie
cookie
cutter
cutter
template,
template
and
and
it
it
can
can
be
be
very
very
hard
hard
to
to
customize
customize
it
it
enough
enough
to
to
break
break
out
out
of
of
that.
that
The
the
cool
cool
thing
thing
about
about
Shopify
shopify
is
is
that
that
it
it
has
has
a
a
GraphQL
graphql
API,
api
allowing
allowing
you
you
to
to
use
use
it
it
in
in
a
a
headless
headless
way.
way
So
so
Hydrogen
hydrogen
basically
basically
provides
provides
a
a
streamlined
streamlined
way
way
to
to
get
get
a
a
server
server
rendered
rendered
front
front
end
end
app
app
up
up
and
and
that
that
connects
connects
to
to
your
your
Shopify
shopify
back
back
end
end
with
with
minimal
minimal
effort.
effort
In
in
other
other
words,
words
it
it
provides
provides
a
a
starting
starting
point
point
for
for
building
building
fully
fully
customizable
customizable
storefronts.
storefronts
It's
it's
kind
kind
of
of
like
like
the
the
Ruby
ruby
on
on
Rails
rails
for
for
Shopify
shopify
development.
development
And,
and
I
i
only
only
say
say
that
that
because
because
Shopify
shopify
itself
itself
was
was
built
built
with
with
Ruby
ruby
on
on
Rails.
rails
Now,
now
let's
let's
take
take
a
a
look
look
at
at
the
the
developer
developer
experience.
experience
The
the
website
website
is
is
awesome
awesome
and
and
I
i
actually
actually
really
really
like
like
the
the
name
name
Hydrogen.
hydrogen
It's
it's
not
not
as
as
cool
cool
as
as
Prometheum,
prometheum
but
but
still
still
way
way
better
better
than
than
arsenic.
arsenic
Create
create
a
a
new
new
app
app
by
by
running
running
npx
npx
create
create
hydrogen
hydrogen
app.
app
When
when
you
you
open
open
it,
it
you'll
you'll
see
see
a
a
project
project
configured
configured
with
with
a
a
lot
lot
of
of
stuff
stuff
here.
here
The
the
starter
starter
template
template
it
it
provides
provides
you
you
with
with
is
is
definitely
definitely
opinionated.
opinionated
You'll
you'll
notice
notice
a
a
Shopify
shopify
config
config
file.
file
You
you
can
can
swap
swap
out
out
your
your
own
own
Shopify
shopify
info
info
here
here
to
to
use
use
your
your
own
own
products.
products
The
the
next
next
thing
thing
to
to
notice
notice
is
is
a
a
Vite
vite
config
config
file.
file
It
it
uses
uses
Vite
vite
as
as
the
the
build
build
tool,
tool
which
which
I
i
really
really
like
like
because
because
it's
it's
minimal,
minimal
easy
easy
to
to
use,
use
and
and
fast.
fast
It
it
also
also
comes
comes
with
with
Tailwind
tailwind
by
by
default,
default
which
which
I
i
think
think
is
is
an
an
interesting
interesting
choice.
choice
I
i
like
like
Tailwind,
tailwind
but
but
but
but
at
at
the
the
same
same
time,
time
it's
it's
pretty
pretty
polarizing,
polarizing
and
and
I
i
don't
don't
think
think
a
a
lot
lot
of
of
people
people
will
will
actually
actually
want
want
Tailwind.
tailwind
I
i
think
think
plain
plain
CSS
css
would
would
have
have
been
been
a
a
better
better
default,
default
but
but
I
i
can
can
always
always
just
just
go
go
and
and
build
build
my
my
own
own
JavaScript
javascript
framework
framework
for
for
something
something
like
like
that.
that
Now,
now
let's
let's
take
take
a
a
look
look
at
at
the
the
server
server
JS
js
file.
file
As
as
you
you
can
can
see,
see
a
a
Hydrogen
hydrogen
app
app
is
is
just
just
an
an
Express
express
JS
js
app
app
with
with
some
some
Hydrogen
hydrogen
middleware,
middleware
and
and
it
it
even
even
includes
includes
a
a
Docker
docker
file
file
that
that
will
will
run
run
the
the
server
server
when
when
you
you
deploy
deploy
your
your
app
app
to
to
production.
production
Now,
now
the
the
application
application
code
code
itself
itself
is
is
contained
contained
in
in
the
the
source
source
directory,
directory
inside
inside
of
of
which,
which
you'll
you'll
see
see
a
a
directory
directory
or
or
components
components
and
and
pages.
pages
If
if
we
we
open
open
components,
components
you'll
you'll
notice
notice
that
that
some
some
components
components
end
end
in
in
dot
dot
client
client
while
while
others
others
end
end
in
in
dot
dot
server.
server
That's
that's
because
because
the
the
framework
framework
is
is
leveraging
leveraging
server
server
components
components
in
in
React.
react
I
i
talked
talked
about
about
server
server
components
components
in
in
my
my
recent
recent
Next
next
JS
js
video,
video
but
but
basically,
basically
they're
they're
just
just
React
react
components
components
that
that
can
can
fetch
fetch
data
data
and
and
be
be
rendered
rendered
to
to
plain
plain
HTML
html
on
on
the
the
server.
server
If
if
we
we
take
take
a
a
look
look
at
at
one,
one
like
like
the
the
default
default
SEO
seo
component,
component
you
you
can
can
see
see
here
here
that
that
it
it
makes
makes
a
a
query
query
to
to
the
the
Shopify
shopify
GraphQL
graphql
API,
api
but
but
that
that
query
query
will
will
happen
happen
on
on
the
the
server,
server
allowing
allowing
search
search
engine
engine
bots
bots
and
and
social
social
media
media
link
link
bots
bots
to
to
understand
understand
the
the
content
content
on
on
the
the
page.
page
Now,
now
one
one
thing
thing
that's
that's
interesting
interesting
here
here
is
is
that
that
there
there
are
are
a
a
ton
ton
of
of
pre
pre
built
built
components
components
in
in
the
the
framework.
framework
That's
that's
a
a
bit
bit
unusual
unusual
because
because
most
most
frameworks
frameworks
aren't
aren't
really
really
concerned
concerned
about
about
the
the
UI.
ui
But
but
Hydrogen
hydrogen
feels
feels
more
more
like
like
a
a
cross
cross
between
between
a
a
template
template
and
and
a
a
framework.
framework
Like,
like
you
you
have
have
components
components
for
for
a
a
shopping
shopping
cart,
cart
which
which
you
you
can
can
then
then
go
go
in
in
and
and
to
to
Mize
mize
as
as
needed.
needed
Personally,
personally
I
i
feel
feel
a
a
bit
bit
overwhelmed
overwhelmed
looking
looking
at
at
all
all
these
these
components,
components
but
but
it's
it's
just
just
in
in
developer
developer
preview,
preview
and
and
I
i
imagine
imagine
they'll
they'll
have
have
a
a
more
more
minimal
minimal
template
template
in
in
the
the
future.
future
Now,
now
let's
let's
head
head
over
over
to
to
the
the
pages
pages
directory,
directory
which
which
works
works
just
just
like
like
Next.
next
Js,
js
where
where
the
the
structure
structure
of
of
the
the
pages
pages
determine
determine
the
the
actual
actual
routes
routes
or
or
URLs
urls
in
in
the
the
application.
application
I
i
like
like
this
this
approach,
approach
and
and
it's
it's
a
a
lot
lot
easier
easier
than
than
trying
trying
to
to
configure
configure
something
something
like
like
React
react
router.
router
What
what
you'll
you'll
notice
notice
in
in
these
these
pages
pages
is
is
that
that
they
they
use
use
a
a
custom
custom
hook
hook
from
from
Hydrogen
hydrogen
called
called
useShopQuery.
useshopquery
The
the
hook
hook
takes
takes
a
a
GraphQL
graphql
query
query
and
and
will
will
automatically
automatically
fetch
fetch
that
that
data
data
from
from
the
the
Shopify
shopify
API.
api
That
that
makes
makes
it
it
very
very
clear
clear
and
and
easy
easy
to
to
access
access
the
the
data
data
that
that
you
you
need
need
for
for
the
the
UI.
ui
And
and
once
once
again,
again
it's
it's
rendered
rendered
on
on
the
the
server,
server
giving
giving
you
you
a
a
search
search
engine
engine
friendly
friendly
web
web
app,
app
which
which
is
is
extremely
extremely
important
important
for
for
e
e
commerce.
commerce
Now,
now
let's
let's
move
move
in
in
to
to
my
my
final
final
analysis.
analysis
Overall,
overall
I
i
think
think
Hydrogen
hydrogen
looks
looks
awesome,
awesome
primarily
primarily
because
because
it
it
looks
looks
very
very
similar
similar
to
to
Next.
next
Js.
js
I
i
think
think
the
the
starting
starting
point
point
is
is
a
a
little
little
too
too
complex,
complex
but
but
I'm
i'm
guessing
guessing
they'll
they'll
have
have
multiple
multiple
different
different
templates
templates
in
in
the
the
future
future
or
or
maybe
maybe
a
a
CLI
cli
where
where
you
you
can
can
pick
pick
and
and
choose
choose
the
the
features
features
that
that
you
you
want,
want
kind
kind
of
of
like
like
Nuxt
nuxt
JS
js
s
s
in
in
the
the
Vue
vue
ecosystem.
ecosystem
I
i
think
think
my
my
biggest
biggest
question
question
here
here
is
is
why
why
not
not
just
just
build
build
this
this
on
on
top
top
of
of
Next.
next
Js,
js
rather
rather
than
than
build
build
yet
yet
another
another
JavaScript
javascript
framework?
framework
Did
did
monkeys
monkeys
surf
surf
the
the
net
net
and
and
corrupt
corrupt
our
our
kids?
kids
Oh,
oh
wait
wait
a
a
second.
second
I
i
figured
figured
it
it
out.
out
Shopify
shopify
will
will
eventually
eventually
have
have
its
its
own
own
hosting
hosting
service
service
called
called
Oxygen.
oxygen
I'm
i'm
not
not
sure
sure
if
if
that'll
that'll
be
be
free
free
or
or
paid,
paid
but
but
it
it
looks
looks
like
like
they're
they're
creating
creating
a
a
model
model
similar
similar
to
to
Vercel,
vercel
where
where
they
they
provide
provide
an
an
open
open
source
source
framework
framework
that
that
funnels
funnels
you
you
into
into
their
their
own
own
hosting
hosting
service.
service
There's
there's
nothing
nothing
wrong
wrong
with
with
that,
that
just
just
something
something
to
to
be
be
aware
aware
of.
of
What's
what's
more
more
interesting
interesting
to
to
me
me
is
is
that
that
React
react
server
server
components
components
are
are
going
going
to
to
make
make
way
way
easier
easier
for
for
anybody
anybody
to
to
just
just
create
create
a
a
server
server
rendered
rendered
React
react
app
app
without
without
needing
needing
to
to
rely
rely
on
on
a
a
bunch
bunch
of
of
weird
weird
abstractions.
abstractions
In
in
the
the
near
near
future,
future
You
you
might
might
just
just
be
be
able
able
to
to
build
build
a
a
simple
simple
React
react
app
app
with
with
server
server
components,
components
then
then
deploy
deploy
it
it
to
to
a
a
Node.
node
Js
js
server,
server
and
and
that
that
could
could
lead
lead
to
to
more
more
JavaScript
javascript
frameworks
frameworks
like
like
Hydrogen
hydrogen
that
that
focus
focus
on
on
domain
domain
specific
specific
problems.
problems
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Let
let
me
me
know
know
what
what
you
you
think
think
about
about
Hydrogen
hydrogen
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker discusses the use of Hydrogen as a framework for building ecommerce sites using Shopify. The framework provides a streamlined way to create custom ecommerce sites, and it is easy to customize. The developers can use the framework in a headless way, and the website is a starting point for building fully customizable storefronts. The developers can also use Hydrogen to create a searchable web app without needing to rely on any manual actions.
Shopify built a JS Framework // Hydrogen First Look
Just when you thought there wouldn't be another JavaScript framework, along comes another JavaScript framework. This one's called Hydrogen, and it's a React based framework for building custom ecommerce sites using Shopify. It's focused on server side rendering, kind of like Next JS, but comes with a bunch of predefined components and hooks to manage the data and UI of a storefront. It was just announced yesterday, so let's put it to the test and see if it's something we would actually want to use. But first, make sure to hit the like button and subscribe. And let me know what you think about Hydrogen in the comments. Your first question might be, what is the point of Hydrogen? We already have Next. Js and Gatsby, speed, both of which have e commerce templates. And then, Shopify itself already has a ton of e commerce themes. So where exactly does Hydrogen come in? Well, if you've ever built an e commerce site from Scratch, you'll know that it's extremely difficult. And that's why platforms like Shopify, BigCommerce, and Squarespace are very popular. But at the same time, when you use a platform like that, Your site has a tendency to feel like a cookie cutter template, and it can be very hard to customize it enough to break out of that. The cool thing about Shopify is that it has a GraphQL API, allowing you to use it in a headless way. So Hydrogen basically provides a streamlined way to get a server rendered front end app up and that connects to your Shopify back end with minimal effort. In other words, it provides a starting point for building fully customizable storefronts. It's kind of like the Ruby on Rails for Shopify development. And, I only say that because Shopify itself was built with Ruby on Rails. Now, let's take a look at the developer experience. The website is awesome and I actually really like the name Hydrogen. It's not as cool as Prometheum, but still way better than arsenic. Create a new app by running npx create hydrogen app. When you open it, you'll see a project configured with a lot of stuff here. The starter template it provides you with is definitely opinionated. You'll notice a Shopify config file. You can swap out your own Shopify info here to use your own products. The next thing to notice is a Vite config file. It uses Vite as the build tool, which I really like because it's minimal, easy to use, and fast. It also comes with Tailwind by default, which I think is an interesting choice. I like Tailwind, but but at the same time, it's pretty polarizing, and I don't think a lot of people will actually want Tailwind. I think plain CSS would have been a better default, but I can always just go and build my own JavaScript framework for something like that. Now, let's take a look at the server JS file. As you can see, a Hydrogen app is just an Express JS app with some Hydrogen middleware, and it even includes a Docker file that will run the server when you deploy your app to production. Now, the application code itself is contained in the source directory, inside of which, you'll see a directory or components and pages. If we open components, you'll notice that some components end in dot client while others end in dot server. That's because the framework is leveraging server components in React. I talked about server components in my recent Next JS video, but basically, they're just React components that can fetch data and be rendered to plain HTML on the server. If we take a look at one, like the default SEO component, you can see here that it makes a query to the Shopify GraphQL API, but that query will happen on the server, allowing search engine bots and social media link bots to understand the content on the page. Now, one thing that's interesting here is that there are a ton of pre built components in the framework. That's a bit unusual because most frameworks aren't really concerned about the UI. But Hydrogen feels more like a cross between a template and a framework. Like, you have components for a shopping cart, which you can then go in and to Mize as needed. Personally, I feel a bit overwhelmed looking at all these components, but it's just in developer preview, and I imagine they'll have a more minimal template in the future. Now, let's head over to the pages directory, which works just like Next. Js, where the structure of the pages determine the actual routes or URLs in the application. I like this approach, and it's a lot easier than trying to configure something like React router. What you'll notice in these pages is that they use a custom hook from Hydrogen called useShopQuery. The hook takes a GraphQL query and will automatically fetch that data from the Shopify API. That makes it very clear and easy to access the data that you need for the UI. And once again, it's rendered on the server, giving you a search engine friendly web app, which is extremely important for e commerce. Now, let's move in to my final analysis. Overall, I think Hydrogen looks awesome, primarily because it looks very similar to Next. Js. I think the starting point is a little too complex, but I'm guessing they'll have multiple different templates in the future or maybe a CLI where you can pick and choose the features that you want, kind of like Nuxt JS s in the Vue ecosystem. I think my biggest question here is why not just build this on top of Next. Js, rather than build yet another JavaScript framework? Did monkeys surf the net and corrupt our kids? Oh, wait a second. I figured it out. Shopify will eventually have its own hosting service called Oxygen. I'm not sure if that'll be free or paid, but it looks like they're creating a model similar to Vercel, where they provide an open source framework that funnels you into their own hosting service. There's nothing wrong with that, just something to be aware of. What's more interesting to me is that React server components are going to make way easier for anybody to just create a server rendered React app without needing to rely on a bunch of weird abstractions. In the near future, You might just be able to build a simple React app with server components, then deploy it to a Node. Js server, and that could lead to more JavaScript frameworks like Hydrogen that focus on domain specific problems. I'm gonna go ahead and wrap things up there. Let me know what you think about Hydrogen in the comments. Thanks for watching, and I will see you in the next one.
In this video, the speaker discusses the use of Hydrogen as a framework for building ecommerce sites using Shopify. The framework provides a streamlined way to create custom ecommerce sites, and it is easy to customize. The developers can use the framework in a headless way, and the website is a starting point for building fully customizable storefronts. The developers can also use Hydrogen to create a searchable web app without needing to rely on any manual actions.