Feature-first or Function-first folder structure?

[brianegan]

There are generally two major approaches to structuring code bases: Feature-First or Function-First. From your experience working on Flutter projects, what has been the most effective or useful?

• Feature First (e.g. /search/ folder contains all code related to the "Search Feature" -- models, views, controllers, etc).
• Function First (e.g. /controllers/ folder contains controllers for all features, /models folder contains models for all features).

[orestesgaolin]

I'm more in favor of feature first approach. Of course it's only personal preference, but it's been working well in many Flutter projects that I encountered. The issue with layers or function first is that there might be different components related to given feature that do not conform to the layering pattern and then the only way to group them is by naming convention (or similar).

[chimon2000]

A good explainer of the two: https://reactjs.org/docs/faq-structure.html

I would campaign for both and give the developer the option to choose. If that's too complicated then I'd say feature-first.

[brianegan]

Thanks again for the links, @chimon2000 -- so many great resources I hadn't seen :)

[Norbert515]

I've used the function first approach in the past and have switched to the feature first quite some time ago (feature first and inside each feature-folder, a function first style structure). From my experience the feature first approach is better due to a couple of reasons:

Discoverability

When looking for a class, is usually easier to build a mental model around features versus layer (naming, layer separation, and other architectural decisions are always very opinionated). It's usually easier to categorize it by a feature than the specific layer.

Folder size

Sorting by function usually results in big folders containing a lot of files, and therefore making it harder to navigate

What gets modified together is together

From experience, it is very unusual to only modify a specific layer. In most apps, most work is done on features. That includes the whole stack of that feature (sometimes even ranging into the backend if you are using firebase). Having all files that are being changed together just helps maintain the mental model of the change.

Recursive structure

I personally really like a recursive feature model - where each feature has a specific layout by functions, but can also contain sub-features with the same layout. In this model, the whole app itself is just a feature.

• app_feature (not really called like this in the app)
  • search_feature
    • very_specific_variation_of_search_feature
  • other_feature

This also illustrates a dependency hierarchy where each feature can only depend on its parent. Anything globally accessible (for example the user management) is inside the app_feature

[RobertBrunhage]

I prefer feature-first approach and I know that other frameworks use it as well, here is an example of Angular and how they have it as part of their Style Guide https://angular.io/guide/styleguide

[shubhamhackz]

Feature-first approach anytime.

[brianegan]

@Norbert515 comin in with the :fire: and settling the debate with a great explanation. Thanks to everyone for participating in this thread :) It looks like we have a pretty clear preference here, so I think it makes sense to close this one out for now!