Qwik — Primeros pasos y nociones básicas

Conocimientos sobre lo que debemos de saber y como crear nuestro primer proyecto básico obteniendo las bases

16 min readJan 31, 2023

Lo que voy a tratar de exponer en este artículo es una breve introducción para hablar de que es Qwik, sus características principales y que nos ofrece que no puedan ofrecer opciones como otras tecnologías Javascript que podrían ser Angular, React, Vue,… donde encontramos el concepto de la hidratación, que es uno de los responsables de ralentizar nuestras aplicaciones y vamos a ver como Qwik evita ese proceso, el de la hidratación, aumentando el rendimiento de nuestras aplicaciones.

Una vez realizada la introducción y teniendo claro más sobre lo que es Qwik con sus características, creamos el proyecto de aplicación paso a paso donde vamos a ver los detalles de su estructura y organización para conocer todos los detalles que componen un proyecto con este Framework.

Con este artículo conseguiremos hacer una aproximación inicial y terminaremos con la ejecución del proyecto en el que realizaremos unos pequeños cambios, con el objetivo de ver lo más básico antes de empezar a crear nuestra primera aplicación sencilla en el siguiente artículo (pendiente de crearlo, estaros atentos a la newsletter)

Es una tecnología nueva, todavía no muy madura y aunque esté en versión de Beta, me he animado a ir escribiendo sobre esta tecnología desde las bases, a medida que voy aprendiendo nuevos conceptos, con el objetivo de que hagamos un aprendizaje en paralelo y todo quede documentando en Español, que actualmente (finales de enero del 2023) apenas he visto información escrita (algunos videos si). Pueden darse cambios por nuevas versiones, que los iré reflejando en nuevas publicaciones

Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:

Anartz Mugika Ledo🤗

Qwik paso a paso desde 0 al detalle

View list

23 stories

Introducción a Qwik

Se han creado muchos frameworks / librerías de JavaScript para resolver problemas de carga lenta a lo largo de los años, y la mayoría de ellos intentan resolver el mismo problema de cargas sin mucho éxito, en lo que respecta al rendimiento diríamos que no han llegado a buen puerto con lo que estaban buscando.

Actualmente, los sitios web están enviando JavaScript al navegador para proporcionar interactividad y la cantidad de JavaScript que se descarga en el navegador aumenta cada año y eso hace que la velocidad de procesamiento sea más lenta, sobre todo a medida que aumenta la complejidad de estos sitios web con el tiempo.

La mayoría de los frameworks / librerías de JavaScript descargan y ejecutan todo el código a la vez.

Esto hace que el tiempo de carga sea cada vez más lento, ya que el tiempo de carga será O(n).

Qwik dice que puede solucionar un problema que otros frameworks / librerías no pueden. Después de varios años de duro trabajo, el framework ha alcanzado la etapa beta y ahora está listo para la producción.

¿Qué es Qwik? Es un nuevo tipo de framework que representa un árbol de componentes y como resultado nos dará una aplicación interactiva de tipo frontend que hace posible que las aplicaciones web de cualquier tamaño o complejidad se carguen instantáneamente con cargas ultrarrápidas y se ejecuten de la misma manera a cualquier escala.

Su objetivo principal es descargar perezosamente (Lazy Loading) el código a medida que el usuario interactúa. Su objetivo es tener aplicaciones instantáneas, incluso en dispositivos móviles solo con lo necesario.

¿Qué estrategias utiliza para llegar a este objetivo?

Retrasar ejecución y descarga de todo el Javascript lo máximo posible.
Serializa el estado de ejecución de la aplicación y del framework en el servidor y lo reanuda en el cliente. A este proceso se le llamará resumable.

Ahora analizamos con más detalle estas estrategias, para entender mejor su funcionamiento.

Si deseáis dar los primeros pasos en Qwik desde la perspectiva de Leifer Mendez y Marianna Rolfo, para tener más fuentes fiables a las que consultar, acceded y disfrutar de la lectura.
Además, dentro de ese artículo Leifer nos ofrece un curso de Qwik de mucha calidad para que aprendáis de manera práctica a iniciaros en este framework junto con un video a la presentación oficial de la versión estable de Qwik (1.0.0).

Retrasar ejecución y descarga

Retrasa la ejecución y la descarga de JavaScript (excepto el código de inicio, alrededor de 1KB que es lo imprescindible en Qwik para poder iniciarse) durante el mayor tiempo posible retrasando la ejecución de cualquier otro Javascript en la página hasta que sea necesario. Con esto conseguirá eliminar la hidratación dada en otros frameworks / tecnologías de Frontend como Angular, React,…

