Shipping Zero JavaScript with Astro
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.
We ran npm create astro@latest with TypeScript and a blank, empty project.