Feature Sliced Design là phương pháp tổ chức mã nguồn frontend theo lớp trách nhiệm và nghiệp vụ. Cách tiếp cận này giúp nhóm phát triển kiểm soát phụ thuộc, xác định vị trí của từng module và mở rộng sản phẩm mà không biến codebase thành một tập hợp thư mục khó hiểu.
Feature Sliced Design là gì trong phát triển frontend?
Feature Sliced Design thường được viết tắt là FSD, một phương pháp kiến trúc dành cho ứng dụng frontend. Thay vì chia toàn bộ mã nguồn theo loại kỹ thuật như components, hooks, services và utils, FSD kết hợp ba chiều tổ chức gồm layer, slice và segment để phản ánh trách nhiệm cũng như ý nghĩa nghiệp vụ của code.
Layer cho biết module đang đảm nhận vai trò nào trong ứng dụng. Slice gom các thành phần thuộc cùng một miền nghiệp vụ, chẳng hạn user, product hoặc checkout. Segment tiếp tục chia nhỏ code theo mục đích kỹ thuật như ui, api, model và lib.
Điểm quan trọng của FSD không chỉ nằm ở tên thư mục. Phương pháp này còn đưa ra quy tắc phụ thuộc: module ở layer phía trên có thể sử dụng module ở layer phía dưới, nhưng chiều ngược lại cần được hạn chế.
Cấu trúc thư mục của Feature Sliced Design
Một dự án Feature Sliced Design phổ biến có thể được tổ chức theo sáu layer chính: app, pages, widgets, features, entities và shared. Không phải dự án nào cũng cần dùng đầy đủ mọi layer; nhóm phát triển nên lựa chọn theo độ phức tạp thực tế.
src/
├── app/
├── pages/
├── widgets/
├── features/
├── entities/
└── shared/ khám phá thêm tại xe máy Anh Lộc.
Trâm Anh là tác giả chính của trang web Xe Máy Anh Lộc . Với ngòi bút sắc sảo và am hiểu sâu về xe máy, cô chuyên viết review chi tiết, đánh giá xe cũ, hướng dẫn mua bán, tập trung vào các dòng tay ga phổ biến như Honda SH, Air Blade, Liberty. Nội dung thực tế, hữu ích, giúp người đọc đưa ra quyết định sáng suốt.