La hidratación puede tardar varios segundos, dependiendo de la complejidad de tu aplicación y de la velocidad del dispositivo móvil. Las aplicaciones de Qwik son instantáneamente interactivas incluso en dispositivos móviles lentos, lo que lleva a una puntuación perfecta de Google PageSpeed algo que nos beneficiará mucho.

Su tiempo de carga es O(1), mejorando mucho el O(n) de tecnologías Javascript como Angular, React,… mencionadas anteriormente.

Qwik no es React, aunque se parece mucho a React, y utiliza JSX. Ofrece el tiempo de carga de página más rápido posible, independientemente de la complejidad del sitio web que se está ejecutando.

¿Qué es la hidratación?

Leyendo esta primera estrategia para llegar al objetivo de ser más eficientes en las cargas, encontramos un nuevo concepto que es la de eliminar la hidratación, proceso que se da en Qwik.

Según a definición en Wikipedia) enfocada al desarrollo web:

La hidratación es tal y como funcionan tecnologías como Angular, Vue y React (entre otras opciones) donde es una técnica de Javascript del lado de nuestro cliente donde se ejecuta una descarga de todo nuestro bundle completo, luego se efectúa una pequeña ejecución de nuestro Javascript para finalizar añadiendo los listeners como las acciones tipo onClick y similares. Seguramente en más de una ocasión, muchas de las cosas descargadas no se usan y eso hace que su descarga se considere inútil. Se reflejaría ese proceso en la siguiente imagen:

Este proceso no se da en Qwik (si en Angular, React, Vue,…), esto se elimina, con la descarga de lo necesario a medida de nuestras necesidades, ni más ni menos.

Resumability

La capacidad de reanudación (Resumability) permite que las aplicaciones de Qwik continúen ejecutándose donde las dejó el servidor.

Todos los frameworks / tecnologías deben realizar un seguimiento de las estructuras de datos internas sobre el estado de la aplicación para proporcionados la información que estamos requiriendo, como un formulario de contacto, nuestro catálogo de proyectos,…

La generación actual de frameworks / tecnologías no conservan esta información cuando se realiza la transición del servidor al navegador.

Como resultado, las estructuras de datos del marco deben reconstruirse en el navegador, duplicando el trabajo que se realizó en el servidor. La reconstrucción de las estructuras de datos y la conexión de los oyentes se denomina hidratación y esto es lo que evita Qwik.

Ejemplos de Resumability:

CD / Casette (lo mismo podía ser con DVD / VHS) : Muy bien explicado por parte de Bezael Pérez (Domini Code) en este punto de su introducción a Qwik (recomendado para complementar con los conocimientos del artículo donde muestra algunos aspectos con más detalle)
Videos de Youtube (con login y sin login): Si accedemos a un navegador sin loguearnos, vemos un video concreto, dejando este en el 02:02 por poner un ejemplo y pasamos a otro equipo. Seleccionamos el mismo video, pero nos empieza desde el principio, como el CD. En cambio, si lo hacemos logueados y accedemos con esa misma cuenta en otro equipo, empezaremos ese video en el punto que lo hemos dejado.

En resumen, esto es lo que hará el resumability

El proceso que se da en el resumability desgranando el proceso en el código su funcionamiento será el siguiente:

Fase 1: Añadimos el código y las funcionalidades necesarias en nuestro componente a renderizar.
Fase 2: Se codifica el path de código Javascript en nuestro HTML y ya desde ahora, no tendremos necesidad de descargarlo en nuestro navegador después de la primera descarga. En este caso aplica el proceso de Lazy Loading.
Fase 3: Es la porción de código que podremos ver después del proceso de “juntar todo” el HTML con el Javascript en modo Lazy Loading siempre que tengamos la necesidad de usarlo. Si no vamos a usar por ejemplo la interacción de ese botón, no descarga esa información.

Finalizando con este punto, estas serán las diferencias entre usar la hidratación o no:

Serialization

Qwik serializa los listeners, las estructuras de datos internas y el estado de la aplicación en el HTML durante la transferencia del servidor al navegador. Debido a que toda la información se serializa en HTML, el cliente puede reanudar la ejecución donde la dejó el servidor.

Recordad el ejemplo Casette con Qwik (que empieza donde lo hemos dejado) y CD con Angular, React,… que empieza desde el inicio al iniciarlo en otro equipo, o en el mismo después de haberlo reiniciado.

Aplicándolo en el código, podemos observar el proceso de serialización. Por ejemplo con este contenido, correspondiente a un ejemplo sencillo, donde se define un botón con una acción “click”:

Si entramos en los elementos dentro del inspector de elementos, podemos observar como está serializando ese fichero en un string con un identificador único, para poder retornar posteriormente y hacer uso de ese código asociado a esa línea en el caso de retornar y usar ese código en esta misma página u otras páginas que hacen uso de una misma función.

Y accediendo en ese fichero, vemos la referencia usada para “marcar” esa referencia mediante la serialización como si fuese el minuto y segundo concreto de lo que sería una cinta de casette o video VHS:

Viendo estas estrategias, sacamos estas principales conclusiones a favor de Qwik:

Carga cero: Sin hidratación porque es resumible.
Carga perezosa (Lazy Loading): No hay que preocuparse de ello, ya que Qwik se ha construido alrededor de la carga perezosa como su núcleo primitivo, haciendo que el desarrollador se ahorre este proceso de optimización.
Renderización reducida: Reactividad que permite reducir la cantidad de código de renderizado descargado y ejecutado. El código se construye en el servidor y se restaura en el cliente sin necesidad de que el código de la aplicación esté presente y se vuelva a ejecutar.
Escabilidad: Proporcional a la complejidad de la interacción con el usuario, no al tamaño de todos los componentes de la ruta actual. Rendimiento no se altera aunque vaya creciendo en complejidad la aplicación.
Codificar una vez.

Llegados a este punto, ya sabemos las diferencias que trae respecto a tecnologías como Angular, React, Vue,…

Vamos a comenzar con el proceso básico de crear un proyecto y analizaremos su estructura principal con sus ficheros y configuraciones para entender más el proceso inicial para dar nuestros primeros pasos en Qwik.

Así podemos ir comprobando todo lo que os he hablado de sus ventajas y su funcionamiento básico.

Comenzando a trabajar con Qwik

Para comenzar a trabajar, necesitamos tener una versión de Node superior ó igual a la 16.

Qwik viene con una herramienta CLI que nos ayuda a montar nuestra aplicación.

Para crear nuestra aplicación debemos de ejecutar el siguiente comando:

// en enero del 2023 esta es la versión y es la que se utiliza en el artículo)
npm create qwik@0.16.2

// Para usar la más reciente (puede que no 
// funcione ya como en el artículo y haya cambios)
npm create qwik@latest

El comando abrirá una especie de asistente donde nos pedirán los siguientes datos:

Nombre de la aplicación (por defecto: ./qwik-app).
Tipo de aplicación: Aplicación completa con rutas, aplicación para generar documentación y librería de componentes.
¿Instalar dependencias? Lo lógico es que respondamos que si con un Y, aunque tenemos la opción de decir que no (N).

Algo como lo siguiente:

Donde nuestras selecciones serán las especificadas:

Nombre de la aplicación: firts-steps
Tipo de aplicación: Basic App (QwikCity)
Instalar dependencias: Y (Si)

Modificamos el nombre del directorio del proyecto first-steps a 00-firts-steps, para conseguir seguir un roadmap ordenado y así tener claro cual es el orden a seguir en el aprendizaje que os voy a proponer

Nos dirigimos al directorio 00-firts-steps:

cd 00-firts-steps

Una vez dentro, ejecutamos el comando para iniciar nuestra aplicación:

npm start

Para arrancar la app, abrimos la siguiente url: http://localhost:5174 y esta es la apariencia inicial que tendremos por defecto, que podría cambiar en base a las nuevas versiones aunque no afectaría apenas en estos pasos.

Estructura de la aplicación Qwik

Al abrir el proyecto dentro de nuestro editor de código podemos visualizar la siguiente estructura:

carpeta-proyecto
├── README.md
├── public
│   └── favicon.svg
├── src
│   ├── components
│   ├── routes
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   └── root.tsx
├── vite.config.ts
├── tsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
└── .prettierignore

Donde explico para que sirve cada una de ellas con sus ficheros principales:

carpeta-proyecto: Es el directorio principal que contiene todos los directorios, configuraciones y ficheros con el código de la aplicación Qwik.
README.md: Sirve para añadir las instrucciones de configuración, notas a tener en cuenta por las personas que van a usar el proyecto como versión a usar, instrucciones de instalación, como configurar,... Esto al final depende de los que participen en el proyecto para añadirle contenido de una manera u otra. Por defecto, al crear el proyecto, describirá la estructura y los script del proyecto.
public: Es el directorio para los activos estáticos como puedes ser imágenes, fuentes, iconos, hojas de estilo,... incluyendo los ficheros favicon.svg, manifest.json y robots.txt.
src/components: Es el directorio que usaremos para almacenar los componentes.
src/routes: Proporciona el enrutamiento basado en el directorio con las plantillas principales de las diferentes funcionalidades.
src/entry.dev.tsx: Es el punto de entrada al desarrollo utilizando sólo módulos del lado del cliente, sin SSR.
src/entry.preview.tsx: Es el punto de entrada del paquete para el script, preview, que sirve el paquete SSR en modo de producción. Asociado al script preview que encontramos en el fichero package.json.
src/entry.ssr.tsx: Es el punto de entrada del SSR. Se utiliza en todos los casos en los que la aplicación se renderiza fuera del navegador, para servidores, como por ejemplo express, Cloudflare, y para scripts, start, preview, and build.
src/root.tsx: Raíz de la ejecución de la aplicación, por donde tenemos configurado el enrutamiento (QwikCityProvider) con la estructura básica del HTML.
vite.config.ts: Para cuando estemos trabajando en el desarrollo, configuración correspondiente a la herramienta Vite, denominada la herramienta Frontend de la próxima generación (Next Generation Frontend Tooling). Se usará para trabajar con qwikCity y qwikVite.
tsconfig.json: Uso de Typescript, donde será el lenguaje de programación utilizado por defecto, ya que las aplicaciones de Qwik soportan Typescript y están indicadas en este fichero.
node_modules: Directorio donde se van a almacenar todas las dependencias de Node (que re registran en package.json) descargadas una vez ejecutado el comando de instalación.
package.json: Fichero del manifiesto del proyecto donde se almacena la información principal del proyecto como el nombre del paquete y versión (son fundamentales y necesarios SIEMPRE), dependencias a usar y otra información como el nombre del autor, scripts,... A continuación accedemos a una explicación más detallada de lo que harán los diferentes scripts dentro de este fichero.

Y aunque hay más ficheros, estos se pueden considerar los más importantes en esta etapa de introducción, más adelante ya iremos analizando algunos de los que no están mencionados cuando entremos más en detalles en diferentes funcionalidades como el Routing.

Rutas — Básico

Para poder trabajar con las rutas, el proyecto hace uso de Qwik City que es la implementación que usamos en proyectos Qwik para gestionar las rutas de nuestros proyectos.

En este primer artículo, os explicaré lo básico y esencial, para tener una base de como trabaja el enrutamiento dentro de este framework.

Centrándonos en el proyecto tiene una plantilla base que será la siguiente:

00-firts-steps/src/routes/layout.tsx donde tenemos el esqueleto de lo que será nuestra app base y donde podemos encontrar el punto de entrada para las diferentes rutas, donde cargará el contenido acorde a la selección. Esto sería el contenido del layout, que es donde se irán cargando los diferentes contenidos

import { component$, Slot } from '@builder.io/qwik';
import Header from '../components/header/header';

export default component$(() => {
  return (
    <>
      <main>
        <Header />
        <section>
          <Slot /> // <============================ LINEA 10
        </section>
      </main>
      <footer>
        <a href="https://www.builder.io/" target="_blank">
          Made with ♡ by Builder.io
        </a>
      </footer>
    </>
  );
});

Si observamos en la línea 10, tenemos el componente <Slot /> que será el componente que usaremos para ir cargando los diferentes contenidos, lo que serían las diferentes páginas como podrían ser dentro de un blog páginas como Inicio, Sobre el autor y Contacto.

Por defecto se cargará la información relacionada al fichero index.tsx, que es la ruta del índice, dentro del directorio routes que lo encontramos aquí: 00-firts-steps/src/routes/index.tsx

A tener en cuenta que este fichero llamado index podemos usarlo con las siguientes extensiones: .ts, .tsx, .js, .jsx, .md, ó .mdx y que cargará correctamente su información

El contenido que se cargará cuando ya hemos creado el proyecto y hemos iniciado la ejecución es el siguiente:

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

// Esto es lo que corresponde a la página inicial de la ruta "/"
export default component$(() => {
  return (
    <div>
      <h1>
        Welcome to Qwik <span class="lightning">⚡️</span>
      </h1>
     ...
      <Link class="mindblow" href="/flower/">
        Blow my mind 🤯
      </Link>
    </div>
  );
});
export const head: DocumentHead = {
  title: 'Welcome to Qwik',
  meta: [
    {
      name: 'description',
      content: 'Qwik site description',
    },
  ],
};

Este fichero index.tsx define la interfaz de usuario que se coloca en la ranura (en el cuadro verde a continuación) con el componente Slot dentro de src/routes/layout.tsx, cuando la URL es / que hace referencia a la página principal.

Analizando los directorios dentro de routes, podemos observar las posibles rutas que existen:

Que son las siguientes:

/: Asociado al index.tsx de la raíz
/flower: Asociado al directorio flower que contiene el index.tsx

Ahora estamos en la ruta principal, si introducimos /flower accedemos a esta página:

¿Cómo añadir una nueva página y asociarla a una ruta?

Por ejemplo, imaginaros que queremos crear la página de contactos de nuestro proyecto de portfolio, lo que debemos de hacer es lo siguiente:

Dentro de routes crear la carpeta contact (o el nombre que creamos oportuno)
Dentro de la carpeta nueva, añadimos el fichero index, en una de las extensiones mencionadas anteriormente, como tsx. Yo usaré esta, pero recordad que se puede usar para mostrar incluso contenido en formato markdown. Creamos index.tsx

Quedará de la siguiente forma:

Y para tener algo de contenido, tenemos que rellenar el apartado del componente (component$) y en lo que respecta a la información de la cabecera (Document Head).

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

// Lo que corresponde al contenido principal del componente
export default component$(() => {
  return (
    <div>
      <h1>
        Contact with me <span class="lightning">⚡️</span>
      </h1>
    </div>
  );
});
// Para especificar el título de la página y descripción de la metadata (SEO)
export const head: DocumentHead = {
  title: 'Contact',
  meta: [
    {
      name: 'description',
      content: 'Anartz Mugika contact page',
    },
  ],
};

En estos momentos no entraremos en detalles sobre lo que hay que tener en cada punto, estamos estudiando lo básico para ir profundizando en otras entregas.

No se si esto lo implementarán para la versión en producción, pero si añadimos una nueva página DEBEMOS DE REINICIAR LA EJECUCIÓN DEL SERVIDOR apagando la ejecución y ejecutando de nuevo npm run start

Ahora si accedemos a /contact visualizaremos lo siguiente:

Bien, ahora ya tenemos tres rutas y si queremos añadir más, debemos de seguir el proceso visto.

Eso si, solo serán rutas generales sin parámetros, aspecto que vamos a ver con más detalle en próximos artículos.

Ruta de aprendizaje

Ahora que ya hemos visto lo más básico y esencial para empezar con Qwik, mi idea es seguir esta ruta de aprendizaje (que podría sufrir algunos cambios y se actualizaría aquí actualizando los enlaces a los apartados a medida que se van creando artículos):

Bases de Qwik, crear proyecto de primera aplicación y explicar todos los aspectos a tener en cuenta como la estructura de proyecto y organización (En este artículo)
Rutas avanzadas.
Layouts
Componentes
Consumir APIs (REST / GraphQL)
Component API — State, Ciclos de Vida, Eventos,…
Internacionalización: i18n
Proyecto de Documentación
Trabajar con librerías de terceros.
Librería de componentes
Proyecto (Quiz App, juego Piedra Papel y Tijera (esto será basándome en el artículo que hice hace tiempo para Angular, centrándome un poco en las diferencias Angular <=> Qwik), Ahorcado,…)
Deploy app.

Lo dicho, este roadmap puede ir variando con el tiempo, ya que puede haber puntos que los considere menos ó más importantes.

Conclusión

Llegados a este punto, llegamos al final donde hemos empezado a trabajar con un nuevo framework que tiene muy buena pinta. Esperemos que sea una opción importante en el futuro como lo han sido y son actualmente Angular, React, Vue y similares.

Por el momento, al ser versión beta puede haber cambios y espero que entendáis que algunas de las funciones que se vayan explicando en futuros artículos se queden un poco obsoletas.

Tranquilidad, viendo la evolución iré haciendo artículos complementarios y quizás algún video, pero por el momento esta opción está descartada.

Espero que os guste y atención a la siguiente clase, ¡¡¡la próxima semana!!

Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:

Anartz Mugika Ledo🤗