Make changes in the assets build process

#What does it mean? Basically improve the way we prepare the assets for development or production. The main purposes are:

• Improve development speed: watch, bundle, initialization,…
• Improve deployment speed: don’t uglify already minified vendor files, for example, don’t run unnecessary development tasks here, etc.

It has a lot of implications, but the main tasks should be:

Main tasks

• Migrate from Browserify to Webpack: already done in the test part thanks to @ivanmalagon.
• Taking into account the previous bullet, we should not migrate the old code (editor) to this new “workflow”. That means only, for the moment, builder, dataset and public embed views will be “migrated”.
• Start using lib-sass for compiling the CSS instead of ~compass~ for the whole project. We should leave this last one only for the old assets.
• We should check if new tests task needs to be revisited after those new changes.

Caveats

• We need to keep using the core <> client behaviour for assets touched “outside” of our usual workflow (mainly for solutions engineers).
• ~Vendor files (like tangram) don’t need to be uglified, we should avoid this in order to gain time in the deploys~ Decided to leave it as it is for now (follow thread).
• When a new file is added, it should be taken by the watch process.

Improvements

• Research how to improve javascript source-map support for staging and production.

Issues:

• Some modals are not properly rendered.
• CSS sourcemaps are not working.
• Revamp cartodb.js and deep-insights to include cartoassets in bundle time. Right now we have this dependency twice in those styles -> https://github.com/CartoDB/cartodb/pull/12203.
• As a continuation from above, use partials _whatever to include code not compilable directly -> https://github.com/CartoDB/cartodb/pull/12203.

Nice to have

• Hot module replacement
• Smart build: only build touched code. If the edited/new code belongs to Builder, only build the Builder. If the code belongs to Editor, only build the Editor. If there is code for both sides, build Builder and Editor.

@CartoDB/frontend

[xavijam]

\o/

[xavijam]

IMO:

For development purposes:

• For editor we should use grunt editor dev.
• For builder we should use: grunt builder dev.

For only compilation, for example, staging or production:

• For editor we should use grunt editor prod.
• For builder we should use: grunt builder prod.