Lit HTML là gì?, Lit Web Components là gì?

Tổng quan ​

LIT là gì? LIT HTML là gì?, LIT Web Components là gì?

Lit là một thư viện web components mới được phát triển bởi Google. Nó giúp chúng ta xây dựng các web components một cách dễ dàng và nhanh chóng. Lit cung cấp một cách tiếp cận mới cho việc xây dựng web components, giúp chúng ta tối ưu hóa hiệu suất và tăng tốc độ tải trang.

Để cho dễ hiểu hơn cần phải biết về web components là gì. Cần hiểu nôm na rằng Web Components cho phép chúng ta tạo các thành phần tùy chỉnh có thể tái sử dụng trên các trang web khác nhau mà không cần phải lo lắng về xung đột với các thư viện hoặc framework khác. Mỗi web component bao gồm HTML, CSS và JavaScript được đóng gói trong một file duy nhất.

Khái niệm và cách sử dụng ​

Trong lập trình, việc tái sử dụng mã nguồn là một trong những nguyên tắc quan trọng giúp chúng ta tiết kiệm thời gian và công sức. Tuy nhiên điều này không dễ dàng với các trang web khác nhau vì mỗi trang web có cấu trúc và giao diện khác nhau. Để giải quyết vấn đề này, web components ra đời. Web Components hướng đến mục tiêu giải quyết các vấn đề như vậy, nó bao gồm ba công nghệ chính, có thể được sử dụng cùng nhau để tạo ra các thành phần tùy chỉnh đa năng với chức năng được đóng gói có thể được sử dụng lại ở bất kỳ đâu bạn muốn mà không sợ xung đột mã.

Tóm lại nếu phát triển theo huớng web components thì chúng ta sẽ có thể sử dụng chúng trong bất kỳ môi trường nào, framework nào, thậm chí không cần phải sử dụng framework nào cả.

Ba thành phần chính của web components bao gồm:

• Custom elements: định nghĩa các thành phần HTML tùy chỉnh. ví dụ <my-element></my-element>
• Shadow DOM: là tập hợp các API của Javascript cho phép chúng ta tạo ra một phần của DOM mà không bị ảnh hưởng bởi các thuộc tính bên ngoài.
• HTML Template: Dùng để định nghĩa một mẫu HTML từ đó render ra DOM.

Điều khác biệt của Lit ​

Thay vì thiết lập các thành phần web bằng cách sử dụng trực tiếp các API gốc, bạn có thể sử dụng Lit để tạo Lit Components.

Vậy câu hỏi đặt ra là tôi có thể dùng Lit để xây dựng trang web và giao diện người dùng giống như React không?

Câu trả lời là có. Lit được thiết kế để sử dụng cho những mục đích đó.

Hãy xem xét một ví dụ đơn giản sau giữa React và Lit:

my-component.tsx

import React from 'react';

export default function MyComponent() {
    const [revText, setRevText] = useState("Hello World");

    const reverseString = (str) => {
        return str.split("").reverse().join("");
    };

    const handleClick = (e: any) => {
        setRevText(reverseString(revText));
    };
    
    return (
        <div>
            <button type="button" onChange={handleClick}> Click me </button>
            <p style={{ color: 'red' }}>{revText}</p>
        </div>
    )
}

export default MyComponent;

Và đây là cách quý vị sẽ viết nó trong Lit:

my-component.ts

import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('my-component')
export class MyComponent extends LitElement {
    @property() revText?: string = "Hello World";

    static styles = css`
        p {
            color: red;
        }
    `;

    reverseString(str: string) {
        return str.split("").reverse().join("");
    }

    handleClick(e: any) {
        this.revText = this.reverseString(this.revText);
    }

    render() {
        return html`
            <div>
                <button @click=${this.handleClick}> Click me </button>
                <p>${this.revText}</p>
            </div>
        `;
    }
}

Trong React

• Tôi đã sử dụng useState để quản lý trạng thái cho giá trị của revText.
• Tôi đã sử dụng onChange để gọi hàm handleClick khi nút được click.
• Tôi đã sử dụng style để thay đổi màu chữ của revText.

Trong Lit

• Tôi đã sử dụng @property để quản lý trạng thái cho giá trị của revText.
• Tôi đã sử dụng @click để gọi hàm handleClick khi nút được click.
• Tôi đã sử dụng css để thay đổi màu chữ của revText.

Như quý vị có thể thấy, cả hai đều rất giống nhau. Điều này có nghĩa là quý vị có thể sử dụng Lit để xây dựng trang web và giao diện người dùng giống như React.

Cuối cùng hãy build component của chúng ta ra thành một file my-component.js và sử dụng nó trong dự án React. Xem tài liệu build ở đây https://lit.dev/docs/tools/production/.

Thêm lit vào dự án React ​

Để bắt đầu sử dụng Lit, quý vị cần cài đặt lit bằng cách chạy lệnh sau:

npm install lit

Trong dự án React, quý vị có thể sử dụng lit như sau:

import "./my-component.js";

function App() {
    return (
        <div>
            <my-component></my-component>
        </div>
    );
}

Tuyệt vời!, nó chạy hoàn hảo.

Kết luận ​

Khi phát triển ứng dụng bằng Lit quý vị có thể dễ dàng tích hợp các web components libraries khác hoặc chuyển sang thư viện khác mà không gặp vấn đề gì. Còn với các Framework khác như React, Angular, Vue thì không phải lúc nào cũng dễ dàng như vậy.

Có một cái hay nữa là tại hạ thấy cú pháp của Lit đẹp hơn React, rất giống với cú pháp của Angular. Điều này giúp chúng ta dễ dàng hơn trong việc viết mã và bảo trì mã.

Điều tại hạ muốn chia sẻ ở đây là quý vị NÊN thử, đó là một điều tuyệt vời. Hãy nghe theo lời khuyên của tại hạ, hãy thử Lit và cảm nhận nó. Mặc dù React, Angular, Vue... cũng rất tuyệt vời nhưng Lit có sự khác biệt riêng của nó.

Tài liệu của Lit cũng vô cùng ngắn gọn và dễ hiểu, quý vị có thể xem tại https://lit.dev/docs/. Các bài viết huớng dẫn cũng rất chi tiết và dễ hiểu, quý vị có thể xem tại https://lit.dev/learn/#filter=tutorial.

Một ngày chớm Thu lại Texas.