Tổng quan về Craft.js (Phần 1)

Việc xây dựng giao diện người dùng (UI) phong phú và có khả năng tùy chỉnh là một thách thức mà nhiều ứng dụng web phải đối mặt. Các nhà phát triển cần giải pháp cung cấp tính linh hoạt, hiệu năng và khả năng mở rộng, đặc biệt cho các trình chỉnh sửa kéo-thả, trình tạo trang đích và công cụ WYSIWYG (What You See Is What You Get).

Đó là lúc Craft.js ra đời, một framework headless giúp xây dựng các UI phức tạp với React. Trong hướng dẫn này, chúng ta sẽ tìm hiểu về kiến trúc của Craft.js, quy trình làm việc, các thành phần tùy chỉnh, quản lý trạng thái và khả năng mở rộng.

1. Giới thiệu về Craft.js

Craft.js là một framework headless dựa trên React để xây dựng các trình chỉnh sửa UI mạnh mẽ, linh hoạt và có khả năng tùy chỉnh cao. Nó cung cấp tính năng kéo-thả, quản lý trạng thái, và khả năng kết hợp, giúp nhà phát triển kiểm soát hoàn toàn cách mà UI trông và hoạt động.

Khác với các trình chỉnh sửa WYSIWYG có giao diện sẵn, Craft.js không cung cấp UI hay phong cách mặc định, làm cho nó trở thành lựa chọn lý tưởng cho các dự án yêu cầu trải nghiệm được thiết kế riêng.

Craft.js được xây dựng để cung cấp các công cụ cần thiết cho việc quản lý cây thành phần động, theo dõi trạng thái thành phần, và xử lý các quy trình làm việc tương tác trong trình chỉnh sửa một cách hiệu quả.

2. Các tính năng chính của Craft.js

Trước khi đi sâu vào kiến trúc, hãy điểm qua các tính năng chính giúp Craft.js trở thành lựa chọn nổi bật:

Khả năng kết hợp và mô-đun hóa: Mỗi phần của UI có thể được định nghĩa như một thành phần React, làm cho nó mô-đun và có thể tái sử dụng.
Headless: Craft.js không có sẵn UI, cho phép nhà phát triển triển khai hệ thống thiết kế tùy chỉnh và phù hợp với nhu cầu cụ thể.
Quản lý trạng thái: Framework quản lý trạng thái của tất cả thành phần, theo dõi thuộc tính, bố cục và tương tác.
Hỗ trợ kéo-thả: Thành phần có thể di chuyển, sắp xếp lại và lồng ghép bằng các thao tác kéo-thả.
Chức năng Hoàn tác/Làm lại: Craft.js hỗ trợ sẵn hoàn tác/làm lại, theo dõi mọi thay đổi trạng thái trong trình chỉnh sửa.

3. Tổng quan về kiến trúc

Craft.js được xây dựng dựa trên hệ thống nút mạnh mẽ, đại diện cho các thành phần trong trình chỉnh sửa. Các yếu tố cốt lõi của kiến trúc Craft.js bao gồm:

Hệ thống Nút (Node System)

Hệ thống nút là nền tảng của Craft.js. Mỗi phần tử được hiển thị trong trình chỉnh sửa (dù là văn bản, hình ảnh, hay container) được đại diện bởi một nút. Các nút được cấu trúc trong một cây phân cấp, tương tự như cây DOM, trong đó mỗi nút có thể có nút cha và nút con.

Các thuộc tính chính của Nút:

Props: Nút mang các thuộc tính như kiểu dáng, nội dung, hoặc dữ liệu bố cục. Các thuộc tính này có thể được cập nhật động.
Loại Nút: Mỗi nút tương ứng với một thành phần React xác định cách nó được hiển thị.
Mối quan hệ Cha/Con: Nút có thể được lồng ghép để tạo ra các cấu trúc phức tạp, cho phép định nghĩa các mối quan hệ cha-con cho các bố cục như lưới, flexbox, v.v.

Các nút là thành phần xây dựng cơ bản của UI, và Craft.js theo dõi trạng thái của mỗi nút, cho phép cập nhật thời gian thực và tương tác của người dùng.

Quản lý trạng thái với Nút

