First step - Transpilation and Bundling
Our first step toward JS implementation was to introduce basic transpilation and bundling, achieved by introducing Webpack to our projects. We configured Webpack to load SASS/Scss and ES6+ JS, for this we used:
With the introduction of Webpack, we could stop worrying about browser incompatibilities and could start reusing JS modules across our applications. Another positive of introducing Webpack was that it gave us access to NPM packages in our projects, this is because it was required to install Webpack.
For production and CI testing we setup a new Docker image for transpiling assets. We took this approach to avoid installing Node.js. The image is set up in a bind mount to the projects directory, and it’s only invoked when there is a
webpack.config.js available in the root of the project.
Second step - Framework
After the initial stack was set up, it was time for us to choose a framework that we would use for bigger portions of our products’ front-end functionality. It was a big decision, as it needed to be something that the whole team was relatively comfortable with and would be used across multiple products in the future. After narrowing it down to Vue.js and React.js, we decided that the best course of action would be to timebox an implementation of a new feature in both frameworks and then compare the experiences at the end. We also made sure that the feature would be big enough to hopefully uncover any issues we might have with the frameworks, and to help us build up a list of pros and cons that we could bring to the rest of the team.
The results of the investigation led us to choose React over Vue. We found that the wider support and use of React.js made the community much larger than that of Vues. This was appealing for us as we are not a JS focused team, so more available training resources and blog posts will assist us when using the framework. Another reason for picking React over Vue was that the members of the team had more previous experience with React than Vue.js so by picking React here we saved time on training staff on Vue. The training issue was an important factor as we found Vue to have a lot of specific proprietary standards and practices. React on the other hand is much more aligned with the direction of ECMAScript as a whole, meaning we would require less framework specific training.
React - Tooling
Because React.js is such a flexible and open view library we needed to pick some other tooling to handle further tasks required, for example AJAX requests. For AJAX requests we decided to go with Axios. We chose Axios due to its wide usage and its active community and the native support for Promises was also big seller.
After implementing our new stack, we’ve found that feature implementation times have been reduced, and we have produced less bugs. The development team now plans to roll out our JS stack across all of our web projects. We also will be investigating the use of React Native for our mobile products.