Naming conventions

[a-tarasyuk]

Why should we use component name for each file related to component? For instance, we have component main,

├── main
   ├── main.component.js
   ├── main.config.js
   ├── main.spec.js
   ├── index.js
   ├── main.html
   └── main.scss

files are located in main folder, it meens that these files related only to main component and I think it is not necessary add namespace name to each file

├── main
   ├── component.js
   ├── config.js
   ├── spec.js
   ├── index.js
   ├── main.html
   └── main.scss

component has child component

contacts
   ├── config.js
   ├── contacts.html
   ├── contacts.scss
   ├── controller.js
   ├── spec.js
   ├── edit
      ├── config.js
      ├── controller.js
      ├── edit.html
      ├── spec.js
      └── index.js

instead of

contacts
   ├── contacts.config.js
   ├── contacts.html
   ├── contacts.scss
   ├── contacts.controller.js
   ├── contacts.spec.js
   ├── edit
      ├── contacts.edit.config.js
      ├── contacts.edit.controller.js
      ├── edit.html
      ├── contacts.edit.spec.js
      └── index.js

Does it make sense?

[floriangosse]

With a full name you have the benefit to search for the specific file. E.g. the controller of the edit component:

• controller.js multiple results
• contacts-edit.controller.js only one result.

[AkosLukacs]

Also, simply if you have those files open in your editor, well, you have something 3* component.js, 2* index.js, 2* spec.js. Good luck figuring out which file to chose without looking at the path.

[bcarroll22]

I'm not sure what editor you guys use, but at least Atom and Sublime fuzzy match on paths.

Using the example of the original post, you could Cmd+P search for MaiComp and the top result would most likely be main/component.js.

OP, I agree with this idea.

[floriangosse]

Yes, that is true. But I think it is easier to use. E.g. you have multiple components which contain a sub component which are called edit. You can't search for EditComp because there are two edit components. This could be an edge case in small applications but in bigger application it could be happens.

I think it depends on the project. We use the explicit naming of files because our application are to big and it is easier to understand.

[bcarroll22]

In your example, if you have two edit components, both named edit.component.js, you still have to rely on the path to choose the right one, right?

[bcarroll22]

Also, not sure if this was a real example or not, but I'd say you might want to make edit a reusable component, or be more specific about what that component is editing so you don't have to rely on a path when searching.

[floriangosse]

@bcarroll22 my example was not really good. I will try it again and hope that I can make it understandable:

I have an application where I can read articles and tasks and can edit them directly in the view where I read them. For the article view I have a component which is called article and for the tasks I have component tasks. Both components can be edit and I need a form for both data types. So everyone will get a sub component which is called form. The following file structue should be visible:

├── task
│   ├── index.js
│   ├── task.scss
│   ├── task.html
│   ├── task.spec.js
│   ├── task.config.js
│   ├── task.component.js
│   └── form
│       ├── index.js
│       ├── task-form.scss
│       ├── task-form.html
│       ├── task-form.spec.js
│       ├── task-form.config.js
│       └── task-form.component.js
└── article
    ├── index.js
    ├── article.scss
    ├── article.html
    ├── article.spec.js
    ├── article.config.js
    ├── article.component.js
    └── form
        ├── index.js
        ├── article-form.scss
        ├── article-form.html
        ├── article-form.spec.js
        ├── article-form.config.js
        └── article-form.component.js

Because I have multiple form components (which are sub components) it is easier to understand which file is it.

Yes, I know that both approachs will work similar in the editors. But another benifit is mentioned by @AkosLukacs: You know which file is the correct one if you have the component.js of both submodules opened in your editor.

[AkosLukacs]

My reaction is somewhat based on the experience of using the convention of naming all "index" views as index.html. Then I had six index.html files open. It's just faster to ctrl - tab a few times, and select the right file based onjust it's name than select the right one using its path.

[toddmotto]

Will be sticking with Angular 2 structure/naming conventions here - any further ideas lemme know guys, thanks for the input! :)