Overview
Culture Foundry has been working on significant updates to the front end infrastructure of a large scale client website. Outdated core library files had security vulnerabilities that would have always required manual updates in order to be resolved. We also noticed that certain login issues, token passing and random interaction problems were associated with unreliable compiling of the main JavaScript files.
Culture Foundry decided to move all core libraries over to a Javascript package management system and rebuild the compiler tooling for the main assets. The package manager automatically notifies Culture Foundry anytime that there is a security update for a main library and applies those security fixes on the next code deployment. We can also use the latest JavaScript syntax (coding style) when writing new code without worrying about browser compatibility. The update to the new build system auto-compiles all JavaScript to work across a browser Matrix with the latest three versions for all major browsers. So what does all this mean? Let’s break it down a bit:
Package Management
A package manager is a tool that programming languages use to create project environments and easily import external dependencies. Third party companies and/or groups of developers maintain these external libraries. As with all open source software, this enables large groups of developers to maintain code bases and quickly fix security bugs. A client example would be jQuery, which is a very popular JavaScript library.
Why Use It?
We are now using a package manager called NPM, a hub for major JavaScript libraries. The tool powers quick commands to update the package version and all of its dependencies without requiring manual maintenance. NPM also notifies us of security vulnerabilities in any of the parent libraries or its children at its current version, and what version is required to fix these.
Modernizing a Build Tool
Our client’s outdated build tool did not allow us to write any new code in modern JavaScript (ES6 +). As a result, we ended up with complicated code and unneeded lines of code that caused assets sizes to be excessively large.
After updating this build tool to the latest version, Culture Foundry can now write modern JavaScript without worrying about browser compatibility. This tool set now compiles everything into multi-browser readable code and with the libraries from the package manager, as opposed to local copies of the libraries. Now each time we deploy code, the latest updates to that package will include security fixes.
Let me give an example: Our client was previously on jQuery 1.12.0, which had several security holes and XSS vulnerabilities. This could have lead to leaked data between multiple domains sharing JWTokens. Without manually auditing all these packages, we would not be aware of this problem. Now the package manager and build tool alert us if the running version has these issues and what software version we need to solve the problem. Our client is now on jQuery version 3.x.x, which required a major upgrade because of the time between updates. But we can now do small version bumps without worrying about how updates may affect other pieces of the code.
What Did We Gain?
There were several benefits to moving to a package management system and updating our client’s toolset. JavaScript code is constantly security audited. Smaller bundle sizes mean faster load times, improved SEO, and a better user experience. We gained the ability to use modern JavaScript coding practices without sacrificing compatibility, a front end framework that is now easier to test against, and a front end build tool that is future proof.