🧩Feature-Sliced Design Review

Here, I reconsider the pros and cons of feature-sliced design. Many new devs considering this new architecture, but this one surely has upsides and downsides. If you're working with a team, you should reconsider your decision thoroughly.

Pros

Uni-Direction Dependency Flow Prevents Circular Dependencies

Import/export dependency flow becomes uni-direction.
Here is the hierarchy: shared < entities < features < widgets < pages < app. Modules and components in shared can only be exported by files in the higher layer. (entities, features, widgets, pages, and app). Modules and components in entities can only be exported by files in features, widgets, pages, and app. Since we can set the hierarchy, circular dependencies rarely take place.

The Depth of The Directory Is Limited

There are three levels of a directory: layers, slices, and segments. By restricting the depth of the directory, we can prevent the directory structure from becoming too complicated. However, this might not be a serious concern since auto import is supported.

Single Responsibility Follows the Principle

It becomes clear which file you need to navigate when you want to modify the code. FSD simplifies the process since the three criteria can filter most modules.

• Layers: Which abstraction level does the component/module belong to: widgets render entities composited with features
• Slices: Which feature is the component/module related to: log-in, feed, profile, and so on
• Segments: What kind of logic does the component/module contain: data fetching, business logic, helper functions, and so on

Cons

At First, it feels tricky

I didn't know how to name slices especially, even though I looked at many examples on the official docs. Plus it was very confusing whether I should put some module in lib or model. Your team might lose productivity.

Next.js doesn't support barrel support

This is a known issue.
To implement public API, FSD uses barrel exports. However, if server components and client components are exported by a single file, the server components are marked as client components.

import ServerComopnent from './ui';
import ClientComponent from './ui';

export { ServerComponent as Server } from './ui';
export { ClientComponent as Client } from './ui';

Ending comment

Please leave a comment if you have an opinion about FSD.

Comments

[Deepak Kumar]

Hello everyone,

I hope you're all doing well. I recently launched an open-source project called the Ultimate JavaScript Project, and I'd love your support. Please check it out and give it a star on GitHub: Ultimate JavaScript Project. Your support would mean a lot to me and greatly help in the project's growth.

Thank you!