Astro in 100 Seconds
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- 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
The Astro homepage used this video to explain what Astro is. I really like the concept of explaining something in 100 seconds.
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!
Especially it's not 100 seconds but 136
made me do a double take lmao
seriously 😂
Same
OMG HI BEN IM A BIG FAN
My first exact thought lol
hahahaha
Astro: Exists
Ben Awad: and I took that personally
I just heard about Astro for the first time during a call this morning, then I see this video popup in my timeline, amazing
Amazing ai
Google is always listening
I think he's a magician this has happened to me before too!
Google knows bro
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
"Not everything that glitters is gold"
But every video fireship uploads is.
Finaly a „… in 100 seconds“ episode with something i didnt know allready. But i still watch them all. Keep going with your good content 💪🏻🔥
Don't tell me you knew COBOL already
doubt
@@TheJobCompany Yes i do. I had to give a lecture about it at school.
I do enjoy watching the 100 second videos about stuff I already know. 😅
/r/humblebrag
Kids now : I wanna be an -astronaut- astro developer
lol
Hi. I'm now identify as Kids.
Astro -not- in the _cloud_
Love the new intro animation for the product logo. DOPE AF 🔥🔥🔥🔥🔥🔥
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
"I used the stones to destroy the stones" - Thanos
Wow this actually blows my mind, I mean having different frameworks in a single project that’s alien level 😨😱
I love this series of videos, the one about Redis was really helpful.
Those logo animations in this video and MongoDB video are awesome!
I'm really enjoying Astro.
I learn new things every time you make a video! Keep them coming!
Microfrontend in 100 seconds next. Just a suggestion. 😁
After starting with react several years ago nothing put me in hype mode except astro. So simple and elegant :)
TH-cam need to introduce a way to like this kind of videos more than once
Totally deserve it
👌👌🤩🤩
Top level await
Reminds me with Deno!
Using a JS framework to avoid the effects of using a JS framework could be considered as recursion?
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.
Jeff you've been pumping out the content! 💯💯💯When are we gonna see some ML/AI content based on your Kaggle experience?
That's been on my list for a long time, hopefully make it happen soon
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
oh great, _another_ framework... or so I thought first... BUT NO! THIS IS AWESOME!
Turns out you can use this with something like larvel or django, release the hype everybody
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! 🔥
that top level await reaction was golden
Really great tool for creating simple HTML pages.
This video is digital gold
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.
These everyday new technologies will cut my breathe someday
You had me at “archipelago”.
Thank God!!! Finally a framework where you write the HTML in the right place. I hate writing HTML in JS… super super redundant
Finally, something that has the power & ambition for being a better alternative of Nextjs
More detailed video? Yes please 😁.
Cool stuff!
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
I watch your videos at normal speed & all others at 1.50, LOL ❤️
Damn!
Waiting for the full tutorial ❤️
Finally all framework in one. Mean i need to.learn all.to fully utilize it 😅
It's like Voltron lol
Wow, gonna use it to create my new portfolio
Looking forward to this tutorial of Astro!
Extra love this video for the Tron Legacy motorcycle footage.
I did not know about this, but I was actually just thinking about a needing something along the lines of this!
Gone on you with the pick and roll Young LaFlame, he in sicko mode
Sounds a lot like the principle behind tools like Stencil that compile to highly performant WebComponents that are entirely framework dependency free!
Thank you for this!!!! I was wondering what framework I should learn after my JS course
Nice one. So Astro is like Next?
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
Cool gonna check it out, thanks!
Mateusz in a fireship video, when universes collide!
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
When is the full Astro video coming out! I can't wait!
I'm gonna try this out, thanks!
wow. This is impressive. Thanks for sharing.
Wow this tool sounds amazing
“The definition of genius is taking the complex and making it simple.”
Albert Einstein
Now, make a compiler to go from astro static html to lazy loaded web assembly to rule the world.
" - Which js framework do you want to use ?
- Yes."
Isn't this, an unexpected, video marathon?
Amazing content
guys remember that making more server requests can be also very bad and very expensive for you ;)
such interesting info, thanks mate 👍😀
React, Vue, Svelte all in one file? Top level await? What is stopping this from being best framework out there?
Top level await is actually just a ecmascript's new version feature...lol
Who would like to write React, Vue or Svelte in one file or project? What the fuck?
@@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.
Greatly explained ♥️🤟
This looks interesting.
interesting. think i'll give it a dive right now
I got preview access some time ago, it's pretty good.
Astrolog[0] Bet this is gonna be a billion dollar start-up... oh wait
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
Great video
idk anymore man. these tools gonna make development easier or harder.
I am not first but i clicked as soon as possible because fireship
Nice how you always bring something new
Keep it up ^^
Lightning web components in 100 seconds
Loved ♥
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!
@fireship, could you kindly do a demo tutorial?
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.
recruiters now gon start asking for 5+ Astro experience
Please a full video on it
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.
What advantages does it offer over native application level for frameworks like Next or Sveltekit, Gatsby?
It would be great if Astro used Vite instead of Snowpack. Vite has a much larger community while snowpack lacks it.
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
astro is powered by vite now, idk how long it's been like that for though
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 :(
Cam you update this video for astro v4 with view transitions examples
Hey Fireship! I didn't understand what's the difference between Astro and, let's say, Gatsby or Gridsome ?
I think its most important advantage is that u can use multiple libraries or frameworks with it.
Like u can combine angular and react
@@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?
I was seriously thinking about getting into next.js but this seems to be the better option.
@@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.
@@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.
Thank you for sharing
Would love a follow up video!
interesting never hear of this
Hmm, this kinda reminds me of Svelte's Elderjs framework. It has the same features, but Elderjs has the bonus of being SEO-focused.
Well hot damn! This is a game changer, haha! 🤯
The creator of astro saw as debating if what's better to use. Vue or react or angular , so he decided to create astro.
This is my favorite TH-cam playlist 🔥🔥
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.
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. ;)
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!!
We need beyond 100s😂😭
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?
This all features is already there in NUXT JS
Would be awesome to do a video going deep into HOW doas a tool like Astro do this magic static HTML rendering!
Astro, copilot what else is remaining to replace the humans...!
Ah yes trolling ben away, nice job