Astro in 100 Seconds

Astro is an open-source tool that can build static HTML websites using popular frontend JavaScript frameworks (React, Vue, Svelte), while loading fully interactive components as needed github.com/sno...
#webdev #js #100SecondsOfCode
This video is NOT sponsored.
🔗 Resources
Astro astro.build/
Islands Architecture jasonformat.co...
🤓 Install the quiz app
iOS itunes.apple.c...
Android play.google.co...
🔥 Watch more with Fireship 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

[@shutterbug-kj1st]

The Astro homepage used this video to explain what Astro is. I really like the concept of explaining something in 100 seconds.

[@lightning_11]

That's really cool that Astro would pay Fireship such a compliment. And, I have to agree, these videos are great for getting a wide overview of possible tools so that, when you have a specific website problem to solve, you know where to go to solve it!

[@bawad]

made me do a double take lmao

[@xenon4602]

seriously 😂

[@winstonzheng8882]

Same

[@ThisNils]

OMG HI BEN IM A BIG FAN

[@Uselessnoobcow]

My first exact thought lol

[@runie]

hahahaha

[@LemonChad]

Astro: Exists Ben Awad: and I took that personally

[@josefabarca]

I just heard about Astro for the first time during a call this morning, then I see this video popup in my timeline, amazing

[@yowut8075]

Amazing ai

[@deancomrade7961]

Google is always listening

[@sunimod1895]

I think he's a magician this has happened to me before too!

[@FalconTheFries]

Google knows bro

[@kevinsamosir466]

could've been that fireship was already on your youtube bubble and they just happened to upload this video on the same day with your call

[@MarioFox420]

Finaly a „… in 100 seconds“ episode with something i didnt know allready. But i still watch them all. Keep going with your good content 💪🏻🔥

[@TheJobCompany]

Don't tell me you knew COBOL already

[@WasiMaster]

doubt

[@MarioFox420]

@@TheJobCompany Yes i do. I had to give a lecture about it at school.

[@RoyRope]

I do enjoy watching the 100 second videos about stuff I already know. 😅

[@sebastians2797]

/r/humblebrag

[@neatfastro]

"Not everything that glitters is gold" But every video fireship uploads is.

[@admaxcool]

Love the new intro animation for the product logo. DOPE AF 🔥🔥🔥🔥🔥🔥

[@SupreethBS]

Kids now : I wanna be an -astronaut- astro developer

[@The-Dev-Ninja]

lol

[@TerriTerriHotSauce]

Hi. I'm now identify as Kids.

[@jahirulfiftytwo4003]

Astro -not- in the _cloud_

[@EmmanuelNgwandu]

I have just tried an Astro project with both React and Svelte and all works, this is fun!! can't wait for the whole video

[@dinesh08ification]

Wow this actually blows my mind, I mean having different frameworks in a single project that’s alien level 😨😱

Using a JS framework to avoid the effects of using a JS framework could be considered as recursion?

[@Pabc11]

The way I see it is: JS frameworks bring lots of DX goodies to the table that might not offer a good UX when building a web site (note "site", not "app"). Astro basically allows you to keep that DX (and your workflow) while outputting 0KB JS by default which offers better UX for sites, specially for low-end devices and slow connections.

[@RaphaelAlejandro]

I'm really enjoying Astro.

[@MuhammadCatubig]

Microfrontend in 100 seconds next. Just a suggestion. 😁

[@Morwha]

Those logo animations in this video and MongoDB video are awesome!

[@mitch7w]

Jeff you've been pumping out the content! 💯💯💯When are we gonna see some ML/AI content based on your Kaggle experience?

[@Fireship]

That's been on my list for a long time, hopefully make it happen soon

[@mheys1]

I love this series of videos, the one about Redis was really helpful.

[@mohammadbasyouni7171]

Top level await Reminds me with Deno!

[@IceBreakerGamer]

I'm a junior developer and I've gotta say man, you are awesome! You helped me a lot with these amazing informative entertaining videos, especially the angular tutorial ones! You official my mentor. #BellNotificationSquad

[@Tom-rh2eq]

After starting with react several years ago nothing put me in hype mode except astro. So simple and elegant :)

[@anupamdahal7029]

I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi). Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool. Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.

[@ark5458]

Turns out you can use this with something like larvel or django, release the hype everybody

[@lisatom42]

I learn new things every time you make a video! Keep them coming!

[@talhaibnemahmud]

Damn! Waiting for the full tutorial ❤️

[@dasten123]

oh great, _another_ framework... or so I thought first... BUT NO! THIS IS AWESOME!

[@OleksandrBorysenko333]

Really great tool for creating simple HTML pages.

[@rizanmohomed8029]

KZbin need to introduce a way to like this kind of videos more than once Totally deserve it 👌👌🤩🤩

[@rdewitt2]

Thank God!!! Finally a framework where you write the HTML in the right place. I hate writing HTML in JS… super super redundant

[@krtirtho]

Finally, something that has the power & ambition for being a better alternative of Nextjs

