Việc xây dựng Pagelyze đã dạy tôi những gì về React

Việc xây dựng Pagelyze đã thay đổi quan điểm của tôi về React. Tôi đã ngừng chỉ nhìn vào lý thuyết và bắt đầu chú trọng vào kiến trúc sản phẩm.

Pagelyze là một công cụ kiểm định website. Nó không phải là một ứng dụng thực hành nhỏ. Nó xử lý các báo cáo kiểm định, logic tính điểm và các bảng điều khiển (dashboards). Chính vì vậy, tôi đã phải trả lời một câu hỏi:

Liệu mã nguồn này có giữ được sự sạch sẽ khi sản phẩm phát triển hay không?

Các Hook như useState hay useEffect rất quan trọng. Nhưng chúng không phải là tất cả. Bạn có thể sử dụng cú pháp hiện đại nhưng vẫn phải duy trì một mớ hỗn độn. Vấn đề thường nằm ở trách nhiệm (responsibility).

Trong một thiết lập tồi, một tệp duy nhất xử lý mọi thứ từ việc tải dữ liệu đến hiển thị kết quả. Cách này sẽ thất bại khi bạn mở rộng quy mô.

Một cách tốt hơn là chia nhỏ các component theo mục đích sử dụng:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Mỗi phần đảm nhận một nhiệm vụ duy nhất. Bạn có thể thay đổi thiết kế của một thẻ (card) mà không làm hỏng logic dữ liệu của mình.

Đừng hỏi liệu bạn nên dùng Redux hay Context nữa. Hãy hỏi xem ai là người cần state đó.

  • Local UI state: các tab và modal
  • Form state: URL và validation
  • Server state: các báo cáo và lượt quét
  • Global state: hồ sơ người dùng và quyền hạn

Các custom hook nên đại diện cho hành vi. Chúng không nên chỉ đơn thuần là chuyển mã nguồn lộn xộn sang một tệp khác. Một hook tốt sẽ thực hiện việc lấy dữ liệu để component trang chỉ đóng vai trò điều phối màn hình.

Cấu trúc thư mục theo tính năng (feature):

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

Routing không chỉ đơn thuần là các URL. Nó là hành trình của người dùng. Một người dùng đi từ trang đích đến lượt kiểm định miễn phí, sau đó đến báo cáo, và cuối cùng là yêu cầu dịch vụ. Một hệ thống routing tốt sẽ dẫn dắt họ đến bước tiếp theo.

Hãy xây dựng với sự rõ ràng. Tìm ra điểm nghẽn. Sửa đúng phần cụ thể đó.

Các thực hành tốt nhất (best practices) trong React xoay quanh các quyết định. Bạn quyết định một component sở hữu cái gì. Bạn quyết định state nằm ở đâu. Bạn quyết định liệu một route có giúp ích cho người dùng hay không.

Pagelyze là bài kiểm tra của tôi. Tôi không kiểm tra xem liệu mình có thể xây dựng một màn hình hay không. Tôi đang kiểm tra xem liệu mình có thể giữ cho một sản phẩm luôn sạch sẽ khi nó phát triển hay không.

Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb