Astro is an all-in-one web framework designed for building content-focused websites. With this approach in mind, it delivers an incredible developer experience to build server-first, intuitive to use, flexible and fully-featured websites. Anyone who knows a little bit of HTML and CSS all the way up to seasoned developers can leverage Astro's opt-in complexity framework to build for the web.
Astro's biggest perks
Let's see what are the basics that Astro brings to the table, Astro is...
- ...easy to use and by design less complex than any other UI framework or language (any valid HTML is a valid Astro component, see Why Astro - Easy to Use),
- ...fast by default shipping ZERO Javascript out of the box, it takes an MPA approach loading on average 90% less JavaScript (see MPAs vs SPAs),
- ...incredibly featured, flexible and UI-agnostic supporting several frameworks (supporting React, Preact, Svelte, Vue and more), an easier JSX, scoped CSS, file-based routing, data-fetching, and a lot more (see Integrations).
We've built a sample project called Astro for Docs (see source code: GH: Astro for Docs) to showcase how straight-forward and flexible it is to use Astro for Beginners.
What's in the menu for today?
After playing around with this project, it turns out you CAN REALLY build a content-focused website with ZERO JavaScript using Astro. Based on what we've learned, here's what we'd like to show you:
- Writing in "Astro" as a language to write Astro Components
- Use Markdown files as pages with Astro's MDX and TailwindCSS integrations.
- Design nested layouts for better developer experience.
- Leverage Astro's Runtime APIs to build components.
Read the entire research at Webscope's blog: Shipping Zero JavaScript with Astro
We ran npm create astro@latest with TypeScript and a blank, empty project and here are our main takeaways:
- Astro does deliver a great DX regardless of your level of experience, as building Astro components only really requires HTML and CSS.
- Astro is UI-agnostic, meaning you can BYOF it and bring your own framework. They have official support for React, Preact, Solid, Svelte, Vue, and Lit. You can even mix and match different frameworks.
- Astro shines with statically generated content. Even if there is no SSR or ISR like Next.js, Astro is considering per-page support for SSR in their 2022 Q4 roadmap.
- Astro can ship ZERO JS (you'd be surprised how many things can be achieved with only HTML and CSS). Regardless if you need to introduce Astro Islands and UI frameworks, it loads 40% faster with 90% less JavaScript in comparison to modern frameworks.
Feel free to explore this example using the resources below:
Originally published: Shipping Zero JavaScript with Astro
Top comments (0)