Fireship
내용
[subtitle-meta] lang=en auto=True
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 e-commerce
sites using shopify it's focused on
server-side rendering kind of like next
js but comes with a bunch of pre-defined
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 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 frontend app up and
running that connects to your shopify
backend 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 v
config file it uses beat 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 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
expressjs 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 for 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 customize 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 use shop query 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 ecommerce now let's move
into 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 nuxjs and 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
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 versailles 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 it 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 going to 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
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.160 --> 00:00:01.270 align:start position:0% just<00:00:00.399><c> when</c><00:00:00.560><c> you</c><00:00:00.640><c> thought</c><00:00:00.799><c> there</c><00:00:00.960><c> wouldn't</c><00:00:01.199><c> be</c> 00:00:01.270 --> 00:00:01.280 align:start position:0% just when you thought there wouldn't be 00:00:01.280 --> 00:00:03.429 align:start position:0% just when you thought there wouldn't be another<00:00:01.599><c> javascript</c><00:00:02.159><c> framework</c><00:00:02.720><c> along</c><00:00:03.120><c> comes</c> 00:00:03.429 --> 00:00:03.439 align:start position:0% another javascript framework along comes 00:00:03.439 --> 00:00:05.190 align:start position:0% another javascript framework along comes another<00:00:03.840><c> javascript</c><00:00:04.400><c> framework</c><00:00:04.880><c> this</c><00:00:04.960><c> one's</c> 00:00:05.190 --> 00:00:05.200 align:start position:0% another javascript framework this one's 00:00:05.200 --> 00:00:07.110 align:start position:0% another javascript framework this one's called<00:00:05.440><c> hydrogen</c><00:00:06.080><c> and</c><00:00:06.240><c> it's</c><00:00:06.399><c> a</c><00:00:06.480><c> react-based</c> 00:00:07.110 --> 00:00:07.120 align:start position:0% called hydrogen and it's a react-based 00:00:07.120 --> 00:00:09.190 align:start position:0% called hydrogen and it's a react-based framework<00:00:07.600><c> for</c><00:00:07.839><c> building</c><00:00:08.160><c> custom</c><00:00:08.639><c> e-commerce</c> 00:00:09.190 --> 00:00:09.200 align:start position:0% framework for building custom e-commerce 00:00:09.200 --> 00:00:11.270 align:start position:0% framework for building custom e-commerce sites<00:00:09.519><c> using</c><00:00:09.840><c> shopify</c><00:00:10.559><c> it's</c><00:00:10.719><c> focused</c><00:00:11.120><c> on</c> 00:00:11.270 --> 00:00:11.280 align:start position:0% sites using shopify it's focused on 00:00:11.280 --> 00:00:13.030 align:start position:0% sites using shopify it's focused on server-side<00:00:11.840><c> rendering</c><00:00:12.320><c> kind</c><00:00:12.480><c> of</c><00:00:12.559><c> like</c><00:00:12.719><c> next</c> 00:00:13.030 --> 00:00:13.040 align:start position:0% server-side rendering kind of like next 00:00:13.040 --> 00:00:15.190 align:start position:0% server-side rendering kind of like next js<00:00:13.599><c> but</c><00:00:13.840><c> comes</c><00:00:14.080><c> with</c><00:00:14.240><c> a</c><00:00:14.320><c> bunch</c><00:00:14.559><c> of</c><00:00:14.639><c> pre-defined</c> 00:00:15.190 --> 00:00:15.200 align:start position:0% js but comes with a bunch of pre-defined 00:00:15.200 --> 00:00:17.269 align:start position:0% js but comes with a bunch of pre-defined components<00:00:15.759><c> and</c><00:00:15.920><c> hooks</c><00:00:16.320><c> to</c><00:00:16.480><c> manage</c><00:00:16.800><c> the</c><00:00:16.960><c> data</c> 00:00:17.269 --> 00:00:17.279 align:start position:0% components and hooks to manage the data 00:00:17.279 --> 00:00:19.269 align:start position:0% components and hooks to manage the data and<00:00:17.520><c> ui</c><00:00:17.920><c> of</c><00:00:18.080><c> a</c><00:00:18.240><c> storefront</c><00:00:18.880><c> it</c><00:00:18.960><c> was</c><00:00:19.119><c> just</c> 00:00:19.269 --> 00:00:19.279 align:start position:0% and ui of a storefront it was just 00:00:19.279 --> 00:00:20.950 align:start position:0% and ui of a storefront it was just announced<00:00:19.680><c> yesterday</c><00:00:20.160><c> so</c><00:00:20.320><c> let's</c><00:00:20.560><c> put</c><00:00:20.720><c> it</c><00:00:20.800><c> to</c> 00:00:20.950 --> 00:00:20.960 align:start position:0% announced yesterday so let's put it to 00:00:20.960 --> 00:00:22.390 align:start position:0% announced yesterday so let's put it to the<00:00:21.039><c> test</c><00:00:21.359><c> and</c><00:00:21.600><c> see</c><00:00:21.760><c> if</c><00:00:21.920><c> it's</c><00:00:22.000><c> something</c><00:00:22.240><c> we</c> 00:00:22.390 --> 00:00:22.400 align:start position:0% the test and see if it's something we 00:00:22.400 --> 00:00:24.470 align:start position:0% the test and see if it's something we would<00:00:22.640><c> actually</c><00:00:22.960><c> want</c><00:00:23.199><c> to</c><00:00:23.359><c> use</c><00:00:23.920><c> but</c><00:00:24.080><c> first</c> 00:00:24.470 --> 00:00:24.480 align:start position:0% would actually want to use but first 00:00:24.480 --> 00:00:25.990 align:start position:0% would actually want to use but first make<00:00:24.640><c> sure</c><00:00:24.800><c> to</c><00:00:25.039><c> hit</c><00:00:25.199><c> the</c><00:00:25.279><c> like</c><00:00:25.519><c> button</c><00:00:25.840><c> and</c> 00:00:25.990 --> 00:00:26.000 align:start position:0% make sure to hit the like button and 00:00:26.000 --> 00:00:27.509 align:start position:0% make sure to hit the like button and subscribe<00:00:26.560><c> and</c><00:00:26.720><c> let</c><00:00:26.880><c> me</c><00:00:26.960><c> know</c><00:00:27.119><c> what</c><00:00:27.199><c> you</c><00:00:27.359><c> think</c> 00:00:27.509 --> 00:00:27.519 align:start position:0% subscribe and let me know what you think 00:00:27.519 --> 00:00:29.189 align:start position:0% subscribe and let me know what you think about<00:00:27.680><c> hydrogen</c><00:00:28.240><c> in</c><00:00:28.320><c> the</c><00:00:28.480><c> comments</c><00:00:28.960><c> your</c> 00:00:29.189 --> 00:00:29.199 align:start position:0% about hydrogen in the comments your 00:00:29.199 --> 00:00:30.710 align:start position:0% about hydrogen in the comments your first<00:00:29.359><c> question</c><00:00:29.679><c> might</c><00:00:29.920><c> be</c><00:00:30.240><c> what</c><00:00:30.400><c> is</c><00:00:30.560><c> the</c> 00:00:30.710 --> 00:00:30.720 align:start position:0% first question might be what is the 00:00:30.720 --> 00:00:32.549 align:start position:0% first question might be what is the point<00:00:30.960><c> of</c><00:00:31.039><c> hydrogen</c><00:00:31.679><c> we</c><00:00:31.840><c> already</c><00:00:32.079><c> have</c><00:00:32.320><c> next</c> 00:00:32.549 --> 00:00:32.559 align:start position:0% point of hydrogen we already have next 00:00:32.559 --> 00:00:34.709 align:start position:0% point of hydrogen we already have next js<00:00:33.040><c> and</c><00:00:33.280><c> gatsby</c><00:00:33.920><c> both</c><00:00:34.160><c> of</c><00:00:34.239><c> which</c><00:00:34.480><c> have</c> 00:00:34.709 --> 00:00:34.719 align:start position:0% js and gatsby both of which have 00:00:34.719 --> 00:00:36.790 align:start position:0% js and gatsby both of which have e-commerce<00:00:35.280><c> templates</c><00:00:35.920><c> and</c><00:00:36.000><c> then</c><00:00:36.239><c> shopify</c> 00:00:36.790 --> 00:00:36.800 align:start position:0% e-commerce templates and then shopify 00:00:36.800 --> 00:00:38.790 align:start position:0% e-commerce templates and then shopify itself<00:00:37.280><c> already</c><00:00:37.520><c> has</c><00:00:37.840><c> a</c><00:00:37.920><c> ton</c><00:00:38.079><c> of</c><00:00:38.239><c> e-commerce</c> 00:00:38.790 --> 00:00:38.800 align:start position:0% itself already has a ton of e-commerce 00:00:38.800 --> 00:00:40.950 align:start position:0% itself already has a ton of e-commerce themes<00:00:39.360><c> so</c><00:00:39.520><c> where</c><00:00:39.840><c> exactly</c><00:00:40.239><c> does</c><00:00:40.480><c> hydrogen</c> 00:00:40.950 --> 00:00:40.960 align:start position:0% themes so where exactly does hydrogen 00:00:40.960 --> 00:00:42.630 align:start position:0% themes so where exactly does hydrogen come<00:00:41.200><c> in</c><00:00:41.520><c> well</c><00:00:41.760><c> if</c><00:00:41.920><c> you've</c><00:00:42.079><c> ever</c><00:00:42.239><c> built</c><00:00:42.480><c> an</c> 00:00:42.630 --> 00:00:42.640 align:start position:0% come in well if you've ever built an 00:00:42.640 --> 00:00:44.310 align:start position:0% come in well if you've ever built an e-commerce<00:00:43.040><c> site</c><00:00:43.280><c> from</c><00:00:43.440><c> scratch</c><00:00:44.000><c> you'll</c><00:00:44.160><c> know</c> 00:00:44.310 --> 00:00:44.320 align:start position:0% e-commerce site from scratch you'll know 00:00:44.320 --> 00:00:45.990 align:start position:0% e-commerce site from scratch you'll know that<00:00:44.480><c> it's</c><00:00:44.719><c> extremely</c><00:00:45.120><c> difficult</c><00:00:45.680><c> and</c><00:00:45.760><c> that's</c> 00:00:45.990 --> 00:00:46.000 align:start position:0% that it's extremely difficult and that's 00:00:46.000 --> 00:00:48.310 align:start position:0% that it's extremely difficult and that's why<00:00:46.239><c> platforms</c><00:00:46.719><c> like</c><00:00:46.960><c> shopify</c><00:00:47.600><c> bigcommerce</c> 00:00:48.310 --> 00:00:48.320 align:start position:0% why platforms like shopify bigcommerce 00:00:48.320 --> 00:00:50.470 align:start position:0% why platforms like shopify bigcommerce and<00:00:48.480><c> squarespace</c><00:00:49.120><c> are</c><00:00:49.280><c> very</c><00:00:49.520><c> popular</c><00:00:50.160><c> but</c><00:00:50.399><c> at</c> 00:00:50.470 --> 00:00:50.480 align:start position:0% and squarespace are very popular but at 00:00:50.480 --> 00:00:52.229 align:start position:0% and squarespace are very popular but at the<00:00:50.559><c> same</c><00:00:50.800><c> time</c><00:00:51.199><c> when</c><00:00:51.360><c> you</c><00:00:51.520><c> use</c><00:00:51.680><c> a</c><00:00:51.840><c> platform</c> 00:00:52.229 --> 00:00:52.239 align:start position:0% the same time when you use a platform 00:00:52.239 --> 00:00:54.310 align:start position:0% the same time when you use a platform like<00:00:52.399><c> that</c><00:00:52.719><c> your</c><00:00:53.039><c> site</c><00:00:53.280><c> has</c><00:00:53.440><c> a</c><00:00:53.600><c> tendency</c><00:00:54.079><c> to</c> 00:00:54.310 --> 00:00:54.320 align:start position:0% like that your site has a tendency to 00:00:54.320 --> 00:00:55.990 align:start position:0% like that your site has a tendency to feel<00:00:54.480><c> like</c><00:00:54.719><c> a</c><00:00:54.800><c> cookie</c><00:00:55.120><c> cutter</c><00:00:55.360><c> template</c><00:00:55.840><c> and</c> 00:00:55.990 --> 00:00:56.000 align:start position:0% feel like a cookie cutter template and 00:00:56.000 --> 00:00:57.510 align:start position:0% feel like a cookie cutter template and it<00:00:56.079><c> can</c><00:00:56.239><c> be</c><00:00:56.320><c> very</c><00:00:56.559><c> hard</c><00:00:56.800><c> to</c><00:00:56.960><c> customize</c><00:00:57.440><c> it</c> 00:00:57.510 --> 00:00:57.520 align:start position:0% it can be very hard to customize it 00:00:57.520 --> 00:00:59.029 align:start position:0% it can be very hard to customize it enough<00:00:57.760><c> to</c><00:00:57.920><c> break</c><00:00:58.239><c> out</c><00:00:58.320><c> of</c><00:00:58.399><c> that</c><00:00:58.719><c> the</c><00:00:58.879><c> cool</c> 00:00:59.029 --> 00:00:59.039 align:start position:0% enough to break out of that the cool 00:00:59.039 --> 00:01:00.869 align:start position:0% enough to break out of that the cool thing<00:00:59.199><c> about</c><00:00:59.440><c> shopify</c><00:01:00.079><c> is</c><00:01:00.239><c> that</c><00:01:00.399><c> it</c><00:01:00.480><c> has</c><00:01:00.719><c> a</c> 00:01:00.869 --> 00:01:00.879 align:start position:0% thing about shopify is that it has a 00:01:00.879 --> 00:01:03.349 align:start position:0% thing about shopify is that it has a graphql<00:01:01.520><c> api</c><00:01:02.160><c> allowing</c><00:01:02.559><c> you</c><00:01:02.640><c> to</c><00:01:02.800><c> use</c><00:01:03.039><c> it</c><00:01:03.120><c> in</c><00:01:03.280><c> a</c> 00:01:03.349 --> 00:01:03.359 align:start position:0% graphql api allowing you to use it in a 00:01:03.359 --> 00:01:05.509 align:start position:0% graphql api allowing you to use it in a headless<00:01:03.840><c> way</c><00:01:04.159><c> so</c><00:01:04.400><c> hydrogen</c><00:01:05.040><c> basically</c> 00:01:05.509 --> 00:01:05.519 align:start position:0% headless way so hydrogen basically 00:01:05.519 --> 00:01:07.510 align:start position:0% headless way so hydrogen basically provides<00:01:05.920><c> a</c><00:01:06.080><c> streamlined</c><00:01:06.640><c> way</c><00:01:07.040><c> to</c><00:01:07.200><c> get</c><00:01:07.360><c> a</c> 00:01:07.510 --> 00:01:07.520 align:start position:0% provides a streamlined way to get a 00:01:07.520 --> 00:01:08.950 align:start position:0% provides a streamlined way to get a server<00:01:07.840><c> rendered</c><00:01:08.159><c> frontend</c><00:01:08.560><c> app</c><00:01:08.720><c> up</c><00:01:08.880><c> and</c> 00:01:08.950 --> 00:01:08.960 align:start position:0% server rendered frontend app up and 00:01:08.960 --> 00:01:10.710 align:start position:0% server rendered frontend app up and running<00:01:09.439><c> that</c><00:01:09.600><c> connects</c><00:01:09.920><c> to</c><00:01:10.080><c> your</c><00:01:10.240><c> shopify</c> 00:01:10.710 --> 00:01:10.720 align:start position:0% running that connects to your shopify 00:01:10.720 --> 00:01:12.550 align:start position:0% running that connects to your shopify backend<00:01:11.200><c> with</c><00:01:11.360><c> minimal</c><00:01:11.760><c> effort</c><00:01:12.240><c> in</c><00:01:12.400><c> other</c> 00:01:12.550 --> 00:01:12.560 align:start position:0% backend with minimal effort in other 00:01:12.560 --> 00:01:14.390 align:start position:0% backend with minimal effort in other words<00:01:12.880><c> it</c><00:01:12.960><c> provides</c><00:01:13.360><c> a</c><00:01:13.520><c> starting</c><00:01:13.920><c> point</c><00:01:14.159><c> for</c> 00:01:14.390 --> 00:01:14.400 align:start position:0% words it provides a starting point for 00:01:14.400 --> 00:01:16.469 align:start position:0% words it provides a starting point for building<00:01:14.799><c> fully</c><00:01:15.119><c> customizable</c><00:01:15.759><c> storefronts</c> 00:01:16.469 --> 00:01:16.479 align:start position:0% building fully customizable storefronts 00:01:16.479 --> 00:01:18.310 align:start position:0% building fully customizable storefronts it's<00:01:16.640><c> kind</c><00:01:16.799><c> of</c><00:01:16.880><c> like</c><00:01:17.040><c> the</c><00:01:17.200><c> ruby</c><00:01:17.520><c> on</c><00:01:17.680><c> rails</c><00:01:18.080><c> for</c> 00:01:18.310 --> 00:01:18.320 align:start position:0% it's kind of like the ruby on rails for 00:01:18.320 --> 00:01:20.310 align:start position:0% it's kind of like the ruby on rails for shopify<00:01:18.799><c> development</c><00:01:19.360><c> and</c><00:01:19.520><c> i</c><00:01:19.680><c> only</c><00:01:19.920><c> say</c><00:01:20.080><c> that</c> 00:01:20.310 --> 00:01:20.320 align:start position:0% shopify development and i only say that 00:01:20.320 --> 00:01:22.230 align:start position:0% shopify development and i only say that because<00:01:20.560><c> shopify</c><00:01:21.119><c> itself</c><00:01:21.520><c> was</c><00:01:21.840><c> built</c><00:01:22.080><c> with</c> 00:01:22.230 --> 00:01:22.240 align:start position:0% because shopify itself was built with 00:01:22.240 --> 00:01:24.230 align:start position:0% because shopify itself was built with ruby<00:01:22.560><c> on</c><00:01:22.720><c> rails</c><00:01:23.200><c> now</c><00:01:23.360><c> let's</c><00:01:23.520><c> take</c><00:01:23.680><c> a</c><00:01:23.759><c> look</c><00:01:24.080><c> at</c> 00:01:24.230 --> 00:01:24.240 align:start position:0% ruby on rails now let's take a look at 00:01:24.240 --> 00:01:26.149 align:start position:0% ruby on rails now let's take a look at the<00:01:24.320><c> developer</c><00:01:24.799><c> experience</c><00:01:25.439><c> the</c><00:01:25.600><c> website</c><00:01:26.000><c> is</c> 00:01:26.149 --> 00:01:26.159 align:start position:0% the developer experience the website is 00:01:26.159 --> 00:01:27.590 align:start position:0% the developer experience the website is awesome<00:01:26.560><c> and</c><00:01:26.720><c> i</c><00:01:26.880><c> actually</c><00:01:27.119><c> really</c><00:01:27.360><c> like</c><00:01:27.520><c> the</c> 00:01:27.590 --> 00:01:27.600 align:start position:0% awesome and i actually really like the 00:01:27.600 --> 00:01:29.109 align:start position:0% awesome and i actually really like the name<00:01:27.759><c> hydrogen</c><00:01:28.400><c> it's</c><00:01:28.560><c> not</c><00:01:28.720><c> as</c><00:01:28.799><c> cool</c><00:01:28.960><c> as</c> 00:01:29.109 --> 00:01:29.119 align:start position:0% name hydrogen it's not as cool as 00:01:29.119 --> 00:01:30.950 align:start position:0% name hydrogen it's not as cool as prometheum<00:01:29.759><c> but</c><00:01:30.079><c> still</c><00:01:30.240><c> way</c><00:01:30.400><c> better</c><00:01:30.640><c> than</c> 00:01:30.950 --> 00:01:30.960 align:start position:0% prometheum but still way better than 00:01:30.960 --> 00:01:33.510 align:start position:0% prometheum but still way better than arsenic<00:01:31.600><c> create</c><00:01:31.840><c> a</c><00:01:31.920><c> new</c><00:01:32.079><c> app</c><00:01:32.320><c> by</c><00:01:32.479><c> running</c><00:01:32.880><c> npx</c> 00:01:33.510 --> 00:01:33.520 align:start position:0% arsenic create a new app by running npx 00:01:33.520 --> 00:01:35.350 align:start position:0% arsenic create a new app by running npx create<00:01:33.840><c> hydrogen</c><00:01:34.400><c> app</c><00:01:34.640><c> when</c><00:01:34.799><c> you</c><00:01:34.960><c> open</c><00:01:35.200><c> it</c> 00:01:35.350 --> 00:01:35.360 align:start position:0% create hydrogen app when you open it 00:01:35.360 --> 00:01:37.270 align:start position:0% create hydrogen app when you open it you'll<00:01:35.600><c> see</c><00:01:35.759><c> a</c><00:01:35.920><c> project</c><00:01:36.400><c> configured</c><00:01:36.880><c> with</c><00:01:37.119><c> a</c> 00:01:37.270 --> 00:01:37.280 align:start position:0% you'll see a project configured with a 00:01:37.280 --> 00:01:38.950 align:start position:0% you'll see a project configured with a lot<00:01:37.439><c> of</c><00:01:37.520><c> stuff</c><00:01:37.840><c> here</c><00:01:38.079><c> the</c><00:01:38.240><c> starter</c><00:01:38.560><c> template</c> 00:01:38.950 --> 00:01:38.960 align:start position:0% lot of stuff here the starter template 00:01:38.960 --> 00:01:40.390 align:start position:0% lot of stuff here the starter template it<00:01:39.040><c> provides</c><00:01:39.360><c> you</c><00:01:39.439><c> with</c><00:01:39.759><c> is</c><00:01:40.000><c> definitely</c> 00:01:40.390 --> 00:01:40.400 align:start position:0% it provides you with is definitely 00:01:40.400 --> 00:01:42.230 align:start position:0% it provides you with is definitely opinionated<00:01:41.200><c> you'll</c><00:01:41.360><c> notice</c><00:01:41.680><c> a</c><00:01:41.759><c> shopify</c> 00:01:42.230 --> 00:01:42.240 align:start position:0% opinionated you'll notice a shopify 00:01:42.240 --> 00:01:44.389 align:start position:0% opinionated you'll notice a shopify config<00:01:42.640><c> file</c><00:01:43.119><c> you</c><00:01:43.280><c> can</c><00:01:43.439><c> swap</c><00:01:43.759><c> out</c><00:01:43.920><c> your</c><00:01:44.159><c> own</c> 00:01:44.389 --> 00:01:44.399 align:start position:0% config file you can swap out your own 00:01:44.399 --> 00:01:46.310 align:start position:0% config file you can swap out your own shopify<00:01:44.960><c> info</c><00:01:45.280><c> here</c><00:01:45.520><c> to</c><00:01:45.680><c> use</c><00:01:45.920><c> your</c><00:01:46.079><c> own</c> 00:01:46.310 --> 00:01:46.320 align:start position:0% shopify info here to use your own 00:01:46.320 --> 00:01:48.310 align:start position:0% shopify info here to use your own products<00:01:46.799><c> the</c><00:01:46.880><c> next</c><00:01:47.040><c> thing</c><00:01:47.200><c> to</c><00:01:47.360><c> notice</c><00:01:47.759><c> is</c><00:01:47.920><c> a</c><00:01:48.079><c> v</c> 00:01:48.310 --> 00:01:48.320 align:start position:0% products the next thing to notice is a v 00:01:48.320 --> 00:01:50.389 align:start position:0% products the next thing to notice is a v config<00:01:48.720><c> file</c><00:01:49.040><c> it</c><00:01:49.200><c> uses</c><00:01:49.600><c> beat</c><00:01:49.920><c> as</c><00:01:50.079><c> the</c><00:01:50.159><c> build</c> 00:01:50.389 --> 00:01:50.399 align:start position:0% config file it uses beat as the build 00:01:50.399 --> 00:01:52.230 align:start position:0% config file it uses beat as the build tool<00:01:50.720><c> which</c><00:01:50.960><c> i</c><00:01:51.040><c> really</c><00:01:51.360><c> like</c><00:01:51.759><c> because</c><00:01:52.079><c> it's</c> 00:01:52.230 --> 00:01:52.240 align:start position:0% tool which i really like because it's 00:01:52.240 --> 00:01:54.789 align:start position:0% tool which i really like because it's minimal<00:01:52.799><c> easy</c><00:01:53.040><c> to</c><00:01:53.200><c> use</c><00:01:53.600><c> and</c><00:01:53.920><c> fast</c><00:01:54.479><c> it</c><00:01:54.640><c> also</c> 00:01:54.789 --> 00:01:54.799 align:start position:0% minimal easy to use and fast it also 00:01:54.799 --> 00:01:56.469 align:start position:0% minimal easy to use and fast it also comes<00:01:55.040><c> with</c><00:01:55.200><c> tailwind</c><00:01:55.600><c> by</c><00:01:55.759><c> default</c><00:01:56.240><c> which</c><00:01:56.399><c> i</c> 00:01:56.469 --> 00:01:56.479 align:start position:0% comes with tailwind by default which i 00:01:56.479 --> 00:01:58.230 align:start position:0% comes with tailwind by default which i think<00:01:56.719><c> is</c><00:01:56.799><c> an</c><00:01:56.960><c> interesting</c><00:01:57.439><c> choice</c><00:01:57.920><c> i</c><00:01:58.079><c> like</c> 00:01:58.230 --> 00:01:58.240 align:start position:0% think is an interesting choice i like 00:01:58.240 --> 00:01:59.749 align:start position:0% think is an interesting choice i like tailwind<00:01:58.799><c> but</c><00:01:58.960><c> at</c><00:01:59.040><c> the</c><00:01:59.119><c> same</c><00:01:59.360><c> time</c><00:01:59.600><c> it's</c> 00:01:59.749 --> 00:01:59.759 align:start position:0% tailwind but at the same time it's 00:01:59.759 --> 00:02:01.270 align:start position:0% tailwind but at the same time it's pretty<00:02:00.000><c> polarizing</c><00:02:00.719><c> and</c><00:02:00.880><c> i</c><00:02:00.960><c> don't</c><00:02:01.040><c> think</c><00:02:01.200><c> a</c> 00:02:01.270 --> 00:02:01.280 align:start position:0% pretty polarizing and i don't think a 00:02:01.280 --> 00:02:02.630 align:start position:0% pretty polarizing and i don't think a lot<00:02:01.439><c> of</c><00:02:01.520><c> people</c><00:02:01.759><c> will</c><00:02:02.000><c> actually</c><00:02:02.399><c> want</c> 00:02:02.630 --> 00:02:02.640 align:start position:0% lot of people will actually want 00:02:02.640 --> 00:02:04.469 align:start position:0% lot of people will actually want tailwind<00:02:03.200><c> i</c><00:02:03.280><c> think</c><00:02:03.520><c> plain</c><00:02:03.759><c> css</c><00:02:04.240><c> would</c><00:02:04.399><c> have</c> 00:02:04.469 --> 00:02:04.479 align:start position:0% tailwind i think plain css would have 00:02:04.479 --> 00:02:05.749 align:start position:0% tailwind i think plain css would have been<00:02:04.560><c> a</c><00:02:04.640><c> better</c><00:02:04.880><c> default</c><00:02:05.200><c> but</c><00:02:05.360><c> i</c><00:02:05.439><c> can</c><00:02:05.600><c> always</c> 00:02:05.749 --> 00:02:05.759 align:start position:0% been a better default but i can always 00:02:05.759 --> 00:02:07.109 align:start position:0% been a better default but i can always just<00:02:05.920><c> go</c><00:02:06.079><c> and</c><00:02:06.159><c> build</c><00:02:06.320><c> my</c><00:02:06.479><c> own</c><00:02:06.640><c> javascript</c> 00:02:07.109 --> 00:02:07.119 align:start position:0% just go and build my own javascript 00:02:07.119 --> 00:02:08.469 align:start position:0% just go and build my own javascript framework<00:02:07.439><c> for</c><00:02:07.600><c> something</c><00:02:07.920><c> like</c><00:02:08.080><c> that</c><00:02:08.319><c> now</c> 00:02:08.469 --> 00:02:08.479 align:start position:0% framework for something like that now 00:02:08.479 --> 00:02:10.309 align:start position:0% framework for something like that now let's<00:02:08.640><c> take</c><00:02:08.800><c> a</c><00:02:08.879><c> look</c><00:02:09.039><c> at</c><00:02:09.119><c> the</c><00:02:09.200><c> server.js</c><00:02:09.920><c> file</c> 00:02:10.309 --> 00:02:10.319 align:start position:0% let's take a look at the server.js file 00:02:10.319 --> 00:02:12.630 align:start position:0% let's take a look at the server.js file as<00:02:10.479><c> you</c><00:02:10.560><c> can</c><00:02:10.720><c> see</c><00:02:11.120><c> a</c><00:02:11.280><c> hydrogen</c><00:02:11.840><c> app</c><00:02:12.080><c> is</c><00:02:12.319><c> just</c><00:02:12.480><c> an</c> 00:02:12.630 --> 00:02:12.640 align:start position:0% as you can see a hydrogen app is just an 00:02:12.640 --> 00:02:14.710 align:start position:0% as you can see a hydrogen app is just an expressjs<00:02:13.520><c> app</c><00:02:13.840><c> with</c><00:02:14.000><c> some</c><00:02:14.239><c> hydrogen</c> 00:02:14.710 --> 00:02:14.720 align:start position:0% expressjs app with some hydrogen 00:02:14.720 --> 00:02:16.869 align:start position:0% expressjs app with some hydrogen middleware<00:02:15.440><c> and</c><00:02:15.599><c> it</c><00:02:15.760><c> even</c><00:02:16.000><c> includes</c><00:02:16.319><c> a</c><00:02:16.480><c> docker</c> 00:02:16.869 --> 00:02:16.879 align:start position:0% middleware and it even includes a docker 00:02:16.879 --> 00:02:18.630 align:start position:0% middleware and it even includes a docker file<00:02:17.200><c> that</c><00:02:17.360><c> will</c><00:02:17.599><c> run</c><00:02:17.760><c> the</c><00:02:17.920><c> server</c><00:02:18.319><c> when</c><00:02:18.480><c> you</c> 00:02:18.630 --> 00:02:18.640 align:start position:0% file that will run the server when you 00:02:18.640 --> 00:02:20.630 align:start position:0% file that will run the server when you deploy<00:02:18.959><c> your</c><00:02:19.120><c> app</c><00:02:19.280><c> to</c><00:02:19.440><c> production</c><00:02:20.160><c> now</c><00:02:20.400><c> the</c> 00:02:20.630 --> 00:02:20.640 align:start position:0% deploy your app to production now the 00:02:20.640 --> 00:02:22.550 align:start position:0% deploy your app to production now the application<00:02:21.120><c> code</c><00:02:21.360><c> itself</c><00:02:21.840><c> is</c><00:02:22.000><c> contained</c><00:02:22.480><c> in</c> 00:02:22.550 --> 00:02:22.560 align:start position:0% application code itself is contained in 00:02:22.560 --> 00:02:24.390 align:start position:0% application code itself is contained in the<00:02:22.640><c> source</c><00:02:22.959><c> directory</c><00:02:23.599><c> inside</c><00:02:24.000><c> of</c><00:02:24.080><c> which</c> 00:02:24.390 --> 00:02:24.400 align:start position:0% the source directory inside of which 00:02:24.400 --> 00:02:26.470 align:start position:0% the source directory inside of which you'll<00:02:24.640><c> see</c><00:02:24.879><c> a</c><00:02:25.040><c> directory</c><00:02:25.599><c> for</c><00:02:25.840><c> components</c> 00:02:26.470 --> 00:02:26.480 align:start position:0% you'll see a directory for components 00:02:26.480 --> 00:02:28.710 align:start position:0% you'll see a directory for components and<00:02:26.720><c> pages</c><00:02:27.360><c> if</c><00:02:27.520><c> we</c><00:02:27.680><c> open</c><00:02:27.920><c> components</c><00:02:28.560><c> you'll</c> 00:02:28.710 --> 00:02:28.720 align:start position:0% and pages if we open components you'll 00:02:28.720 --> 00:02:30.630 align:start position:0% and pages if we open components you'll notice<00:02:29.040><c> that</c><00:02:29.280><c> some</c><00:02:29.520><c> components</c><00:02:30.080><c> end</c><00:02:30.239><c> in</c><00:02:30.400><c> dot</c> 00:02:30.630 --> 00:02:30.640 align:start position:0% notice that some components end in dot 00:02:30.640 --> 00:02:33.110 align:start position:0% notice that some components end in dot client<00:02:31.200><c> while</c><00:02:31.519><c> others</c><00:02:31.840><c> end</c><00:02:32.160><c> in</c><00:02:32.239><c> dot</c><00:02:32.480><c> server</c> 00:02:33.110 --> 00:02:33.120 align:start position:0% client while others end in dot server 00:02:33.120 --> 00:02:34.390 align:start position:0% client while others end in dot server that's<00:02:33.440><c> because</c><00:02:33.680><c> the</c><00:02:33.840><c> framework</c><00:02:34.239><c> is</c> 00:02:34.390 --> 00:02:34.400 align:start position:0% that's because the framework is 00:02:34.400 --> 00:02:36.550 align:start position:0% that's because the framework is leveraging<00:02:34.879><c> server</c><00:02:35.200><c> components</c><00:02:35.680><c> in</c><00:02:35.840><c> react</c><00:02:36.319><c> i</c> 00:02:36.550 --> 00:02:36.560 align:start position:0% leveraging server components in react i 00:02:36.560 --> 00:02:37.910 align:start position:0% leveraging server components in react i talked<00:02:36.800><c> about</c><00:02:36.959><c> server</c><00:02:37.280><c> components</c><00:02:37.680><c> in</c><00:02:37.840><c> my</c> 00:02:37.910 --> 00:02:37.920 align:start position:0% talked about server components in my 00:02:37.920 --> 00:02:40.309 align:start position:0% talked about server components in my recent<00:02:38.239><c> next.js</c><00:02:38.879><c> video</c><00:02:39.519><c> but</c><00:02:39.760><c> basically</c> 00:02:40.309 --> 00:02:40.319 align:start position:0% recent next.js video but basically 00:02:40.319 --> 00:02:41.990 align:start position:0% recent next.js video but basically they're<00:02:40.480><c> just</c><00:02:40.720><c> react</c><00:02:41.040><c> components</c><00:02:41.680><c> that</c><00:02:41.840><c> can</c> 00:02:41.990 --> 00:02:42.000 align:start position:0% they're just react components that can 00:02:42.000 --> 00:02:44.949 align:start position:0% they're just react components that can fetch<00:02:42.319><c> data</c><00:02:42.879><c> and</c><00:02:43.040><c> be</c><00:02:43.280><c> rendered</c><00:02:43.680><c> to</c><00:02:43.840><c> plain</c><00:02:44.239><c> html</c> 00:02:44.949 --> 00:02:44.959 align:start position:0% fetch data and be rendered to plain html 00:02:44.959 --> 00:02:46.869 align:start position:0% fetch data and be rendered to plain html on<00:02:45.040><c> the</c><00:02:45.200><c> server</c><00:02:45.680><c> if</c><00:02:45.840><c> we</c><00:02:46.000><c> take</c><00:02:46.160><c> a</c><00:02:46.239><c> look</c><00:02:46.400><c> at</c><00:02:46.480><c> one</c> 00:02:46.869 --> 00:02:46.879 align:start position:0% on the server if we take a look at one 00:02:46.879 --> 00:02:49.030 align:start position:0% on the server if we take a look at one like<00:02:47.040><c> the</c><00:02:47.200><c> default</c><00:02:47.599><c> seo</c><00:02:48.000><c> component</c><00:02:48.720><c> you</c><00:02:48.879><c> can</c> 00:02:49.030 --> 00:02:49.040 align:start position:0% like the default seo component you can 00:02:49.040 --> 00:02:50.869 align:start position:0% like the default seo component you can see<00:02:49.280><c> here</c><00:02:49.519><c> that</c><00:02:49.680><c> it</c><00:02:49.840><c> makes</c><00:02:50.080><c> a</c><00:02:50.239><c> query</c><00:02:50.560><c> to</c><00:02:50.720><c> the</c> 00:02:50.869 --> 00:02:50.879 align:start position:0% see here that it makes a query to the 00:02:50.879 --> 00:02:53.430 align:start position:0% see here that it makes a query to the shopify<00:02:51.440><c> graphql</c><00:02:52.000><c> api</c><00:02:52.560><c> but</c><00:02:52.720><c> that</c><00:02:52.959><c> query</c><00:02:53.280><c> will</c> 00:02:53.430 --> 00:02:53.440 align:start position:0% shopify graphql api but that query will 00:02:53.440 --> 00:02:55.110 align:start position:0% shopify graphql api but that query will happen<00:02:53.680><c> on</c><00:02:53.840><c> the</c><00:02:53.920><c> server</c><00:02:54.480><c> allowing</c><00:02:54.879><c> search</c> 00:02:55.110 --> 00:02:55.120 align:start position:0% happen on the server allowing search 00:02:55.120 --> 00:02:57.270 align:start position:0% happen on the server allowing search engine<00:02:55.440><c> bots</c><00:02:55.840><c> and</c><00:02:56.080><c> social</c><00:02:56.400><c> media</c><00:02:56.720><c> link</c><00:02:56.959><c> bots</c> 00:02:57.270 --> 00:02:57.280 align:start position:0% engine bots and social media link bots 00:02:57.280 --> 00:02:59.270 align:start position:0% engine bots and social media link bots to<00:02:57.519><c> understand</c><00:02:58.000><c> the</c><00:02:58.080><c> content</c><00:02:58.560><c> on</c><00:02:58.720><c> the</c><00:02:58.800><c> page</c> 00:02:59.270 --> 00:02:59.280 align:start position:0% to understand the content on the page 00:02:59.280 --> 00:03:01.030 align:start position:0% to understand the content on the page now<00:02:59.519><c> one</c><00:02:59.680><c> thing</c><00:02:59.840><c> that's</c><00:03:00.080><c> interesting</c><00:03:00.560><c> here</c><00:03:00.879><c> is</c> 00:03:01.030 --> 00:03:01.040 align:start position:0% now one thing that's interesting here is 00:03:01.040 --> 00:03:02.390 align:start position:0% now one thing that's interesting here is that<00:03:01.200><c> there</c><00:03:01.440><c> are</c><00:03:01.599><c> a</c><00:03:01.680><c> ton</c><00:03:01.920><c> of</c><00:03:02.000><c> pre-built</c> 00:03:02.390 --> 00:03:02.400 align:start position:0% that there are a ton of pre-built 00:03:02.400 --> 00:03:03.990 align:start position:0% that there are a ton of pre-built components<00:03:02.879><c> in</c><00:03:02.959><c> the</c><00:03:03.120><c> framework</c><00:03:03.519><c> that's</c><00:03:03.760><c> a</c><00:03:03.840><c> bit</c> 00:03:03.990 --> 00:03:04.000 align:start position:0% components in the framework that's a bit 00:03:04.000 --> 00:03:05.670 align:start position:0% components in the framework that's a bit unusual<00:03:04.560><c> because</c><00:03:04.879><c> most</c><00:03:05.120><c> frameworks</c><00:03:05.519><c> aren't</c> 00:03:05.670 --> 00:03:05.680 align:start position:0% unusual because most frameworks aren't 00:03:05.680 --> 00:03:07.589 align:start position:0% unusual because most frameworks aren't really<00:03:05.920><c> concerned</c><00:03:06.239><c> about</c><00:03:06.400><c> the</c><00:03:06.560><c> ui</c><00:03:07.440><c> but</c> 00:03:07.589 --> 00:03:07.599 align:start position:0% really concerned about the ui but 00:03:07.599 --> 00:03:09.750 align:start position:0% really concerned about the ui but hydrogen<00:03:08.159><c> feels</c><00:03:08.480><c> more</c><00:03:08.640><c> like</c><00:03:08.879><c> a</c><00:03:09.040><c> cross</c><00:03:09.440><c> between</c> 00:03:09.750 --> 00:03:09.760 align:start position:0% hydrogen feels more like a cross between 00:03:09.760 --> 00:03:11.830 align:start position:0% hydrogen feels more like a cross between a<00:03:09.920><c> template</c><00:03:10.400><c> and</c><00:03:10.560><c> a</c><00:03:10.720><c> framework</c><00:03:11.280><c> like</c><00:03:11.599><c> you</c><00:03:11.680><c> have</c> 00:03:11.830 --> 00:03:11.840 align:start position:0% a template and a framework like you have 00:03:11.840 --> 00:03:13.670 align:start position:0% a template and a framework like you have components<00:03:12.319><c> for</c><00:03:12.480><c> a</c><00:03:12.640><c> shopping</c><00:03:12.959><c> cart</c><00:03:13.280><c> which</c><00:03:13.519><c> you</c> 00:03:13.670 --> 00:03:13.680 align:start position:0% components for a shopping cart which you 00:03:13.680 --> 00:03:15.509 align:start position:0% components for a shopping cart which you can<00:03:13.760><c> then</c><00:03:13.920><c> go</c><00:03:14.080><c> in</c><00:03:14.239><c> and</c><00:03:14.319><c> customize</c><00:03:14.879><c> as</c><00:03:15.120><c> needed</c> 00:03:15.509 --> 00:03:15.519 align:start position:0% can then go in and customize as needed 00:03:15.519 --> 00:03:17.350 align:start position:0% can then go in and customize as needed personally<00:03:16.080><c> i</c><00:03:16.239><c> feel</c><00:03:16.480><c> a</c><00:03:16.560><c> bit</c><00:03:16.800><c> overwhelmed</c> 00:03:17.350 --> 00:03:17.360 align:start position:0% personally i feel a bit overwhelmed 00:03:17.360 --> 00:03:19.030 align:start position:0% personally i feel a bit overwhelmed looking<00:03:17.599><c> at</c><00:03:17.760><c> all</c><00:03:17.840><c> these</c><00:03:18.000><c> components</c><00:03:18.720><c> but</c><00:03:18.879><c> it's</c> 00:03:19.030 --> 00:03:19.040 align:start position:0% looking at all these components but it's 00:03:19.040 --> 00:03:20.790 align:start position:0% looking at all these components but it's just<00:03:19.280><c> in</c><00:03:19.360><c> developer</c><00:03:19.760><c> preview</c><00:03:20.239><c> and</c><00:03:20.400><c> i</c><00:03:20.560><c> imagine</c> 00:03:20.790 --> 00:03:20.800 align:start position:0% just in developer preview and i imagine 00:03:20.800 --> 00:03:22.390 align:start position:0% just in developer preview and i imagine they'll<00:03:21.040><c> have</c><00:03:21.200><c> a</c><00:03:21.280><c> more</c><00:03:21.519><c> minimal</c><00:03:21.840><c> template</c><00:03:22.319><c> in</c> 00:03:22.390 --> 00:03:22.400 align:start position:0% they'll have a more minimal template in 00:03:22.400 --> 00:03:23.990 align:start position:0% they'll have a more minimal template in the<00:03:22.480><c> future</c><00:03:23.040><c> now</c><00:03:23.200><c> let's</c><00:03:23.360><c> head</c><00:03:23.599><c> over</c><00:03:23.760><c> to</c><00:03:23.920><c> the</c> 00:03:23.990 --> 00:03:24.000 align:start position:0% the future now let's head over to the 00:03:24.000 --> 00:03:25.830 align:start position:0% the future now let's head over to the pages<00:03:24.400><c> directory</c><00:03:24.879><c> which</c><00:03:25.200><c> works</c><00:03:25.440><c> just</c><00:03:25.599><c> like</c> 00:03:25.830 --> 00:03:25.840 align:start position:0% pages directory which works just like 00:03:25.840 --> 00:03:28.309 align:start position:0% pages directory which works just like next<00:03:26.159><c> js</c><00:03:26.720><c> where</c><00:03:26.879><c> the</c><00:03:27.040><c> structure</c><00:03:27.519><c> of</c><00:03:27.680><c> the</c><00:03:27.760><c> pages</c> 00:03:28.309 --> 00:03:28.319 align:start position:0% next js where the structure of the pages 00:03:28.319 --> 00:03:30.470 align:start position:0% next js where the structure of the pages determine<00:03:28.799><c> the</c><00:03:28.879><c> actual</c><00:03:29.280><c> routes</c><00:03:29.680><c> or</c><00:03:29.920><c> urls</c><00:03:30.400><c> in</c> 00:03:30.470 --> 00:03:30.480 align:start position:0% determine the actual routes or urls in 00:03:30.480 --> 00:03:32.550 align:start position:0% determine the actual routes or urls in the<00:03:30.640><c> application</c><00:03:31.360><c> i</c><00:03:31.599><c> like</c><00:03:31.760><c> this</c><00:03:32.000><c> approach</c><00:03:32.400><c> and</c> 00:03:32.550 --> 00:03:32.560 align:start position:0% the application i like this approach and 00:03:32.560 --> 00:03:33.990 align:start position:0% the application i like this approach and it's<00:03:32.720><c> a</c><00:03:32.799><c> lot</c><00:03:33.040><c> easier</c><00:03:33.360><c> than</c><00:03:33.519><c> trying</c><00:03:33.840><c> to</c> 00:03:33.990 --> 00:03:34.000 align:start position:0% it's a lot easier than trying to 00:03:34.000 --> 00:03:35.830 align:start position:0% it's a lot easier than trying to configure<00:03:34.480><c> something</c><00:03:34.799><c> like</c><00:03:35.040><c> react</c><00:03:35.440><c> router</c> 00:03:35.830 --> 00:03:35.840 align:start position:0% configure something like react router 00:03:35.840 --> 00:03:37.430 align:start position:0% configure something like react router what<00:03:36.000><c> you'll</c><00:03:36.239><c> notice</c><00:03:36.480><c> in</c><00:03:36.560><c> these</c><00:03:36.720><c> pages</c><00:03:37.280><c> is</c> 00:03:37.430 --> 00:03:37.440 align:start position:0% what you'll notice in these pages is 00:03:37.440 --> 00:03:39.030 align:start position:0% what you'll notice in these pages is that<00:03:37.519><c> they</c><00:03:37.680><c> use</c><00:03:38.080><c> a</c><00:03:38.239><c> custom</c><00:03:38.640><c> hook</c><00:03:38.879><c> from</c> 00:03:39.030 --> 00:03:39.040 align:start position:0% that they use a custom hook from 00:03:39.040 --> 00:03:41.830 align:start position:0% that they use a custom hook from hydrogen<00:03:39.840><c> called</c><00:03:40.159><c> use</c><00:03:40.480><c> shop</c><00:03:40.799><c> query</c><00:03:41.360><c> the</c><00:03:41.519><c> hook</c> 00:03:41.830 --> 00:03:41.840 align:start position:0% hydrogen called use shop query the hook 00:03:41.840 --> 00:03:43.670 align:start position:0% hydrogen called use shop query the hook takes<00:03:42.080><c> a</c><00:03:42.239><c> graphql</c><00:03:42.799><c> query</c><00:03:43.280><c> and</c><00:03:43.440><c> will</c> 00:03:43.670 --> 00:03:43.680 align:start position:0% takes a graphql query and will 00:03:43.680 --> 00:03:45.430 align:start position:0% takes a graphql query and will automatically<00:03:44.239><c> fetch</c><00:03:44.560><c> that</c><00:03:44.720><c> data</c><00:03:45.120><c> from</c><00:03:45.280><c> the</c> 00:03:45.430 --> 00:03:45.440 align:start position:0% automatically fetch that data from the 00:03:45.440 --> 00:03:48.070 align:start position:0% automatically fetch that data from the shopify<00:03:46.000><c> api</c><00:03:46.640><c> that</c><00:03:46.799><c> makes</c><00:03:47.040><c> it</c><00:03:47.120><c> very</c><00:03:47.360><c> clear</c><00:03:47.840><c> and</c> 00:03:48.070 --> 00:03:48.080 align:start position:0% shopify api that makes it very clear and 00:03:48.080 --> 00:03:50.070 align:start position:0% shopify api that makes it very clear and easy<00:03:48.480><c> to</c><00:03:48.720><c> access</c><00:03:49.120><c> the</c><00:03:49.280><c> data</c><00:03:49.519><c> that</c><00:03:49.680><c> you</c><00:03:49.840><c> need</c> 00:03:50.070 --> 00:03:50.080 align:start position:0% easy to access the data that you need 00:03:50.080 --> 00:03:52.070 align:start position:0% easy to access the data that you need for<00:03:50.239><c> the</c><00:03:50.400><c> ui</c><00:03:50.879><c> and</c><00:03:51.040><c> once</c><00:03:51.280><c> again</c><00:03:51.599><c> it's</c><00:03:51.760><c> rendered</c> 00:03:52.070 --> 00:03:52.080 align:start position:0% for the ui and once again it's rendered 00:03:52.080 --> 00:03:54.070 align:start position:0% for the ui and once again it's rendered on<00:03:52.159><c> the</c><00:03:52.239><c> server</c><00:03:52.879><c> giving</c><00:03:53.120><c> you</c><00:03:53.360><c> a</c><00:03:53.519><c> search</c><00:03:53.760><c> engine</c> 00:03:54.070 --> 00:03:54.080 align:start position:0% on the server giving you a search engine 00:03:54.080 --> 00:03:55.750 align:start position:0% on the server giving you a search engine friendly<00:03:54.400><c> web</c><00:03:54.640><c> app</c><00:03:54.959><c> which</c><00:03:55.200><c> is</c><00:03:55.360><c> extremely</c> 00:03:55.750 --> 00:03:55.760 align:start position:0% friendly web app which is extremely 00:03:55.760 --> 00:03:57.750 align:start position:0% friendly web app which is extremely important<00:03:56.159><c> for</c><00:03:56.400><c> ecommerce</c><00:03:57.200><c> now</c><00:03:57.360><c> let's</c><00:03:57.599><c> move</c> 00:03:57.750 --> 00:03:57.760 align:start position:0% important for ecommerce now let's move 00:03:57.760 --> 00:03:59.990 align:start position:0% important for ecommerce now let's move into<00:03:58.080><c> my</c><00:03:58.319><c> final</c><00:03:58.640><c> analysis</c><00:03:59.280><c> overall</c><00:03:59.680><c> i</c><00:03:59.840><c> think</c> 00:03:59.990 --> 00:04:00.000 align:start position:0% into my final analysis overall i think 00:04:00.000 --> 00:04:01.910 align:start position:0% into my final analysis overall i think hydrogen<00:04:00.400><c> looks</c><00:04:00.720><c> awesome</c><00:04:01.120><c> primarily</c><00:04:01.680><c> because</c> 00:04:01.910 --> 00:04:01.920 align:start position:0% hydrogen looks awesome primarily because 00:04:01.920 --> 00:04:04.070 align:start position:0% hydrogen looks awesome primarily because it<00:04:02.000><c> looks</c><00:04:02.239><c> very</c><00:04:02.480><c> similar</c><00:04:02.879><c> to</c><00:04:03.120><c> next.js</c><00:04:03.840><c> i</c><00:04:03.920><c> think</c> 00:04:04.070 --> 00:04:04.080 align:start position:0% it looks very similar to next.js i think 00:04:04.080 --> 00:04:05.429 align:start position:0% it looks very similar to next.js i think the<00:04:04.239><c> starting</c><00:04:04.560><c> point</c><00:04:04.799><c> is</c><00:04:04.959><c> a</c><00:04:05.040><c> little</c><00:04:05.280><c> too</c> 00:04:05.429 --> 00:04:05.439 align:start position:0% the starting point is a little too 00:04:05.439 --> 00:04:07.030 align:start position:0% the starting point is a little too complex<00:04:06.159><c> but</c><00:04:06.319><c> i'm</c><00:04:06.480><c> guessing</c><00:04:06.799><c> they'll</c><00:04:06.959><c> have</c> 00:04:07.030 --> 00:04:07.040 align:start position:0% complex but i'm guessing they'll have 00:04:07.040 --> 00:04:08.229 align:start position:0% complex but i'm guessing they'll have multiple<00:04:07.439><c> different</c><00:04:07.680><c> templates</c><00:04:08.080><c> in</c><00:04:08.159><c> the</c> 00:04:08.229 --> 00:04:08.239 align:start position:0% multiple different templates in the 00:04:08.239 --> 00:04:10.789 align:start position:0% multiple different templates in the future<00:04:08.799><c> or</c><00:04:09.040><c> maybe</c><00:04:09.360><c> a</c><00:04:09.519><c> cli</c><00:04:10.159><c> where</c><00:04:10.400><c> you</c><00:04:10.480><c> can</c><00:04:10.640><c> pick</c> 00:04:10.789 --> 00:04:10.799 align:start position:0% future or maybe a cli where you can pick 00:04:10.799 --> 00:04:12.309 align:start position:0% future or maybe a cli where you can pick and<00:04:10.959><c> choose</c><00:04:11.200><c> the</c><00:04:11.280><c> features</c><00:04:11.680><c> that</c><00:04:11.760><c> you</c><00:04:11.920><c> want</c> 00:04:12.309 --> 00:04:12.319 align:start position:0% and choose the features that you want 00:04:12.319 --> 00:04:14.949 align:start position:0% and choose the features that you want kind<00:04:12.560><c> of</c><00:04:12.640><c> like</c><00:04:12.879><c> nuxjs</c><00:04:13.680><c> and</c><00:04:13.760><c> the</c><00:04:13.920><c> vue</c><00:04:14.159><c> ecosystem</c> 00:04:14.949 --> 00:04:14.959 align:start position:0% kind of like nuxjs and the vue ecosystem 00:04:14.959 --> 00:04:16.870 align:start position:0% kind of like nuxjs and the vue ecosystem i<00:04:15.040><c> think</c><00:04:15.200><c> my</c><00:04:15.360><c> biggest</c><00:04:15.680><c> question</c><00:04:16.000><c> here</c><00:04:16.400><c> is</c><00:04:16.639><c> why</c> 00:04:16.870 --> 00:04:16.880 align:start position:0% i think my biggest question here is why 00:04:16.880 --> 00:04:19.110 align:start position:0% i think my biggest question here is why not<00:04:17.040><c> just</c><00:04:17.280><c> build</c><00:04:17.440><c> this</c><00:04:17.680><c> on</c><00:04:17.759><c> top</c><00:04:18.000><c> of</c><00:04:18.160><c> next</c><00:04:18.400><c> js</c> 00:04:19.110 --> 00:04:19.120 align:start position:0% not just build this on top of next js 00:04:19.120 --> 00:04:20.949 align:start position:0% not just build this on top of next js rather<00:04:19.359><c> than</c><00:04:19.600><c> build</c><00:04:19.840><c> yet</c><00:04:20.079><c> another</c><00:04:20.479><c> javascript</c> 00:04:20.949 --> 00:04:20.959 align:start position:0% rather than build yet another javascript 00:04:20.959 --> 00:04:24.310 align:start position:0% rather than build yet another javascript framework 00:04:24.310 --> 00:04:24.320 align:start position:0% 00:04:24.320 --> 00:04:25.990 align:start position:0% oh<00:04:24.479><c> wait</c><00:04:24.720><c> a</c><00:04:24.800><c> second</c><00:04:25.120><c> i</c><00:04:25.280><c> figured</c><00:04:25.600><c> it</c><00:04:25.759><c> out</c> 00:04:25.990 --> 00:04:26.000 align:start position:0% oh wait a second i figured it out 00:04:26.000 --> 00:04:27.430 align:start position:0% oh wait a second i figured it out shopify<00:04:26.560><c> will</c><00:04:26.639><c> eventually</c><00:04:27.040><c> have</c><00:04:27.199><c> its</c><00:04:27.360><c> own</c> 00:04:27.430 --> 00:04:27.440 align:start position:0% shopify will eventually have its own 00:04:27.440 --> 00:04:29.510 align:start position:0% shopify will eventually have its own hosting<00:04:27.919><c> service</c><00:04:28.320><c> called</c><00:04:28.639><c> oxygen</c><00:04:29.199><c> i'm</c><00:04:29.360><c> not</c> 00:04:29.510 --> 00:04:29.520 align:start position:0% hosting service called oxygen i'm not 00:04:29.520 --> 00:04:31.030 align:start position:0% hosting service called oxygen i'm not sure<00:04:29.680><c> if</c><00:04:29.759><c> that'll</c><00:04:30.080><c> be</c><00:04:30.160><c> free</c><00:04:30.400><c> or</c><00:04:30.560><c> paid</c><00:04:30.880><c> but</c><00:04:30.960><c> it</c> 00:04:31.030 --> 00:04:31.040 align:start position:0% sure if that'll be free or paid but it 00:04:31.040 --> 00:04:32.310 align:start position:0% sure if that'll be free or paid but it looks<00:04:31.199><c> like</c><00:04:31.360><c> they're</c><00:04:31.520><c> creating</c><00:04:31.919><c> a</c><00:04:32.000><c> model</c> 00:04:32.310 --> 00:04:32.320 align:start position:0% looks like they're creating a model 00:04:32.320 --> 00:04:33.990 align:start position:0% looks like they're creating a model similar<00:04:32.639><c> to</c><00:04:32.800><c> versailles</c><00:04:33.360><c> where</c><00:04:33.520><c> they</c><00:04:33.680><c> provide</c> 00:04:33.990 --> 00:04:34.000 align:start position:0% similar to versailles where they provide 00:04:34.000 --> 00:04:35.670 align:start position:0% similar to versailles where they provide an<00:04:34.160><c> open</c><00:04:34.400><c> source</c><00:04:34.639><c> framework</c><00:04:35.120><c> that</c><00:04:35.360><c> funnels</c> 00:04:35.670 --> 00:04:35.680 align:start position:0% an open source framework that funnels 00:04:35.680 --> 00:04:37.430 align:start position:0% an open source framework that funnels you<00:04:35.840><c> into</c><00:04:36.160><c> their</c><00:04:36.320><c> own</c><00:04:36.479><c> hosting</c><00:04:36.960><c> service</c> 00:04:37.430 --> 00:04:37.440 align:start position:0% you into their own hosting service 00:04:37.440 --> 00:04:38.790 align:start position:0% you into their own hosting service there's<00:04:37.680><c> nothing</c><00:04:37.919><c> wrong</c><00:04:38.160><c> with</c><00:04:38.240><c> that</c><00:04:38.639><c> just</c> 00:04:38.790 --> 00:04:38.800 align:start position:0% there's nothing wrong with that just 00:04:38.800 --> 00:04:40.230 align:start position:0% there's nothing wrong with that just something<00:04:39.120><c> to</c><00:04:39.280><c> be</c><00:04:39.360><c> aware</c><00:04:39.680><c> of</c><00:04:39.840><c> what's</c><00:04:40.080><c> more</c> 00:04:40.230 --> 00:04:40.240 align:start position:0% something to be aware of what's more 00:04:40.240 --> 00:04:42.070 align:start position:0% something to be aware of what's more interesting<00:04:40.639><c> to</c><00:04:40.800><c> me</c><00:04:41.120><c> is</c><00:04:41.199><c> that</c><00:04:41.440><c> react</c><00:04:41.759><c> server</c> 00:04:42.070 --> 00:04:42.080 align:start position:0% interesting to me is that react server 00:04:42.080 --> 00:04:43.510 align:start position:0% interesting to me is that react server components<00:04:42.639><c> are</c><00:04:42.720><c> going</c><00:04:42.880><c> to</c><00:04:42.960><c> make</c><00:04:43.120><c> it</c><00:04:43.280><c> way</c> 00:04:43.510 --> 00:04:43.520 align:start position:0% components are going to make it way 00:04:43.520 --> 00:04:45.990 align:start position:0% components are going to make it way easier<00:04:44.000><c> for</c><00:04:44.320><c> anybody</c><00:04:44.800><c> to</c><00:04:45.040><c> just</c><00:04:45.360><c> create</c><00:04:45.759><c> a</c> 00:04:45.990 --> 00:04:46.000 align:start position:0% easier for anybody to just create a 00:04:46.000 --> 00:04:47.590 align:start position:0% easier for anybody to just create a server<00:04:46.320><c> rendered</c><00:04:46.639><c> react</c><00:04:47.040><c> app</c><00:04:47.360><c> without</c> 00:04:47.590 --> 00:04:47.600 align:start position:0% server rendered react app without 00:04:47.600 --> 00:04:49.189 align:start position:0% server rendered react app without needing<00:04:47.840><c> to</c><00:04:48.080><c> rely</c><00:04:48.479><c> on</c><00:04:48.560><c> a</c><00:04:48.639><c> bunch</c><00:04:48.800><c> of</c><00:04:48.880><c> weird</c> 00:04:49.189 --> 00:04:49.199 align:start position:0% needing to rely on a bunch of weird 00:04:49.199 --> 00:04:51.110 align:start position:0% needing to rely on a bunch of weird abstractions<00:04:50.080><c> in</c><00:04:50.160><c> the</c><00:04:50.320><c> near</c><00:04:50.560><c> future</c><00:04:50.960><c> you</c> 00:04:51.110 --> 00:04:51.120 align:start position:0% abstractions in the near future you 00:04:51.120 --> 00:04:52.469 align:start position:0% abstractions in the near future you might<00:04:51.280><c> just</c><00:04:51.440><c> be</c><00:04:51.600><c> able</c><00:04:51.759><c> to</c><00:04:51.840><c> build</c><00:04:52.080><c> a</c><00:04:52.160><c> simple</c> 00:04:52.469 --> 00:04:52.479 align:start position:0% might just be able to build a simple 00:04:52.479 --> 00:04:54.310 align:start position:0% might just be able to build a simple react<00:04:52.960><c> app</c><00:04:53.120><c> with</c><00:04:53.280><c> server</c><00:04:53.600><c> components</c><00:04:54.160><c> then</c> 00:04:54.310 --> 00:04:54.320 align:start position:0% react app with server components then 00:04:54.320 --> 00:04:56.150 align:start position:0% react app with server components then deploy<00:04:54.639><c> it</c><00:04:54.720><c> to</c><00:04:54.880><c> a</c><00:04:55.040><c> node.js</c><00:04:55.520><c> server</c><00:04:55.919><c> and</c><00:04:56.000><c> that</c> 00:04:56.150 --> 00:04:56.160 align:start position:0% deploy it to a node.js server and that 00:04:56.160 --> 00:04:57.830 align:start position:0% deploy it to a node.js server and that could<00:04:56.320><c> lead</c><00:04:56.560><c> to</c><00:04:56.720><c> more</c><00:04:56.880><c> javascript</c><00:04:57.440><c> frameworks</c> 00:04:57.830 --> 00:04:57.840 align:start position:0% could lead to more javascript frameworks 00:04:57.840 --> 00:04:59.830 align:start position:0% could lead to more javascript frameworks like<00:04:58.080><c> hydrogen</c><00:04:58.720><c> that</c><00:04:58.880><c> focus</c><00:04:59.280><c> on</c><00:04:59.440><c> domain</c> 00:04:59.830 --> 00:04:59.840 align:start position:0% like hydrogen that focus on domain 00:04:59.840 --> 00:05:01.350 align:start position:0% like hydrogen that focus on domain specific<00:05:00.320><c> problems</c><00:05:00.880><c> i'm</c><00:05:00.960><c> going</c><00:05:01.039><c> to</c><00:05:01.120><c> go</c><00:05:01.199><c> ahead</c> 00:05:01.350 --> 00:05:01.360 align:start position:0% specific problems i'm going to go ahead 00:05:01.360 --> 00:05:02.629 align:start position:0% specific problems i'm going to go ahead and<00:05:01.440><c> wrap</c><00:05:01.680><c> things</c><00:05:01.919><c> up</c><00:05:02.080><c> there</c><00:05:02.320><c> let</c><00:05:02.479><c> me</c><00:05:02.560><c> know</c> 00:05:02.629 --> 00:05:02.639 align:start position:0% and wrap things up there let me know 00:05:02.639 --> 00:05:03.749 align:start position:0% and wrap things up there let me know what<00:05:02.720><c> you</c><00:05:02.880><c> think</c><00:05:02.960><c> about</c><00:05:03.120><c> hydrogen</c><00:05:03.600><c> in</c><00:05:03.680><c> the</c> 00:05:03.749 --> 00:05:03.759 align:start position:0% what you think about hydrogen in the 00:05:03.759 --> 00:05:05.749 align:start position:0% what you think about hydrogen in the comments<00:05:04.320><c> thanks</c><00:05:04.560><c> for</c><00:05:04.720><c> watching</c><00:05:05.280><c> and</c><00:05:05.440><c> i</c><00:05:05.600><c> will</c> 00:05:05.749 --> 00:05:05.759 align:start position:0% comments thanks for watching and i will 00:05:05.759 --> 00:05:08.800 align:start position:0% comments thanks for watching and i will see<00:05:06.000><c> you</c><00:05:06.240><c> in</c><00:05:06.320><c> the</c><00:05:06.400><c> next</c><00:05:06.639><c> one</c>