Shopify built a JS Framework // Hydrogen First Look

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 hydrogen.shopify.dev/
React server components reactjs.org/blog/2020/12/21/d...
📚 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 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

[@original_anu]

"Just announced yesterday" Damn Fireship is fast with these

[@tookmusic]

I don't want to steal your illusion, but Fireship probably got a version earlier and wasn't allowed/wanted to release a video before today.

[@trevortrevose9124]

Ong

[@krawieck]

@@tookmusic he didn't write custom code for this so a simple overview of the framework could've easily been made in a day

[@masternobody1896]

hydrogen bad cause its new

[@michaeljmeyer3]

100 seconds fast

[@TyraelHasFallen]

Can’t wait to see all the job listings with “10 years of hydrogen experience required” pop up

[@raihan9497]

xD

[@AbhinavKulshreshtha]

I will give it a month max. I recently got a job call for minimum 5 year experience in Vue 3. Not Vue js, but Vue 3 specifically. I am pretty sure it is less than two years since Vue 3 was released.

[@dibyajibansahoo2618]

😂😂😂

[@halilfocic6627]

Hahahah, good one

[@catswolo421]

Dont forget the part where the salary is $0, how nice of them

[@adambickford8720]

My 5 o'clock shadow lasts longer than some JS frameworks

[@NNNedlog]

Nice 😂

[@pessimistic_optimism]

*most js frameworks

[@iamchriswick]

So, you are 12? 😅

[@nardu]

Said Gandalf! I feel like settling down with one of the frameworks that suits your needs is the way?

[@codestalk9183]

dayamn, that was good

[@gainsbrah9831]

We need another 117 frameworks , so periodic table can look complete

[@namesurname6294]

frameodic table

[@brianevans4]

Selenium

[@goswami7275]

Shouldn't take more than 2 hours

[@KangJangkrik]

Hell no

[@vicca4671]

After that we get the particle series

[@diskyariajetmiko]

Every 60 seconds in Africa, a Javascript framework is built.

[@2Dimples4U]

With just 30 cents a day, half the price of gas station coffee, you too can sponsor one JavaScript framework from Africa.

[@master0fnone]

Every 60 seconds in Africa, a minute passes.

[@serhiimamedov]

This is so sad

[@malluminecraftsurvivor3630]

lmao

[@harrymon0]

Together, we can stop this!

[@phoneix24886]

I was a backend dev. I shifted to full stack. I saw the chaos that is javascript. I went back to my old ways of acheiving zen. 10 years + of Nodejs and 6 years + of ES6 and still everything is on fire with front end development. I hope you front end engineers find peace in life.

[@gabrielcastilho4168]

I did when I found Svelte

[@RexGalilae]

NodeJS is a dumpster fire. Deno was overhyped to death, sure, but it was a great proof of concept. In built typescript support, no /node_modules, way better at installing and packaging bundles. After just a few months of not having set up my own nodejs project, I was stumped while trying to create my own CLI.

[@IngwiePhoenix]

I thought the exact same thing when I found node 0.14's source in one of my old backups... But then I look at what PHP has been up to the past few years and I just feel so goddamn old. x.x

[@ionut-cristianratoi7692]

Even tough JS back-end is a bit better than FE, it's not like it's way better. You still have allot of libraries/frame works to choose from. Ex. Express, NestJs, Fastify, Koa, SailsJs, etc. This is without taking into account the ORM/ODM and other things. But yeah, sticking with only one, is way better than trying to be a full-stack in JS :)

[@binitrupakheti4246]

@@gabrielcastilho4168 same

[@oyundimondesi4541]

why tf am I inspired to spend 8 months writing a framework called promethium now...

[@Fireship]

You build it, I'll make a video about it

[@ChaoticNeutralMatt]

🤔🤣

[@user-dt3ur4rn3o]

🗿

[@sloep]

lets go boy!!

[@totallyrandom4664]

@@Fireship deal - deal 😂😂

[@DodaGarcia]

"But I can always go and build my own JavaScript framework for something like that" I just love it when Jeff is sassy lmao

[@coder4life]

he was serious. next video: FireshipJS - latest and greatest framework

[@chotai]

@@coder4life jeff'd fire this thought in seconds

[@randomdev4246]

oh hey look flamethrower js. well it's completely unrelated to hydrogen but who cares

