Astro.js vs. Qwik

En el último año hemos visto más y más frameworks para frontend, hasta el punto de encontrarnos con la dificultad de no saber cuál será la mejor opción, ya que la tecnología se actualiza constantemente. Sin embargo, hay dos que sobresalen entre la multitud: Astro.js y Qwik.

¿Por qué resaltar estos dos frameworks?

La razón es muy sencilla: tanto Astro.js como Qwik innovan en el uso de JavaScript. Ambos intentan que el uso de éste sea mínimo para lograr un mejor desempeño de nuestra aplicación.

Astro.js

Como se mencionó en el párrafo anterior, Astro.js es un framework de JavaScript orientado hacia la creación de páginas estáticas. Astro funciona creando islands (islas) con el objetivo de que solo se use el JavaScript necesario y así lograr un rendimiento (performance) ultrarrápido.

Hoy por hoy, los creadores de Astro.js tomaron las mejores herramientas de React y las unieron en un solo lugar para generar una mayor facilidad a la hora de utilizar dicho software. A continuación se mencionarán algunas:

• Trabaja con tu propio marco: Puedes construir tu propio sitio usando React, Vue o componentes típicos de HTML y JavaScript.
  
• Full HTML estático, sin el uso de JavaScript: Astro.js renderiza toda la página con un HTML estático, eliminando el JavaScript.
  
• Inserta JavaScript: Astro.js puede insertar dicho programa automáticamente en los componentes que deben usarlo, tan pronto como se cargue la página. Es decir, el JavaScript de tu formulario de contacto solo se cargará cuando ingreses a esta parte de tu web.
  
• Full soporte y compatibilidad: Astro brinda la compatibilidad con la mayoría de herramientas y tecnologías que usamos hoy en día. ¿Quieres trabajarlo con Typescript? ¡Puedes hacerlo! ¿Quieres usar algún framework o librería de CSS como Tailwind o SASS? ¡Es totalmente válido!
  

No menos importante, Astro.js también incorpora elementos de Search Engine Optimization (SEO).

Qwik: ¿Qué es y cómo funciona?

Es un framework web construido sobre TypeScript, especializado en la creación de sitios web rápidos y fáciles de desarrollar. Fue lanzado en julio de 2019 y, desde entonces, ha ganado popularidad gracias a su enfoque en la creación de sitios web modulares y reutilizables, mediante una arquitectura basada en componentes.

Al igual que Astro, Qwik se encarga de renderizar páginas estáticas de HTML utilizando la menor parte de JavaScript. Éste elimina/retrasa la inserción de JavaScript donde no lo necesitamos (por ejemplo, cuando se retrasa la ejecución del JavaScript, la aplicación empieza a descargar el código).

La razón por la que Qwik puede hacer esto es por el optimizado que utiliza, basado en Rust y  dedicado a transformar el código en tiempo de construcción.

Qwik cuenta además con una variedad de herramientas y características integradas, como un sistema de plantillas HTML, soporte para componentes web y manejo de rutas. Al igual que Astro, Qwik tiene una curva de aprendizaje relativamente baja, haciéndolo accesible para todos los desarrolladores, sin importar su conocimiento. Sin embargo, a diferencia de Astro.js, Qwik está diseñado específicamente para trabajar con TypeScript.

Con base en lo ya comentado e, conozcamos mejor estos lenguajes mediante una pequeña práctica.

Astro.js

Siguiendo la documentación de Astro en su web oficial y, como es ya normal con los frameworks basados en React, tenemos varias formas de crear un proyecto: con NPM o Yarn.

1) Ejecuta el comando para la creación del proyecto:

2) Aparecerá una pregunta que especifica si deseamos instalar los paquetes recomendados. Para efectos de esta pequeña práctica, diremos que sí.

3) A continuación, nos preguntará por el nombre de nuestro proyecto:

4) ¿Cómo quieres iniciar el nuevo proyecto?: En este caso, te permite elegir si deseas trabajar con archivos de ejemplo, mediante el uso del template de un blog, o simplemente vacío. En este caso, selecciona la primera opción, archivos de ejemplo:

5) ¿Instalar dependencias? Para este ejemplo, es necesario hacerlo. Es importante señalar que, al momento de realizar la instalación, ésta puede tomar tiempo.

6) ¿Planeas escribir el código con Typescript? Si la respuesta es afirmativa, el siguiente paso será: ¿qué nivel estricto deseas usar?

7) El último paso: el software pregunta si deseas inicializar el proyecto con Git.

Una vez finalizados los 7 pasos anteriores, estamos listos para ejecutar el comando que nos llevará al nuevo universo: npm run dev.

En nuestro localhost nos encontraremos con la siguiente interfaz, una vez que se ejecute npm run:

La estructura de ficheros generada por Astro es la siguiente:

En la carpeta src es donde se encontrarán las cocreadas, es decir, la estructura sugerida por Astro.

En la carpeta components se visualizarán los componentes que la app tendrá. Para el ejercicio que estamos realizando se encuentra el componente card, el cual se observa cuando se ejecuta la app.

A continuación, se presenta una imagen del componente card. Como logramos detallar, los estilos se encuentran en el mismo elemento, algo un poco similar a Vue.

Procediendo con el fichero layout, se logra encontrar un componente similar al index de la aplicación y, al igual que en el componente card, encontramos los estilos dentro de éste.

Finalmente, se encuentra la carpeta de pages. Dentro de ésta se encuentra el index del contenido dinámico, el cual se logra visualizar de la siguiente manera:

Esto sería, finalmente, Astro.js en una versión básica de su template. Esperamos que hasta este punto sientan la curiosidad de conocerlo, ensayarlo y crear sus apps (si gustan pueden etiquetarnos). Ahora, pasemos a Qwik y conozcamos un poco más acerca de este lenguaje. Comencemos.

Qwik

1) Ejecutar el npm create:

2) Es importante señalar que tanto Qwik como Astro.js tienen pasos muy similares. Por lo tanto, algunos de los pasos a continuación resultarán parecidos:

a) Nombrar la app y seleccionar en qué sentido o cómo queremos iniciar el proyecto.

b) El programa preguntará por la instalación de las dependencias NPM y acerca de la iniciación del proyecto en Git. En tal caso de responder de forma positiva a dichas cuestiones, es importante mencionar que debemos cerciorarnos de si las dependencias fueron instaladas por el programa. Si no fue así, se deberán instalar de forma manual.

c) En el momento de contar con la instalación de las dependencias se tendrá el primer proyecto en Qwik creado. En este sentido, se podrá observar un poco más a profundidad el proyecto.

Después de realizar el proceso anterior, la consola muestra los siguientes procesos. Como se mencionó anteriormente, para instalar las dependencias se puede ejecutar el comando npm install.

Luego, se podrá ejecutar el comando npm start.

Es importante señalar que la aplicación se ejecutará en el puerto 5173. Para este ejemplo, la apariencia que tiene la página en primera ejecución se presenta de la siguiente manera:

Dicho esto, en otra sección podremos detallar cómo se presentan el código y la estructura del proyecto:

Según se logra observar, la estructura es bastante definida y una diferencia que se resalta con respecto a Astro.js es que Qwik presenta el enrutamiento de la aplicación.

En la siguiente imagen se presenta cómo se ven el root y la carpeta de components del proyecto realizado:

Por último, y no menos importante, la carpeta router:

Considerando lo mencionado en otras ocasiones y de acuerdo con la experiencia, es importante resaltar que, en el presente artículo, no podremos detallar el código a profundidad, ya que el artículo sería más extenso. Sin embargo, y por curiosidad hacia los más intrépidos, se dejará una imagen acerca de cómo puede lucir el index.tsx del routes:

Posterior a haber presentado y entendido un poco sobre los frameworks, entraremos a detalle sobre las similitudes y diferencias entre estos dos lenguajes.

Similitudes y Diferencias entre AstroJS y Qwik

Similitudes

• Están diseñados para crear sitios web altamente optimizados y escalables, utilizando tecnologías modernas como componentes web, TypeScript y JavaScript.
  
• Ambos lenguajes tienen herramientas integradas para simplificar el proceso de desarrollo, como el manejo de rutas, la prerrenderización de contenido y un sistema de plantillas HTML.
  
• Astro.js y Qwik tienen una curva de aprendizaje relativamente sencilla, haciéndolos  accesibles para los desarrolladores sin importar su experiencia.
  
• Utilizan un enfoque basado en componentes para la creación de sitios web. Esto significa que los desarrolladores pueden crear componentes web y luego usarlos en diferentes partes del sitio web para ahorrar tiempo y esfuerzo. Esta arquitectura también facilita la creación de sitios web modulares y reutilizables.
  
  

Diferencias

Astro.js es compatible con una amplia gama de bibliotecas y marcos de JavaScript, mientras que Qwik está diseñado específicamente para trabajar con TypeScript. Esto significa que los desarrolladores pueden utilizar diferentes herramientas y bibliotecas según sus necesidades y preferencias.

Astro.js está diseñado para crear sitios web escalables y altamente optimizados que puedan manejar un gran volumen de tráfico sin degradar el rendimiento del sitio. Por otro lado, Qwik está más enfocado en la facilidad de desarrollo y en la creación de sitios web modulares y reutilizables.

Astro.js utiliza una sintaxis similar a la de React.js, mientras que Qwik utiliza una sintaxis similar a la de Angular.js. Esto significa que los desarrolladores familiarizados con React.js o AngularJS pueden encontrar más fácil trabajar con AstroJS o Qwik, respectivamente.

Astro.js utiliza un enfoque de enrutamiento basado en archivos, lo que significa que las rutas se definen en archivos individuales en lugar de en un archivo de configuración centralizado. Qwik, por otro lado, utiliza un enfoque más tradicional de enrutamiento basado en un archivo de configuración centralizado.

A continuación, dejos los links de ambos frameworks por si quieren ser todavía más curiosos.

Documentación oficial de Qwik: https://qwik.builder.io/

Documentación de Astro.js: https://astro.build/

En conclusión, recomiendo Astro.js y Qwik para proyectos porque ambos ofrecen soluciones innovadoras y eficientes para el desarrollo web. Astro es una biblioteca ligera y fácil de usar que permite la creación de sitios web rápidos y eficientes con carga del lado del servidor. Por otro lado, Qwik es un kit de interfaz de usuario rápido que permite la creación de sitios web con una apariencia elegante y profesional.

En cuanto a la orientación para aplicar estos recursos en proyectos, sugiero que se utilice Astro.js en proyectos que requieran una carga rápida y eficiente del sitio, como en sitios web de comercio electrónico o aplicaciones de noticias. En cambio, Qwik es ideal para proyectos que necesiten una interfaz de usuario atractiva y fácil de usar, como en proyectos de redes sociales o sitios web de blogs.

En definitiva, ambos recursos pueden ser herramientas valiosas para mejorar la calidad y la eficiencia de los proyectos web.

La elección queda en tus manos. ¡Hasta pronto!