Hôm nay, chúng tôi rất vui được giới thiệu các bản phát hành ổn định đầu tiên của hai thư viện phát triển web thế hệ mới: lit-html và LitElement.
lit-html là một thư viện nhỏ, nhanh và có tính biểu đạt dành cho việc tạo mẫu HTML. LitElement là một lớp cơ sở đơn giản để tạo Thành phần web bằng các mẫu lit-html.
Nếu đang theo dõi các dự án, bạn có thể biết nội dung của lit-html và LitElement (và bạn có thể chuyển đến cuối nếu muốn). Nếu bạn mới sử dụng lit-html và LitElement, hãy đọc tiếp để biết thông tin tổng quan.
lit-html: một thư viện nhỏ, nhanh chóng dành cho việc tạo mẫu HTML
lit-html là một thư viện JavaScript nhỏ (chỉ hơn 3k được đóng gói, rút gọn và nén) và thư viện JavaScript nhanh để tạo mẫu HTML. lit-html hoạt động tốt với các phương pháp lập trình chức năng, cho phép bạn thể hiện giao diện người dùng của ứng dụng theo cách khai báo, dưới dạng một hàm của trạng thái ứng dụng.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Quá trình kết xuất mẫu lit-html rất đơn giản:
render(myTemplate('Ada'), document.body);
Việc hiển thị lại mẫu chỉ cập nhật dữ liệu đã thay đổi:
render(myTemplate('Grace'), document.body);
lit-html hiệu quả, có tính biểu đạt và có thể mở rộng:
- Hiệu quả. lit-html cực nhanh. Khi dữ liệu thay đổi, lit-html không cần phải tạo ra bất kỳ sự khác biệt nào; thay vào đó, lit-html sẽ ghi nhớ vị trí bạn đã chèn biểu thức trong mẫu và chỉ cập nhật những phần động này.
- Biểu thức. lit-html cung cấp cho bạn toàn bộ sức mạnh của JavaScript, giao diện người dùng khai báo và các mẫu lập trình chức năng. Các biểu thức trong mẫu lit-html chỉ là JavaScript, vì vậy, bạn không cần phải tìm hiểu cú pháp tuỳ chỉnh và bạn có tất cả tính biểu đạt của ngôn ngữ theo ý mình. lit-html hỗ trợ nhiều loại giá trị vốn có: chuỗi, nút DOM, mảng và nhiều loại giá trị khác. Bản thân mẫu là các giá trị có thể tính toán, truyền đến và đi từ các hàm cũng như được lồng.
- Có thể mở rộng: lit-html cũng có thể tuỳ chỉnh và mở rộng – bộ công cụ xây dựng mẫu của riêng bạn. Các lệnh tuỳ chỉnh cách xử lý các giá trị, cho phép các giá trị không đồng bộ, tính năng lặp lại theo khoá hiệu quả, các ranh giới lỗi, v.v. lit-html bao gồm một số lệnh có sẵn và giúp bạn dễ dàng xác định lệnh của riêng mình.
Một số thư viện và dự án đã kết hợp lit-html. Bạn có thể tìm thấy danh sách một số thư viện này trong kho lưu trữ awesome-lit-html trên GitHub.
Nếu việc tạo mẫu là tất cả những gì bạn cần, bạn có thể bắt đầu ngay bây giờ bằng tài liệu về lit-html. Nếu bạn muốn xây dựng các thành phần để sử dụng trong ứng dụng hoặc chia sẻ với nhóm của mình, hãy đọc tiếp để tìm hiểu thêm.
LitElement: một lớp cơ sở Thành phần web nhẹ
LitElement là một lớp cơ sở nhẹ giúp việc xây dựng và chia sẻ Thành phần web dễ dàng hơn bao giờ hết.
LitElement sử dụng lit-html để kết xuất các thành phần và thêm các API để khai báo các thuộc tính và thuộc tính phản ứng. Các phần tử sẽ tự động cập nhật khi thuộc tính của chúng thay đổi. Chúng cập nhật nhanh chóng mà không có sự khác biệt.
Dưới đây là một thành phần LitElement đơn giản trong TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Chúng tôi cũng có một API JavaScript tuyệt vời).
Thao tác này sẽ tạo phần tử mà bạn có thể sử dụng ở bất kỳ nơi nào bạn sử dụng phần tử HTML thông thường:
<name-tag name="Ida"></name-tag>
Nếu đã sử dụng Thành phần web, bạn sẽ vui mừng khi biết rằng các thành phần này hiện đã được hỗ trợ sẵn trong Chrome, Safari và Firefox. Tính năng hỗ trợ Edge sẽ sớm ra mắt và các polyfill chỉ cần thiết cho các phiên bản trình duyệt cũ.
Nếu mới sử dụng Thành phần web, bạn nên dùng thử! Thành phần web cho phép bạn mở rộng HTML theo cách tương tác với các thư viện, công cụ và khung khác. Điều này khiến chúng trở thành công cụ lý tưởng để chia sẻ các thành phần trên giao diện người dùng trong một tổ chức lớn, phát hành các thành phần để sử dụng ở mọi nơi trên web hoặc xây dựng các hệ thống thiết kế giao diện người dùng như Material Design.
Bạn có thể sử dụng các phần tử tuỳ chỉnh ở bất cứ nơi nào bạn sử dụng HTML: trong tài liệu chính, trong CMS, trong Markdown hoặc trong các khung hiển thị được tạo bằng các khung như React và Vue. Bạn cũng có thể kết hợp và so khớp các thành phần LitElement với các Thành phần web khác, cho dù chúng được viết bằng công nghệ web vanilla hay được tạo với sự trợ giúp của các công cụ như Thành phần web Lightning của Salesforce, Stencil, SkateJS của Ionic hoặc thư viện Polymer.
Bắt đầu
Bạn muốn dùng thử lit-html và LitElement? Bạn nên bắt đầu với hướng dẫn về LitElement:
Nếu bạn muốn sử dụng chính lit-html hoặc tích hợp việc tạo mẫu lit-html vào một dự án khác, hãy xem tài liệu về lit-html:
Như thường lệ, hãy cho chúng tôi biết suy nghĩ của bạn. Bạn có thể liên hệ với chúng tôi trên Slack hoặc Twitter. Các dự án của chúng tôi là nguồn mở (tất nhiên rồi!) và bạn có thể báo cáo lỗi, yêu cầu tính năng tệp hoặc đề xuất cách cải thiện trên GitHub: