Hội nghị Chrome Dev 2014 – Polymer – Nhà nước của liên minh

Polymer và Thành phần web là những chủ đề rất nóng gần đây và do hệ sinh thái này đang phát triển nhanh chóng, nên thường có thể các nhà phát triển khó nắm bắt được tất cả những thay đổi mới nhất.

Trong buổi nói chuyện tại Chrome Dev Summit, Matt McNulty, giám đốc kỹ thuật của nhóm Polymer, đã giải thích về Polymer là gì, đồng thời cũng vạch ra lộ trình phát triển Polymer 1.0.

Polymer là gì?

Trước tiên, chính xác thì Polymer là gì?

Polymer là một thư viện giúp bạn xây dựng các thành phần và ứng dụng từ các thành phần web. Thành phần web là một bộ tiêu chuẩn mới tiên tiến cho phép nhà phát triển mở rộng từ vựng HTML bằng các phần tử tuỳ chỉnh của riêng họ.

Polymer giúp nhà phát triển xây dựng ứng dụng nhanh hơn

Do Thành phần web được thiết kế mới cho trình duyệt, điều đó có nghĩa là chúng rất mạnh mẽ nhưng cũng ở mức rất thấp và việc xử lý chúng yêu cầu một chút mã hợp lý.

Polymer làm cho các thành phần web trở nên thú vị hơn

Polymer giúp bạn dễ dàng sử dụng các Thành phần web bằng cách "thêm" cú pháp. Công cụ này làm giảm số lượng mã nguyên mẫu bạn cần viết và thêm kiểu khai báo để việc tạo Thành phần web cũng dễ dàng như viết HTML.

Thử nghiệm polymer

Polymer bắt đầu thử nghiệm xem liệu chúng tôi có thể đáp ứng các tiêu chuẩn của Thành phần web bằng polymer và nhận phản hồi từ nhà phát triển trước khi các công nghệ này xuất hiện trên tất cả trình duyệt hay không. Khi ngày càng nhiều nhà phát triển bắt đầu sử dụng Polymer, nó đã thay đổi từ một thư viện polyfill thành một thư viện thực tế có đầy đủ các tính năng cải thiện hiệu suất (liên kết dữ liệu, trình theo dõi thay đổi thuộc tính, tự động tìm nút, v.v.). Nhưng tất cả thử nghiệm đều có kết quả, vậy chúng tôi đã làm như thế nào?

Cần cải thiện thẻ báo cáo polymer

Mặc dù nhiều nhà phát triển cho biết họ thích tính biểu đạt và tăng năng suất khi làm việc với các Thành phần web trong Polymer, nhưng họ cũng bày tỏ mối lo ngại về hiệu suất và tính phức tạp tổng thể.

Video nêu bật sức căng tự nhiên mà Polymer đã có được từ trước đến nay: vừa là một thử nghiệm nhằm thúc đẩy nền tảng web phát triển, vừa tạo ra thứ gì đó có thể sản xuất để các nhà phát triển có thể tin tưởng.

Những thay đổi sắp tới

Đội ngũ Polymer đã xem xét kỹ lưỡng mọi tính năng của thư viện này với mục tiêu tạo ra một phiên bản tinh gọn hơn, sẵn sàng phát hành công khai mà các nhà phát triển có thể tự tin sử dụng.

Lớp

Polymer đã được tái cấu trúc thành một loạt lớp. Các tính năng cốt lõi hoạt động nhanh và tinh gọn, trong khi các tính năng nâng cao hơn sẽ được chọn tham gia. Đối với phần lớn trường hợp sử dụng, các tính năng cốt lõi phải đáp ứng được nhu cầu của nhà phát triển.

Polymer đã được tái cấu trúc thành nhiều lớp

Đơn giản hoá liên kết dữ liệu

Hệ thống liên kết dữ liệu của Polymer cũng được tối ưu hoá đáng kể về hiệu suất. Theo phương pháp phân lớp, liên kết hai chiều hiện được chọn sử dụng, trong đó mặc định là liên kết một chiều. Ngoài ra, các loại thuộc tính đã xuất bản được trình bày rõ ràng và thay đổi về thuộc tính giờ đây sẽ kích hoạt một sự kiện để giúp các phần tử từ thư viện khác giao tiếp dễ dàng hơn.

