Let's start in middle of 2022, I'm currently a contractor for a proprietary hosting company at the time maintaining their landing page and help center. Their websites at the time, including mine own sites, were built on a Ruby framework called BridgetownRB. The way I usually describe Bridgetown, is that it's the same as Jekyll, but on steroids with all the extra features and functions it brings to the table, extending more than what Jekyll could do before. It served me well for a long time while experimenting in web development and templating. I'm always interested in new tools, frameworks, and other things that make things easier to build websites. I wasn't for frameworks that used React, or a single language exclusivity, and I preferred vanilla HTML5 as much as possible when I can as it's familiar to most(at least all) web developers. Bridgetown allowed this, as I was able to mostly write in vanilla HTML5 in the framework using .liquid or .erb files with no extra setup needed like React would need.

I did a lot in JavaScript, and I'm not really the developer who works with Ruby that much, so looking into a JS framework did become an interest for me later on that year. While exploring I ran into other popular alternatives such as Hugo, Gatsby, Eleventy, and other options that were popular at the time, although those weren't really built a JS-based framework. For a moment, I almost thought about going back into Wordpress and creating custom themes in PHP, but I'm happy I avoided this route as my experience with PHP anything has always been hell and back. So, I continued forward and I came across Astro's website and it seemed to fit all the criteria of what I was looking for in a framework.

Astro, specifically AstroJS, is a modern JavaScript-based framework to build websites such as blogs, stores, documentations, portfolios, and so much more. The limit to what you can build is your pure imagination to projects you've always wanted to build before. The team behind Astro has done an outstanding job with their project since it's launch in 2022, creating one of the best JS frameworks available to date.

My Experience

As you can see through out most projects in SudoVanilla they're built on Astro such as this website you're viewing this blog post on, SudoVanilla Studio, ButterflyVu, Pandora, and Zorn Player. So you know I really enjoy working in Astro when most of my projects are built on it.

Some projects are quite basic like documentations and blogs, using other frameworks such as NextJS can be quite heavy for such basic projects and at that point is unnecessary. Sometimes Bridgetown itself can be hard to please and to configure properly if you're not familiar with Ruby(like me), sometimes I couldn't get dependencies to work nicely at all - Although I did smooth out that process eventfully for my setup.

With Astro, things were very straight-forward to setup and to get a website up and running. Once I was done playing with Astro for the first time ever, I literally thought "Really?! That's it? We're done? Wow, that was easy." I knew right there, this was the one, the one framework that can work for me.

There's a lot of amazing things that are built as well, such as writing Markdown and Prism syntax highlighting for codeblocks. There's also a lot of great Astro tools that are already builtin such as Astro Cookies, Image component, content API, developer tools, and more.

There was an interesting thing about Astro that did catch my attention and could benefit int he long-run, which I believe I've never seen before, was that you can mix and match other JS frameworks together such as mixing Vue, React, SolidJS, and Svelte onto literally one page(as their own parent components at least). I find this ability to be quite impressive coming from a new JS-based framework, and you can do it all in ".astro" files. This mix-and-match ability is brought up under their "Mixing frameworks" section in their documentation, their example shows React, Vue, and Svelte being used on one page, in their own parent component. See image above.

My Achievements

Have I built anything decent with Astro? Yes! One of my proudest projects that I worked on that is built on Astro is Zorn, a web player for Astro.

Funny enough, Zorn was originally built to work with most frameworks including Ruby, most importantly vanilla HTML5 and JavaScript. My vision changed a lot for the project and I eventfully aimed for Astro only, as I very familiar with Astro by now and I knew I can build something great with it.

While a goal of Astro is to deliver zero JavaScript, I can't promise that when you use Zorn with your web player. Thing is about web players is, you need to use the "document" function to interact with the HTML5 video element, which does not work with Astro server-side, so client-side script is still used. Therefore, a lot of JavaScript is delivered with Zorn to provide all of it's functions and interface.

Zorn's scripts run in "Inline mode", opting out of processing from Astro during builds. This will render the script to HTML5 exactly as it's written, this ensures me that the player works properly during production builds. I also need the JavaScript to be repeated if more than one Zorn player is used on a single page, which at that point I know kinda bloats the page, but it is what it is. I do want to look into minimizing JavaScript in Zorn, I've already planned to work on an optimization update to the handle this.

Zorn is also, officially, the first ever JavaScript package I ever built. You can find Zorn in my official JavaScript registry by installing to your Astro website:

bun install @minpluto/zorn --registry https://js.registry.sudovanilla.org

Final Thoughts

From discovering Astro to my experience, I can definitely say that I'll be sticking with Astro for a long time, with no intent to switch to anything yet. Astro has been the go-to framework solution for SudoVanilla since 2022 and to this day.

I would like to thank the Astro team and all of the contributors behind it, you built something amazing!