Trạng thái của mỗi nút được quản lý tập trung bằng React Context API, trạng thái trung tâm này cho phép cập nhật hiệu quả, vì các thay đổi đối với một nút sẽ lan truyền qua toàn bộ trình chỉnh sửa mà không cần tái hiển thị thủ công. Trạng thái này là bất biến, giúp dễ dàng tích hợp tính năng hoàn tác/làm lại.

Craft.js sử dụng quản lý trạng thái kiểu Redux nội bộ, cung cấp một kho lưu trữ tập trung cho tất cả các thao tác trong trình chỉnh sửa. Điều này có nghĩa là mọi hành động của người dùng, từ kéo thả thành phần, cập nhật props, đến sắp xếp lại các yếu tố bố cục, đều được gửi dưới dạng hành động đến kho lưu trữ.

Công cụ Kết xuất

Craft.js có một công cụ kết xuất tùy chỉnh hiệu quả cao. Chỉ những nút được cập nhật hoặc sửa đổi mới được tái hiển thị, giúp trình chỉnh sửa hoạt động tốt ngay cả khi độ phức tạp của cây thành phần tăng lên.

Kết xuất Trì hoãn: Craft.js cũng thực hiện kết xuất trì hoãn các thành phần, cho phép hoãn việc hiển thị thành phần cho đến khi cần thiết, giảm thời gian tải ban đầu và cải thiện hiệu năng trên các bố cục phức tạp.

Hệ thống Plugin và Mở rộng

Hệ thống plugin trong Craft.js cho phép nhà phát triển mở rộng trình chỉnh sửa với các chức năng tùy chỉnh, chẳng hạn như thêm loại nút mới, tạo trình xử lý sự kiện mới, hoặc chèn các phần tử UI tùy chỉnh vào giao diện trình chỉnh sửa.

4. Quy trình làm việc của Craft.js

Craft.js cung cấp nhiều quy trình làm việc giúp xây dựng UI hiệu quả, bao gồm thiết kế thành phần, đồng bộ hóa trạng thái, và xử lý sự kiện.

Quy trình thiết kế thành phần

Khi xây dựng thành phần trong Craft.js, các bước chính gồm:

Định nghĩa Thành phần: Tạo một thành phần React đại diện cho một phần của UI, chẳng hạn như nút bấm, hộp văn bản, hoặc hình ảnh.
Gói thành phần: Sử dụng hook useNode để làm cho thành phần có thể chỉnh sửa trong trình chỉnh sửa Craft.js. Điều này cho phép thành phần có thể kéo-thả và trạng thái được quản lý.
Thêm logic tùy chỉnh: Định nghĩa cách thành phần sẽ hoạt động khi tương tác (ví dụ: cách các thuộc tính có thể được cập nhật động).

import React from "react";
import { useNode } from "@craftjs/core";

const Button = ({ text, backgroundColor }) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <button
      ref={(ref) => {
        connect(drag(ref))
      }}
      style={{ backgroundColor }}
    >
      {text}
    </button>
  );
};

Quy trình Đồng bộ hóa Trạng thái

Kết xuất ban đầu (Initial Render): Craft.js khởi tạo cây thành phần, hiển thị từng thành phần ở trạng thái mặc định của nó.
Cập nhật trạng thái (State Updates): Khi người dùng tương tác với một thành phần (như kéo nó đến vị trí mới hoặc thay đổi thuộc tính), Craft.js sẽ gửi các hành động (actions) đến hệ thống quản lý trạng thái nội bộ.
Tái hiển thị (Re-rendering): Chỉ những thành phần bị ảnh hưởng bởi thay đổi mới được tái hiển thị. Điều này đảm bảo hiệu suất tối ưu ngay cả khi trình chỉnh sửa trở nên phức tạp.

Quy trình Xử lý Sự kiện

Theo dõi sự kiện: Craft.js theo dõi tất cả các tương tác của người dùng dưới dạng sự kiện. Các sự kiện này bao gồm thao tác kéo-thả, cập nhật thuộc tính, và các tương tác UI khác.
Gửi sự kiện (Event Dispatch): Mỗi sự kiện được gửi đến hệ thống quản lý trạng thái của trình chỉnh sửa, sau đó cập nhật nút tương ứng.
Trình nghe sự kiện (Event Listeners): Các trình nghe sự kiện tùy chỉnh có thể được thêm vào các thành phần để xử lý các tương tác cụ thể, như chọn một thành phần hoặc cập nhật thuộc tính của nó.