Tự tay xây dựng để hiểu cách hoạt động của các framework JavaScript hiện đại

 (nolanlawson.com)
26 điểm bởi GN⁺ 2023-12-04 | 1 bình luận | Chia sẻ qua WhatsApp

Tìm hiểu cách hoạt động của các framework JavaScript hiện đại

  • Tự tạo framework JavaScript của riêng mình sẽ hữu ích cho việc học.
  • "Framework JavaScript hiện đại" ở đây ám chỉ các framework xuất hiện sau React.
  • Các framework này lấy cảm hứng từ React, nhưng đã tiến hóa theo những hướng khá tương đồng.

Đặc điểm của framework hiện đại

  • Sử dụng tính phản ứng (reactivity) để cập nhật DOM.
  • Sử dụng sao chép mẫu (cloning templates) để render DOM.
  • Dùng các Web API hiện đại như <template> và Proxy.

Tính phản ứng (Reactivity)

  • React thường được nhắc đến là không mang tính phản ứng.
  • Các framework hiện đại ưu tiên hiệu năng bằng mô hình phản ứng dựa trên cơ chế push.
  • Dùng Proxy để triển khai việc cập nhật DOM mỗi khi trạng thái thay đổi.

Sao chép cây DOM (Cloning DOM trees)

  • Dùng thẻ <template> để phân tích HTML một lần rồi sao chép nhanh toàn bộ là một kỹ thuật hiệu quả.
  • Cách này đang được nhiều framework JavaScript sử dụng.

API JavaScript hiện đại

  • <template> và Proxy là những API giúp xây dựng hệ thống phản ứng.
  • Dùng tagged template literals để đơn giản hóa API mẫu HTML.

Các bước xây dựng tính phản ứng

  • Tính phản ứng, tức quản lý trạng thái và định nghĩa việc cập nhật DOM khi trạng thái thay đổi, là nền tảng của framework.
  • Dùng Proxy để phát hiện thay đổi trạng thái và quản lý cập nhật hiệu quả qua queueMicrotask.

Giai đoạn render DOM

  • Sử dụng hàm html để xây dựng cây DOM và cập nhật nó một cách hiệu quả.
  • Viết mẫu HTML bằng tagged template literals và tối ưu hóa việc phân tích HTML bằng WeakMap.

Kết hợp tính phản ứng và render DOM

  • Dùng createEffect để cập nhật DOM theo trạng thái.
  • Triển khai để văn bản tự động được cập nhật khi trạng thái thay đổi.

Bước tiếp theo

  • Có nhiều cách để cải thiện hệ thống render DOM.
  • Mục tiêu là chỉ phân tích template một lần, chỉ thiết lập binding một lần và giảm thiểu cập nhật.

Ý kiến của GN⁺

Điểm quan trọng nhất của bài viết này là hiểu được các khái niệm cốt lõi và cách triển khai của framework JavaScript hiện đại, đồng thời học thông qua trải nghiệm thực sự tự tay xây dựng framework của riêng mình. Cách tiếp cận này có thể mang lại một trải nghiệm học tập thú vị và hữu ích cho các kỹ sư phần mềm mới bắt đầu, khi giúp họ hiểu cơ chế vận hành bên trong của framework và có cơ hội áp dụng thực tế.

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-12-04
Ý kiến trên Hacker News

  • Đề xuất các tài liệu sau để có hiểu biết cơ bản về chủ đề đang quan tâm:

  • Giải thích về những hiểu lầm quanh React và cách nó thực sự hoạt động:

    • Khi cập nhật trạng thái, React chỉ tái dựng component đó và các component con của nó, chứ không phải toàn bộ cây virtual DOM.
    • useMemo không ngăn re-render; React.memo mới đảm nhiệm vai trò đó.
    • React không phải là "push-only" vì nó đệm các bản cập nhật.
    • Ưu điểm của signals là framework biết thuộc tính nào của DOM cần được re-render, nhưng điều đó không đồng nghĩa với tính phản ứng.

  • Đánh giá tích cực về Svelte và các trường hợp sử dụng:

    • Trình biên dịch Svelte có khả năng mở rộng rất tốt và có thể xử lý template Svelte theo những cách đặc biệt.
    • Chia sẻ kinh nghiệm xây dựng Svekyll (bản clone của công cụ blog tĩnh Jekyll) bằng Svelte.

  • Nhiều góc nhìn khác nhau về các framework phản ứng:

    • Cung cấp tài liệu giới thiệu về các framework phản ứng như Solid.
    • Chia sẻ kinh nghiệm viết web renderer/framework để hiểu tính phản ứng của solid-js.
    • Đề xuất tài liệu học bằng cách tự triển khai React.

  • Câu hỏi và thảo luận về tính phản ứng của React:

    • Đặt câu hỏi về cách có thể làm cho React trở nên "phản ứng".
    • Ý kiến cho rằng nên hạn chế phát triển thêm các framework JS mới.

  • Câu hỏi đặt ra cho những người có nhiều kinh nghiệm với framework frontend:

    • Hỏi về các framework/thư viện hỗ trợ effect system cho công việc rendering.