Домен приложения
Чтобы показать способ программирования мини-приложений применительно к веб-приложению, мне нужна была небольшая, но достаточно полная идея приложения. Высокоинтенсивная интервальная тренировка (ВИИТ) — это стратегия сердечно-сосудистых упражнений, состоящая из чередующихся подходов коротких периодов интенсивных анаэробных упражнений с менее интенсивными периодами восстановления. Во многих тренировках HIIT используются таймеры HIIT, например, в этом 30-минутном онлайн-занятии с YouTube-канала The Body Coach TV .
Пример приложения HIIT Time
Для этой главы я создал базовый пример такого приложения-таймера HIIT, удачно названного «Время HIIT», которое позволяет пользователю определять и управлять различными таймерами, всегда состоящими из интервалов высокой и низкой интенсивности, а затем выбирать один из них для тренировочная сессия. Это адаптивное приложение с панелью навигации, панелью вкладок и тремя страницами:
- Тренировка: активная страница во время тренировки. Он позволяет пользователю выбрать один из таймеров и имеет три кольца прогресса: количество подходов, активный период и период отдыха.
- Таймеры: управляет существующими таймерами и позволяет пользователю создавать новые.
- Настройки: позволяет переключать звуковые эффекты и речевой вывод, а также выбирать язык и тему.
Следующие снимки экрана дают представление о приложении.
Структура приложения
Как указано выше, приложение состоит из панели навигации, панели вкладок и трех страниц, расположенных в виде сетки. Панель навигации и панель вкладок реализованы как фреймы iframe с контейнером <div>
между ними и еще тремя фреймами iframe для страниц, один из которых всегда виден и зависит от активного выбора на панели вкладок. Последний iframe, указывающий на about:blank
служит для динамически создаваемых страниц внутри приложения, которые необходимы для изменения существующих таймеров или создания новых. Я называю этот шаблон «многостраничное одностраничное приложение» (MPSPA).
Разметка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();
},
},
});
Стиль
Стилизация страниц происходит для каждой страницы в отдельном 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 реализует это с помощью блокировки пробуждения экрана . В приведенном ниже фрагменте показано, как это делается.
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 ниже, которая имитирует мобильное устройство.
Благодарности
Рецензии на эту статью написали Джо Медли , Кейси Баскис , Милица Михайлия , Алан Кент и Кейт Гу.