Năm trước, nhóm Polymer đã dành nhiều thời gian hướng dẫn các nhà phát triển về 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, với phần lớn là các yếu tố Lõi và Giấy của Polymer cũng như các thành phần Gạch do nhóm tại Mozilla tạo ra.
Khi các nhà phát triển trở nên quen 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, điều này sẽ mở ra một số câu hỏi:
- Bạn nên 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 các trạng thái khác nhau như thế nào?
- Bạn có thể áp dụng những chiến lược nào để cải thiện hiệu suất?
- Và bạn nên cung cấp trải nghiệm ngoại tuyến như thế nào?
Đố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 danh bạ nhỏ và phân tích quy trình tạo ra ứng dụng này. Đây là những gì tôi nghĩ ra:
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 Thành phần web. Các phần tử cốt lõi* và giấy* của polymer giúp bạn dễ dàng bắt đầu với các phần tử nhỏ, chẳng hạn như paper-Toolbar và paper-icon-button.
Và thông qua sức mạnh của bố cục, hãy kết hợp chúng với số lượng phần tử bất kỳ để tạo ra một giàn giáo ứng dụng.
Sau khi đã có sẵn một bộ scaffold chung, bạn có thể áp dụng 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 mình. Ưu điểm của việc thực hiện việc này bằng các thành phần là bạn có thể tạo ra những trải nghiệm rất khác biệt trong khi vẫn tận dụng được cùng một bản dựng ứng dụng nguyên gốc. Sau khi có sẵn bộ giàn giáo, bạn có thể chuyển sang suy nghĩ về nội dung.
Một phần tử đặc biệt phù hợp để xử lý nhiều nội dung là core-list.
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, thanh này sẽ đánh dấu một phiên bản 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 các phần khác nhau của ứng dụng được thiết kế và triển khai, nhiệm vụ tiếp theo là tìm ra 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, core-animated-pages cung cấp một hệ thống ảnh động có thể cắm vào mà bạn có thể dùng để chuyển đổi giữa các trạng thái trong ứng dụng.
Tuy nhiên, ảnh động mới chỉ là một nửa câu đố, ứng dụng cần kết hợp các ảnh động đó với bộ định tuyến để quản lý các URL của nó đúng cách.
Trong thế giới định tuyến Thành phần web, có hai 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ể có hiệu lực 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 một tuyến trùng khớp rồi 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 làm một số việc sau khi một tuyến đường trùng khớp và trước khi phần tiếp theo chuyển sang.
Mặt khác, một bộ định tuyến khai báo (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 thành một phần tử duy nhất, do đó, việc quản lý cả hai phần tử này sẽ trở nên hợp lý hơn.
Nếu muốn kiểm soát chi tiết hơn, bạn có thể xem thư viện như định tuyến nhiều hơn, có thể kết hợp với core-animated-pages bằng cách sử dụng liên kết dữ liệu và có thể mang lại cho bạn những tính năng tốt nhất của cả hai mặt.
Hiệu suất
Khi ứng dụng của bạn đang hình thành, bạn phải theo dõi chặt chẽ điểm tắc nghẽn hiệu suất, đặc biệt là bất kỳ điểm tắc nghẽ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ó điều kiện các đoạn mã của Thành phần web sẽ giúp bạn dễ dàng đạt được hiệu suất cao.
Không có lý do gì để bạn 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ữ webcomponent.js mới, các polyfill cũng được chia nhỏ thành các tệp độc lập. Điều 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 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ả 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.
Việc lưu hoá sẽ nối các lệnh nhập của bạn thành một gói, làm giảm đáng kể số lượng yêu cầu HTTP mà ứng dụng 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 cũng không giải quyết được tình huống khó xử của người dùng 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ì đó thực sự không phải là ứng dụng di động. Hiện nay, bạn có thể sử dụng bộ nhớ đệm của ứng dụng được điều chỉnh rất 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 cải thiện trải nghiệm phát triển ngoại tuyến cho bạn.
Jake Archibald gần đây đã xuất bản một sách dạy nấu ăn tuyệt vời về các mẫu nhân viên dịch vụ nhưng tôi sẽ bắt đầu nhanh để giúp bạn bắt đầu:
Quá trình cài đặt trình chạy dịch vụ không còn dễ dàng. Tạo một tệp worker.js và đăng ký tệp này khi ứng dụng của bạn khởi động.
Bạn cần phải xác định vị trí của worker.js trong thư mục gốc của ứng dụng. Điều này cho phép ứng dụng chặn các yêu cầu từ mọi đường dẫn trong ứng dụng.
Trong trình xử lý cài đặt của worker, 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.
Hãy tiếp tục!
Thành phần web là một phần bổ sung quan trọng cho nền tảng web và vẫn còn trong giai đoạn sơ khai. Khi các trình duyệt này truy cập vào nhiều trình duyệt hơn, cộng đồng các nhà phát triển có trách nhiệm tìm ra các 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à điểm khởi đầu, nhưng vẫn còn nhiều điều cần tìm hiểu. Tiến tới xây dựng các ứng dụng tốt hơn!