After a very long time, I've finally gotten around to finishing my portfolio for the first time. I'm pleased to announce that balbas.io is now live! This site uses Spotlight as its base template with added flare to make it unique and suit my style.

I would also like to share that my site is built in Astro. I am in love with Astro. I have never been this excited to use a framework since Next.js dropped. Because of Astro, let me tell you, this site is quite a Frankenstein of a project.

For those who are hearing about Astro for the first time, Astro is a new frontend framework similar to Next.js, Nuxt.js, or SvelteKit. Two things make it stand out to me from the examples I gave. First, is that depending on your site, it ships HTML and CSS with close to no JavaScript. What I mean by this is that Astro renders all the JavaScript on the server and puts out mostly HTML and CSS to the client. I say mostly because if you have a component requiring a lot of interactivity, you can specify only that specific component to load JavaScript to the client. Without much JavaScript running in the client, this leads to faster page loads than other frameworks.

The second reason is why I like it a lot. Astro uses its templating language to build templates. However, you can also use most modern UI frameworks in building with Astro. I no longer need to ache over deciding whether to use React or Vue for a new project. With Astro, I can write both of them at the same time. This makes it very easy to test out UI frameworks in a single project without having to run different projects separately. At the time of this writing, my site is currently written in React, Svelte, Vue and Solid.js.

This inherently means that a company can hire React and Vue developers simultaneously to work on the same project. It also means that a project with mostly Svelte components can still leverage Material UI or Vuetify (please note, I haven't tried this, but it should be possible). But how can the different UI frameworks share state you ask, well there is a library called Nano Store that solves this issue. It's a framework-agnostic state library that should be able to connect with the UI framework of your choice.

Right now, Astro is perfectly suited if you want to build simple sites like, say, a landing page, portfolio or blog. In fact, for this purpose, I highly recommend Astro purely because of the fast performance of the generated sites.

The one down downside with Astro, is that because of its architecture, you get an entirely new page when you navigate from one page to the next. This is an issue if you want different pages to share the same state. For this reason, I can't recommend Astro for complex applications at the moment.

Overall, I am very pleased with Astro. Aside from that one issue, I will continue using it for my smaller projects. I believe it has a very bright future ahead of it. Also, There is already a project bringing SPA functionality and solving the page navigation issue. Once it or something similar gets a stable release, I will use Astro in building all my future web applications.

Thanks to Astro I was able to write different components in Svelte, React, Vue and Solid. For my next post, I'll be writing my comparison with the different UI frameworks, so stay tuned.