Welcome to my blog! Really excited to say this is my first blog post, and I thought it could be about the framework I learned to build this website in, Astro! I’ve built some small web apps using React and MongoDB before, but I’ve never really shipped anything meaningful other than class projects. So, to get more depth of knowledge in web dev, I decided to build this website to share my knowledge + learn a new skill.
What is Astro?
Astro is a lightweight, SEO-optimized Framework based off an “Islands Architecture” that allows you to mix and match different components with varying levels of interactability. Each component is an “Island” that is either static with no Javascript, or dynamic with Javascript. Multiple islands can exist on one page, and are able to interact with one another/share state via the context of said page. This capability allows for control of when Javascript is loaded into dynamic islands via “Hydration”. For example, a dynamic island can be unhydrated with no Javascript until it is visible on the user’s viewport, where it is then hydrated and the Javascript for that island is loaded in.
Why is this Important?
Astro’s architecture is important because it allows for extremely fast page loading compared to other bulkier frameworks, making it a great choice for websites prioritizing speed over function in its base form. If you want to expand features and add more dynamic content, Astro is also capable of this too! Through it’s islands architecture, it’s possible to have a page on a website have multiple dynamic islands from different frameworks (React, Svelte, Angular, etc.) that can share their state with eachother and interact flawlessly with one another. This I believe is one of the key differentiaitng factors compared to other frameworks, because you can bring in the best features of all frameworks into the “plug and play” nature that the Astro architecture maintains for your website.
Astro is also optimzied for SEO out of the box, making it a great choice for ensuring visibility of your website and increases user traffic.
Knitty Gritty; Features of Astro
Similar to jsx with React, Astro uses a .astro file format for its components. Each component contains frontmatter denoted by three dash lines (---) on the top and bottom of the frontmatter. These lines are a “border” that keeps the dynamic Javascript elements separated from the static HTML/CSS elements. This follows Astro’s practice of abstracting out the frontmatter/Javascript until it is needed.
A core feature that Astro uses for text is Markdown converion. This blogpost your reading is actually a Markdown (.md) file that has been converted to HTML, where specific markdown text like #‘s, which are headers in Markdown, are converted to h1 tags in HTML. Markdown also contains frontmatter (which inspired Astro to adopt this feature into its .astro file structure), which can be utilized in an Astro component by passing in the Astro.props() function to the component under a Javascript variable in the Astro component’s frontmatter. This Markdown-to-HTML conversion allows for a standardized way to display content and makes interacting with the text easier.
One of the really interesting features that I learned and really love about Astro is the way it handles routing. Astro uses special directories in your src file to identify specific routes on your website. This makes it so Astro can interact with files and subdirectories located in your src folder, which is a much more intuitive way to route pages than other methods like populating a ReactRouter on the index page.
For example, you’re currently reading this blog, which is located in the file directory src/pages/blogs/ under the file 1.md. You can look up at the page URL to see the routing is www.icodeforfreedom.com/blogs/1. The “pages” directory isn’t seen because it is a unique directory name Astro uses to identify pages on a website. “blogs” is a subdirectory that Astro identifies and marks as its own route within the router, storing 1.md and any other markdown blogs I create. As simple as it is, it’s probably my favorite thing about the framework so far!
My Opinion of Astro as a First Time Web-Developer
I’ve used web frameworks in varying capacities for school projects to half baked web app projects throughout my time in undergrad. When I sat down and decided to create a blog to share my projects/experiences, I wanted a framework that was easy to learn, flexible, and expansive in the scenario I want to learn more about Web Development. Astro fit exactly what I wanted by being extremely easy to learn, allowed flexibility for simple blog websites like this to highly interactive web applications, and supports an architecture that nurtures modularity and expansive behavior by enabling the use of multiple different frameworks.
I haven’t used Astro for long, but I see this as being my go to web framework for now on! I’m going to continue using Astro until I’ve exhausted all of it’s abilities, and once I find something it can’t do, pick up a bulkier framework and use the Islands Architecture in order to continue using Astro!
For more on Astro, take a look at the documentation here: https://docs.astro.build/en/getting-started/
Thanks for reading :)
