Video immediately makes me think Fireship. Similar style but slightly longer video. Inevitable that his style would have been "adopted" for these kinds of videos.
Great zero-to-Astro vid! Nitpick: Instead of using a section to wrap form elements, a form will enable other fields than the save button to submit the form. Instead, use the onSubmit on the form. The example given in the video may even warrant using a plain old form without Solid JS, because of the simplicity in the implementation. I never really got the sentiment that Astro is a good replacement for full-stack applications, at least not in the same vain that Next.js is. As soon as you needed authentication, the only resource I was able to find was a hardly maintained OSS library. Looks like there's an Auth JS core library now, which could possibly be made into a video.
Do auth on your server. I have built like 4 production apps for my clients with astro they are super fast and responsive even with complex forms and dashboards. Astro is a very good "Full stack" framework for most apps. Btw next or sveltekit are good where the user sessions are more than an hour or two but for all other sites and apps astro is very much sufficient Edit: lucia auth is very good for authentication or supabase works well too
I reach you content searching stuff about Astro but in the end I've learn how to use Turso a little too. You're as fast as Fireship but in the end, user can get a good idea about new tools: that's all that matter, thanks for your good content !
As a junior dev, some of this is really hard to wrap my head around, but everyone raves about Astro, so I would love to learn more about it. I guess i'm just having a hard time understanding what benefit there is from using Astro with your existing framework (such as SolidJS).. Am I dumb?? BTW congrats on your work with the Deno YT channel! As always, great vid!
Thank you! So Solid JS will only tackle the CSR part of your app (the stuff that runs in the browser). With Astro, you can employ the server in the Rendering process, and also run other code on the server for various purposes (database work, rest APIs). Here is another video explaining the SSR & Hydration process - ruclips.net/video/kZG3izJu7qE/видео.html Also, my next video (will be released tomorrow) discusses SSR in more detail. Don't worry if things don't click fro the get go - there are a lot of concepts and tools used in web development these days. Just stick with it. Good luck!
I've been using Astro and it's honestly not anything mind-blowing, it's just fine. It does some neat things but it needs better TypeScript support and better props support for its own .astro components. I can also see how its documentation can also be a bit confusing for web dev beginners, particularly figuring out what runs on the server vs what runs on the client. We'll see how it matures.
Everything runs on the server and any components with client directives run on bot client and the server unless you use client:only I don't understand what you mean by props support but assuming you meant ts support for props just do something like interface Props { name: string; ...your props here } in the front matter script ( or whatever it is called ) and you get full type safety when using.astro components
@@stln768 They actually first released it back in 2020, but you had to pay to use it. They came up with a lot of new ideas in SSR, and frameworks like Astro, SvelteKit or Solid Start drew inspiration from it.
@@awesome-coding I suppose that “new” is relative when it comes to JavaScript frameworks. 😆 Don’t you feel that remix still is better for full stack dynamic applications and Astro is a better fit for content focused sites? (As stated in the docs)? Not trying to argue here, just trying to figure out if it’s worth it building a poc in Astro or if I should just stick to remix.
Im confused on something csn someone help? Let’s say you have a React component that you put into an Astro component and add the client:load directive. Does that mean the jsx for the React component is sent from the server as html and then just the event listeners are hydrated, or does the entire component revert to default React, where it sends as a blank html and then hydrate’s on the client?
1. The react component will be server side rendered, and sent as static HTML to the client; 2. The browser loads app the HTML and displays it in the page; 3. At this point the component is visible in the page, but you cannot interact with it. (it is just HTML, so no internal state or JS event handlers); 4. The browser finishes loading the page, so the Hydration process for your component (also named an island in this architecture) starts; 5. This means that React is also present in the page, and is used to rebuild your component on the client (process known as CSR); 6. Once the component is built, the static HTML will be replaced with the interactive DOM nodes.
Hey! The code in the video is not actually in an editor - it's a combination and styles and graphics, all mashed together in Photoshop. My goto editor is IntelliJ Idea with its recent modern UI update.
@@TheBejbiborn well that theme already exists and it is called one dark Edit: the file explorer is an imaginary movie magic so I don't know how you'd achieve that in vscode
im just here to say QWIK but nice video on astro, looks very cool, but to me nothing seems to be cooler than qwik and what it does in the background for the dev
It is more similar to the SvelteKit, in the sense that they both address the same issue. In the video I used Solid as the UI integration, but you could use Svelte instead of Solid, or both of them at once.
@@awesome-coding I'm still learning svelte (not sveltekit yet), it seems fun for now, the one thing I don't know if possible is exporting multiple components from the same . svelte file like in react I used to make custom form input components in the same file, then export them individually since there's different kinds of inputs needed so making one custom input with ton of props is unreadable when compared to simply making seperate individual input components in the same file, is that possible? Like in a Inputs.svelte can I export a normal Input tag, a custom input for password, a custom input for telephone number, one for email, one for date etc?
@@blackpurple9163 exporting multiple components from a single file is possible but writing then in the same file is not Create a new file say inputs.js/ts and do export { default as EmailInput } from "./EmailInput.svelte" export { default as PwdInput } from "./PwdInput.svelte" You can now import that from another svelte file like import { EmailInput,PwdInput } from "./inputs"
Another great video! Straight to the point and still easy to understand as usual!
Thank you!
Video immediately makes me think Fireship. Similar style but slightly longer video. Inevitable that his style would have been "adopted" for these kinds of videos.
yep.. if you have a “faceless” channel, the tools you can use are rather limited
Great zero-to-Astro vid!
Nitpick: Instead of using a section to wrap form elements, a form will enable other fields than the save button to submit the form. Instead, use the onSubmit on the form. The example given in the video may even warrant using a plain old form without Solid JS, because of the simplicity in the implementation.
I never really got the sentiment that Astro is a good replacement for full-stack applications, at least not in the same vain that Next.js is. As soon as you needed authentication, the only resource I was able to find was a hardly maintained OSS library. Looks like there's an Auth JS core library now, which could possibly be made into a video.
Do auth on your server. I have built like 4 production apps for my clients with astro they are super fast and responsive even with complex forms and dashboards. Astro is a very good "Full stack" framework for most apps.
Btw next or sveltekit are good where the user sessions are more than an hour or two but for all other sites and apps astro is very much sufficient
Edit: lucia auth is very good for authentication or supabase works well too
Thanks for the zero-to-Astro suggestion. I'm gonna steal it for the Video title 😅
You are right about the issue - I appreciate you pointing it out!
I reach you content searching stuff about Astro but in the end I've learn how to use Turso a little too.
You're as fast as Fireship but in the end, user can get a good idea about new tools: that's all that matter, thanks for your good content !
Thank you for your feedback!
Best video about astro I've ever seen
Glad to hear! Thank you!
As a junior dev, some of this is really hard to wrap my head around, but everyone raves about Astro, so I would love to learn more about it. I guess i'm just having a hard time understanding what benefit there is from using Astro with your existing framework (such as SolidJS).. Am I dumb?? BTW congrats on your work with the Deno YT channel! As always, great vid!
Thank you!
So Solid JS will only tackle the CSR part of your app (the stuff that runs in the browser).
With Astro, you can employ the server in the Rendering process, and also run other code on the server for various purposes (database work, rest APIs).
Here is another video explaining the SSR & Hydration process - ruclips.net/video/kZG3izJu7qE/видео.html
Also, my next video (will be released tomorrow) discusses SSR in more detail.
Don't worry if things don't click fro the get go - there are a lot of concepts and tools used in web development these days. Just stick with it. Good luck!
Islands and hydration in Astro look a little bit overwhelming. Why not just to use Nuxt with it's versatile composables?
- less data needs to be transferred
- no reliance on Vue + Nuxt ecosystem
- also ability to use something like alpine with its 6kb of data
Nuxt is bloated af
I've been using Astro and it's honestly not anything mind-blowing, it's just fine. It does some neat things but it needs better TypeScript support and better props support for its own .astro components. I can also see how its documentation can also be a bit confusing for web dev beginners, particularly figuring out what runs on the server vs what runs on the client. We'll see how it matures.
This is a fair assessment!
Everything runs on the server and any components with client directives run on bot client and the server unless you use client:only
I don't understand what you mean by props support but assuming you meant ts support for props just do something like
interface Props {
name: string;
...your props here
} in the front matter script ( or whatever it is called ) and you get full type safety when using.astro components
Yeah, improved TS support would be great.
@@christopherkapic wdym ?
@@christopherkapicTS support is pretty great. Better than expected.
Another great video. How would you compare this to remix?
Thank you!
Remix is one of the OGs in the space. However, I feel there is more flexibility and momentum behind Astro these days.
OG? Isn’t remix fairly new (having just reached 2.0)?
@@stln768 They actually first released it back in 2020, but you had to pay to use it. They came up with a lot of new ideas in SSR, and frameworks like Astro, SvelteKit or Solid Start drew inspiration from it.
@@awesome-coding I suppose that “new” is relative when it comes to JavaScript frameworks. 😆
Don’t you feel that remix still is better for full stack dynamic applications and Astro is a better fit for content focused sites? (As stated in the docs)?
Not trying to argue here, just trying to figure out if it’s worth it building a poc in Astro or if I should just stick to remix.
Im confused on something csn someone help?
Let’s say you have a React component that you put into an Astro component and add the client:load directive. Does that mean the jsx for the React component is sent from the server as html and then just the event listeners are hydrated, or does the entire component revert to default React, where it sends as a blank html and then hydrate’s on the client?
1. The react component will be server side rendered, and sent as static HTML to the client;
2. The browser loads app the HTML and displays it in the page;
3. At this point the component is visible in the page, but you cannot interact with it. (it is just HTML, so no internal state or JS event handlers);
4. The browser finishes loading the page, so the Hydration process for your component (also named an island in this architecture) starts;
5. This means that React is also present in the page, and is used to rebuild your component on the client (process known as CSR);
6. Once the component is built, the static HTML will be replaced with the interactive DOM nodes.
Whats your tech stack for editing these videos?
Hey! This one was made with Adobe Rush for video editing, Photoshop for the actual graphics and a LOT of manual work 😅
@@awesome-coding Adobe rush ? What !
@@TechBuddy_ Smooth and easy 😅
@@awesome-coding cancelled. Unfollowed. Unsubscribed. Flagged as inappropriate. You are a racist. /s
I saw solidjs in integration part of astro config
Pls more about Astro fullstack
Sure thing! More to come!
Great, can you do this app in remix 2 (released week ago) a compare these two frameworks?
I'm working on a remix 2 video, which should be out next week.
What software do you use for animation? I like it and would like to use it.
Hey! I'm using the Adobe Suite (Premiere, Illustrator, Photoshop, Rush)
bro im planning to create a new blog website of mine and im having analysis paralysis between nextjs and astro, im from react. i cant decide.
I'm in the same place as you
Which vscode theme / UI plugins are you using? I love how your editor looks.
Hey!
The code in the video is not actually in an editor - it's a combination and styles and graphics, all mashed together in Photoshop.
My goto editor is IntelliJ Idea with its recent modern UI update.
@@awesome-coding Oh! Disappointing! Ever thought of making that into a theme? :D
Great job on the video btw and thanks for answering!
@@TheBejbiborn well that theme already exists and it is called one dark
Edit: the file explorer is an imaginary movie magic so I don't know how you'd achieve that in vscode
We need a moratorium on new JavaScript frameworks. It's getting beyond ridiculous.
😅
im just here to say
QWIK
but nice video on astro, looks very cool, but to me nothing seems to be cooler than qwik and what it does in the background for the dev
Fair enough!
I like Astro more because of the dev experience.
Holy crap that was dense 😯 awesome work ❤ you are copying beyond fireship now 😂
Thank you! 😅
Hi, do you provide link to github project?
Hey!
I don't have a repo for this specific video, but here it is a repo for a past video I did on Astro - github.com/awesome-club/awesome-astro
@@awesome-coding Thanks :)
This looks similar to svelte
It is more similar to the SvelteKit, in the sense that they both address the same issue.
In the video I used Solid as the UI integration, but you could use Svelte instead of Solid, or both of them at once.
@@awesome-coding I'm still learning svelte (not sveltekit yet), it seems fun for now, the one thing I don't know if possible is exporting multiple components from the same . svelte file like in react I used to make custom form input components in the same file, then export them individually since there's different kinds of inputs needed so making one custom input with ton of props is unreadable when compared to simply making seperate individual input components in the same file, is that possible?
Like in a Inputs.svelte can I export a normal Input tag, a custom input for password, a custom input for telephone number, one for email, one for date etc?
@@blackpurple9163 exporting multiple components from a single file is possible but writing then in the same file is not
Create a new file say inputs.js/ts and do
export { default as EmailInput } from "./EmailInput.svelte"
export { default as PwdInput } from "./PwdInput.svelte"
You can now import that from another svelte file like
import { EmailInput,PwdInput } from "./inputs"
Nuxt, is this you?
😂
To astro or to next hm......
To astro!
bun bun bun
😂 suspenseful music intensifies!
..