Đơn giản hoá việc liên kết dữ liệu

DOM bóng tinh gọn

Đoạn mã polyfill Shadow DOM là một kỳ công kỹ thuật đáng kinh ngạc. Phiên bản này được thiết kế để tuân thủ toàn diện và tuân thủ các thông số kỹ thuật. Đây là yếu tố quan trọng để kiểm thử kỹ lưỡng nền tảng gốc, nhưng rất tiếc là nó gây ra một số nút thắt cổ chai về hiệu suất cho các tính năng mà Polymer không sử dụng.

Bản phát hành tiếp theo của Polymer sẽ có một cách tiếp cận khác, sử dụng lớp đệm kiểu miếng đệm chỉ chứa polymer mà Polymer cần.

Shim shadowdom nhanh hơn nhiều

Lớp polyfill hiện có sẽ tiếp tục hoạt động đối với các thành phần web chung, không phải bằng Polymer.

Chuyển sang webThành phần.org

Đối với vải polyfill, các loại vật liệu này cũng đang được xây dựng khi cần có một ngôi nhà mới. Hiện tại, nhiều nhà phát triển vẫn chưa hiểu rõ về mối quan hệ giữa Polymer và Thành phần web. Một số người cho rằng bạn phải dùng tất cả polymer để sử dụng Thành phần web, nhưng trong khi thực tế, bạn chỉ cần các polyfill.

Để làm rõ hơn sự khác biệt này, các polyfill sẽ được chuyển đến webThành phần.org và chúng hiện đã được đổi tên thành webcomponents.js.

Các tệp polyfill đang chuyển sang webThành phần.org

Mục đích của việc di chuyển này là giúp các tác giả thư viện khác tận dụng được các đoạn mã polyfill mà không gây nhầm lẫn. Nhóm Polymer sẽ tiếp tục đóng góp cho các polyfill, nhưng hy vọng rằng thay đổi này sẽ biến chúng thành một tài nguyên chung cho cộng đồng.

Kết quả

Vậy tất cả những thay đổi này mang lại kết quả gì?

Tốc độ

Trên Chrome, Polymer hiện nhanh hơn gấp 5 lầntăng tốc gấp 8 lần trên Safari.

Polymer nay nhanh hơn gấp 8 lần trong Safari

Kích thước tệp

Kích thước tệp cũng được giảm 87%, từ 123KB xuống còn 15KB (6KB gzip).

Dung lượng polymer hiện nhỏ hơn 87%

Lộ trình

Sẽ có một số thay đổi phá vỡ API trong bản phát hành tiếp theo, được biểu thị bằng số phiên bản mới (0.8) nhưng nhóm muốn làm rõ rằng đây không phải là một bản viết lại. Việc di chuyển dự án hiện tại của bạn từ Polymer 0,5 sang 0,8 sẽ khá đơn giản.

Đội ngũ Polymer cũng đã vạch ra một lộ trình để giúp nhà phát triển nắm rõ hơn về các bản phát hành sắp tới.

Lộ trình polymer, beta trong quý 1, 1.0 trong quý 2

Bản xem trước 0.8 hiện có sẵn dưới dạng một nhánh trên GitHub (mặc dù nó vẫn đang được phát triển rất tích cực và thiếu tài liệu). Phiên bản beta 0.9 được lên kế hoạch cho quý 1 năm 2015, với 1.0 sẽ diễn ra trong quý 2.

Thử nghiệm đã kết thúc

Với tất cả những thay đổi gần đây trong Polymer, đội ngũ xây dựng nền tảng này đang đặt nền tảng để Thành phần web trở thành một phần không thể thiếu trong ngăn xếp của mọi nhà phát triển. Nếu bạn mới sử dụng Thành phần web, bây giờ chính là thời điểm tuyệt vời để xem qua và làm quen với các công nghệ biến đổi này. Nếu bạn đã áp dụng với các thành phần (và Polymer), tương lai của bạn sẽ thật sự tươi sáng. Hãy theo dõi Blog của Polymer để biết tất cả thông tin cập nhật mới nhất và đăng ký nhận danh sách gửi thư của Polymer nếu bạn có thắc mắc hoặc nhận xét. Chúc bạn hack vui vẻ!