ggKbase Front End Upgrade

The front end code upgrade was a massive project that involved examining/studying, cleaning out, and modifying the entire front end code base as the following actions were taken:

  1. Replaced jQuery and underscore with native JavaScript
  2. Upgraded d3@v3 and d3@v4 (yes, we had 2 versions running) to d3@v6. Also upgraded dc-js (v2 to v4), a reusable charting library that relies on d3 and crossfilter.
  3. Replaced Webpack with Importmap (no more yarn and node_modules)
  4. Replaced Backbone with Hotwired Stimulus controllers to organize the JavaScript code

Motivations for these changes:

  • Modernize codebase. Reduce dependencies.
    • Since the arrival (2008) and maturity (2014) of HTML5, the modern browsers provide native JavaScript interfaces that can accomplish what libraries like jQuery and underscore provide.
    • Some major libraries that ggKbase depends on, like Bootstrap and Filterrific, no longer depend on jQuery.
    • All the JavaScript libraries in ggKbase can be replaced by native JS counterparts, such as select2 with tom-select, jQuery Sortable with SortableJS, DataTables with List.js.
    • Removing this one major dependency also prevents us from adding more libraries to or building on top of what will be phased out in the future.
  • Organize code. Improve maintainability.
    • The adoption of JavaScript framework like Hotwired Stimulus transformed a hacked version of Backbone controllers into a component-based code organization approach.
    • React was the initial choice, but Hotwired Stimulus is very lightweight and coupled with Rails very nicely to serve as a scaffold for the d3 codes that power ggKbase’s key features, such as the binning tool and the genome summary tool.
  • Improve performance.
    • Benchmarking will be forthcoming, but it is safe to assume that removing dependencies and updating libraries will lead to performance and security improvement.
    • Adopting Turbo also improves page loading performance.
  • Enable rapid development.
    • This is the ultimate goal: to increase development.
    • Now that all the code is cleaned up and upgraded, it’s time to build new features!