12/2022 – 05/2025, Tạm biệt Site Builder: Hành trình & bài học tôi mang theo

Một Ý tưởng và Sự khởi đầu

Khi tôi bắt đầu tham gia dự án Site Builder chỉ mới là ý tưởng được vẽ lên trong những buổi brainstorming. Thách thức lớn nhất khi đó là: Làm thế nào để xây dựng một công cụ giúp người dùng dễ dàng tạo website mà không cần biết về code?

Chúng tôi đặt mục tiêu rõ ràng: một trải nghiệm tương tự như Webflow nhưng đơn giản và tối ưu hơn cho người dùng phổ thông.

Tìm hiểu và nghiên cứu kiến trúc của Webflow

Bước đầu tiên là dành nhiều thời gian để phân tích sản phẩm tương tự, nổi bật nhất là Webflow. Tôi đào sâu vào cách Webflow tổ chức:

  • DOM Tree Management: Cách họ mô hình hoá và quản lý cấu trúc DOM thông qua giao diện kéo thả trực quan.
  • CSS-in-JS Dynamic Styling: Phương pháp lưu trữ và quản lý CSS động, cho phép người dùng tuỳ biến giao diện dễ dàng.
  • Component-driven Approach: Cách xây dựng các component tái sử dụng và linh hoạt, phục vụ hiệu quả nhu cầu người dùng cuối.

Tôi lập ra nhiều sơ đồ chi tiết, ghi chép kỹ càng các phát hiện, rồi trình bày cùng team về những điểm mạnh và hạn chế mà chúng tôi cần cải tiến.

Xây dựng kiến trúc riêng cho Site Builder

Sau quá trình nghiên cứu, tôi cùng team thiết kế một kiến trúc riêng cho Site Builder:

  • JSON-driven Components: Chúng tôi quyết định lưu trữ toàn bộ cấu trúc trang dưới dạng JSON, cho phép tái cấu trúc và quản lý trang web một cách hiệu quả và dễ dàng mở rộng.
  • Renderer Engine: Tôi xây dựng một engine xử lý JSON format và render trực tiếp ra giao diện frontend, điều này giúp đảm bảo tính nhất quán và linh hoạt cao.
  • Drag-and-drop Editor: Tôi phát triển giao diện kéo thả trực quan sử dụng React DnD, cho phép người dùng tương tác dễ dàng với component library của chúng tôi.
  • State Management: Áp dụng Redux Toolkit để quản lý trạng thái ứng dụng một cách minh bạch và hiệu quả.

Từ JSON tới UI Components

Một phần thú vị nhất trong quá trình phát triển là việc chuyển đổi JSON format sang UI components. Tôi và đồng nghiệp đã dành rất nhiều thời gian phát triển một bộ parser hiệu quả, có khả năng chuyển đổi dữ liệu JSON sang DOM thực tế một cách nhanh chóng, chính xác.

Việc tối ưu performance để chuyển đổi này diễn ra gần như realtime là một thử thách lớn. Chúng tôi áp dụng cơ chế caching, lazy loading, và dynamic importing để đảm bảo trải nghiệm mượt mà nhất.

Những bài học vô giá

Qua dự án này, tôi đã học được:

  • Khả năng thiết kế và tổ chức một hệ thống phức tạp: Từ backend tới frontend, mọi thứ đều phải được sắp xếp logic và dễ bảo trì.
  • Tầm quan trọng của performance và UX: Người dùng không quan tâm bạn code giỏi thế nào, họ quan tâm trải nghiệm có tốt và nhanh hay không.
  • Tinh thần đồng đội: Luôn luôn trao đổi, review lẫn nhau, và tinh thần sẵn sàng thay đổi để hoàn thiện sản phẩm hơn.

Lời tạm biệt và hành trình mới

Tạm biệt …, tôi mang theo mình những kinh nghiệm quý giá, những bài học lớn về sản phẩm, công nghệ và cả sự trưởng thành trong tư duy.

Dù hành trình với Site Builder kết thúc tại đây, nhưng tôi tin rằng hành trang này sẽ là nền tảng vững chắc để tôi tiếp tục hành trình mới, tiếp tục tạo ra giá trị.


Tôi luôn sẵn sàng cho những cơ hội mới, thử thách mới để tiếp tục phát triển bản thân và đóng góp vào những sản phẩm ý nghĩa hơn.

👉 Liên hệ ngay với tôi qua LinkedIn hoặc Email để kết nối và cùng nhau tạo ra những sản phẩm tuyệt vời tiếp theo!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *