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 olahraga kardiovaskular yang bergantian antara serangkaian periode singkat latihan anaerobik intens dengan periode pemulihan yang tidak terlalu intens. Banyak pelatihan HIIT menggunakan timer HIIT, misalnya, sesi online 30 menit ini dari channel YouTube The Body Coach TV.

Sesi pelatihan HIIT online dengan timer intensitas tinggi berwarna hijau.
Periode aktif.
Sesi online pelatihan HIIT dengan timer intensitas rendah 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 pelatihan. Ini adalah aplikasi responsif dengan menu navigasi, tab, dan tiga halaman:

  • Olahraga: Halaman yang aktif selama olahraga. Fitur 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 untuk mengalihkan efek suara dan output ucapan serta memilih bahasa dan tema.

Screenshot berikut memberikan kesan tentang aplikasi.

Aplikasi contoh HIIT Time dalam mode potret.
Tab "Olahraga" HIIT Time dalam mode potret.
Aplikasi contoh HIIT Time dalam mode lanskap.
Tab "Olahraga" Waktu HIIT dalam mode lanskap.
Aplikasi contoh HIIT Time yang menampilkan pengelolaan timer.
Pengelolaan timer HIIT Time.

Struktur aplikasi

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

Tampilan Chrome DevTools untuk struktur HTML aplikasi yang menunjukkan bahwa struktur tersebut terdiri dari enam iframe: satu untuk menu navigasi, satu untuk menu tab, 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 pada lit-html, library ini adalah library template HTML yang efisien, ekspresif, dan dapat diperluas untuk JavaScript. Dengan menggunakannya langsung di file HTML, model pemrograman mental langsung berorientasi pada output. Sebagai programmer, Anda menulis template tampilan output akhir, dan lit-html kemudian mengisi celah secara dinamis berdasarkan data Anda dan menghubungkan pemroses peristiwa. Aplikasi ini menggunakan elemen kustom pihak ketiga, seperti <sl-progress-ring>, Shoelace, atau elemen kustom yang diterapkan sendiri, yang disebut <human-duration>. Karena elemen kustom memiliki API deklaratif (misalnya, atribut percentage dari lingkaran progres), elemen kustom berfungsi dengan baik bersama lit-html, seperti yang dapat Anda lihat pada 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 sebuah lingkaran progres.
Bagian halaman yang dirender sesuai dengan markup di atas.

Model pemrograman

Setiap halaman memiliki class Page terkait yang mengisi markup lit-html dengan aktif dengan menyediakan 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 berbagi status per halaman dan status global yang dipertahankan secara opsional. Semua string dikelola secara terpusat, sehingga internasionalisasi sudah terintegrasi. Pemilihan rute ditangani oleh browser secara gratis, karena semua yang dilakukan aplikasi adalah mengalihkan visibilitas iframe dan untuk halaman yang dibuat secara dinamis, mengubah atribut src 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 yang diwujudkan sebagai iframe.
Navigasi terjadi dari iframe ke iframe.

Penataan gaya

Gaya visual halaman dilakukan per halaman dalam file CSS cakupannya sendiri. Artinya, elemen biasanya dapat langsung ditangani dengan nama elemennya, karena tidak akan terjadi konflik 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 tempat tema dan opsi mode gelap ditentukan. Listingan di bawah menunjukkan aturan untuk halaman Preferensi yang menata berbagai elemen formulir di 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 terjadi secara langsung dengan nama elemen.

Kunci layar saat aktif

Selama olahraga, layar tidak boleh mati. Di browser yang mendukungnya, HIIT Time mewujudkannya melalui kunci layar 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-coba 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.