Применение принципов программирования мини-приложений к примеру проекта

Томас Штайнер

Домен приложения

Чтобы продемонстрировать применение метода мини-приложений в веб-приложении, мне нужна была небольшая, но достаточно полноценная идея приложения. Высокоинтенсивные интервальные тренировки (HIIT) — это стратегия кардиотренировок, заключающаяся в чередовании коротких периодов интенсивных анаэробных упражнений с менее интенсивными периодами восстановления. Во многих HIIT-тренировках используются таймеры, например, в этой 30-минутной онлайн-сессии на YouTube-канале The Body Coach TV .

Онлайн-тренировка HIIT с зеленым таймером высокой интенсивности.
Период активности.
Онлайн-тренировка HIIT с красным таймером низкой интенсивности.
Период отдыха.

Пример приложения HIIT Time

В этой главе я создал базовый пример такого приложения-таймера для высокоинтенсивных интервальных тренировок (HIIT), метко названного "HIIT Time", которое позволяет пользователю определять и управлять различными таймерами, всегда состоящими из интервалов высокой и низкой интенсивности, а затем выбирать один из них для тренировки. Это адаптивное приложение с панелью навигации, панелью вкладок и тремя страницами:

  • Тренировка: Активная страница во время тренировки. Она позволяет пользователю выбрать один из таймеров и отображает три индикатора прогресса: количество подходов, активный период и период отдыха.
  • Таймеры: Управляет существующими таймерами и позволяет пользователю создавать новые.
  • Настройки: Позволяет включать и выключать звуковые эффекты и озвучку, а также выбирать язык и тему оформления.

Следующие скриншоты дают представление о приложении.

Пример приложения HIIT Time в портретном режиме.
Время высокоинтенсивной интервальной тренировки (HIIT) — вкладка «Тренировка» в портретном режиме.
Пример приложения HIIT Time в альбомном режиме.
Время высокоинтенсивной интервальной тренировки (HIIT) — вкладка «Тренировка» в альбомном режиме.
Пример приложения HIIT Time, демонстрирующий управление таймером.
Управление таймером для HIIT-тренировок.

Структура приложения

Как указано выше, приложение состоит из панели навигации, панели вкладок и трех страниц, расположенных в виде сетки. Панель навигации и панель вкладок реализованы в виде iframe с контейнером <div> между ними, в котором находятся еще три iframe для страниц, один из которых всегда виден и зависит от активного выбора во вкладке. Последний iframe, указывающий на about:blank служит для динамически создаваемых страниц внутри приложения, необходимых для изменения существующих таймеров или создания новых. Я называю этот шаблон многостраничным одностраничным приложением (MPSPA).

В инструментах разработчика Chrome отображается HTML-структура приложения, состоящая из шести iframe: одного для панели навигации, одного для панели вкладок и трех сгруппированных iframe для каждой страницы приложения, а также заключительного iframe-заполнителя для динамических страниц.
Приложение состоит из шести iframe-элементов.

Компонентная разметка lit-html

Структура каждой страницы реализована в виде шаблона lit-html , который динамически вычисляется во время выполнения. lit-html — это эффективная, выразительная и расширяемая библиотека шаблонов HTML для JavaScript. Используя её непосредственно в HTML-файлах, программирование строится на основе ориентированного на результат подхода. Программист пишет шаблон того, как будет выглядеть конечный результат, а lit-html динамически заполняет пробелы на основе его данных и подключает обработчики событий. Приложение использует сторонние пользовательские элементы, такие как <sl-progress-ring> от Shoelace или собственный пользовательский элемент <human-duration> . Поскольку пользовательские элементы имеют декларативный API (например, атрибут percentage в индикаторе прогресса), они хорошо работают вместе с lit-html, как видно из приведенного ниже примера.

<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>
Три кнопки и индикатор выполнения.
Отображаемый фрагмент страницы, соответствующий приведенной выше разметке.

Модель программирования

Каждая страница имеет соответствующий класс Page , который наполняет разметку lit-html жизнью, предоставляя реализации обработчиков событий и данные для каждой страницы. Этот класс также поддерживает методы жизненного цикла, такие как onShow() , onHide() , onLoad() и onUnload() . Страницы имеют доступ к хранилищу данных, которое служит для обмена, при необходимости, сохраняемым состоянием каждой страницы и глобальным состоянием. Все строки управляются централизованно, поэтому интернационализация встроена. Маршрутизация обрабатывается браузером практически бесплатно, поскольку все, что делает приложение, — это переключает видимость iframe и для динамически создаваемых страниц изменяет атрибут src iframe-заполнителя. Пример ниже показывает код для закрытия динамически создаваемой страницы.

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

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});
Страница приложения реализована в виде iframe.
Навигация осуществляется между iframe-элементами.

Стиль

Стилизация страниц происходит для каждой страницы в отдельном CSS-файле с ограниченной областью видимости. Это означает, что к элементам обычно можно обращаться напрямую по их именам, поскольку конфликты с другими страницами исключены. Глобальные стили добавляются к каждой странице, поэтому центральные настройки, такие как font-family или box-sizing не нужно объявлять повторно. Здесь же определяются темы и параметры темного режима. Приведенный ниже список показывает правила для страницы «Настройки», которая размещает различные элементы форм в виде сетки.

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;
}
На странице настроек приложения HIIT Time отображается форма в виде сетки.
Каждая страница — это отдельный мир. Оформление происходит непосредственно с помощью названий элементов.

Блокировка экрана при пробуждении

Во время тренировки экран не должен выключаться. В браузерах, поддерживающих эту функцию, HIIT Time реализует это с помощью блокировки экрана . Приведенный ниже фрагмент кода показывает, как это делается.

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();
    }
  });
}

Тестирование приложения

Приложение HIIT Time доступно на GitHub . Вы можете протестировать демо-версию в новом окне или прямо во встроенном iframe ниже, который имитирует мобильное устройство.

Благодарности

Данная статья была рецензирована Джо Медли , Кейси Баскесом , Милицей Михайловией , Аланом Кентом и Китом Гу.