Giới Thiệu
Trong bài viết này, chúng ta sẽ khám phá cách xây dựng ứng dụng web mà không cần sử dụng bất kỳ framework nào. Phương pháp này không chỉ giúp bạn hiểu rõ hơn về cách hoạt động của các framework mà còn giúp bạn nắm bắt được những lợi ích và hạn chế của chúng. Hãy cùng tìm hiểu các khái niệm cơ bản về rendering thông qua ví dụ về ứng dụng ghi chú todo.
Tại Sao Không Sử Dụng Framework?
Chúng ta thường nghe rằng việc sử dụng framework là cần thiết để phát triển ứng dụng hiệu quả. Tuy nhiên, không phải lúc nào cũng nên phụ thuộc vào chúng. Dưới đây là một số lý do tại sao chúng ta nên thử nghiệm với JavaScript thuần:
- Hiểu Về Công Dụng Của Framework: Khi thực hiện một dự án không sử dụng framework, bạn sẽ hiểu rõ hơn về lý do tại sao các framework tồn tại và những lợi ích mà chúng mang lại.
- Đánh Giá Trade-offs: Việc tự phát triển ứng dụng sẽ giúp bạn nhận ra những thiếu sót và ưu điểm của từng framework hiện có.
- Giảm Thiểu Nợ Kỹ Thuật: Khi không sử dụng framework, bạn có thể tối ưu hóa ứng dụng của mình và giảm thiểu nợ kỹ thuật trong quá trình phát triển.
Frameworks là công cụ mạnh mẽ, nhưng việc hiểu rõ nguyên lý hoạt động của chúng sẽ giúp bạn triển khai dự án một cách thông minh và hợp lý hơn. Chúng ta sẽ cùng nhau tìm hiểu các bước cơ bản để xây dựng ứng dụng ghi chú todo mà không sử dụng framework.
Rendering
Rendering là một chức năng quan trọng, đóng vai trò trong việc chuyển đổi state thành view. Trong bài viết này, chúng ta sẽ tập trung vào việc phát triển một ứng dụng ghi chú todo. Cấu trúc thư mục và HTML sẽ được xác định để phục vụ cho việc tạo ra giao diện người dùng.
Chức năng đầu tiên là rendering, nơi ta định nghĩa state và gán nó vào giao diện. Cụ thể:
View = Render(state)
Chúng ta sẽ bắt đầu xây dựng chức năng render trong tệp render.js. Đối với ứng dụng todo của chúng ta, component sẽ tiêu thụ state và trả về HTML tương ứng. Công việc này sẽ được thực hiện thông qua một hàm render, có nhiệm vụ cập nhật DOM ảo với dữ liệu mới.
Controller sẽ nhận state mới, truyền nó đến hàm render, và yêu cầu trình duyệt cập nhật DOM theo những thay đổi đã thực hiện. Mọi thay đổi sẽ được thực hiện trước khi repaint diễn ra trong trình duyệt.
Render Với Components
Khi chức năng render đã hoàn thành, chúng ta nhận ra rằng vẫn còn nhiều hạn chế, như việc coupling chặt chẽ giữa logic xử lý dữ liệu và giao diện. Để nâng cao trải nghiệm người dùng, chúng ta cần phải tìm giải pháp để sử dụng các component một cách rõ ràng và độc lập.
Đầu tiên, ta có thể tạo ra một class component để quản lý các component khác nhau. Tuy nhiên, phương pháp sử dụng pure functions sẽ mang lại lợi ích hơn. Mô hình của chúng ta, view = render(state), có thể áp dụng cho tất cả các component.
Để thực hiện điều này, chúng ta sẽ sử dụng componentWrapper, một higher-order function, có nhiệm vụ bind component với DOM node đã được định nghĩa và quản lý quá trình traversal DOM tree. Điều này sẽ giúp giảm coupling giữa các component và logic rendering.
Binding Component
Chúng ta sẽ thực hiện bước đầu tiên bằng cách tạo function để bind các component với DOM của chúng. Với kỹ thuật này, chúng ta sẽ sử dụng data attributes để định dạng các component một cách dễ dàng hơn.
Sau khi bind logic của từng component, ta vẫn cần tạo virtual DOM từ root node và phân tán state đến các component con. Cuối cùng, application của chúng ta sẽ trở nên rõ ràng, dễ dàng quản lý, và có khả năng tương tác tốt.
Kết Luận
Sau khi hoàn thành phần 1 này, bạn có thể nhận thấy sự tương đồng giữa cách viết component, virtual DOM và việc chuyển state giữa các framework khác nhau như React và Angular. Trong phần tiếp theo, chúng ta sẽ bàn về diffing engine, event handling, và routing để làm cho ứng dụng front-end của chúng ta trở nên reactive hơn. Hãy cùng theo dõi!
Cảm ơn bạn đã đọc bài viết này! Nếu có bất kỳ góp ý nào, mong bạn hãy vui lòng chia sẻ để mình cải thiện nội dung cho những bài viết tiếp theo.
Tham khảo: Tài liệu nguồn mở Apress
source: viblo
