Năm trước, đội ngũ Polymer đã dành rất nhiều thời gian hướng dẫn các nhà phát triển cách tạo các thành phần của riêng họ. Điều này dẫn đến một hệ sinh thái phát triển nhanh chóng, chủ yếu là các thành phần Lõi và Giấy của Polymer, cũng như các thành phần Gạch do đội ngũ tại Mozilla tạo ra.
Khi đã quen thuộc hơn với việc tạo các thành phần của riêng họ và bắt đầu nghĩ đến việc xây dựng ứng dụng, nhà phát triển sẽ đặt ra một số câu hỏi:
- Bạn nên định cấu trúc giao diện người dùng của ứng dụng như thế nào?
- Bạn chuyển đổi qua nhiều trạng thái như thế nào?
- Đâu là những chiến lược giúp cải thiện hiệu suất?
- Và làm cách nào để cung cấp trải nghiệm ngoại tuyến?
Đối với Hội nghị Nhà phát triển Chrome, tôi đã cố gắng trả lời những câu hỏi này bằng cách xây dựng một ứng dụng liên hệ nhỏ và phân tích quá trình xây dựng ứng dụng đó. Đây là ý tưởng của tôi:
Cấu trúc
Việc chia nhỏ ứng dụng thành các phần mô-đun có thể kết hợp và sử dụng lại là đối tượng thuê chính của Cấu phần web. Các phần tử lõi-* và giấy* của Polymer giúp bạn dễ dàng bắt đầu với các thành phần nhỏ, như core-thanh công cụ và paper-icon-button...
...và thông qua sức mạnh của cấu trúc, hãy kết hợp chúng với số lượng phần tử bất kỳ để tạo thành một khung ứng dụng.
Sau khi đã chuẩn bị sẵn một scaffold chung, bạn có thể áp dụng các kiểu CSS của riêng mình để biến nó thành trải nghiệm độc đáo cho thương hiệu của bạn. Ưu điểm của việc sử dụng các thành phần là giúp bạn tạo ra những trải nghiệm rất khác biệt trong khi vẫn tận dụng cùng một dữ liệu gốc để xây dựng ứng dụng. Sau khi chuẩn bị sẵn Scaffold, bạn có thể chuyển sang suy nghĩ về nội dung.
core-list là một thành phần đặc biệt phù hợp để xử lý nhiều nội dung.
core-list có thể được kết nối với một nguồn dữ liệu (về cơ bản là một mảng đối tượng) và đối với mỗi mục trong mảng, lớp này sẽ đóng dấu một thực thể mẫu. Trong mẫu này, bạn có thể tận dụng sức mạnh của hệ thống liên kết dữ liệu của Polymer để kết nối nội dung của mình một cách nhanh chóng.
Kiểu chuyển cảnh
Với nhiều phần trong ứng dụng được thiết kế và triển khai, nhiệm vụ tiếp theo là tìm cách điều hướng thực sự giữa các phần đó.
Mặc dù vẫn là phần tử thử nghiệm, nhưng core-animated-pages cung cấp một hệ thống ảnh động có thể cắm được dùng để chuyển đổi giữa các trạng thái trong ứng dụng.
Nhưng ảnh động mới chỉ là một nửa câu đố, một ứng dụng cần kết hợp các ảnh động đó với bộ định tuyến để quản lý chính xác các URL của bộ định tuyến.
Trong thế giới định tuyến Thành phần web, có 2 phiên bản: bắt buộc và khai báo. Việc kết hợp core-animated-pages với một trong hai phương pháp có thể hợp lệ tuỳ thuộc vào nhu cầu của dự án.
Bộ định tuyến bắt buộc (chẳng hạn như Flatiron's Director) có thể theo dõi tuyến phù hợp và sau đó hướng dẫn core-animated-pages cập nhật mục đã chọn.
Điều này có thể hữu ích nếu bạn cần thực hiện một số công việc sau khi một tuyến đường trùng khớp và trước khi đoạn tiếp theo đã chuyển đổi.
Mặt khác, bộ định tuyến khai báo (chẳng hạn như bộ định tuyến ứng dụng) thực sự có thể kết hợp việc định tuyến và core-animated-pages vào một phần tử duy nhất, nhờ đó, việc quản lý cả hai phần tử này sẽ đơn giản hơn.
Nếu muốn kiểm soát chi tiết hơn, bạn có thể xem một thư viện như định tuyến nhiều hơn, có thể kết hợp với core-animated-pages bằng liên kết dữ liệu và có thể mang lại cho bạn những gì tốt nhất của cả hai.
Hiệu suất
Khi ứng dụng của bạn đang trong quá trình hình thành, bạn phải chú ý đến nút thắt cổ chai của hiệu suất, đặc biệt là bất kỳ vấn đề nào liên quan đến mạng vì đây thường là phần chậm nhất của ứng dụng web dành cho thiết bị di động.
Việc tải các đoạn mã polyfill trong Thành phần web sẽ dễ dàng đạt được hiệu suất cao.
Không có lý do gì phải chịu toàn bộ chi phí đó nếu nền tảng đã có dịch vụ hỗ trợ đầy đủ! Trong mỗi bản phát hành của kho lưu trữ web tools.js mới, các polyfill cũng được chia nhỏ thành các tệp độc lập. Việc này rất hữu ích nếu bạn muốn tải có điều kiện một tập hợp con các polyfill.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src=“bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
Việc chạy tất cả các lệnh Nhập HTML thông qua một công cụ như Vulcanize cũng mang lại những lợi ích đáng kể về mạng.
Quá trình lưu hoá sẽ nối các hoạt động nhập của bạn thành một gói duy nhất, làm giảm đáng kể số lượng yêu cầu HTTP mà ứng dụng của bạn thực hiện.
Khi không có mạng
Tuy nhiên, việc chỉ xây dựng một ứng dụng hiệu suất cao không giải quyết được tình huống khó khăn của người dùng khi có ít hoặc không có kết nối. Nói cách khác, nếu ứng dụng của bạn không hoạt động khi không có mạng thì đó không thực sự là ứng dụng di động. Hiện nay, bạn có thể sử dụng bộ nhớ đệm ứng dụng được điều chỉnh nhiều để lưu tài nguyên ở chế độ ngoại tuyến. Tuy nhiên, hướng tới tương lai, service worker sẽ sớm làm cho trải nghiệm phát triển ngoại tuyến trở nên tốt đẹp hơn.
Jake Archibald gần đây đã xuất bản một cuốn sổ tay tuyệt vời về các mẫu của nhân viên dịch vụ nhưng tôi sẽ giới thiệu nhanh cho bạn để giúp bạn bắt đầu:
Bạn có thể dễ dàng cài đặt trình chạy dịch vụ. Tạo tệp worker.js và đăng ký tệp đó khi ứng dụng khởi động.
Quan trọng là bạn phải xác định vị trí của worker.js ở thư mục gốc của ứng dụng, điều này cho phép nó chặn các yêu cầu từ mọi đường dẫn trong ứng dụng của bạn.
Trong trình xử lý cài đặt của trình chạy, tôi lưu một lượng tài nguyên vào bộ nhớ đệm (bao gồm cả dữ liệu hỗ trợ ứng dụng).
Điều này cho phép ứng dụng của tôi cung cấp ít nhất một trải nghiệm dự phòng cho người dùng nếu họ đang truy cập ngoại tuyến.
Tiếp theo!
Thành phần web là một sự bổ sung lớn cho nền tảng web và vẫn còn ở giai đoạn phát triển. Khi họ truy cập vào nhiều trình duyệt hơn, cộng đồng nhà phát triển sẽ phải tìm ra phương pháp hay nhất để xây dựng cấu trúc cho ứng dụng của mình. Các giải pháp ở trên là bước khởi đầu, nhưng vẫn còn nhiều điều cần tìm hiểu. Hướng tới việc xây dựng ứng dụng tốt hơn!