[@montoyland]

Sounds a lot like the principle behind tools like Stencil that compile to highly performant WebComponents that are entirely framework dependency free!

[@citizendot1800]

React, Vue, Svelte all in one file? Top level await? What is stopping this from being best framework out there?

[@eduardoantonioolmedomojica5438]

Top level await is actually just a ecmascript's new version feature...lol

[@martinchoutka2279]

Who would like to write React, Vue or Svelte in one file or project? What the fuck?

[@OzzyTheGiant]

@@martinchoutka2279 devs that know one framework but not the other. Good devs just learn all of them. Unless it's react, you can forget all about react.

[@winstonzheng8882]

Cool stuff!

[@Dominik-K]

Thanks a lot, I've been looking at this framework for a few days and I think I'll try to make a bigger website to try it out

[@Nobody-md5kt]

And just when I got used to Svelte, here's another thing. My computer science degree really didn't prepare for the amount of new things coming out. Help.

[@gadgetboyplaysmc]

I think SvelteKit does the same thing so you might wanna try that out since you already know svelte. Once you learn that, it's gonna be way easier to learn Astro. On the bright side, even if the CS degree doesn't prepare you, you're already preparing yourself by learning on your own. ;)

[@melvinyit6859]

Finally all framework in one. Mean i need to.learn all.to fully utilize it 😅

[@augustday9483]

It's like Voltron lol

[@anniem6902]

Woah…this is dope! Everyone hating on here either needs to get with it or get out of the way. Astro is really something special! 🔥

[@kevikiru]

Thank you for this!!!! I was wondering what framework I should learn after my JS course

[@netd777]

Astro also does a few advanced optimizations inspired by MarkoJs, like HTML streaming. But with astro lots of frameworks can benefit from those performance gains. But I wonder, will astro ever support angular? Or is it too complicated lol

[@asdf8asdf8asdf8asdf]

You had me at “archipelago”.

[@isaaccespedes4817]

that top level await reaction was golden

[@xali2008]

is this work with single-page applications? one of the good things about frameworks like react is when users load a page they don't have to reload everything when opening a new page, you only fetch the parts of the page you need.

[@TechdubberStudios]

Extra love this video for the Tron Legacy motorcycle footage.

[@ecs1611]

This video is digital gold

[@stasjyters]

How could we reduce firestore reads using local cache? I’m building a local plumber marketplace where each plumber can see all the posted jobs by homeowners and send a quote. I have multiple collections like chats, available jobs, users. And even having a couple of users (plumbers) make my firestore reads go to the moon. Per 5 jobs I am having 1200-1500 reads :(

[@javiasilis]

I have one question. How does this compare with pre-rendering and then hydrating? Is there a way to prevent JS from being loaded at all?

[@mateowang6570]

Sounds really cool, but without SSG I don’t know if it’s going to replace the likes of next.js. With the creator of astro being Fred Schott (he made snowpack, for example), I look forward to what he has in store for astro in the future!

[@wayneswildworld]

When is the full Astro video coming out! I can't wait!

[@lsd22252]

More detailed video? Yes please 😁.

[@hashiromer7668]

What advantages does it offer over native application level for frameworks like Next or Sveltekit, Gatsby?

[@anjalbinayak]

Wow, gonna use it to create my new portfolio

[@philipmwangi5270]

@fireship, could you kindly do a demo tutorial?

[@jomy10-games]

I did not know about this, but I was actually just thinking about a needing something along the lines of this!

[@t3ntube357]

These everyday new technologies will cut my breathe someday

[@eli-shulga]

Cool gonna check it out, thanks!

[@RoyRope]

Mateusz in a fireship video, when universes collide!

[@umang2226]

I watch your videos at normal speed & all others at 1.50, LOL ❤️

[@rahulbalan]

Gone on you with the pick and roll Young LaFlame, he in sicko mode

[@captainlennyjapan27]

Looking forward to this tutorial of Astro!

[@sandorturbucz425]

I will create a framework that makes it blazingly fast to create frameworks like Astro which is a framework around Frameworks like React. Obviously this will speed up development, Astro is still so complex and convoluted.

[@heart.s_]

I'm gonna try this out, thanks!

[@kvncnls]

Hmm, this kinda reminds me of Svelte's Elderjs framework. It has the same features, but Elderjs has the bonus of being SEO-focused.

[@pranilism_official]

Greatly explained ♥️🤟

[@saschamajewsky7990]

Amazing content

[@matthewfala]

Now, make a compiler to go from astro static html to lazy loaded web assembly to rule the world.

[@Viviko]

This looks interesting.

[@pilearn1266]

Wow this tool sounds amazing

[@complex5372]

wow. This is impressive. Thanks for sharing.

[@simonleonard4084]

Hey Fireship! I didn't understand what's the difference between Astro and, let's say, Gatsby or Gridsome ?

[@motr3bam867]

I think its most important advantage is that u can use multiple libraries or frameworks with it. Like u can combine angular and react

[@simonleonard4084]

@@motr3bam867 Okey, I can't figure out what problem it solves, but I've just recently started Vue.js, and I don't know the others. I mean, each framework can do what the others does, right?

[@user-ld7mt9bx9q]

I was seriously thinking about getting into next.js but this seems to be the better option.

[@motr3bam867]

@@simonleonard4084 @@simonleonard4084 well... yes and no. They each are slightly different and each has a different approach for making frontend apps. For example react might be a pain in the ass for large scale applications because of its library-ish nature. I need to read its document but i dont think astro will ever be a big name like react, vue and angular are. But its built-in server side rendering/generating and other features are quite optimal.

[@motr3bam867]

@@user-ld7mt9bx9q I'd highly advise against it. Astro does not have as many job opportunity as next.js does. Plus for hybrid applications that use both static generation and server side rendering next.js is still the best option.

[@ninjaasmoke]

I got preview access some time ago, it's pretty good.

[@sommereder]

Nice one. So Astro is like Next?

[@gadgetboyplaysmc]

Same thoughts! But Astro looks really intuitive. HTML-first kinda thing. Also it's so easy to do code-splitting and the fact that you can use different frameworks. Pretty good

[@thalibmuhammad9519]

so this is framework that process another framework (react, vue, svelte) (how bout angular? lol) cant wait for the framework that compiles framework that process another framework!!

[@leopb21]

“The definition of genius is taking the complex and making it simple.” Albert Einstein

[@YinonOved]

interesting. think i'll give it a dive right now

[@HomelessDeamon]

Damn that just solved my problems (3 problems in one go) all i had to do is watch 100s vid, it looks good and gonna try it, in fact its soo good that i am leaving a comment that looks like more of a commercial fake review than an actual comment :D

[@the-nasim]

It would be great if Astro used Vite instead of Snowpack. Vite has a much larger community while snowpack lacks it.

[@____-gy5mq]

Snowpack guys are the ones who created it. And they developed it in retaliation to svelte switching to vite. Astro has plans for server side rendering

[@aaa-my5xy]

astro is powered by vite now, idk how long it's been like that for though

[@miles611]

Would be awesome to do a video going deep into HOW doas a tool like Astro do this magic static HTML rendering!

[@rahulkumarsingh1716]

This all features is already there in NUXT JS

[@takutakutakkunn5498]

What is this?? new JS framework?? I am angular developer. Which programming language or JS Framework should I learn next?? Svelte? Python? Go?

[@catbb]

idk anymore man. these tools gonna make development easier or harder.

[@nonetrix3066]

Honest question what's wrong with just HTML and CSS and JavaScript if you actually need it? I find it fairly easy to use

[@avichalpandey538]

hey, I would love to see how to use firebase with node, actually a FERN stack video.

[@BHVampireLF]

Hi! You can make a video about PRISMA? Is a futuristic ORM and works amazing, but many people still use RAW SQL queries or deprecated ORM's like Sequelize. Your videos are amazing

[@ivyZorz]

That seems cool and all but doesn't selective hydration with react 18 kind of solve a lot of the similar problems astro is solving here?

[@АртёмТриколич]

Great video

[@ruturajchothe5516]

Lightning web components in 100 seconds

[@shateq]

Isn't this, an unexpected, video marathon?

[@amarg26]

Astro, copilot what else is remaining to replace the humans...!

[@hsh2119]

Please a full video on it

[@Godalming123]

Cam you update this video for astro v4 with view transitions examples

[@ChristopherCricketWallace]

So the end result is still a static HTML file sprinkled with a little JavaScript. Why even bother with using the JS frameworks as middleware now? If Vue, Svelte, React, etc are not going to run in the browser, then why use them at all? The build stack is even bigger now. Just render templates on the server side an build static files with

[@variable_0]

The way you said Astro was like from the song Astronaut in the ocean, the one by Masked Wolf.

[@shindradavid1309]

This is my favorite KZbin playlist 🔥🔥

such interesting info, thanks mate 👍😀

[@tirtakeniten]

"I used the stones to destroy the stones" - Thanos

[@maarten1012TTT]

Would love a follow up video!

[@hugoh364]

" - Which js framework do you want to use ? - Yes."

[@shateq]

Jeff, can you remind me your portfolio website name? 😆 I would like to see how does it looks like.

[@EmmanuelNgwandu]

Thank you for sharing

[@CodingPhase]

interesting never hear of this

[@BrotherCheng]

I actually don't understand from watching this video how Astro is different from other static site generators. Can't you do the same thing (with islands of different dynamic content) with literally any other static site generator? It's kind of up to you to decide how to structure your HTML/JS setup. Or is Astro just doing the heavy lifting for you?

[@markmental6665]

Astro is html only by default, javascript loading can be really tinkered with so it only loads at certain times using Astro making it so you can run most of the app server rendered if you want. A lot of other SSGs dont give you easy control over rendering like that so it does do a lot of heavy lifting.

[@andrewzebic1441]

Can you do a video on MQTT? Really useful just for public knowledge