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