Aplicar los principios de programación de miniapps a un proyecto de ejemplo

Para mostrar la forma de programar de las apps pequeñas aplicada a una app web, necesitaba una idea de app pequeña, pero lo suficientemente completa. El entrenamiento de intervalos de alta intensidad (HIIT) es una estrategia de ejercicio cardiovascular que consiste en alternar series de períodos cortos de ejercicio anaeróbico intenso con períodos de recuperación menos intensos. Muchos entrenamientos de HIIT usan cronómetros de HIIT, como esta sesión en línea de 30 minutos del canal de YouTube The Body Coach TV.

Sesión de entrenamiento HIIT en línea con temporizador de alta intensidad verde.
Período activo.
Sesión en línea de entrenamiento HIIT con temporizador rojo de baja intensidad.
Período de descanso.

App de ejemplo de HIIT Time

Para este capítulo, creé un ejemplo básico de una aplicación de temporizador de HIIT con el nombre apropiado “HIIT Time”, que permite al usuario definir y administrar varios temporizadores, que siempre consisten en un intervalo de alta y baja intensidad, y, luego, seleccionar uno de ellos para una sesión de entrenamiento. Es una app responsiva con una barra de navegación, una barra de pestañas y tres páginas:

  • Entrenamiento: Es la página activa durante un entrenamiento. Permite que el usuario seleccione uno de los cronómetros y cuenta con tres anillos de progreso: la cantidad de series, el período activo y el período de descanso.
  • Cronómetros: Administra los cronómetros existentes y permite que el usuario cree otros nuevos.
  • Preferences: Permite activar o desactivar los efectos de sonido y la salida de voz, así como seleccionar el idioma y el tema.

En las siguientes capturas de pantalla, se muestra una impresión de la aplicación.

App de ejemplo de HIIT Time en modo vertical.
Pestaña "Entrenamiento" de HIIT Time en modo vertical.
App de ejemplo de HIIT Time en modo horizontal.
Pestaña “Entrenamiento” de HIIT Time en modo horizontal.
App de ejemplo de HIIT Time en la que se muestra la administración de un cronómetro.
Administración del cronómetro de HIIT Time.

Estructura de app

Como se describió anteriormente, la app consta de una barra de navegación, una barra de pestañas y tres páginas, organizadas en una cuadrícula. La barra de navegación y la barra de pestañas se crean como iframes con un contenedor <div> entre ellos y tres iframes más para las páginas, de los cuales uno siempre está visible y depende de la selección activa en la barra de pestañas. Un iframe final que apunta a about:blank se usa para las páginas integradas en la app creadas de forma dinámica, que son necesarias para modificar temporizadores existentes o crear otros nuevos. A este patrón lo llamo app de una sola página de varias páginas (MPSPA).

Vista de Chrome DevTools de la estructura HTML de la app que muestra que consta de seis iframes: uno para la barra de navegación, uno para la barra de pestañas y tres agrupados para cada página de la app, con un iframe de marcador de posición final para páginas dinámicas.
La app consta de seis iframes.

Lenguaje de marcado lit-html basado en componentes

La estructura de cada página se realiza como andamiaje lit-html que se evalúa de forma dinámica durante el tiempo de ejecución. Para obtener información sobre lit-html, es una biblioteca de plantillas de HTML eficiente, expresiva y extensible para JavaScript. Si se usa directamente en los archivos HTML, el modelo de programación mental está orientado directamente al resultado. Como programador, escribes una plantilla de cómo se verá el resultado final, y lit-html llena los vacíos de forma dinámica según tus datos y conecta los objetos de escucha de eventos. La app usa elementos personalizados de terceros, como <sl-progress-ring> de Shoelace o un elemento personalizado implementado por el usuario llamado <human-duration>. Dado que los elementos personalizados tienen una API declarativa (por ejemplo, el atributo percentage del anillo de progreso), trabajan bien con lit-html, como puedes ver en la siguiente lista.

<div>
 
<button class="start" @click="${eventHandlers.start}" type="button">
    ${strings.START}
 
</button>
 
