Gobierto modules

The front-end of the application uses webpack to be built, therefore, to collaborate read the following directives:

The javascript code developed is hosted in /app/javascripts. There, the webpack entry point (entry_point), is inside the packs folder. Each file in this folder represents a package, which corresponds to a module (except vendor.js, explained later).

Each of these packages only refers to the module they load, and some of common dependencies if necessary. For example, the file /app/javascripts/packs/admin.js, just contains:

JavaScript

import 'shared'
import 'admin'

Then, for each module, there is a folder at the same level as packs with the name of that module. It contains an index.js file and a modules folder with all the legacy code. Let's see an example:

/app/javascripts/
  packs/
    admin.js
    vendor.js
  admin/
    index.js
    modules/
      script1.js
      script2.js

The index.js file contains just a list of imports from the modules folder starting with init.js
The development process is the following:

If we need a new module

1. A file is created in packs/new_module.js minimum with an import 'new_module' inside.
2. The folder /app/javascripts/new_module is created with an index.js file and a modules folder
3. The index.js includes imports to all the modules files (TODO: can be improved with a glob)
4. modules contains the logic that we want

If we need an external dependency, without needing to instantiate it

1. After bringing the dependency with yarn install inside the file vendor.js we add `import 'dependency``
2. If we had to make it global, we would expose here: import Dependency from 'dependency'; global.dependency = Dependency (Not recommended)

If we need an external dependency, and also instantiate it

1. After bringing the dependency with yarn install inside the shared module, we will import it into the index.js
2. If we had to modify it, or execute something, we would initialize it in the index.js
3. If we needed to add a configuration or something more complex, we would add a script in shared/modules, and import them in the index.js
4. We export the variable in the bottom of the module export { Dependency }
5. In the script that we need this dependency, we add an import { Dependency } from 'shared'

The objective of this last block is to gather all external dependencies in the same place for future reuse.

You may notice there is an /app/javascript/i18n folder. It contains translations from rails, and it's generated in an automatic way. Do not alter.

Webpack debugging tools

It could be useful, for development purposes, some webpack plugins as Webpack Bundle Analyzer and Speed Measure Plugin. Take a look here