Auto-Animate đã phát hành adapter chính thức đầu tiên cho Marko 6, cho phép các nhà phát triển tạo hiệu ứng hoạt họa cho các thay đổi trong danh sách chỉ với một thẻ duy nhất và không cần thêm JavaScript. Bước đi này rất quan trọng vì nó loại bỏ các đoạn mã lặp lại (boilerplate) vốn từ lâu đã khiến việc tạo chuyển động trong các dự án Marko có cảm giác như một nỗ lực đặc biệt.

Mô hình kết xuất (rendering) của Marko bỏ qua bước “hydration” ở phía client mà các framework như React hay Vue thường dựa vào. Sau khi máy chủ gửi HTML, Marko chỉ đơn giản là tiếp tục xử lý markup đó ngay tại chỗ, giúp giữ cho các bundle cực kỳ nhỏ gọn—khoảng 7 KB khi nén gzipped cho runtime. Tuy nhiên, chính lối tắt này lại ngăn cản nhiều thư viện hoạt họa vốn thường đợi quá trình kết xuất ở phía client trước khi có thể gắn các hiệu ứng. Nếu không có một hook vào DOM đã có sẵn, các nhà phát triển theo truyền thống đã phải viết mã tùy chỉnh cho mỗi lần cập nhật danh sách.

Adapter mới này vượt qua giới hạn đó bằng cách hook vào vòng đời onMount của Marko. Khi một component được mount, adapter sẽ tạo một MutationObserver để theo dõi các thay đổi ở node cha của danh sách. Khi các mục được thêm vào, lọc hoặc xáo trộn, observer sẽ kích hoạt công cụ chuyển cảnh (transition engine) tích hợp sẵn của auto-animate, mang lại các hiệu ứng xuất hiện, biến mất và sắp xếp lại mượt mà một cách tự động. Tất cả những điều này diễn ra đằng sau một thẻ <auto-animate> duy nhất.

Thẻ này chấp nhận ba thuộc tính:

  • parent – một biến thẻ Marko trỏ đến container của danh sách.
  • options – một đối tượng cho thời lượng (duration), easing và các cài đặt thời gian khác.
  • enabled – một biến boolean có tính phản ứng (reactive) có thể bật hoặc tắt hoạt họa trong thời gian chạy (runtime).

Vì enabled có tính phản ứng, các nhà phát triển có thể liên kết nó với bất kỳ giá trị state nào và chuyển đổi chuyển động mà không cần chạm vào DOM hay viết lại các trình xử lý (handlers). Do đó, adapter này cung cấp nhiều sự linh hoạt hơn một directive tĩnh trong khi vẫn hoạt động một cách âm thầm đối với phần còn lại của cây component.

Đối với các nhóm sử dụng Vite, gói này có thể gây ra cảnh báo “unresolved import”. Việc thêm nội dung sau vào vite.config.ts sẽ giải quyết vấn đề này:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

Điều này báo cho Vite biết hãy để plugin của Marko xử lý việc import thay vì cố gắng pre-bundle nó.

Lợi ích thực tế đến ngay lập tức. Một danh sách Marko điển hình mà trước đây yêu cầu một hook useEffect, việc chuyển đổi class thủ công và một vài dòng mã hoạt họa thì giờ đây có thể được viết như sau:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

Không thêm JavaScript, không tăng trọng lượng bundle, và vẫn giữ được chuyển động mượt mà mà auto-animate cung cấp cho các framework khác.

Ai được lợi, ai cần theo dõi

Các nhóm front-end đã áp dụng Marko sẽ có ngay một giải pháp sẵn có cho một mẫu UI phổ biến—danh sách động. Bản chất nhẹ nhàng của adapter giúp bảo tồn đặc trưng của Marko là các bundle cực nhỏ, điều này rất quan trọng đối với các trang web yêu cầu hiệu suất cao. Ngược lại, adapter hiện tại chỉ tập trung vào các thay đổi (mutations) của danh sách; các nhà phát triển cần kiểm soát timeline tùy chỉnh hoặc các chuỗi chuyển động (choreography) phức tạp sẽ vẫn phải quay lại sử dụng mã tùy chỉnh hoặc một thư viện khác.

Điều gì cần theo dõi tiếp theo

Adapter này là mã nguồn mở và đã có một sandbox demo được liên kết từ ghi chú phát hành. Phản hồi từ cộng đồng có khả năng sẽ định hình các phần mở rộng trong tương lai, chẳng hạn như hỗ trợ grid reflows hoặc tích hợp với các chuyển cảnh cấp component sắp tới của Marko. Nếu tốc độ áp dụng tương tự như sự đón nhận nhanh chóng của auto-animate trong React và Vue, chúng ta có thể thấy một sự thúc đẩy rộng lớn hơn cho chuyển động “zero-code” trong toàn bộ hệ sinh thái UI JavaScript.

Kết luận: Adapter Marko 6 của Auto-Animate biến một tác vụ vốn dĩ cồng kềnh—tạo hoạt họa cho các danh sách được kết xuất từ máy chủ—thành một thẻ khai báo duy nhất, vừa bảo tồn kích thước bundle tối giản của Marko vừa cung cấp cho các nhà phát triển một lớp chuyển động tức thì và có thể bật/tắt được.