What’s New in Astro

Rate this content
Bookmark

What's next for Astro? Hear from Fred K. Schott (Astro co-creator, core maintainer) about the future direction for Astro's content-driven web framework. Featuring new announcements and demos that build on three of Astro's foundational core primitives: Islands, Content Collections, and View Transitions.

Fred K. Schott
Fred K. Schott
30 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk revolves around the future of JavaScript, React, and Astro. Astro focuses on performance and delivering a better developer and user experience, particularly for content sites. It introduces view transitions, islands, and content as primitives for the next decade of web development. Astro also emphasizes zero JavaScript transitions, native transitions, and a unified content layer. It aims to optimize performance, offer personalized experiences, and ensure compatibility with any tech stack.

Available in Español: Qué hay de nuevo en Astro

1. Introduction to the Future of Astro and React

Short description:

Let's talk about the future, the future of JavaScript and React and a little bit of Astro. My name is Fred. I'm one of the co-creators of the Astro web framework. We have some exciting things to share, some cool announcements. There's some really cool future of the web stuff that is happening right now in browsers, in frameworks all over the place. I'm excited to dig into them.

All right. Thank you all. Thank you for having me. All right. Let's talk about the future, the future of JavaScript and React and a little bit of Astro. My name is Fred. I'm one of the co-creators of the Astro web framework. And this is a talk about the future of Astro, but we see that so tied into the web platform. React is one of the biggest frameworks that you can use with Astro, so we're a very generic kind of agnostic web framework. But Astro and React is chef's kiss, beautiful. I want to talk about the future of React. And I have some exciting things to share, some cool announcements. We've been tweeting all week about a couple of these things. I want to dive into some of them, share some new things that haven't been talked about yet. And no matter what tech stack you're on, this should feel super exciting. There's some really cool future of the web stuff that is happening right now in browsers, in frameworks all over the place. I'm excited to dig into them. So, sound good? Should we get started?

2. Design Principles and Astro Features

Short description:

We built Astro around the idea of performance, shipping the performant Islands architecture. Through years of adoption, we've surpassed other JavaScript frameworks. Our goal is to deliver a faster, better developer and user experience, especially for content sites. Astro challenges the way frameworks build sites and incorporates content as a primitive, along with view transitions that will blow your mind.

We have a couple of design principles on the Astro web framework. One of my favorite one of them is this idea of pushing the web forward. There are plenty of web frameworks out there. We don't want to just be another one of them, another way to use React or Celt or Vue. We want to be something that challenges best practices and ideas.

So to give an example of this, when we started Astro, we were looking around. And one of the things that was like super frustrating at the time, this is going back, you know, a while now, was this idea of performance. You know, every web framework, including Next.js, including, God, what was, you know, create React app especially, they had their great hello worlds, their great blogs, their great getting started all looked good under the kind of, you know, if you look at them quickly, the performance was there. But then real world, they all struggled to actually deliver on that promise. So real world performance and kind of theoretical performance, very different.

When you're shipping a lot of JavaScript to the client, it's really hard. Your baseline is already so high to then have so little room to wiggle around and actually build your own code when the framework is taking up so much of that. When you're building your UI as a JavaScript app versus a page of HTML that is static and fast and has interactive components, we're not talking about a static kind of dead web, but the idea of shipping an app versus a page, in practice, it becomes very hard to make an app performant at the same level that a page of HTML can be.

So we saw this problem where in real world applications, everyone was struggling to hit performance. No one up here is batting above 50%. Right? Some are even, you know, one out of five sites are performant, four out of five aren't. That's a really kind of scary place to be in. And so we saw this problem not as a problem of developers not taking performance seriously. You know, it's not really something that is up to everyone to be an expert in performance. If that's the baseline for the web, that's a pretty tough place to start. We saw this as a problem of tools. Tools can do a better job at, we use this term, the pit of success, pushing you into the pit of success. You should fall in to success, not have to struggle to climb it.

So we built Astro around this idea of performance. We shipped a new architecture called Islands, which is incredibly performant. It strips out unnecessary JavaScript, it makes your page faster. And now, after years of real world adoption, we are now way, way above baseline here against every other JavaScript framework. This idea that full stack JavaScript is like this super unified story, but it doesn't have to mean everything JavaScript, client JavaScript, server. Everything is getting shipped to the user. We can be much smarter about how we deliver that. And the results here speak for themselves. So we're not even like the smallest or the second smallest in this chart. There's so much real world data that shows that when you remove JavaScript and get super smart about how you deliver your site, even if you're using React, even if you're using a framework, whatever your favorite tools are, you can still bring those to the developer experience, but get something at the end of the day that's much, much faster, a much better developer and user experience. That's our goal with Astro, ultimately, especially for content sites. Content is so important to the web. That's our whole focus. If you're building a marketing site, a blog, an e-commerce site, if the main purpose of your site is to deliver content to the user, that's where Astro can really come in. So if you haven't checked it out, that island architecture, that's the original kind of genesis of Astro challenging the way that frameworks build sites. The next year, we looked at content as a primitive for Astro. So content has lived as a primitive in static site builders for forever. Gatsby had the GraphQL content. This is not a new idea, but we wanted to bring this to the modern age, right? TypeScript, not GraphQL, schema validation, front matter validation. We built content into the platform of the Astro framework last year, or a couple years ago. And then lastly, view transitions. If you haven't seen view transitions, they're gonna blow your mind. React, Astro, it doesn't matter. This is like one of my favorite technologies to come out of the web platform. So if you haven't had a chance to check this out, we're gonna dig into it because it's really, really cool. And there's some really exciting things happening, not just like this year, but like literally this week that we're gonna dive into. So view transitions, we started adopting last year.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Opt in Design – The New Era of React Frameworks
React Advanced Conference 2023React Advanced Conference 2023
23 min
Opt in Design – The New Era of React Frameworks
Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.
Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.
All Things Astro
React Day Berlin 2023React Day Berlin 2023
28 min
All Things Astro
Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
Astro & Fresh - Understanding the Islands Architecture
React Advanced Conference 2022React Advanced Conference 2022
21 min
Astro & Fresh - Understanding the Islands Architecture
An introduction to the emerging islands architecture which can significantly improve the performance of your apps.
What's New in Astro
JSNation 2024JSNation 2024
29 min
What's New in Astro
What's next for Astro? Hear from Fred K. Schott (Astro co-creator, core maintainer) about the future direction for Astro's content-driven web framework. Featuring new announcements and demos that build on three of Astro's foundational core primitives: Islands, Content Collections, and View Transitions.

Workshops on related topic

Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.