Hôm nay, chúng tôi rất vui mừng được thông báo về 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à biểu cảm để 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 đã theo dõi các dự án này, có thể bạn đã biết lit-html và LitElement là gì (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 để 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 bằng gzip) và 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 hàm, 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.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Bạn có thể kết xuất mẫu lit-html một cách đơn giản:
render(myTemplate('Ada'), document.body);
Việc kết xuất lại mẫu chỉ cập nhật dữ liệu đã thay đổi:
render(myTemplate('Grace'), document.body);
lit-html hiệu quả, biểu cảm và có thể mở rộng:
- Hiệu quả. lit-html rất nhanh. Khi dữ liệu thay đổi, lit-html không cần thực hiện bất kỳ thao tác so sánh nào; thay vào đó, thư viện này sẽ ghi nhớ vị trí bạn chèn biểu thức trong mẫu và chỉ cập nhật các phần động này.
- Thể hiện. 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. 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à có thể sử dụng mọi tính năng biểu đạt của ngôn ngữ. lit-html hỗ trợ nhiều loại giá trị gốc: chuỗi, nút DOM, mảng và nhiều loại khác. Bản thân mẫu là các giá trị có thể được tính toán, truyền đến và từ các hàm, cũng như lồng nhau.
- Mở rộng được: lit-html cũng có thể tuỳ chỉnh và mở rộng – bộ công cụ tạo mẫu của riêng bạn. Các lệnh tuỳ chỉnh cách xử lý giá trị, cho phép các giá trị không đồng bộ, lặp lại theo khoá hiệu quả, ranh giới lỗi và nhiều tính năng khác. lit-html bao gồm một số lệnh sẵn sàng sử dụng 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 đã tích 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 chỉ cần tạo mẫu, bạn có thể bắt đầu ngay bằng tài liệu về lit-html. Nếu bạn muốn tạo 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ở gọn nhẹ giúp bạn dễ dàng tạo và chia sẻ Thành phần web hơn bao giờ hết.
LitElement sử dụng lit-html để hiển thị các thành phần và thêm API để khai báo các 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. Đồng thời, các bản cập nhật này nhanh chóng mà không cần so sánh.
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 thuần tuý tuyệt vời.)
Thao tác này sẽ tạo một phần tử mà bạn có thể sử dụng ở bất cứ 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ẽ rất vui khi biết rằng các thành phần này hiện được hỗ trợ gốc trong Chrome, Safari và Firefox. Chúng tôi sẽ sớm hỗ trợ Edge và chỉ cần polyfill 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 thử dùng! 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 các thành phần này trở nên 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 ở bất cứ đâu 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 thành phần hiển thị được tạo bằng khung như React và Vue. Bạn cũng có thể kết hợp các thành phần LitElement với các Thành phần web khác, cho dù các thành phần đó được viết bằng công nghệ web cơ bản hay được tạo bằng các công cụ như Thành phần web Salesforce Lightning, Stencil của Ionic, SkateJS hoặc Thư viện Polymer.
Bắt đầu
Bạn muốn dùng thử lit-html và LitElement? Bạn có thể bắt đầu bằng hướng dẫn về LitElement:
Nếu bạn muốn sử dụng riêng lit-html hoặc tích hợp 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 ý kiến 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!) và bạn có thể báo cáo lỗi, gửi yêu cầu về tính năng hoặc đề xuất cải tiến trên GitHub: