Hola Mundo con Qwik – Tu primera aplicación

28/08/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos hacer nuestra primera aplicación con el framework Qwik.

Qwik es el nuevo framework de JS de la mano del creador de Angular, Misko Hevery, que quiere revolucionar el mercado de los frameworks utilizando su punto fuerte que es la carga casi instantánea de nuestras aplicaciones web.

Lo consigue gracias a dos puntos:

Retrasar la descarga y ejecución de ficheros javascript.
Guarda el estado de la aplicación y el framework en el servidor, para luego restaurarlo en el cliente y continuar su ejecución.

Esto hace que nuestras aplicaciones cargue lo necesario cuando el cliente está visualizando una parte de la web, haciendo que se optimice el rendimiento al no tener que descargar y ejecutar todo el JS de la aplicación.

Instalación de Qwik

En primer lugar, necesitamos instalar Node.js desde su página oficial, la versión mínima recomendada es la 16.8.

El IDE recomendado es Visual Studio Code, lo puedes descargar aquí.

Creación de nuestra primera aplicación Qwik

Para crear nuestra primera aplicación, abrimos una terminal y nos posicionamos en la carpeta donde queramos crear nuestra aplicación, lo puedes hacer con Visual Studio Code.

$ npm create qwik@latest

Lo primero que nos piden es el nombre de la carpeta aplicación, en nuestro caso, hola-mundo.

Después, tenemos diferentes plantillas para nuestra aplicación, estas son las que hay actualmente:

Basic App: aplicación base con diferentes miniaplicaciones
Site with Visual CMS: aplicación preparada para la conexión con builder.io, un editor visual para crear nuestra aplicación más facilmente.
Empty App: aplicación vacia.
Component library: aplicación base para crear una biblioteca de componentes.

Nosotros elegiremos la opción «Empty App».

A continuación, nos pedirá si queremos instalar las dependencias, inicializar un repositorio y escuchar un chiste.

Ya tenemos nuestra aplicación creada y lista para arrancar, pero antes haremos unos cambios.

Arrancando nuestra aplicación Qwik

En el fichero index.tsx, dentro de src/routes, dentro del return de component$, escribimos «Hola mundo».

import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";

export default component$(() => {
  return (
    <>
      <h1>Hola mundo</h1>
    </>
  );
});

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};

Este es el resultado: