Menerapkan prinsip-prinsip pemrograman aplikasi mini pada contoh project

Thomas Steiner

Domain aplikasi

Untuk menunjukkan cara pemrograman aplikasi mini yang diterapkan ke aplikasi web, saya memerlukan ide aplikasi yang kecil, tetapi cukup lengkap. High-intensity interval training (HIIT) adalah strategi latihan kardiovaskular dengan bergantian antara latihan anaerobik intensitas tinggi 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 pelatihan HIIT online dengan penghitung waktu intensitas tinggi berwarna hijau.
Periode aktif.
Sesi pelatihan HIIT online 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, yang selalu terdiri dari interval intensitas tinggi dan rendah, lalu memilih salah satunya untuk sesi latihan. Aplikasi ini adalah aplikasi responsif dengan navbar, tabbar, dan tiga halaman:

  • Latihan: Halaman aktif selama latihan. Aplikasi ini memungkinkan pengguna memilih salah satu timer dan menampilkan tiga ring progres: jumlah set, periode aktif, dan periode istirahat.
  • Timer: Mengelola timer yang ada dan memungkinkan pengguna membuat timer baru.
  • Preferensi: Memungkinkan Anda mengaktifkan/menonaktifkan efek suara dan output ucapan, serta memilih bahasa dan tema.

Screenshot berikut memberikan gambaran tentang aplikasi.

Aplikasi contoh HIIT Time dalam mode potret.
Tab "Latihan" HIIT Time dalam mode potret.
Contoh aplikasi HIIT Time dalam mode lanskap.
Tab "Latihan" HIIT Time dalam mode lanskap.
Contoh aplikasi HIIT Time yang menunjukkan pengelolaan timer.
Pengelolaan timer HIIT Time.

Struktur aplikasi

Seperti yang diuraikan di atas, aplikasi ini terdiri dari navbar, tabbar, dan tiga halaman, yang disusun dalam petak. Navbar dan tabbar diwujudkan sebagai iframe dengan penampung <div> di antaranya dengan tiga iframe lagi untuk halaman, yang salah satunya 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 timer baru. Saya menyebut pola ini sebagai aplikasi halaman tunggal multi-halaman (MPSPA).

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

Markup lit-html berbasis komponen

Struktur setiap halaman diwujudkan sebagai kerangka lit-html yang dievaluasi secara dinamis saat runtime. Sebagai latar belakang, lit-html adalah library pembuatan template HTML yang efisien, ekspresif, dan dapat di-extend untuk JavaScript. Dengan menggunakannya secara langsung dalam file HTML, model pemrograman mental berorientasi langsung pada output. Sebagai programmer, Anda menulis template seperti apa tampilan output akhirnya, dan lit-html kemudian mengisi celah 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 kustom memiliki API deklaratif (misalnya, atribut percentage pada ring progres), elemen tersebut berfungsi dengan 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 diagram 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 memberikan implementasi handler 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 berbagi status per halaman dan status global yang secara opsional dipertahankan. Semua string dikelola secara terpusat, sehingga internasionalisasi sudah tersedia. Perutean ditangani oleh browser secara gratis, karena yang dilakukan aplikasi hanyalah mengubah visibilitas iframe dan untuk halaman yang dibuat secara dinamis, mengubah atribut src dari iframe placeholder. Contoh di bawah menunjukkan 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 ditampilkan sebagai iframe.
Navigasi terjadi dari iframe ke iframe.

Gaya visual

Gaya visual halaman terjadi per halaman dalam file CSS yang dicakupnya sendiri. Artinya, elemen biasanya dapat langsung diakses berdasarkan nama elemennya, karena tidak ada bentrokan dengan halaman lain. Gaya global ditambahkan ke setiap halaman, sehingga setelan pusat seperti font-family atau box-sizing tidak perlu dideklarasikan berulang kali. Di sini juga opsi tema dan mode gelap ditentukan. Daftar di bawah menunjukkan aturan untuk halaman Preferensi yang mengatur berbagai elemen formulir dalam 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 yang menampilkan formulir dalam tata letak petak.
Setiap halaman adalah dunianya sendiri. Penataan gaya dilakukan langsung dengan nama elemen.

Penguncian layar saat aktif

Selama latihan, layar tidak boleh dinonaktifkan. Di browser yang mendukungnya, HIIT Time mewujudkan hal ini melalui kunci tetap aktif layar. 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, yang menyimulasikan perangkat seluler.

Ucapan terima kasih

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