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.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

Astro is a web framework designed to optimize content-driven websites by minimizing the amount of JavaScript sent to the client and focusing on static HTML with islands of interactivity.

Fred is one of the co-creators of the Astro web framework and he discusses its future and vision in various talks and presentations.

Astro's design principles include pushing the web forward, challenging outdated industry practices, providing developers with more choices, and optimizing performance by reducing the amount of JavaScript sent to the client.

Island architecture in Astro involves treating a website as a page of static HTML with isolated, interactive components (islands) that are hydrated in parallel, rather than as a single-page application.

Astro includes content collections, a feature that allows developers to manage content using modern tools like TypeScript and front matter validation, providing a streamlined and optimized development experience.

View transitions in Astro are a feature that allows for app-like navigation effects, such as morphing and sliding between pages, without requiring JavaScript. This feature leverages native browser APIs to enable smooth transitions.

Astro is focusing on three main features: zero JavaScript view transitions, a more powerful content layer that can handle both local and remote content, and server islands for personalized content within a static shell.

Astro is best suited for content-driven websites such as blogs, marketing sites, and e-commerce sites where performance and fast content delivery are crucial. It is not specifically designed for heavy, interactive web applications.

Yes, Astro is designed to work seamlessly with popular JavaScript frameworks like React, Vue, and Svelte, allowing developers to use their preferred tools while benefiting from Astro's optimizations.

Astro ensures website performance by minimizing the amount of JavaScript sent to the client, leveraging static HTML, and using island architecture to hydrate only necessary interactive components.

Fred K. Schott
Fred K. Schott
29 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Astro is a web framework that aims to optimize site performance without sacrificing functionality. It introduces features such as content collections and view transitions to enhance the user experience. Astro focuses on pushing the web forward by providing browser compatibility and app-like experiences. It also explores a powerful content layer and island architecture for personalized content. Astro is recommended for content-driven websites and offers a polyfill for Safari and integration with Storyblok CMS.
Available in Español: Novedades en Astro

1. Introduction to Astro

Short description:

My name is Fred, I'm one of the co-creators of the Astro web framework. This is a talk about the future of Astro, but really, it's a talk about the future of the web. There's a lot of cool future stuff that's big impact outside of just Astro. When we're working on Astro, we have this idea of pushing the web framework and pushing the web forward. We're trying to challenge the industry and give developers more choices on how they build things.

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 really, it's a talk about the future of the web.

I have some exciting things to share, some announcements, some cool behind-the-scenes stuff. But no matter what tech stack you work on, there's gonna be something relevant to you and interesting. There's a lot of cool future stuff that's big impact outside of just Astro. So, I'm excited to jump into this.

You know, when we're working on Astro we have this idea of a couple of design primitives that we like to keep in mind as we design the framework. And one of the ones that matters a lot to me is this idea of pushing the web framework. Pushing the web forward with a web framework. We're not just building another web framework, we're trying to challenge the industry, different status quos, different ways of doing things that we think are outdated or deserve to be challenged. We want to give developers more choices on how they build things.

2. Astro: Optimize Site Performance

Short description:

We want to give developers more choices on how they build things. JavaScript frameworks promise a full tech stack, but often result in slow page load and poor performance. Astro was created to challenge this and optimize site performance without sacrificing functionality. With Astro's island architecture, developers can have a fast site with interactive components while minimizing JavaScript usage.

We want to give developers more choices on how they build things. For example, when we created Astro, one of the first things we were looking at was the state of performance on the web. And JavaScript frameworks specifically, they have this promise of a full JavaScript tech stack. Server, client, unified, one-language, Chef Kiss. And they all have their Hello Worlds, their blogs, their showcase sites that all look good and perform well.

But when you get down to the real world performance, it left a lot to be desired. These tools promised a lot, but at the end of the day, they shipped a lot of JavaScript. And it made it really hard for a developer to work in those frameworks and also ship a fast site. So, if you look up here, this is, you know, no one up here is batting above 50 per cent, right? The majority of sites are not fast. They're slow by this definition of Core Web Vitals. And this is across the entire net. This is 10 million sites measured by Google, HTTP Archive.

So, promise of power and all these great things that the web provides. But then the end user experience, slow page load, laggy interaction, really poor performance on the whole. So, this was something that we wanted to come in and challenge. This idea that you could have a unified tech stack, JavaScript everywhere, but it didn't mean shipping JavaScript, all of it, to the client. It didn't mean SBA. It didn't mean big apps. And this is what Astro was born to kind of solve and I think the data speaks for itself. It's our biggest kind of accomplishment so far is pushing this narrative, this idea that you don't need so much JavaScript. You can have a fast site and DevTools that you love. You can keep using React or Vue or Svelte. Keep it all, but have a web framework that optimizes your site at a much higher level.

So, this was island architecture. This is the big idea that we pushed forward, this idea of don't think of your site as an app. Think of it as a page of static HTML. And those interactive bits you need, those are the hydrated components on your page. We're going to isolate them, hydrate them in parallel, but they're little islands of interactivity across your site. It's not one big app. So, that header component, that layout component, those things that are static, you don't actually need to ship that JavaScript.

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
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
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
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.