Menerapkan prinsip-prinsip pemrograman aplikasi mini pada contoh project

Thomas Steiner

Domain aplikasi

Untuk menunjukkan cara mini pemrograman aplikasi yang diterapkan ke aplikasi web, saya membutuhkan ide aplikasi yang kecil tetapi cukup lengkap. Pelatihan interval intensitas tinggi (HIIT) adalah strategi latihan kardiovaskular yang bergantian melakukan serangkaian latihan anaerobik intens dalam waktu singkat dengan periode pemulihan yang kurang intens. Banyak pelatihan HIIT menggunakan timer HIIT, misalnya, sesi online 30 menit dari channel YouTube The Body Coach TV.

Sesi online pelatihan HIIT dengan timer intensitas tinggi berwarna hijau.
Periode aktif.
Sesi online pelatihan HIIT dengan timer intensitas rendah berwarna merah.
Periode istirahat.

Aplikasi contoh HIIT Time

Untuk bab ini, saya telah membuat contoh dasar aplikasi timer HIIT yang diberi nama "HIIT Time" yang memungkinkan pengguna menentukan dan mengelola berbagai timer, selalu terdiri dari interval intensitas tinggi dan rendah, lalu memilih salah satunya untuk sesi pelatihan. Aplikasi ini adalah aplikasi responsif dengan navbar, tabbar, dan tiga halaman:

  • Olahraga: Halaman aktif selama olahraga. Hal ini memungkinkan pengguna memilih salah satu timer dan menampilkan tiga lingkaran progres: jumlah set, periode aktif, dan periode istirahat.
  • Timer: Mengelola timer yang ada dan memungkinkan pengguna membuat timer baru.
  • Preferensi: Memungkinkan Anda untuk beralih efek suara dan output ucapan serta memilih bahasa dan tema.

Screenshot berikut memberikan kesan tentang aplikasi ini.

Aplikasi contoh HIIT Time dalam mode potret.
Tab "Olahraga" Waktu HIIT dalam mode potret.
Aplikasi contoh HIIT Time dalam mode lanskap.
Tab "Olahraga" Waktu HIIT dalam mode lanskap.
Aplikasi contoh HIIT Time yang menunjukkan pengelolaan timer.
Manajemen timer waktu HIIT.

Struktur aplikasi

Seperti yang diuraikan di atas, aplikasi ini terdiri dari navbar, tabbar, dan tiga halaman, yang disusun dalam petak. Navbar dan tabbar direalisasikan sebagai iframe dengan container <div> di antara keduanya dengan tiga iframe tambahan untuk halaman tersebut, dan satu di antaranya selalu terlihat dan bergantung pada pilihan aktif di tabbar. iframe akhir yang mengarah ke about:blank berfungsi untuk halaman dalam aplikasi yang dibuat secara dinamis, yang diperlukan untuk mengubah timer yang ada atau membuat yang baru. Saya menyebut pola ini sebagai aplikasi satu halaman (MPSPA) multi-halaman.

Tampilan Chrome DevTools dari struktur HTML aplikasi menunjukkan bahwa aplikasi tersebut terdiri dari enam iframe: satu untuk navbar, satu untuk tabbar, dan tiga yang dikelompokkan untuk setiap halaman aplikasi, dengan iframe placeholder akhir untuk halaman dinamis.
Aplikasi ini terdiri dari enam iframe.

Markup lit-html berbasis komponen

Struktur setiap halaman diwujudkan sebagai scaffold lit-html yang dievaluasi secara dinamis saat runtime. Untuk latar belakang di lit-html, ini adalah library pembuatan template HTML yang efisien, ekspresif, dan dapat diperluas untuk JavaScript. Dengan menggunakannya langsung di {i>file<i} HTML, model pemrograman mental berorientasi pada {i>output<i} secara langsung. Sebagai programmer, Anda dapat menulis template yang akan menampilkan hasil akhir, lalu lit-html akan mengisi kesenjangan secara dinamis berdasarkan data Anda dan menghubungkan pemroses peristiwa. Aplikasi menggunakan elemen kustom pihak ketiga seperti <sl-progress-ring> Shoelace atau elemen kustom yang diimplementasikan sendiri yang disebut <human-duration>. Karena elemen khusus memiliki API deklaratif (misalnya, atribut percentage dari lingkaran progres), elemen tersebut berfungsi baik bersama lit-html, seperti yang dapat Anda lihat dalam listingan di bawah.

<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>
Tiga tombol dan lingkaran progres.
Bagian halaman yang dirender sesuai dengan markup di atas.

Model pemrograman

Setiap halaman memiliki class Page yang sesuai, yang mengisi markup lit-html dengan data yang aktif dengan memberikan implementasi pengendali peristiwa dan menyediakan data untuk setiap halaman. Class ini juga mendukung metode siklus proses seperti onShow(), onHide(), onLoad(), dan onUnload(). Halaman memiliki akses ke penyimpanan data yang berfungsi untuk membagikan status global dan status per halaman yang dipertahankan secara opsional. Semua string dikelola secara terpusat, sehingga internasionalisasi sudah terintegrasi. Pada dasarnya, perutean ditangani oleh browser secara gratis, karena aplikasi hanya dapat mengalihkan visibilitas iframe dan untuk halaman yang dibuat secara dinamis, ubah atribut src iframe placeholder. Contoh di bawah ini menampilkan kode untuk menutup halaman yang dibuat secara dinamis.

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

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});
Halaman dalam aplikasi yang disadari sebagai iframe.
Navigasi terjadi dari iframe ke iframe.

Gaya visual

Penggayaan halaman terjadi per halaman dalam file CSS cakupannya sendiri. Ini berarti elemen biasanya dapat langsung ditangani dengan nama elemennya, karena bentrok dengan halaman lain tidak dapat terjadi. Gaya global ditambahkan ke setiap halaman, sehingga setelan pusat seperti font-family atau box-sizing tidak perlu dideklarasikan berulang kali. Di sinilah tema dan opsi mode gelap ditentukan. Daftar di bawah ini menunjukkan aturan untuk halaman Preferensi yang mengatur berbagai elemen formulir pada petak.

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;
}
Halaman preferensi aplikasi HIIT Time menampilkan formulir dalam tata letak petak.
Setiap halaman memiliki dunianya sendiri. Penataan gaya terjadi secara langsung dengan nama elemen.

Penguncian layar saat aktif

Selama latihan fisik, layar tidak boleh mati. Pada browser yang mendukungnya, HIIT Time menyadari hal ini melalui penguncian layar saat aktif. Cuplikan di bawah menunjukkan cara melakukannya.

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

Menguji aplikasi

Aplikasi HIIT Time tersedia di GitHub. Anda dapat mencoba demo di jendela baru, atau langsung di sematan iframe di bawah ini, yang menyimulasikan perangkat seluler.

Ucapan terima kasih

Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.