Qwik es uno de los framworks de JavaScript que recientemente han sonado en la industria, y es que nuevos competidores a React, Angular y Vue han salido a la luz como soluciones para construir aplicaciones frontend, entre algunas de las propuestas astro y qwik, hemos realizado una rápido adentramiento a este framework para ver en qué se puede diferenciar de sus competidores y los actuales reyes del desarrollo frontend.
En este post vamos a hablar de que es Qwik y un ejemplo básico de ¿cómo usarlo?
¿Qué es Qwik?
Este en un framework de JavaScript para desarrollar aplicaciones frontend cuya propuesta principal es evitar el proceso de hidratación de nuestras aplicaciones, haciendo que sean más rápidas y eficientes. Y el pasado 1 de mayo del 2023 se ha liberado su versión 1.0.0, y a la fecha de redacción de este post ha alcanzado las 17K estrellas en su repositorio de GitHub, igualmente si vemos la encuesta State of Js vamos a encontrar datos interesantes.
Este es el segundo lugar en generar interés en usarlo con 67% de los encuestados que quieren aprender a usarlo, solamente estando detrás de svelte con 69.8%. Sobre la retención, igualmente se trata de uno de los que tiene retención más alta, ya que el 84% de quienes han usado wiki lo volverían a utilizar, sin embargo, el uso solo está en un 1.8%, lo cual es bajísimo comparado con un 81.8% que tiene React por ejemplo.
Y es que sí, muchas de estas nuevas opciones han salido al mercado, pero para que comiencen a ser implementadas en proyectos reales siento que le faltará un tiempo.
¿Qué necesito saber y tener para comenzar a usar Qwik?
Vamos a explorar un poco sobre cómo funciona, en lo poco que llegue a ver de este framework encontrarás muchas, pero muchas similitudes con React y Next Js, en su propia documentación es mencionado que si sabes React sabes Qwik, y es que su sintaxis es prácticamente igual, por lo que esto puede facilitarte mucho la entrada para aprenderlo.
La otra tecnología importante a mencionar es el uso de typescript, ya que desde que lo comencé a utilizar y viendo las dependencias de desarrollo, es que usa el tipado que nos ofrece TypeScript
Para comenzar usar estas tecnologías, tenemos 2 cursos en la Academia Hola Mundo para aprender a usar estos lenguajes:
- React – Guía definitiva: hooks, router, redux, next + Proyectos, en el que aprenderas desde cero a usar React y una sección enfocada al uso de Next JS, y
- TypeScript: sin fronteras para el uso de TypeScript
Primeros pasos para usar qwik
Los requisitos necesarios para usar Qwik son tener Node js versión 16.8 o posterior, esto lo puedes comprobar con el comando node -v en tu terminal y el segundo requisito es tener un IDE o editor de texto donde nos recomiendan utilizar a VsCode, y si aún no conoces acerca de VsCode, te dejaremos nuestro curso gratuito de VsCode.
Ahora que tenemos todo listo, podemos comenzar, yo he creado una carpeta llamada prueba en donde comenzaré a utilizar los comandos para crear una aplicación con Qwik, esto es realmente muy rápido y muy fácil.
El comando quedará inicio a todo es npm create qwik@latest y presionaremos la tecla enter
Con esto nos preguntará si queremos instalar los paquetes de qwik, primero escribiremos la tecla y y después la tecla enter
Enseguida nos pedira la ubicación en donde guardaremos el proyecto y el nombre de la carpeta, predeterminadamente sera qwik-app pero la puedes cambiar al nombre de tu proyecto
Después nos preguntará qué tipo de instalación queremos, al momento que estamos escribiendo esto, solo hay 3 opciones, Basic App que contiene algunos componentes como un contador o una lista de «todo» completamente funcional; para observar cómo funcionaba es el primero que instalé, pero posteriormente elegí la «Documentation Site» para poder construir la pequeña aplicación para este ejercicio de pruebas. Seleccionaremos la opción que necesitemos y presionaremos de nuevo enter
Después de esto, nos preguntará si queremos instalar todas las dependencias que Qwik necesita para funcionar, y por supuesto que seleccionaremos que sí y presionaremos enter
Nos preguntará si queremos iniciar un repositorio de Git, e igualmente seleccionaremos que sí y presionaremos de nuevo enter
Ahora Qwik instalará todas las dependencias, y esto es muy rápido. Una vez que termine tendremos la siguiente pantalla, donde nos darán información y algunos pasos a seguir, tendremos que entrar ahora a la carpeta de nuestro proyecto en mi caso es cd qwik-app y el siguiente será npm star para iniciar el servidor de desarrollo.
Primera aplicación con qwik
Ahora te dejaremos un par de videos en los que iniciamos el servidor de desarrollo:
Y en este donde vemos la aplicación que nos genera Qwik, esto por supuesto no es todo lo que contiene, esta es parte de la página principal:
Sistema de Rutas y componentes
Las rutas sirven bajo sistema de carpetas, si ya conoce Next Js verás que su uso es muy similar de su sistema de carpetas , si seguimos la documentación y colocamos una carpeta joke dentro de la carpeta routes y por dentro un index.tsx
Este archivo index.tsx contendrá la siguiente estructura, con esto podremos regresar el div que contiene el texto: A joke!
import { component$ } from "@builder.io/qwik";
export default component$(() => {
return <section class="section bright">A joke!</section>
});
Si notas el componente es muy similar al que usamos en React, podemos usar JSX e igualmente dentro de este podremos agregar lógica si es que lo necesitamos
Esta es la manera estándar en que podremos definir rutas, entonces, con nuestro servidor desarrollo activo podremos entrar a la direcciónhttp://localhost:5173/joke/
Y veremos el componente que hemos escrito de la siguiente manera:
Primer proyecto con Qwik
Lo siguiente que realizaremos será hacer una pequeña página que consuma una API, en este caso vamos a consumir la pokeAPI para listar los primeros 10 Pokémon.
Instalando dependencias
Como estaremos utilizando TypeScript necesitaremos traer los tipos que se utilizan en la PokeAPI, afortunadamente hay un repositorio que contiene estos tipos, por lo que te recomiendo instalarla con el siguiente comando:
npm install -D pokeapi-typesComponentes y rutas
Primero no necesito el componente header, ni footer que nos incluye Qwik por lo que comentaré estos dos componentes del layout, quedando de la siguiente manera:
import { component$, Slot } from '@builder.io/qwik';
import Footer from '~/components/footer/footer';
import Header from '~/components/header/header';
export default component$(() => {
return (
<>
{/* <Header /> */}
<main>
<Slot />
</main>
{/* <Footer /> */}
</>
);
});
Ahora creamos una carpeta pokemon dentro de la carpeta routes y dentro un documento index.tsx, al igual que el ejemplo anterior, con esto podremos ingresar a la ruta http://localhost:5173/pokemon/ y con esto podremos ver lo que contenga nuestro componente.
Y lo siguiente que haremos será crear nuestro componente Pokemon, iremos a la carpeta components, crearemos dentro de esta una carpeta llamada Pokemon y crearemos un nuevo archivo llamado index.tsx y un archivo más llamado index.css
Ahora que tenemos listos estos archivos vamos a comenzar con el archivo index.tsx dentro de la carpeta components/Pokemon:
import { component$, useStylesScoped$ } from "@builder.io/qwik";
import type { PokeAPI } from "pokeapi-types";
import STYLES from "./index.css?inline";
interface ItemProps {
pokemon: PokeAPI.NamedAPIResource;
}
export default component$<ItemProps>((props) => {
const {pokemon} = props;
useStylesScoped$(STYLES);
return <li onClick$={() => console.log(pokemon.url)}>{pokemon.name}</li>
})
En este componente, estamos retornando un elemento li que contiene solamente el nombre del Pokémon, el cual es obtenido de las props, pero usamos un genérico en el componente para pasarle el tipo de las props que va a recibir el componente, estamos usando la dependencia que instalamos previamente para obtener el tipo de la API, el cual es PokeAPI.NamedAPIResource.
Y los estilos los usamos trayendo el método useStylesScoped$ y le pasamos como argumento a STYLES que viene del archivo index.css?inline , esta es la forma en la que podemos definir estilos de nuestro componente de manera muy fácil con este framework.
Y el contenido del archivo index.css será el siguiente:
li {
font-weight: bold;
color: cadetblue;
}
Como resumen de estos dos archivos, hemos creado un componente reutilizable que vamos a poder utilizar en nuestro archivo de ruta.
Creado nuestro componente de ruta con useSignal.
En el archivo routes/pokemon/index.tsx
import { component$, useSignal, useTask$} from "@builder.io/qwik";
import type {PokeAPI} from 'pokeapi-types';
import Pokemon from "~/components/Pokemon";
export default component$( () => {
const pokemonList = useSignal<PokeAPI.NamedAPIResource[]>([]);
const pokemonCounter = useSignal(0);
useTask$(async () => {
const fetchPokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
const pokemon = await fetchPokemon.json();
console.log(pokemon);
pokemonList.value = pokemon.results;
});
return (
<div>
<h1>Pokemon</h1>
<ul>
{pokemonList.value.map((pokemon: PokeAPI.NamedAPIResource) => (
<Pokemon key={pokemon.name} pokemon={pokemon} />
))}
</ul>
<button onClick$={() => pokemonCounter.value++}>{pokemonCounter.value}</button>
</div>
);
});
Aqui hay que notar 2 cosas importantes, aquí en lugar de tener el hook useState como lo usamos en React, vamos a tener él useSignal que nos permitirá gestionar el estado, la sintaxis es muy similar.
const pokemonCounter = useSignal(0);
Definimos una constante en la que le decimos que es el resultado de ejecutar useSignal y pasándole como argumento el valor inicial del estado, en este caso será 0, esto solo para ver cómo funcionaba un contador, pero el importante en este ejemplo es:
const pokemonList = useSignal<PokeAPI.NamedAPIResource[]>([]);
Al cual pasamos como genérico el mismo tipo que hace un momento el cual es PokeAPI.NamedAPIResource[] con esto le diremos que el estado es del resultado que nos llega de la api cuando fetch('https://pokeapi.co/api/v2/pokemon?limit=10') , termina de resolverse, que es la siguiente interface:
interface NamedAPIResource {
/** The name of the referenced resource. */
name: string;
/** The URL of the referenced resource. */
url: string;
}
Entonces ahora que hemos logrado traer los datos de la API tenemos que asignar este valor al signal, esto lo hacemos de la siguiente manera:
pokemonList.value = pokemon.results;
Así que cuando pasemos a pokemonList como prop de nuestro componente, llegaron los datos correspondientes para renderizarse, exactamente como hacemos en esta línea:
{pokemonList.value.map((pokemon: PokeAPI.NamedAPIResource) => (
<Pokemon key={pokemon.name} pokemon={pokemon} />
))}
Esta primera forma de traer los datos, es lo más parecido que tenemos a useEffect en React, useTask sería lo equivalente para traer este tipo de datos, pero no es la única manera que tenemos en Qwik para hacer operaciones asíncronas, también tenemos a routeLoader.
Forma 2 de traer los datos desde la API: routeLoader$
Esta segunda opción nos permite la obtención de datos, pero del lado del servidor, tal como menciona la documentación, solo podremos usar esta propiedad dentro de la carpeta routes, en un layout.tsx o en un archivo index.tsx
Y se usa de la siguiente manera, vamos a definir una función que tiene que ser exportada y como argumento pasar toda la lógica que necesitemos. La llamaremos definiendo una constante y llamándola pasándole todos los argumentos, entonces con esto podríamos aprovechar para reutilizar lógica con las propiedades server-side, sobre este método te dejaré la documentación oficial.
import { component$} from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import type {PokeAPI} from 'pokeapi-types';
import Pokemon from "~/components/Pokemon";
export const usePokemon = routeLoader$(async () => {
const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
return (await response.json()).results as PokeAPI.NamedAPIResource[]
})
export default component$( () => {
const pokemonList = usePokemon();
return (
<div>
<h1>Pokemon</h1>
<ul>
{pokemonList.value.map((pokemon: PokeAPI.NamedAPIResource) => (
<Pokemon key={pokemon.name} pokemon={pokemon} />
))}
</ul>
</div>
);
});
Nuestra página en funcionamiento
Al final, nuestra aplicación se verá de esta manera:
Conclusiones
Es algo sencillo de hacer, pero lo importante que he visto de este framework es que es muy rápido, tiene propiedades para hacer renderizado desde el servidor y más importante, el tema de la hidratación, aquí con el uso de los signals es que podemos jugar con el estado de nuestra aplicación sí que esto implique un rerenderizado innecesario, aunque el virtual DOM de React en teoría se encarga de esto, cuando hacer proyectos más grandes te puedes encontrar el problema que tus componentes se re renderizan y hay ciertos patrones que te pueden ayudar con esto, pero los signals parece ser una solución disponible y que es funcional.
Por supuesto, este es un pequeño acercamiento y no hemos visto todo el potencial que tiene en este post, pero si quieres probar un poco te dejo la documentación oficial de este framework ya es una propuesta interesante, sin embargo, creo que falta mucho para que, como te decía al principio, proyectos reales lleguen a utilizar esta tecnología, por el momento podemos aprender y experimentar
Pero cuéntanos ¿qué te ha parecido este primer acercamiento?, ¿lo usarás o aprenderás en un futuro?, recuerda que es muy parecido a React y te dejaremos de nuevo los cursos de React y TypeScript que te servirán mucho mejor para entender estos conceptos y el uso de Qwik:
Igualmente te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, o tambien puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Deja un comentario