<button class="pause" @click="${eventHandlers.pause}" type="button">
    ${strings.PAUSE}
 
</button>
 
<button class="reset" @click="${eventHandlers.reset}" type="button">
    ${strings.RESET}
 
</button>
</div>

<div class="progress-rings">
 
<sl-progress-ring
   
class="sets"
   
percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
 
>
   
<div class="progress-ring-caption">
     
<span>${strings.SETS}</span>
     
<span>${data.sets}</span>
   
</div>
 
</sl-progress-ring>
</div>
Tres botones y un círculo de progreso.
Sección renderizada de la página que corresponde a la marca anterior.

Modelo de programación

Cada página tiene una clase Page correspondiente que llena de vida el marcado lit-html, ya que proporciona implementaciones de los controladores de eventos y los datos de cada página. Esta clase también admite métodos de ciclo de vida, como onShow(), onHide(), onLoad() y onUnload(). Las páginas tienen acceso a un almacén de datos que sirve para compartir el estado global y el estado por página persistente opcionalmente. Todas las cadenas se administran de manera central, por lo que la internacionalización está integrada. El navegador controla el enrutamiento, básicamente, de forma gratuita, ya que todo lo que hace la app es activar o desactivar la visibilidad del iframe y, en el caso de las páginas creadas de forma dinámica, cambiar el atributo src del iframe del marcador de posición. En el siguiente ejemplo, se muestra el código para cerrar una página creada de forma dinámica.

import Page from '../page.js';

const page = new Page({
  eventHandlers
: {
    back
: (e) => {
      e
.preventDefault();
      window
.top.history.back();
   
},
 
},
});
Página en la app creada como un iframe.
La navegación se realiza de iframe a iframe.

Diseño

El diseño de las páginas se realiza por página en su propio archivo CSS con alcance. Esto significa que, por lo general, los elementos se pueden abordar directamente por sus nombres, ya que no se pueden producir conflictos con otras páginas. Los estilos globales se agregan a cada página, por lo que no es necesario declarar los parámetros de configuración centrales, como font-family o box-sizing, de forma reiterada. Aquí también se definen los temas y las opciones de modo oscuro. En la siguiente lista, se muestran las reglas de la página Preferences que establece los diversos elementos del formulario en una cuadrícula.

main {
 
max-width: 600px;
}

form
{
 
display: grid;
 
grid-template-columns: auto 1fr;
 
grid-gap: 0.5rem;
 
margin-block-end: 1rem;
}

label
{
 
text-align: end;
 
grid-column: 1 / 2;
}

input
,
select
{
 
grid-column: 2 / 3;
}
Página de preferencias de la app de HIIT Time que muestra un formulario en diseño de cuadrícula.
Cada página es un mundo en sí mismo. La aplicación de diseño se realiza directamente con los nombres de los elementos.

Bloqueo de activación de pantalla

Durante un entrenamiento, la pantalla no debe apagarse. En los navegadores que lo admiten, HIIT Time lo realiza a través de un bloqueo de activación de la pantalla. En el siguiente fragmento, se muestra cómo hacerlo.

if ('wakeLock' in navigator) {
 
const requestWakeLock = async () => {
   
try {
      page
.shared.wakeLock = await navigator.wakeLock.request('screen');
      page
.shared.wakeLock.addEventListener('release', () => {
       
// Nothing.
     
});
   
} catch (err) {
      console
.error(`${err.name}, ${err.message}`);
   
}
 
};
 
// Request a screen wake lock…
  await requestWakeLock
();
 
// …and re-request it when the page becomes visible.
  document
.addEventListener('visibilitychange', async () => {
   
if (
      page
.shared.wakeLock !== null &&
      document
.visibilityState === 'visible'
   
) {
      await requestWakeLock
();
   
}
 
});
}

Prueba la aplicación

La aplicación HIIT Time está disponible en GitHub. Puedes jugar con la demostración en una ventana nueva o directamente en el iframe incorporado a continuación, que simula un dispositivo móvil.

Agradecimientos

Este artículo fue revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu.