Introduce Webpack for easier JS development

[asankov]

trafficstars

Our approach to UI developement ATM is a bit outdated.

We are writing pure JS, and using functions from one file in another with the HTML template being the central import place.

For example, we have utils.js and testruns/mutable.js. testruns/mutable.js is using functions from utils.js, without an explicit import. Rather, the testruns/mutable.html imports both JS files and this way mutable.js is able to find the functions from utils.js.

This works (for now), but will get much harder when we start adding more JS files (which we seem to be doing). It is inevitable to run into problems, which are solved a long time ago. It also means that we may be import more than we use => serving to the client, more than it needs. Also, with this approach every method is public and everything can be used everywhere.

To make things easier, we need to introduce a bundler, like Webpack - https://webpack.js.org/

This will allow us to:

• have each JS file import whatever it is using from other JS files, e.g. in testruns/mutable.js we will have:

// testruns/mutable.js

import { func1 } from 'utils.js'

• have each JS file export only what should be publicly visible, e.g. in utils.js we will have:

// utils.js

function func1() {...}
function func2() {...}
function privateFunc() {....}

module.exports = { func1, func2 }

• have the HTML template import only the JS file it knows it needs
• once bundled we will serve less files to the client and the files will be mini-fied and ugly-fied, hence less bandwidth.
• this will not obstruct local development in any way, as while we are developing locally we will use the raw JS, which is easy to read and debug

Also, this will allow us to use latest JS versions and compile them to be compatible with older browsers.

Finally, this will be the first steps to migrating to a proper front-end framework.

[atodorov]

To clarify: import { func1 } from 'utils.js'

is this a vanilla JavaScript concept or a Node.js one ?

[asankov]

it is a JS concept - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[RMadjev]

Other benefits are:

• it will allows to add versioning for the FE assets;
• sass/less support will be easier;
• currently I dont think we need, but one of the most "compelling features of webpack" is Code splitting(This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.);
• remove of dead code or unused selectors;