Introduction

Outside of my work at Portal I work with a non-profit called Nexus Aurora. Our goal is to create a community of people thinking about, talking about, and actually doing something in the field of human space travel and settlement.

During my time in the community I have seen many different concepts come up that are very important to understand and common to estimate. Things like:

• What is rotational gravity and how are the forces applied by different rotating structures?
• How much solar energy would you receive at different distances from the sun?
• How much fuel do you need to generate enough deltaV to go to Mars with 100 tons of payload?

I wanted to create a project where I could create easy to understand tools for learning about and calculating important values. Something I thought would be useful to everyone in the community.

Just like every new project I went shopping for JS frameworks to find the one that was best for my use case.

JS Framework Shopping

There are literally dozens of frameworks available to help you start a project, however most of them focus on one niche area and provide the best experience for that use case.

Searching through the frameworks I knew roughly what I was looking for.

Well Documented: I will never again learn a framework without good documentation.

Easy to Learn: I didn’t want to spend more time learning a framework than actually making my project.

Server Side Rendering (SSR): I really wanted to be able to do Server Side Rendering and also Server Side Generation (SSG) if possible. Considering each of my tools would be more or less stand alone applications with a few shared components I thought the benefits of sending static files would outway the benefits of a Single Page Application (SPA).

Simplified Deployment: I wanted a framework that would make deploying new updates as simple as possible.

Joy: This one is subjective, but I prefer to work with a framework I enjoy using. Even if another framework is technically superior, if I don’t enjoy the process of development…why do it.

The Contenders

Looking around I narrowed the field down to these contenders. I will leave out the details of each framework for brevity, but feel free to click their links if you are unfamiliar with them.

Next.js / Nuxt.js

Next and Nuxt are similar enough in philosophy that I will bundle them together here.

Next is the most popular all in one React framework and Nuxt is the Vue counterpart. The goal of both frameworks is to provide you with everything you need to create almost any kind of application you could want.

Next and Nuxt are both great frameworks that are definitely worth learning and both provide incredible feature sets.

However, Next and Nuxt both feel fairly large and complex. I wanted something lighter. Something simpler which still provided similar functionality.

So I kept searching.

SvelteKit

SvelteKit is the “new kid” on the block in the JS framework wars. It has made a lot of waves in the industry and looks to have a bright future. Or not, who knows. This is Javascript, where the hottest thing today is unmaintained tomorrow.

Since my project isn’t very complicated I was willing to take a risk on SvelteKit so I could learn what all the hype was about. However, as I began working with Svelte and SvelteKit I kept finding myself saying, "I like how Vue does it better".

With the modern Vue 3 composition API it felt like all the benefits Svelte had over Vue 2 have been erased and Vue has taken the best of Svelte and integrated it into Vue 3.

So I kept searching.

Astro

Astro is a slight outlier here in that it allows the use of any component framework and Astro handles the building / compiling of the project.

Astro’s big claim to fame is its “Zero-JS” architecture. Astro development is heavily focused on pushing as little JS to the client as possible in order to improve load speed and performance.

However, Astro does much more than that and reading through the feature list of Astro seemed too good to be true. I thought for sure having so many features and options would make the framework feel complicated and bloated.

I was pleasantly surprised! Astro was a breeze to get started. The Astro components themselves are very easy to use and they work similarly to Svelte and Vue components, except they run on the server instead of the client.

Creating interactive components with the island architecture was very easy. Switching between Vue, React, and Svelte for components was really fun, if not very practical.

I quickly found myself making a ton of progress on my actual project instead of spending all my time learning a framework. It was a joy to work with.

Space Calcs

Now that I had found my framework I dove in! Creating multiple different tools and really exploring everything Astro had to offer.

The fact that the name is “Astro” and this was a site focused on space was also a fun coincidence!

Feel free to play around with the site here.

Now I have a fun project I can be proud of and I can’t get over looking at these page speed results!

When to Use Astro

Like every tool, Astro isn’t good at everything. Below are my recommended use cases.

Blog, Portfolio, or Marketing sites: This is where Astro shines. For “smaller” sites maintained by a single developer that require mostly static content delivered as fast as possible, you really can’t do better than Astro in my opinion.

Small to Medium Content Driven Applications: Web applications which are relatively small in size and do not require many resources to host and deploy. This could definitely include e-commerce shops or any other application which is content driven.

Business Intranets: Building internal tools for companies is extremely common and I think Astro is a great framework to use when building these kinds of applications.

When Not to use Astro

Single Page Applications (SPA): If you are looking for a single page application which runs entirely on the client device. If you want a SPA application your best bet is to use Vue, Svelte, or React directly.

Large and Complex applications: If you are looking to build the next Facebook, you might want to turn towards something more like Next, Nuxt, or else entirely separating your front and back end by using Vue or React directly without adding the complexity of SSR frameworks.

What’s Next?

Now that we have talked about what Astro is and when to use it, let’s actually do something with it!

Over the coming months we will be releasing a couple tutorials which will get you set up with everything you need for a production quality Astro site.

We will be building a simple portfolio site with a couple of page routes, a contact form with validation in multiple component frameworks, and a couple other fun features!

We will also be covering important topics like:

• TypeScript
• Eslint and prettier
• Tailwind CSS
• Sitemaps
• Server Side Generation
• Github
• Automatic Deployments
• Analytics, Pagespeed and SEO
• And more!

Stay tuned to the PortalMedia blog for more information!