Clever Geek Handbook

Best practice for organizing hundreds of components?

When you have a large application that has hundreds of components, some are pretty much shared by others, and some are just a layout or a simple view. So, are there any good guidelines for organizing components? modulo? or by using? or some other policies?

+3


source to share


3 answers


I create a directory on a page and then bind to one component per file (i.e. AddButton

will be in add_button.js.jsx

). I always have a top level component for this page, timed to App.

  • user
    • user_list.js.jsx
    • user_app.js.jsx
  • Dashboard
    • dashboard_app.js.jsx
    • histogram.js.jsx
  • analytics
  • general
    • buttons
      • add_button.js.jsx
      • reset_button.js.jsx
    • list.js.jsx
    • table.js.jsx


This became my default for a while, curious to see how others are going.

+1


source


Personally, I prefer to combine groups of disposables in a single file. While more components are good, more files can lead to more difficult debugging as you have to constantly jump between them. My folder structures often look like this:



  • Views
    • User
      • show.js (one view that includes project-specific components and links to shared components).
      • index.js
    • Widgets
      • _form.js (reused only in the context of widgets)
      • new.js
      • edit.js
  • Components (reused places on the site)
    • List.js
    • ListItem.js
    • Navbar.js
    • Footer.js
+1


source


You might want to consider the following file system organization pattern suggested by BEM.

The component-based approach used in the BEM methodology also defines how BEM projects are organized in the file system. In BEM, it is not only an interface that is divided into independent components, that is, blocks, but the implementation of blocks is also divided into independent parts, namely files.

If you are not familiar with BEM, here is a quick summary :

BEM - means block, element, modifier - this is the interface name of the methodology invented by the guys at Yandex. This is a clever way of naming your CSS classes to give them more transparency and meaning to other developers. They are much stricter and more informative, making the BEM naming convention ideal for development teams on larger projects that can take a while.

Your Vue / React components can map one-to-one with BEM blocks, which are stored in separate folders containing JS implementation, CSS styles and related templates.

blocks/
    input/
        input.css       # `input` block implementation in CSS technology
        input.js        # `input` block implementation in JavaScript technology
    button/
        button.css
        button.js
        button.png

As your project gets more complex, it can be useful to keep modifiers and the items are in separate files and grouped into sub-block subdirectories accordingly.

blocks/
    input/
        _type/                        # `type` modifier directory
            input_type_search.css     # Implementation of modifier `type` with value `search` in CSS technology
        __box/                        # `box` element directory
            input__box.css
        input.css
        input.js
    button/
        button.css
        button.js
        button.png
0


source






More articles:


All Articles