Тёмный

Astro Explained 

Awesome
Подписаться 49 тыс.
Просмотров 30 тыс.
50% 1

The Astro crash course.
💬 Topics:
- Building an Astro App;
- Layouts and templating in Astro;
- Astro Frontend Integrations;
- Build an Astro + Solid JS app;
- SSG vs SSR vs CSR;
- What is the islands architecture;
- Astro file system based routing;
- Astro endpoints;
- Turso database & SQLite.
#javascript
Patreon: / awesomeclub

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 72   
@JaskierRezzo
@JaskierRezzo Год назад
Another great video! Straight to the point and still easy to understand as usual!
@awesome-coding
@awesome-coding Год назад
Thank you!
@armantgold
@armantgold 7 месяцев назад
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.
@awesome-coding
@awesome-coding 7 месяцев назад
yep.. if you have a “faceless” channel, the tools you can use are rather limited
@mawill432
@mawill432 Год назад
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!
@awesome-coding
@awesome-coding Год назад
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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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!
@casperengelmann4575
@casperengelmann4575 Год назад
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.
@TechBuddy_
@TechBuddy_ Год назад
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
@awesome-coding
@awesome-coding Год назад
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!
@medivix
@medivix 3 месяца назад
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 !
@awesome-coding
@awesome-coding 3 месяца назад
Thank you for your feedback!
@sdvogo1520
@sdvogo1520 2 месяца назад
Best video about astro I've ever seen
@awesome-coding
@awesome-coding 2 месяца назад
Glad to hear! Thank you!
@bobweiram6321
@bobweiram6321 Год назад
We need a moratorium on new JavaScript frameworks. It's getting beyond ridiculous.
@awesome-coding
@awesome-coding Год назад
😅
@pawan29121991
@pawan29121991 Год назад
I saw solidjs in integration part of astro config
@MikeNugget
@MikeNugget Год назад
Islands and hydration in Astro look a little bit overwhelming. Why not just to use Nuxt with it's versatile composables?
@qwoolrat
@qwoolrat 11 месяцев назад
- less data needs to be transferred - no reliance on Vue + Nuxt ecosystem - also ability to use something like alpine with its 6kb of data
@acopier
@acopier 5 месяцев назад
Nuxt is bloated af
@matanon8454
@matanon8454 Год назад
Pls more about Astro fullstack
@awesome-coding
@awesome-coding Год назад
Sure thing! More to come!
@ayoubkrt5018
@ayoubkrt5018 Год назад
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
@awesome-coding
@awesome-coding Год назад
Fair enough! I like Astro more because of the dev experience.
@samlee4958
@samlee4958 2 месяца назад
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?
@awesome-coding
@awesome-coding 2 месяца назад
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.
@TechBuddy_
@TechBuddy_ Год назад
Holy crap that was dense 😯 awesome work ❤ you are copying beyond fireship now 😂
@awesome-coding
@awesome-coding Год назад
Thank you! 😅
@hoaxygen
@hoaxygen Год назад
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.
@awesome-coding
@awesome-coding Год назад
This is a fair assessment!
@TechBuddy_
@TechBuddy_ Год назад
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
@christopherkapic
@christopherkapic Год назад
Yeah, improved TS support would be great.
@TechBuddy_
@TechBuddy_ Год назад
@@christopherkapic wdym ?
@null_spacex
@null_spacex Год назад
​@@christopherkapicTS support is pretty great. Better than expected.
@stln768
@stln768 Год назад
Another great video. How would you compare this to remix?
@awesome-coding
@awesome-coding Год назад
Thank you! Remix is one of the OGs in the space. However, I feel there is more flexibility and momentum behind Astro these days.
@stln768
@stln768 Год назад
OG? Isn’t remix fairly new (having just reached 2.0)?
@awesome-coding
@awesome-coding Год назад
@@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.
@stln768
@stln768 Год назад
@@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.
@sirisaac8727
@sirisaac8727 Год назад
Whats your tech stack for editing these videos?
@awesome-coding
@awesome-coding Год назад
Hey! This one was made with Adobe Rush for video editing, Photoshop for the actual graphics and a LOT of manual work 😅
@TechBuddy_
@TechBuddy_ Год назад
@@awesome-coding Adobe rush ? What !
@awesome-coding
@awesome-coding Год назад
@@TechBuddy_ Smooth and easy 😅
@TechBuddy_
@TechBuddy_ Год назад
@@awesome-coding cancelled. Unfollowed. Unsubscribed. Flagged as inappropriate. You are a racist. /s
@TheBejbiborn
@TheBejbiborn Год назад
Which vscode theme / UI plugins are you using? I love how your editor looks.
@awesome-coding
@awesome-coding Год назад
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
@TheBejbiborn Год назад
@@awesome-coding Oh! Disappointing! Ever thought of making that into a theme? :D Great job on the video btw and thanks for answering!
@TechBuddy_
@TechBuddy_ Год назад
@@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
@MarekLichtner7
@MarekLichtner7 Год назад
Great, can you do this app in remix 2 (released week ago) a compare these two frameworks?
@awesome-coding
@awesome-coding Год назад
I'm working on a remix 2 video, which should be out next week.
@emptybottle1200
@emptybottle1200 9 месяцев назад
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.
@ways.
@ways. 3 месяца назад
I'm in the same place as you
@kumekster
@kumekster 10 месяцев назад
Hi, do you provide link to github project?
@awesome-coding
@awesome-coding 10 месяцев назад
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
@kumekster
@kumekster 10 месяцев назад
@@awesome-coding Thanks :)
@blackpurple9163
@blackpurple9163 Год назад
This looks similar to svelte
@awesome-coding
@awesome-coding Год назад
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.
@blackpurple9163
@blackpurple9163 Год назад
@@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?
@TechBuddy_
@TechBuddy_ Год назад
@@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"
@allan_archie
@allan_archie Год назад
Nuxt, is this you?
@awesome-coding
@awesome-coding Год назад
😂
@naranyala_dev
@naranyala_dev Год назад
bun bun bun
@awesome-coding
@awesome-coding Год назад
😂 suspenseful music intensifies!
@soumyaripan5131
@soumyaripan5131 Год назад
..
@allan_archie
@allan_archie Год назад
What software do you use for animation? I like it and would like to use it.
@awesome-coding
@awesome-coding Год назад
Hey! I'm using the Adobe Suite (Premiere, Illustrator, Photoshop, Rush)
@edhahaz
@edhahaz 9 месяцев назад
To astro or to next hm......
@awesome-coding
@awesome-coding 9 месяцев назад
To astro!
Далее
The Biggest Lie in Web Development
12:35
Просмотров 6 тыс.
Astro Crash Course in 20 Minutes!
22:07
Просмотров 57 тыс.
The Simplest Tech Stack
9:38
Просмотров 116 тыс.
Is Astro getting too complex?
8:07
Просмотров 4,3 тыс.
Skills Every Programmer Must Build (Early On!)
3:24
Просмотров 4,7 тыс.
Server Islands are really cool
35:07
Просмотров 70 тыс.
Astro DB Is FINALLY HERE! (and it's awesome!)
9:16
Просмотров 9 тыс.
Progressive Web Apps in 2024
4:07
Просмотров 48 тыс.
What is Astro?
9:57
Просмотров 8 тыс.
The Right Way To Build REST APIs
10:07
Просмотров 103 тыс.
Astro Web Framework Crash Course
1:16:48
Просмотров 104 тыс.
You may not ACTUALLY understand Content Collections…
42:03