Why Astro?
For the development of this portfolio, I have used the Astro Framework in its version 4.1.2, where thanks to its simplicity with the use of the most common languages (HTML, CSS, and JS) and with the support of complementary tools more focused on reactivity, such as React in certain situations, it has helped me in rapid and effective development.
The choice of choosing Astro has not been due to a knowledge issue but rather for a reason of use in a Single Page Application (SPA) without the use of a BackEnd. This has posed a learning challenge for a new tool that has been exciting and challenging.
I have also chosen Astro for the following benefits it provides:
Performance
Astro's quick initial load speed is a key factor in an SPA, and this is achieved thanks to server-side rendering instead of client-side rendering in the browser.
In fact, Astro is capable of generating static pages with zero use of JavaScript, resulting in extremely fast loading where the user is responsible for adding interactivity to the website through complementary Framework components loaded on the client side.
In summary, Astro is based on a static page through 'reactive components' (referred to by Astro as 'Astro Islands'), allowing for a smooth and pleasant user experience.
SEO
Another important aspect is the SEO positioning capability of websites designed with Astro. Why? Because Astro, by generating static pages (HTML) during compilation, allows search engines to index and crawl content efficiently, largely avoiding the execution of JavaScript files that may delay loading.
And this is summarized with an approach that Astro takes, based on optimizing the total page weight for a better user experience and, at the same time, positively influencing SEO ranking.
Furthermore, there are 2 factors that assist in better SEO positioning during development:
The ease of creating pages with friendly URLs
The compatibility of metadata insertion on each page independently.
UI-agnostic
Astro is agnostic to other web development tools, but what does it mean to be agnostic?
Being agnostic in the programming world means that it is not limited to a specific use of tools or specific technologies but is open in its use to provide the user with a flexible way of working according to their needs and preferences.
And that is what Astro offers, in addition to a really simple and surprising integration of tools that every developer has handled at least once, such as:
Scalability
The fact that Astro is a very easy-to-use Framework allows for easy scalability, contributing to a better experience in team development.
The use of reusable components as architecture facilitates the management of large projects where components are developed independently. Also, with the optimization of components by separating static from dynamic elements (Astro Islands), it allows for resource efficiency in websites with a large amount of content without losing performance.
Also, since Astro 4.0, a development tool called 'Astro Dev Toolbar' has been added, allowing visual inspection of the page being developed (Astro Islands, Testing, Accessibility problems...)
Internationalization
Also, with Astro 4.0 and onwards, the i18n library has been natively incorporated, allowing for easy and intuitive translations in the project configuration. It enables dynamic routing based on language and management of translations through JSON files.
View Transitions
Transitions are one of the most surprising features introduced starting from Astro 3, not only for their easy use but also for their impact on the web, allowing:
- Animating navigation between different pages
- Compatibility between devices and screen sizes
- Customization of various types of transitions to adapt to the style of the web page
Implementation is done by adding a component called <View Transitions /> to each component (or in its Layout). This way, if 2 components are located on different pages, a transition will take place.
Result
And this is the final result of using Astro: 😁