[@meinsupport]

another day, another JS framework

[@eli-shulga]

After bleeding my eyes from working with Liquid, Im getting dizzy only from looking at Hydrogen.. Vercel have a very solid starter using Nextjs with most of the big e-commerce providers.. Other then working with Nextjs which is a joy, you still have the option to switch e-commerce provider in the future.. Love your quick reviews of tech, getting the general idea enough to understand if I want to dive deeper or not Thanks Keep it up

[@nattydb84]

It's just amazing how you to can post videos quicker than I can even watch them. Great channel!

[@roothacks6864]

in love with these 100 secs videos good job fireship!

[@Unc3]

I feel like it should be called a scaffold like in rails, rather than a framework. It's too proprietary

[@aredeker]

Jeff, you are awesome 🔥 The frequency and quality of your videos is from another planet 👽 Since a year or so i watched every video you released

[@somethingtodiefor1]

I am not a developer... yet, but I love the way you explain things (although half the things go over my head). I have started learning Python for fun and your videos keep me motivated :)

[@sucrettae]

I'm so hyped to see companies ask for 2+ years of experience in Hydrogen in a few weeks

[@coder4life]

you don't have that yet?

[@speppucci]

lol

[@DanBorgia]

Lol I saw your comment on their video and now you have it ready. You are amazing!

[@NNNedlog]

Can't wait for fireship to reach 1M subscribers

[@enriqueMota]

Can't wait to see recruiters ask for 2+ years of experience in a framework that's in developer preview

[@rodrigoehlers9057]

Haha Developer Preview when it's aimed at developers.

[@awekeningbro1207]

First *liquid* , then *hydrogen* inspired by *react* , and very soon *oxygen* . They should make an IDE and call it *carbon* , Shopify just loves chemistry for some reason.

[@dbroche]

in my experience most dev shops have cutesy naming conventions for internal tools and server clusters. Way back in '09 when I was at Slingshot one of our teams used planet names from star wars for stage, dev, and production. ;]

[@SteveBoyer10]

H2O = liquid

[@particlesplaying]

I don't want to talk about Hydrogen, React, or JS. I just wanna say..Fireship, you are always on FIRE man! You made me like your videos before even watching them!

[@Nobody-md5kt]

I went from falling in love with JavaScript, to C programming full-time, and then gained some new-found interest with JavaScript. Now, I want to go back to C programming.

[@sungjuyea4627]

I started my programming with R and Python. And for living I chose to learn JS, and I now become hating it. Recently I started to learn C++ and it is a sort of redemption from that bloody damned JS.

[@albirtarsha5370]

C was the good old days of programming.

[@mohamethseck]

Damn, you quick with it lol. This is dope, but makes me think I should go into PHP

[@dontmindme4009]

Nice. I was just getting the hang of react and nextjs

[@lanceang795]

These animations are so cool… And he does them in 1 day.

[@christophkrass6929]

He probably has a js framework for that

[@pedrorodriguez2683]

A video about React Server Components would be great

[@ZiPMo85]

Checkout the nextjs 12 video

[@tommyo2172]

Fireship, do you mind making a video showing us how you learn new programming technologies? Like kind of a walkthrough. I don't care if the video is an hour long.

[@charlesm.2604]

Watch the announcement talk to understand what and why then dive in the docs to understand how and finish up by cloning a repo for creating your first project.

[@TheNewton]

Learning to Learn, is a different process for everyone no shortcuts.

[@charlesm.2604]

@@TheNewton That's true but before actually learning how to implement or how to use you should understand what the technology is, what problem it solves and how it solves it. Most people, especially self-taught, struggle in their learning process because they undervalue the importance of that crucial step. For example before trying to implement GraphQL you should be able to explain what it is and how it works.

[@Jubinmail]

I'm sure there's a framework for that.

[@trevortrevose9124]

Released yesterday damn thats y I love fireship

[@apresthus87]

I have a shopify store and built a custom storefront and custom product design tools with React integrating with Shopify's graphql api. This looks really interesting, especially the easy integration of server rendered components. But I dread the work of porting my entire storefront over, so I'll wait for now :P

[@Omerko]

Yes, as you said, it is too complex just to start off, hopefully, we will see a "basic" starting point and a tool as a CLI in the future as well... Nice video :D

[@mwimb6716]

the "help wanted" at 5mins got me man lmao

[@ricoaw500]

I always use shopify eslint rules. finally I can see full project pattern from hydrogen.

[@jouebien]

relistically is a replacment for the cobled together Slate system that was built on top of liquid(mostosh or or less) and some jank jquery components.

[@acd2377]

We need more frameworks. Our life is still not easy enough.

[@okyanusozsahin3439]

Great for vendor lock-in.

[@chrisodillman3355]

hurray.. exactly what everybody needs .. another hip js framework ...

[@adicide9070]

thank the dude for another framework

[@BrianClincy]

React is a library that has become a sub language of Javascript. The elements as names of frameworks of language is awesomely confusing at times. Thanks for keeping me in the know!

[@Almighty_Flat_Earth]

When svelte/sveltekit enters the room , poor react, angular, and vue bow down. Svelte is the future of the Web 4.0

[@dealloc]

jQuery all over again. jLike jWhere jThis jIs jGoing.

[@hamza_dev]

They have liquid as well.

[@Jolterix20]

Please make an updated Firebase video, would really appreciate it

[@aliBoumedyen]

The famous saying " Yet another JavaScript framework" still valid 😵😃

[@MyName-fr3nf]

big brain move to create an ecosystem that lures in devs

[@dabasishkundushento5992]

Working with so many frameworks, we will one day forget a language called "JavaScript" existed...

[@hugodsa89]

Hydrogen would be nice if used under the concept of microfrontends. So your blog and marketing pages could be on Next and your Shop could go on Hydrogen, but they would have to have to have very similar implementations for how they use their features / concepts. Can you imagine using 2 different ways to routing :D in Next you use slugs and in Hydrogen you use something else, do this across 4 or 5 concepts and the cognitive overload gets bonkers.

[@lukeh990]

Love your content!

[@unleashthedog]

Was announced longer than “just yday”, the shopify event was in the summer

[@TheNewton]

Hydrogens differentiator will likely be its tuned to the needs of ecommerce from the start instead of an afterthought like Next and others. And being created then backed by a billion dollar is another selling point.

[@vengeance9047]

Ultimate 😍😘😘😘

[@djosefandersson7605]

Good news for the vloggers who comparing JS frameworks

[@sogzful]

which framework do you think the robots will choose when they replace us? maybe they'll build their new ones?

[@chris-hayes]

I'll admit I'm not enthusiastic about "another" framework. But, having just built a Shopify theme for an ecomm site that struggled to be modular. I'm interested in the dev experience that hydrogen offers. Shopify themes end up being monolithic and directly working with Shopify's API seems like more effort than it's worth. This might be a happy medium. The ability to write server-side code that isn't restricted by Liquid's minimalistic features would be nice.

[@mustafahanif2876]

The humour is amazing

[@phil-l]

It's beautiful

[@willinton06]

Meanwhile on C#, we’ve been using ASP for over 20 years, still going strong

[@comediehero]

And can now even say goodbye to JS thanks to Blazor and webassembly :)

[@oomettie]

Fireship is stupidly amazing! I am a better person for being subscribed to this channel. Thanks!!!

[@Alex-bc3xe]

We can now have the Mendeleev table of frontend frameworks :))

[@pastuh]

Holy Moly Gvatemoly.. And peoples ask if Web development is hard... Tutorial hell for sure.

[@rishabhanand4270]

Liquid + hydrogen. For a rocket ship. I like the idea. Dang shopify, you good with names. I call dibs on the framework Nitrogen btw.

[@perregrinne2500]

Sorry mate, there is already a web framework named Nitrogen. It's an Erlang framework.

[@sagnickbhowmick6191]

Oxygen, Hydrogen, omg you can already tell that the Shopify dudes love Chemistry!

[@xterminator2121]

Have you done a video on Gatsby? I’ve been using it this last year and really enjoy it. Wonder what your thoughts are on it.

[@TheNewton]

Gonna be a big opportunity for HTML theme to Hydrogen convertors.

[@sonmangaking]

Let’s gooo

[@SunilSkanda]

Could you make a video on Fundamental skills needed for a web developer? It'll be useful for any tech-stack one prefers.

[@guyfrancoisdeclaudenkouka1014]

Wow 😲

[@mshuman]

0:57 I was not expecting to see Jordy from Cinecom here.

[@arvopart6483]

And on that note I have decided to become a backend developer again.

[@NathanHedglin]

Welcome back! Where our tooling works and doesn’t change every 6 months.

[@xtremescript]

Yo dawg, I heard you like frameworks, so I put your favorite frameworks in a framework and containerized it for another framework. Thumbs up!

[@ktsnowy]

[ It was just announced yesterday ] Job ads: NEED 10 YEARS OF EXPERIENCE IN HYDROGEN...

[@MercyFromOverwatch2]

Jeff is still my favourite tech youtuber

[@nathanlloyd774]

Ahh yess....another JS framework....just what the world needed

[@abe10]

Would love a video on Remix

[@vinaykotturi1283]

I feel overwhelmed by all those frameworks.

[@KeganVanSickle]

What do I think? I think Magento for e-commerce. Personally, I'm so sick of all the JS fatigue. I don't worry about all of the "latest" and "greatest". I know JS/TS really, really well, and if I need to learn yet another framework at some point in time, then I will.

[@AbhinavSingh-ft1pr]

Awesome content like always!

[@timedilation9583]

Can we please have Selenium in 100 Seconds video. Thank you so much. Love your Videos

[@segfaultii]

Framework is a day old, 5 years experience required for the next job.

[@brownfox65]

Feels a bit like the Spartacus Framework in the SAP Commerce Universe.

[@klausgy903]

Can you access theme customization variables (and metafields) in Hydrogen?

[@philipbeauford]

3:30 correct me if Im wrong but Hydrogen comes with React Router yes?

[@prajval37]

I think Hydrogenjs future is bright.

[@imigram8851]

This make me think that I should start learning Python and Django right now.

[@llamallama7]

I was thinking the exact same thing...

[@ahmedaghadi8281]

Why? can you explain me? I had just started my web development journey so I don't know many other stuff.

[@TheDutchisGaming]

Imagine someone now creating a framework called dihydrogen. And then a hosting service called di-oxygen. I mean put them together and they aren’t the same at all. Who would win, water or hydrogenperoxide?

[@anjanavabiswas8835]

Hydrogen peroxide is more cooler

[@juanbomfim22]

It is because this framework is not balanced

[@gunarcom]

Entry level Hydrogen Job, must have 5 years experience

[@VolodymyrDovbenko]

Shopify had a really poor custom templates development framework. This looks like a really huge step from them. I like that

[@lorandhorvath4466]

Are you talking about Liquid?

[@VolodymyrDovbenko]

@@lorandhorvath4466 yes, I think so

[@andreimargelatu195]

Hi , I wonder what is your opinion about motoko programing language , thx!

[@WirIez]

I am going to create a framework that is 100% customized, that way my end users can use exactly what they need! It is going to be amazing. Dynamic, fast, modular and more!! I will name it hyper-ecma-style, HES.

[@alexanderleonardo5649]

My god.. have learned angular, react, vue, and theres more and more... oh my

[@gabbe2124]

I click your videos so fast now..

[@transplatin.]

Please make video on all the open source licenses, and how to choose the right licence.

[@AbdulQadir-eb1vi]

What do you think that will it worth learning this and then work on freelancing platforms?

[@convolutionalnn2582]

Can anyone tell me how to use Angular + Angular Universal...They said CSR is use mostly with SSR/SSG? What is best combination of rendering ?

[@karanganesan]

Curious: what do you use to create these videos??

[@imkir4n]

Dev : Ah shit here we go again!

[@mbak4263]

There's no way I'm learning this.

[@emericgnonhoue7029]

Nice

[@beep1677]

when the playlist of building fireship io in next js 12 coming ?? Dont leave me hanging brother , if not fireship then at least 1 full stack app in next js will do. I want to learn build stuff from your perspective.

[@shaunpx1]

Do you think it would be worth the trouble to use this framework to build an Ecommerce store and connect it your own API or backend that is NOT shopify? or is it to opinionated for that?

[@mohammedsaifullah2434]

Ahhh here we go again!!!!!!!!!!!

[@pancoalatv5606]

1:31 you do have psychic powers, I was about to create a project called Arsenic and now I don't want to

[@arroba3218]

Why not incremental static regeneration? Server side rendering seems PHP-ish (i.e. old).