Season 1 Episode 20

Astro just hit the 1.0 release on August 9th, 2022. This now makes it a viable option for many, including myself. I am not a fan of using pre-release versions in production, so this week I dived in, and here are my thoughts and findings.

Astro has a concept called Islands, you create components like many other frameworks, and Astro extracts them into smaller isolated parts of the page. This is an advantage as it allows for non-blocking page loading in parallel. It also removes unused JavaScript, which SEO folks will appreciate for page speed.

It is worth noting that they also hydrate when they are in view. In other words, they will not load or execute until they are in view, another speed advantage over conventional page rendering.

It is clear that a significant attraction for Astro is performance, be it from delivery or page rendering.

Read about my Astro experiences rebuilding CompileSwift.com

When creating content that Astro can consume, it follows the path of many other similar tools. You can pull from a CMS, Markdown, MDX, and APIs out of the box. With very little to no configuration required.

Indeed, one thing that immediately impressed me was how much works out of the box without needing to add plugins or complex configurations. This is a true winner, in my opinion, as I often have to spend more time than I would like configuring a framework to do even the basic things before getting to content and design.

There is plenty of third-party support, so don’t be fooled into thinking your options are limited. You can bring your favorite tools and frameworks into the fold with just one command. Again with little to no configuration, Astro will take care of all that for you.

For example,

– Vue

– Svelte

– Preact

– Cloudflare

– Deno

– Netlify

– Node

– Vercel

– Tailwind

And many others.

This achieves another goal on my list of reasons to use Astro, integration, without having to get my hands dirty in complex configuration and code before being able to use it. In my case, Tailwind is often my CSS of choice; one line of code execution later was all set up and included, ready to run.

Creating a new Astro application

Creating a new application is as simple as typing

npm create astro@latest

or

yarn create astro

Running the new application

The process of running the application will be very familiar to anyone who has used similar tools.

npm run dev

or

yarn run dev

Development tool support

There are plugins for many popular IDEs like VS Code, Vim, and Nova. At this time, there is a note saying JetBrains tools are not supported.

You will be happy to hear there is community-driven support for ESLint and Prettier. A mainstay for many to help keep that code in order. 

Making content the focus

There was one thing above all others that immediately impressed me, almost to the point that I had a hard time believing it would work.

You only have to create pages/content, no extra fancy commands or metadata, no HTML tags or wrappers in the content unless you want to work that way.

For example,

You just put the content in the file to create a new component or island, as Astro calls them. You do not need to import anything unless you want to. So nothing like importing React or exporting a component. You create what you need, and everything else is handled for you.

This is truly a delightful discovery compared to creating with other frameworks. It may not sound much from my description, but trust me, you must try it to appreciate it.

The bonus here is that files are clean and easy to work with, keeping the content at the forefront of everything you do. It also means you can have folks with little to no development experience build without you needing to check the code.

One last thing that, for me, was a big plus, pagination is built in. Yep, you heard me right, built in.

No need for plugins or configuration. This is huge since it always seems to be something that frameworks require a plugin for and then require a whole bunch of code to be written, often failing, at least in my case.

So well done, Astro, you have blown me away with this 1.0, and I am currently rebuilding CompileSwift.com with it, which took me hours instead of days. And I get to reuse my existing markdown files that contain the content.

Bravo Astro.