DEV Community


Posted on

With Astro into the future!

Astro just released a new major version adding stunning features to an already great meta framework. What is so different than other meta frameworks?

  • cross framework (React, SolidJS, Svelte, Vue, ...)
  • multi target deployments (next article)
  • ... more

Cross framework

The multitude of UI frameworks / libraries has split the developer audience into camps, which have difficulties to interact. Library authors have difficulties to maintain adapters to the main ui frameworks to properly integrate their common purpose libraries, like routers, animations.
While there are many meta-frameworks around, like Next.js, Nuxt.js or SolidStart none of them has this unique value purpose of being agnostic to the ui framework.
Now this is a nice feature, but why does this matter?
Well this enables you to adopt the right technology in a step by step approach, with value gains even during that process.

A Scenario

Imagine you do have a portal, which is fully build in React and you are reaching the limits of page optimisation due to React's heavier runtime. There are a couple of blog pages you happen to also have along with the portal, to little for a full separate project, to important to ignore performance. They are little interactive but the menu across all pages is the same. In Astro you can create a section of pages that are using Svelte or SolidJS, or no JS framework (like only css menus) to reduce page load times where it matters. Step by step you can shift your framework use to another if intended, or just use the right framework for the task.

The extreme

Furthermore you can have an SPA and an MPA in the same setup, with same build, same tests, same interactive components. I have build my landing page as an MPA with dialogs and forms, that are the same as the dialogs and forms in the portal, which is an SPA with SSR. Now you could even use a different UI framework for those specific components. Just amazingly flexible.

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