Overhaul + Modernization of frontend JS

[peakwinter]

In line with the enhancements to the Gulp build system and JS dependency management that were introduced yesterday in PR #705, I would like to continue the process of reviewing this repo's JavaScript components and extend it to include a modernization and reduction of technical debt. This review is inspired by (and goes in a similar direction to) @ellmetha's great analysis of how we use JS along with Django here at SFL.

While it's clear the JS codebase in this project is far smaller than the Python part, it is no less important and deserves no less attention in the grand scheme of things! :) So after taking some time to look through much of the frontend JS we use in this repo, I came up with the following areas that could use some improvements.

Establishing a common style

The Python world has a dominant coding style that has been generally accepted by the community called PEP8. Coupled with lint checks as introduced through PyFlakes, flake8 is a great utility for ensuring optimal code quality, safety and readability.

Things are a bit more nuanced when it comes to JavaScript. There are many more choices of tools for linting and code style checks, and no overall dominant coding style that everyone swears by. A common choice is to use a tool called ESLint, integrations for which exist in many modern IDEs and text editors. A variety of different rule sets exist for ESLint, and can be added/removed on the fly, but the most common approach is to start with a commonly-used style guide and then extend that with one's own preferences. Good style guides have been published by Airbnb, Shopify, Canonical and many other organizations.

Going forward I would propose that this project adopt a common style guide for JavaScript and enforce linting with ESLint to help ensure that we are always following the best practices possible.

(N.B. It doesn't appear that this project uses flake8 very judiciously either, so that would also be another area for improvement down the road!)

Modernize the JS features we take advantage of

JavaScript has been around for a long time, but it has become one of the most rapidly evolving programming languages available today. These changes aren't always useful and there are certainly some trends in the modern JS ecosystem that should be looked at with a critical eye.

However one good example of how JS is definitely changing for the better is the yearly evolution of the features of ECMAScript, the most prominent of which has been ES6, released in 2016. ES6 packs in a lot of cool features that make programming much more cool and fun, as well as making code cleaner. These features can be taken advantage of in the browser using a transpiling tool called Babel, which is fast and very easy to integrate with a modern Gulp pipeline like we use currently.

In moving to (transpiled) ES6 for our frontend JS code, we can ensure our JS continues to be a modern and future-friendly foundation to build new features upon.

Refactor our existing JS code

In line with the first two points, there will be a lot of changes to make to streamline the existing frontend JS in this project. The organization of JS files in particular has tracked, with more or less precision, the evolution of the underlying Django application. Some files need to be renamed, functions moved or reorganized to better fit a model-view-controller style. There are also a lot of improvements that can be made to jQuery selectors and interaction with components in HTML.

Conclusion

To summarize, my proposal would be to:

• Establish a coding style for JS and enforce linting.
• Update our code to take advantage of the new features in ES6, and set up Babel transpiling.
• Refactor much of the existing JS code to take advantage of the aforementioned improvements.

Questions, comments or alternative proposals are welcome!