Logo

dev-resources.site

for different kinds of informations.

Astro vs Visual Studio 2022 as Static Site Generators

Published at
5/23/2024
Categories
compare
static
site
ide
Author
msanders5
Categories
4 categories in total
compare
open
static
open
site
open
ide
open
Author
9 person written this
msanders5
open
Astro vs Visual Studio 2022 as Static Site Generators

I have spent today learning the new Astro SSG. You can read about it at https://astro.build/ or better yet you can get started with it at https://docs.astro.build/en/install/auto/. While Visual Studio isn't exactly a SSG, they way you code with it can make static web pages. VS has so much more power than that.

What is a Static Site Generator?

Honestly, the term is sort of new to me. But basically, it means a tool that creates static web pages. What are those? Web pages that only need html, css, and if desired javascript. The official definition of course is at Wikipedia, https://en.wikipedia.org/wiki/Static_site_generator.

Setup

So, for the Astro side, I used the following

  • VS Code (latest)
  • Debian 11 OS w 16GB Ram
  • LxQt
  • node 18.6
  • astro 9.5.1

For Visual Studio, of course I need

  • Windows 11 w 32GB Ram

Comparisons

IDE Performance

Obviously VS Code is going to win this hands down.

Intellisense

Astro -- The intellisense for Astro related code is not too bad using the Astro extension in VSCode, but after adding Vue to the mix, I was a bit disappointed that some Vue code did not show up as missing variable errors. However, the hot swap debug environment with Astro did point out those errors.

Visual Studio -- When it came to choosing CSS classes, Visual Studio still knocks it out of the park for adding classes to elements. VS knows exactly what classes are available and gives very quick dropdowns to this affect. VS wins the intellisense compare.

Flexibility

This one I don't think you can compare. This is where each tool has it's purposes and both do excellent jobs towards that. I won't go into Visual Studio, but I would like to highlight some integration points that Astro offers.

  • CSS -- Tailwind
  • WebWorkers -- Partytown (have not been there in a while, but I do like the song)
  • UI/Javascript Frameworks -- React, Svelte, Vue, plus a few more
  • SSR -- Cloudfare, Vercel, Node, Netlify
  • Headless CMS Integration-- Too many to mention, but many are in development.

My Take

I will always opt for a strong backend tool to serve up static pages, like dotnet core. The question and goal I have is how to create a static site quickly and without having to refactor too much later. I might be in a place where I don't worry about styling the site too much and get the content done using Astro. This is where Astro's integration with headless cms systems could have a huge advantage. Plus I think from a templating and component perspective, developing with Astro will be a lot quicker. After all of that is done, then I might let Visual Studio take over for the styling of the sites pages.

Either way, I think it was a day well spent on learning the Astro SSG tool. It is a very promising project in the node/npm space.

compare Article's
25 articles in total
Favicon
mismatch() and compare() in Java
Favicon
Vector Library versus Vector Database
Favicon
Top Reasons to Compare and Switch Electricity Providers
Favicon
Webcare360 vs QloudHost: Deep Dive into Two Leading DMCA Ignored Hosting Providers
Favicon
Astro vs Visual Studio 2022 as Static Site Generators
Favicon
Java VS .NET: Which one is better
Favicon
How to Compare Same Contents but Different Ordered Arrays in JavaScript?
Favicon
PDF-Verwaltung: Vergleich von PDF-Dokumenten mit Java, um Unterschiede im Inhalt zu finden
Favicon
Compare Colors Palettes
Favicon
Alternative libs to migrate from React to Vue (or Vue to React)
Favicon
Compare Anything in JavaScript with Just A Function
Favicon
Java - How to Compare Two Word Documents to Get Differences
Favicon
A Command-line tool to statistics the GitHub repositories
Favicon
Kotlin – Compare Objects with Comparable Example
Favicon
Digital Ocean App Platform vs Heroku
Favicon
42% the Size of HTML SCSS with ZIM...
Favicon
Compare Two Word documents and get the difference reports in Java
Favicon
Rust vs Go in Backend Web Development
Favicon
List of Cloud Products (opt, cont. update)*
Favicon
Mocking in Elixir: Comparison between Mox, Mockery, Mimic, Syringe, and Lightweight DI
Favicon
CodePen vs CodeSandbox - JavaScript playgrounds compared
Favicon
CodeTip - Javascript: Compare class instances
Favicon
Azure vs GCP part 2: Compare Web Apps and App Engine service
Favicon
Recommend: Five Language Stories
Favicon
CodeTip - Ruby: Compare class instances

Featured ones: