Our experience with Astro

This page summarizes the projects mentioned and recommended in the original post on dev.to
MVC Frameworks and Libraries JavaScript UI Frontend Template engine

SurveyJS
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
Our great sponsors

  • Vue.js

    This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

    • No React, No Vue, No Svelte, None of the partial hydration or islands capabilities of Astro.

  • Svelte

    Cybernetically enhanced web apps

    • No React, No Vue, No Svelte, None of the partial hydration or islands capabilities of Astro.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • Liquid

    Liquid markup language. Safe, customer facing template language for flexible web apps.

    • On the other end, truly JavaScript-less SSG will use template-engine like Nunjucks or Liquid. They are amazing options but it's another language and another paradigm. Not component-driven.

  • React

    The library for web and native user interfaces.

    • No React, No Vue, No Svelte, None of the partial hydration or islands capabilities of Astro.

  • nunjucks

    A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)

    • On the other end, truly JavaScript-less SSG will use template-engine like Nunjucks or Liquid. They are amazing options but it's another language and another paradigm. Not component-driven.

  • astro

    The web framework for content-driven websites. ⭐️ Star to support our work!

    • In Astro, you just layout tags in your astro components where you need them and add lists of in your .

    For example, divRIOTS.com uses 2 global css in in the most idiomatic way.

     href="/css/reset.css" rel="stylesheet" />
 href="/css/global.css" rel="stylesheet" />
    Enter fullscreen mode Exit fullscreen mode

    None of these .css files are minified and calling them separately doesn't provide the best performance result.

    But when built for production with astro build, </code> tags and <code><link ref="stylesheet"></code> are minified and bundled automatically.</p> <ul> <li>If a style only appears on one route, it’s only loaded for that route. (<code>/_astro/[page]-[hash].css</code>)</li> <li>If a style appears on multiple routes, it’s deduplicated into a (<code>\_astro/common-[hash].css</code>)</li> </ul> <p>In production, pages have:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><link</span> <span class="na">href=</span><span class="s">"/_astro/common-[hash].css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span> <span class="nt"><link</span> <span class="na">href=</span><span class="s">"/_astro/mypage-[hash].css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p><code>/_astro/common-[hash].css</code> is the same on every page. It's cached and not re-downloaded during navigation on the site. It's hard to have a better result.</p> <p>This means that I can write styles the way it makes sense for readability and maintenance and let <code>astro build</code> take care of best performance.</p> <blockquote> <p>I don't know any static site generator capable of doing [pure] CSS Bundling and minification so seamlessly.</p> </blockquote> <p>More details in <a href="https://github.com/snowpackjs/astro/blob/main/docs/styling.md#-bundling">Astro's Styling Guide #bundling</a>.</p> <h2> <a name="performance-results" href="#performance-results"> </a> Performance results </h2> <p>The output is 100% optimized HTML/CSS. It's hard to be slow 😀</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8bo6YBEp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0suko3raqa4kyt3rpcl.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8bo6YBEp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0suko3raqa4kyt3rpcl.jpg" alt="Mobile performance results (98)" loading="lazy"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y27T4006--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inc12nwi92x87vpy684a.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y27T4006--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inc12nwi92x87vpy684a.jpg" alt="Desktop performance results (100)" loading="lazy"></a></p> <h2> <a name="whats-missing-in-astro" href="#whats-missing-in-astro"> </a> What's missing in Astro </h2> <p>In my humble opinion, not much. <a href="https://divRIOTS.com/">divRIOTS.com</a> is proof of that.</p> <p>But here is my wish list:</p> <h3> <a name="javascript-processing" href="#javascript-processing"> </a> JavaScript processing </h3> <p>Like <a href="https://astro.build">Astro</a>'s CSS Bundling, I would like my <code><script></code> tags transpiled, bundled, chunked, and minified in the best possible way.</p> <ul> <li>Transpiled : I can write ES202X code and get a more compatible output.</li> <li>Bundled : I can import bare modules from <code>node_modules</code> </li> <li>Chuncked : If modules are used on many pages, move them into a single <code>common-chunk.js</code> </li> <li>Minified : Everybody wants small JavaScript - always.</li> </ul> <p>With this, I don't need a <a href="https://webpack.js.org/">webpack</a> or <a href="https://gulpjs.com/">gulp</a> configuration on top of <a href="https://astro.build">Astro</a>.</p> <p><a href="https://github.com/snowpackjs/astro/issues/370">GitHub issue #370</a></p> <h3> <a name="image-processing" href="#image-processing"> </a> Image processing </h3> <p>Like JavaScript, image optimization is another fairly complex build process to add on top of static site generators. Having out-of-the-box support would help get maximum performance with minimal effort.</p> <p><a href="https://github.com/snowpackjs/astro/issues/492">GitHub Issue #492</a></p> <h3> <a name="permalink-for-certain-pages" href="#permalink-for-certain-pages"> </a> "Permalink” for certain pages </h3> <p>Today all pages are generated as <code>/slug/index.html</code>, but some pages need to be generated as <code>/slug.html</code> instead. Like <code>/404.html</code>.</p> <p><a href="https://github.com/snowpackjs/astro/issues/465">GitHub Issue #465</a></p> <h2> <a name="closing-thoughts" href="#closing-thoughts"> </a> Closing thoughts </h2> <blockquote> <p><a href="https://astro.build">Astro</a> is more than a SSG</p> </blockquote> <p>As described in <a href="https://twitter.com/georges_gomes/status/1380801812656226304">my tweet about Astro</a>, another compelling feature of <a href="https://astro.build">Astro</a> is his neutrality to frameworks.</p> <p><a href="https://astro.build">Astro</a> takes care of routing, layouts, data management and SSR infrastructure and you can bring your components from any other framework (currently <a href="https://reactjs.org">React</a>, <a href="https://vuejs.org">Vue3</a>, <a href="https://preactjs.com">Preact</a>, and <a href="https://svelte.dev">Svelte</a>) but still keep zero JavaScript runtime on the output if you want.</p> <p>It makes your site last longer as component frameworks come and go. It also makes your component last longer as you don't need to migrate them from one framework to another. Just use them as long as you want.</p> <p>I called <a href="https://astro.build">Astro</a> an "Agnostic Meta-Framework". And I think we will see other solutions emerge in this space because it makes a lot of sense to decouple the meta-frameworks from the rendering libraries.</p> <h2> <a name="another-astro-website-is-coming-up" href="#another-astro-website-is-coming-up"> </a> Another Astro website is coming up </h2> <p><a href="https://backlight.dev">Backlight.dev</a>, our upcoming product to build and manage Design Systems on the code-side, will be revealed soon.</p> <p>The full landing is also made in <a href="https://astro.build">Astro</a> but taking it to a whole new level 🚀</p> <blockquote> <p>Stay tuned!</p> </blockquote>

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts