Web framework Astro 1.0 promises faster websites
The open-source framework extracts the UI into isolated components to enable faster websites. It can be extended using community packages.
Astro has released version 1.0. The self-proclaimed “all-in-one” web framework is licensed under MIT, can be used with front-end tools such as React, Vue, Svelte, and Tailwind CSS, and focuses on developing faster websites. The step to version 1.0 is intended to symbolize the Astro team’s readiness for future API stability and productive use of the tool and is accompanied by the launch of a new project website.
components as islands
Although it was only created 16 months ago, Astro has already attracted attention from different quarters: In January this year, the JavaScript Rising Stars 2021 study highlighted Astro as a notable project, and in this year’s State of JavaScript Astro achieved the second place. The project currently has over 14,500 stars on GitHub.
The web framework follows the approach of so-called astro islands or component islands. What this means is that Astro extracts the user interface (UI) on the website into smaller, isolated components. These interactive UI components exist on an otherwise static HTML page. There can be multiple Astro Islands on a page, each rendering in isolation.
UI frameworks such as React, Svelte or Vue can be used to render the islands, and a combination of the frameworks is also possible. Astro replaces unused JavaScript code with lighter HTML, which should lead to shorter loading times and a reduced Time to Interactive (TTI). The Astro Islands documentation provides more information.
Innovations in version 1.0 for Vite.js and image optimization
Under the hood, Astro uses the Vite.js development and build tool as the build engine. Vite.js is recently released in version 3.0 and included in Astro 1.0 in the latest version. The changes that come with this include changing the default server port to 5173 and listening on the preview server on port 4173 to avoid conflicts with other tools. Astro 1.0 has new ones for image optimization <Image /> and <Picture />-Components ready. It should be noted that the integration of @astrojs/image is currently still considered experimental and can only be used in Node.js environments. An extension of support to the Node.js alternative Deno is already planned.
In addition, existing community packages can be installed or you can create your own for additional functions. For example, integrations for frameworks, performance and SEO or accessibility are available.
