Prestashop: [SF Migration] Decide about a clear convention for pages JS files and folders

[matks]

Right now, we have no clear convention for how JS files and folders should be constructed in admin-dev/themes/new-theme/js/pages/

The result is that there are multiple different "pattern structures" used:

We should decide about a clear convention for pages JS files and folders and apply it to all pages folders.

Background

Currently, in admin-dev/themes/new-theme/js/pages/ there is 1 folder by "section", which means the "Customers" listing ; the "Add a customer" form ; the "Edit a customer" form and the "View a customer" page JS files are all put in a single customer folder.

This convention must states:

• JS "index files" naming, for different pages, whether they should be at the root of the folder
• when can we use subfolders, how do we name them, is it 1 by page, is it 1 by sections
• where do we put name and write dedicated reusable JS components
• where do we put the PageMap file, is there 1 for the section or 1 per page ?

[matks]

Ping @PierreRambaud @NeOMakinG @zuk3975 @tdavidsonas88 @rokaszygmantas @RaimondasSapola @tomas862 @eternoendless

[eternoendless]

I think the most important part is this:

• There SHOUld be be ONE root directory by section, with one or more subdirectories per page (if there's more than one).
• There SHOULD be ONE bundle per page (not section), per previous point
• There should be AT MOST one pagemap per page (pages inside a a section COULD share the same pagemap if it makes sense)
• There will probably not be too many files per page, so I don't think it's needed to add subdirectories for components

[jolelievre]

Seems good, so it would look like something like this?

|__ order
     |__ view
     |   |__ index.js
     |   |__ add-product.js
     |   |__ edit-products.js
     |__ create
     |   |__ index.js
     |   |__ cart-editor.js
     |__ list
     |   |__ index.js
     |__ page-map.js

What about components that may be common between multiple pages? Should we have a components folder? Or at the root of the section?

Should all the page mapping be in a single common file? Or only the one transversal to multiple pages, and so each page would have its own page-map with only the one necessary for this page (possibly including and merging the one from the root to avoid dealing with two mapping objects)?

Also should the section and page name match the related controller in order to identify them more easily?

[jolelievre]

We should also have a convention for file names, in order page there is mix between dash style and camel case file names

[jolelievre]

Regarding the component subfolders in page folder, in order/view and order/create we have 10+ different files/components Is it acceptable or could we divide them when we reach too many files?
I think the product page for example will probably have even more different components/files

Also where should we put tools or components that might be transversal to multiple sections (grids, forms, ...)? Today there are some in different folders js/app/cldr, js/app/utils, js/components

[matks]

Seems good, so it would look like something like this?

|__ order
     |__ view
     |   |__ index.js
     |   |__ add-product.js
     |   |__ edit-products.js
     |__ create
     |   |__ index.js
     |   |__ cart-editor.js
     |__ list
     |   |__ index.js
     |__ page-map.js

Looks good 👍

What about components that may be common between multiple pages? Should we have a components folder? Or at the root of the section?

I suggest a component folder, common to all section, possibly with subfolders in it if necessary.

Should all the page mapping be in a single common file?

I suggest a single common file as these files will probably be shared with QA team. This way it's simple and efficient for them to get them all.

Also should the section and page name match the related controller in order to identify them more easily?

Not mapped to a controller I think, too brittle.

We should also have a convention for file names, in order page there is mix between dash style and camel case file names

@PierreRambaud @NeOMakinG what is the norm for file names ?

Regarding the component subfolders in page folder, in order/view and order/create we have 10+ different files/components Is it acceptable or could we divide them when we reach too many files?

I think if we have too many files, it indicates

• some components could be reusable and moved outside of pages/ folder
• subfolders are needed

I think the product page for example will probably have even more different components/files

Also where should we put tools or components that might be transversal to multiple sections (grids, forms, ...)? Today there are some in different folders js/app/cldr, js/app/utils, js/components

Everything should go into js/components, js/app should be for bootstrap/setup stuff.

[PierreRambaud]

About naming, if we have VueJs components, we should use the Vue naming conventions (eg: CustomerForm.vue, Router.vue) and otherwise customer-finder.js.
All components should be outside pages because a components must be reusable, or will be reusable (that the principe of a component).

[NeOMakinG]

Seems good, so it would look like something like this?

|__ order
     |__ view
     |   |__ index.js
     |   |__ add-product.js
     |   |__ edit-products.js
     |__ create
     |   |__ index.js
     |   |__ cart-editor.js
     |__ list
     |   |__ index.js
     |__ page-map.js

What about components that may be common between multiple pages? Should we have a components folder? Or at the root of the section?

Should all the page mapping be in a single common file? Or only the one transversal to multiple pages, and so each page would have its own page-map with only the one necessary for this page (possibly including and merging the one from the root to avoid dealing with two mapping objects)?

Also should the section and page name match the related controller in order to identify them more easily?

We should obviously have a folder stocking dumb components (basically these are components that are playing by data they receive from their parents)

It looks like in the stock folder there are some components that should be reusable and should not be there

|__ order
     |__ view
     |   |__ index.js
     |   |__ add-product.js
     |   |__ edit-products.js
     |__ create
     |   |__ index.js
     |   |__ cart-editor.js
     |__ list
     |   |__ index.js
     |__ page-map.js
components
|_ layout
   |_ Header.vue
   |_ Footer.vue
|_ reusables
   |_ Button.vue
   |_ Breadcrumb.vue

Pages seems to be smart components or containers, they only serve data, receive from childs with events and do things.

Also what about stores ? do we add stores in pages folders ? or do we add these outside like components ? I think it should be outside as they could be used in any pages