1

@arikfr @ranbena (Making our discussion public.)

I’d like to discuss a thing that crossed my mind - about frontend code structure, to be exact - components and pages. With AngularJS it was a lot of sense to put components and pages separately, because each of them consisted at least of js file and html template. React components are single file each. So what if while moving each page to React, we’ll put components that are related to that page in the same folder, and keep app/components for common ones?

Suppose that we refactor a Dashboard page. There are some components that are related only to this page - like AddWidgetDialog, AddTextBox dialog, maybe some menus, etc. The idea is to move that components to pages/dashboard (or maybe even pages/dashboard/components).

Right now we do something similar, but only for components itself - for example, we keep TagsControl and EditTagsDialog (which is related only to that control) in the same folder.

WDYT?

2

I want to have the pages in their own folder separate from the rest of the components, so we can keep using an auto register pattern for pages (even after we drop Angular).

But we should definitely group components (in app/components) based on feature or “topic”. For example:

  • All tags (feature) related components in a app/components/tags folder.
  • All dashboard (feature/page) related components in app/components/dashboards.
  • All layout (topic) related components in a app/components/layout folder.

And so on and so on.

It’s basically what you suggested, but with the change that pages stay where they are and components stay where they are.