En está breve cápsula estaremos detallando algunas buenas prácticas de Qwik
Operaciones en línea en las plantillas.


El optimizador Qwik puede optimizar mejor la reactividad de la aplicación si las operaciones se inlinean en la plantilla.

Aplicación subóptima

// Don't do this!
export default component$(() => {
  const signal = useSignal(0);
  const isBiggerThanZero = signal.value > 0 ? 'Bigger than zero' : 'Smaller than zero';
  return (
    <div>
      <button onClick$={() => signal.value++}>+</button>
      <button onClick$={() => signal.value--}>-</button>
      <div>{isBiggerThanZero} - Current value: { signal.value }</div>
    </div>
  );
});

La implementación anterior hará que toda la plantilla se vuelva a renderizar cuando cambie la señal. Esto se debe a que isBiggerThanZero no está integrado en la plantilla.

export default component$(() => {
  const signal = useSignal(0);
  return (
    <div>
      <button onClick$={() => signal.value++}>+</button>
        <button onClick$={() => signal.value--}>-</button>
        <div>
          {signal.value > 0 ? 'Bigger than zero' : 'Smaller than zero'} - Current
          value: {signal.value}
        </div>
    </div>
  );
});


Evitar el registro de eventos DOM en useVisibleTask$()

Qwik permite registrar escuchadores de eventos de forma declarativa, usando useOn() o usando JSX.

Al utilizar useVisibleTask para registrar eventos de forma programática, estamos descargando y ejecutando JavaScript de forma ansiosa, incluso si el evento no se activa.

// Don't do this!
useVisibleTask$(({ cleanup }) => {
  const listener = (event) => {
    const mouseEvent = event as MouseEvent;
    console.log(mouseEvent.x, mouseEvent.y);
  };
  document.addEventListener('mousemove', listener);
 
  cleanup(() => {
    document.removeEventListener('mousemove', listener);
  });
});

La implementación anterior hace que se cargue más JavaScript de forma ansiosa, en lugar de responder con precisión a los eventos del usuario. El aumento de la carga de JavaScript por adelantado resulta en un rendimiento más lento de la aplicación.

En su lugar, utilice el gancho useOnDocument() para registrar eventos en el objeto documento, de esta manera Qwik no ejecutará ningún JS hasta que se active el evento.

Recuerda que si quieres aprender Qwik puedes hacerlo en el siguient video 

useOnDocument(
  'mousemove',
  $((event) => {
    const mouseEvent = event as MouseEvent;
    console.log(mouseEvent.x, mouseEvent.y);
    // No manual clean up required!
  })
);

En caso de duda, en lugar de useVisibleTask$()use:

  • useOn(): escucha los eventos del elemento raíz del componente actual.
  • useOnWindow(): escucha los eventos del objeto ventana.
  • useOnDocument(): escucha los eventos del objeto documento.
  • Evita acceder a la ubicación desde el objeto ventana
  • No acceda a window.location directamente, utilice el hook useLocation() en su lugar.
// Don't do this!
useVisibleTask$(()=> {
    if (window.location.href).includes('foo') {
        //... do the thing
    }
})
// or
if (typeof window !== "undefined") {
    const queryParams = new URLSearchParams(window.location.search);
    const query: Record<string, string> = {};
    queryParams.forEach((value, key) => {
        query[key] = value;
    })
    doTheThing(query);
}

Muchas acciones relacionadas con la información de localización pueden ejecutarse durante la renderización inicial del lado del servidor, lo que da como resultado HTML puro sin ninguna sobrecarga de JavaScript.

Al forzar que esta lógica se ejecute en el lado del cliente, se introduce un aumento de JavaScript por adelantado y se produce una carga ansiosa.

El uso del patrón if typeof window !== "undefined" puede hacer que se omita el código. En el servidor, el bloque de código se omitirá ya que la ventana siempre es indefinida.

Mientras que los desarrolladores pueden estar acostumbrados a que el código se ejecute dos veces, Qwik elimina esta necesidad proporcionando un enfoque más eficiente.

// Do this!
const location = useLocation();
 
if (location.url.href.includes('foo')) {
  // Do the thing
}
 
doTheThing(location.url.searchParams);

Excepción


Cuando se utiliza SSG para archivos puramente estáticos, es inevitable confiar en el servidor sin información de ubicación actual durante el tiempo de compilación.

Sin embargo, ¡ten cuidado! Si la información requerida (como los parámetros de consulta) no es necesaria hasta que se produzca un evento de usuario, incorpore la comprobación dentro de su código de gestión de eventos.

Este enfoque ayuda a evitar la carga ansiosa de JavaScript y mejora el rendimiento.

Recuerda que si tu quieres aprender Qwik, puedes hacerlo en los recursos que te dejamos.

Fuente