Áp dụng nguyên tắc lập trình ứng dụng nhỏ cho một dự án mẫu

Thomas Steiner

Miền ứng dụng

Để hiển thị cách lập trình của ứng dụng nhỏ áp dụng cho ứng dụng web, tôi cần một ý tưởng ứng dụng nhỏ nhưng hoàn chỉnh. Tập luyện ngắt quãng cường độ cao (HIIT) là một chiến lược tập luyện tim mạch gồm các khoảng thời gian ngắn tập luyện kị khí cường độ cao xen kẽ với những khoảng thời gian phục hồi chậm hơn. Nhiều chương trình đào tạo Cardio ở cường độ cao sử dụng đồng hồ bấm giờ HIIT, ví dụ: buổi đào tạo trực tuyến 30 phút này trên kênh YouTube The body Coach TV.

Buổi tập trực tuyến tập luyện Cardio ở cường độ cao với đồng hồ hẹn giờ cường độ cao màu xanh lục.
Thời gian hoạt động.
Buổi luyện tập trực tuyến Cardio ở cường độ thấp với đồng hồ hẹn giờ màu đỏ ở cường độ thấp.
Thời gian nghỉ ngơi.

Ứng dụng mẫu Thời gian tập luyện cường độ cao ngắt quãng

Trong chương này, tôi đã xây dựng một ví dụ cơ bản về ứng dụng hẹn giờ HIIT được đặt tên phù hợp "Giờ tập luyện cường độ cao ngắt quãng" cho phép người dùng xác định và quản lý các bộ đếm khác nhau, luôn bao gồm khoảng thời gian cường độ cao và thấp, rồi chọn một trong số đó cho buổi đào tạo. Đây là một ứng dụng thích ứng có một thanh điều hướng, một thanh thẻ và ba trang:

  • Bài tập thể dục: Trang hoạt động trong khi tập thể dục. Chế độ này cho phép người dùng chọn một trong các đồng hồ hẹn giờ và có ba vòng tiến trình: số lượng tập hợp, thời gian hoạt động và thời gian nghỉ.
  • Hẹn giờ: Quản lý đồng hồ hẹn giờ hiện có và cho phép người dùng tạo đồng hồ hẹn giờ mới.
  • Lựa chọn ưu tiên: Cho phép bật/tắt hiệu ứng âm thanh và văn bản đầu ra bằng lời nói, cũng như chọn ngôn ngữ và chủ đề.

Các ảnh chụp màn hình sau đây cho thấy giao diện của ứng dụng.

Ứng dụng mẫu Thời gian tập luyện cường độ cao ngắt quãng (HIIT Time) ở chế độ dọc.
Thời gian "Tập luyện" Cardio ở cường độ cao ở chế độ dọc.
Ứng dụng mẫu Thời gian tập luyện cường độ cao ngắt quãng (HIIT Time) ở chế độ ngang.
Thời gian "Tập luyện" Cardio ở cường độ cao ở chế độ ngang.
Ứng dụng mẫu Thời gian tập luyện cường độ cao ngắt quãng (HIIT) thể hiện cách quản lý đồng hồ hẹn giờ.
Quản lý đồng hồ hẹn giờ thời gian tập luyện cường độ cao ngắt quãng (HIIT).

Cấu trúc ứng dụng

Như đã trình bày ở trên, ứng dụng bao gồm một thanh điều hướng, một thanh tab và ba trang được sắp xếp theo bố cục lưới. Thanh điều hướng và thanh thẻ được nhận dạng dưới dạng iframe có vùng chứa <div> ở giữa chúng với 3 iframe khác cho các trang, trong đó trang đó luôn hiển thị và phụ thuộc vào việc lựa chọn đang hoạt động trong thanh tab. iframe cuối cùng trỏ đến about:blank sẽ phân phát cho các trang trong ứng dụng được tạo động. Các trang này cần thiết để sửa đổi trang hiện có hoặc tạo đồng hồ hẹn giờ mới. Tôi gọi mẫu này là ứng dụng một trang nhiều trang (MPSPA).

Chế độ xem cấu trúc HTML của ứng dụng trong Công cụ của Chrome cho thấy ứng dụng có 6 iframe: một cho thanh điều hướng, một cho thanh thẻ và ba iframe cho mỗi trang của ứng dụng, với một iframe phần giữ chỗ cuối cùng cho các trang động.
Ứng dụng bao gồm 6 iframe.

Đánh dấu lit-html dựa trên thành phần

Cấu trúc của mỗi trang được nhận dạng dưới dạng scaffold lit-html được đánh giá động trong thời gian chạy. Đối với nền tảng trên lit-html, đây là một thư viện tạo mẫu HTML hiệu quả, có tính biểu đạt và có thể mở rộng dành cho JavaScript. Bằng cách sử dụng trực tiếp trong tệp HTML, mô hình lập trình tư duy được trực tiếp hướng đến đầu ra. Là một lập trình viên, bạn sẽ viết một mẫu kết quả đầu ra cuối cùng, và lit-html sau đó sẽ tự động lấp đầy khoảng trống dựa trên dữ liệu của bạn và kết nối trình nghe sự kiện. Ứng dụng sử dụng các phần tử tuỳ chỉnh của bên thứ ba như <sl-progress-ring> của Dây giày hoặc một phần tử tuỳ chỉnh tự triển khai có tên là <human-duration>. Vì các phần tử tuỳ chỉnh có một API khai báo (ví dụ: thuộc tính percentage của vòng tiến trình), chúng hoạt động tốt cùng với lit-html, như bạn có thể thấy trong danh sách bên dưới.

<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>
Ba nút và một vòng tròn tiến trình.
Phần được hiển thị của trang tương ứng với đánh dấu ở trên.

Mô hình lập trình

Mỗi trang có một lớp Page tương ứng để lấp đầy sự sống động của mã đánh dấu lit-html bằng cách cung cấp các phương thức triển khai trình xử lý sự kiện và cung cấp dữ liệu cho mỗi trang. Lớp này cũng hỗ trợ các phương thức trong vòng đời như onShow(), onHide(), onLoad() và onUnload(). Các trang có quyền truy cập vào kho dữ liệu dùng để chia sẻ trạng thái chung duy trì (không bắt buộc) trên mỗi trang và trạng thái chung. Tất cả các chuỗi đều được quản lý tập trung, do đó đã có sẵn tính năng quốc tế hoá. Việc định tuyến được trình duyệt xử lý về cơ bản là miễn phí vì tất cả những gì ứng dụng thực hiện là chuyển đổi chế độ hiển thị iframe và đối với các trang được tạo một cách linh động, hãy thay đổi thuộc tính src của iframe cho phần giữ chỗ. Ví dụ bên dưới cho thấy mã để đóng một trang được tạo động.

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

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});
Trang trong ứng dụng được nhận dạng dưới dạng iframe.
Quá trình điều hướng diễn ra từ iframe đến iframe.

Định kiểu

Việc định kiểu của các trang diễn ra theo từng trang trong tệp CSS có phạm vi riêng. Điều này có nghĩa là các phần tử thường chỉ có thể được xử lý trực tiếp bằng tên phần tử, vì sẽ không có trường hợp xung đột nào với các trang khác. Các kiểu chung được thêm vào mỗi trang, vì vậy, các chế độ cài đặt ở giữa như font-family hoặc box-sizing không cần khai báo nhiều lần. Đây cũng là nơi xác định các giao diện và chế độ tối. Danh sách dưới đây hiển thị các quy tắc dành cho trang Lựa chọn ưu tiên, trong đó trình bày các thành phần biểu mẫu khác nhau trên lưới.

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;
}
Trang lựa chọn ưu tiên về ứng dụng HIIT Time hiển thị một biểu mẫu ở bố cục lưới.
Mỗi trang đều là thế giới riêng của nó. Việc định kiểu diễn ra trực tiếp với tên phần tử.

Khoá chế độ thức màn hình

Không được tắt màn hình trong khi bạn tập thể dục. Trên các trình duyệt hỗ trợ tính năng này, HIIT Time nhận ra điều này thông qua khoá chế độ thức màn hình. Đoạn mã dưới đây minh hoạ cách thực hiện.

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

Kiểm thử ứng dụng

Bạn có thể xem ứng dụng HIIT Time trên GitHub. Bạn có thể xem bản minh hoạ trong cửa sổ mới, hoặc ngay trong iframe nhúng bên dưới (mô phỏng một thiết bị di động).

Xác nhận

Bài viết này được đánh giá bởi Joe Medley thân mến! Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu.