Better JS dependency management with yarn

Until recently there were three ways to introduce javascript dependencies in OFN:

  • use Gemfile and gem wrappers, for example, we use jquery-rails
  • add dependency source code to vendor/assets/javascript
  • add dependency to app/assets/javascripts/shared

We have now decided to introduce yarn to improve the way we manage javascript dependencies in OFN. https://github.com/openfoodfoundation/openfoodnetwork/pull/5200

This means we now have a fourth and recommended way to add dependencies to OFN:

  • package.json :tada:

If you want to add a new javascript dependency to OFN, all you need to do is to install yarn locally (npm install -g yarn), add the dependency to “dependencies” in package.json, run yarn install and commit the new package.json and yarn.lock files :+1:

Meanwhile we should also move current dependencies from Gemfile and vendor to the package.json file, this will resolve two problems:

  • lots of js code in /vendor and app/assets/javascripts/shared (quite a few of them dont have the version specified)
  • rails gem wrappers of js dependencies are very usually outdated

I’ll make a summary here of the current state:

  • Gemfile ‘angularjs-rails’, ‘1.5.5’
  • Gemfile sass
  • Gemfile sass-rails
  • Gemfile ‘angularjs-file-upload-rails’, ‘~> 2.4.1’
  • Gemfile gmaps4rails
  • Gemfile ‘coffee-rails’, ‘~> 4.2.2’
  • Gemfile compass-rails
  • Gemfile foundation-icons-sass-rails
  • Gemfile ‘momentjs-rails’
  • Gemfile ‘foundation-rails’, ‘= 5.5.2.1’
  • Gemfile ‘jquery-migrate-rails’
  • Gemfile ‘jquery-rails’, ‘3.1.5’
  • Gemfile ‘jquery-ui-rails’, ‘~> 4.2’
  • Gemfile ‘select2-rails’, ‘~> 3.4.7’
  • vendor angular-backstretch.js
  • vendor angular-flash.min.js
  • vendor angular-google-maps.min.js
  • vendor angular-scroll.min.js
  • vendor autocomplete.min.js
  • vendor bluebird.js - this is a dependency of angular-google-maps.min.js
  • vendor css_browser_selector_dev.js
  • vendor equalize.js
  • vendor handlebars.js - no version!
  • vendor jquery.adaptivemenu.js
  • vendor jquery.cookie.js
  • vendor jquery.horizontalNav.js
  • vendor jquery.jstree
  • vendor jquery.powertip.js
  • vendor jquery-ui-timepicker-addon.js
  • vendor jquery.vAlign.js
  • vendor leaflet-1.6.0.js
  • vendor leaflet-providers.js
  • vendor lodash.underscore.js
  • vendor modernizr.js
  • vendor responsive-tables.js
  • vendor textAngular.min.js
  • vendor textAngular-rangy.min.js
  • vendor textAngular-sanitize.min.js
  • shared assets angular-local-storage.js
  • shared assets angular-slideables.js
  • shared assets jquery-1.8.0.js
  • shared assets mm-foundation-tpls-0.9.0-20180826174721.min.js
  • shared assets ng-infinite-scroll.min.js
  • shared assets ng-tags-input.min.js

All these 14 gems plus 30 js files can be removed and simply added to package.json as a dependency.

2 Likes

To start this process I picked momentjs: move it from Gemfile to package.json.
The latest momentjs version available in the gem wrapper was 2.20, by moving to package.json we can now upgrade to the latest 2.28 :+1:

The PR: https://github.com/openfoodfoundation/openfoodnetwork/pull/6049

I have now created an epic to represent this work of migrating things to package.json.

I just found an extra advantage of using yarn. We get automatic dependabot alerts on github about security vulnerabilities! I just found through dependabot alerts that we do have 2 JS dependencies (they come from karma which is a dev dependency, so, not a serious problem) that have high severity security issues. This led me to create this issue to upgrade karma: https://github.com/openfoodfoundation/openfoodnetwork/issues/6162

1 Like