Skip to content

Major version 3.0 Removal of jQueryUI requirement (replaced by SortableJS)

Jump to bottom
ghiscoding edited this page Dec 12, 2022 · 44 revisions

Bye Bye jQueryUI

Great news we no longer require jQueryUI in SlickGrid, we removed all associated code and replaced it with SortableJS. But just to be clear, you can still use jQueryUI if you wish to (there are still plenty of Examples using it), the main difference is that it is now totally optional, however SortableJS becomes the new required dependency so make sure to install it. We also created a new slick.interactions.js and no longer require jquery.event.drag-2.3.0.js and jquery.mousewheel.js.

Also as a bonus, we now also include minified versions (with source maps) of all JS/CSS files, these new files will be located in the dist/ folder and will be much smaller in file sizes.

Main Changes - Quick List
  • replace jQueryUI by SortableJS
  • replace jquery.event.drag-2.3.0.js & jquery.mousewheel.js by a new file slick.interactions.js
    • note that the jquery.event.drag replacement would typically work for 90% of the use cases, the exception might be when you need to use jquery.event.drop-2.3.0.js in other words slick.interactions.js will be used unless you load jquery.event.drag
  • add minified dist folder

Why replace jQueryUI with SortableJS?

Prior to this new version, we required jQueryUI to be installed, that was even for a basic grid, but the fact was that the only jQueryUI feature we needed in SlickGrid was jQueryUI - Sortable for column reordering. Considering the fact that we required the user to download jQueryUI at 281Kb (js+css) just to get column reordering, we figured it was a rather large request, don't you think? Some of you might reply, wait a minute that seems incorrect since we were also using jQueryUI Date Picker, Slider, Autocomplete & Draggable... which we could reply: indeed that was true but only partially and that was when the user decided to include Slick.Editors into their grid. Other reasons to replace jQueryUI could be that jQueryUI is barely maintained and is now quite outdated. Please note that you can still use jQueryUI if you wish, but it no longer be required by default (however SortableJS is the new default).

jQueryUI Cons

  • old and outdated, barely supported and rather large (probably because it was written when IE5 was a thing)
  • it doesn't support Touch very well (mobile devices)
  • it is rather large at 250Kb (min.js) + 31Kb (min.css)

SortableJS Pros

  • much smaller at 44Kb (min.js no css needed)
  • touch friendly (mobile)
  • much smoother UX and better performance
  • written in pure JS without any dependencies

Library Changes & Alternatives

The biggest drop in size can be seen when creating a basic grid since we replaced jQueryUI, jquery.event.drop-2.3.0 and jquery.mousewheel.js with SortableJS and slick.interactions.js which itself is a tiny 250 lines of code (-50 lines of comments) that takes care of column resize and dragging. On top of the huge drop in size, it also works with touch and even cell/row selection (dragging) will work just fine on touch devices.

Basic Grid

Creating basic grids is where we get the biggest file size difference (6.5x smaller) as you can see below (section on the right)

before size (js+css) after size
jQueryUI 250+31Kb SortableJS 44Kb
jquery.event.drop-2.3.0 10Kb slick.interactions.js (new) 4Kb
jquery.mousewheel.js 3Kb " "
Total 294Kb 48Kb
Grid with Editors

When creating grids with Editors, you can see below a list of possible alternative 3rd party libs (which are all written in pure JS) which you can use to replace some or all of jQueryUI features (like Editors), note that these are all just suggestions and you can still choose anything else or keep using jQueryUI. The sizes shown below are all minified versions (min.[js|css]) and as you can see if we add them all up, it is still much smaller in size (291kb vs 115kb which is 2.5x smaller). We can only assume this to be even smaller with GZip, even though we don't have the stats for that.

before size after (with suggestions) size (js+css) demo
jQueryUI 250+31Kb SortableJS 44Kb
jquery.event.drop-2.3.0 10Kb slick.interactions.js (new) 4Kb
jquery.mousewheel.js 3Kb " "
.. UI Date Picker Flatpickr 49Kb+15Kb (js+css) online demo
.. UI Slider pure JS < 10 lines of code online demo
.. UI Autocomplete Kraaden Autocomplete 5Kb+1Kb (js+css) see Slickgrid-Universal demo
Total 294Kb 118Kb
  • NOTE We modified Slick.Editors to support Flatpicker but we did not do the same for the Autocomplete (you'll have to implement it yourself). If you wish to see a demo of all of these suggested Editors alternatives, take a look at Slickgrid-Universal - Example 4 which uses all alternatives mentioned here.

What about jQuery?

So now you might think, great jQueryUI is no longer required so when will jQuery be dropped? Well... that's a whole different story, it would take a considerable amount of work to rewrite everything in pure JavaScript. Obviously the first step was to remove jQueryUI, which we just did, and the next step would be to rewrite all jQuery code in pure JS but that is an even greater task especially for an Open Source project. If you want to get involved that would be awesome, and even if we don't tackle this, we still managed to lower our footprint size and improve the user experience by adding libs and code that work a lot better with mobile touch devices.

Breaking Change - Draggable Grouping

Please note that the Slick.DraggableGrouping Plugin had the CSS styling sheet in the wrong folder (it was under /controls instead of /plugins where the JS file is), this is now fixed and if you use it then make sure to update your CSS file location.

- <link rel="stylesheet" href="../controls/slick.draggablegrouping.css" type="text/css"/>
+ <link rel="stylesheet" href="../plugins/slick.draggablegrouping.css" type="text/css"/>

Migration

Replace Scripts

- <script src="../lib/jquery-ui.min.js"></script>
- <script src="../lib/jquery.event.drag-2.3.0.js"></script>
- <script src="../lib/jquery.mousewheel.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+ <script src="../slick.interactions.js"></script>

Replace CSS Styling - simple unicode icons instead of jQueryUI icons

This new CSS file is mainly for demo purpose and the icons are expected to be different in every browser, which is why we provide this as a separate and optional file, in fact we strongly recommend that you use a separate icons library like Font-Awesome or anything similar.

- <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>

<!-- optional unicode icons -->
+ <link rel="stylesheet" href="examples-unicode-icons.css" type="text/css"/>

Convert jQueryUI Slider to pureJS

Sliders are super easy to convert into pure JS, a couple lines of code change HTML + JS will do it

- <div style="width:100px;display:inline-block;" id="pcSlider"></div>
+ <input style="width:100px;display:inline-block;" id="pcSlider" type="range" min="1" max="100" value="1">

- $("#pcSlider,#pcSlider2").slider({
-    "range": "min",
-    "slide": function (event, ui) {
+ var slider = document.getElementById("pcSlider");
+ var sliderCallback = function() {
      // ...
-      if (percentCompleteThreshold != ui.value) {
-        percentCompleteThreshold = ui.value;
+      if (percentCompleteThreshold != this.value) {
+        percentCompleteThreshold = this.value;
      }
    }
  });

Alternative lib Editors (ie, Flatpickr)

For a date editor, we suggest the use of the 3rd party lib Flatpickr, we added a new Slick.Editors.Flatpickr and if you prefer to use something well the choice is yours and you can simply extend Slick.Editors to your needs.

<head>
- <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
- <script src="../lib/jquery-ui.min.js"></script>
- <script src="../lib/jquery.event.drag-2.3.0.js"></script>
- <script src="../lib/jquery.mousewheel.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+ <script src="../slick.interactions.js"></script>
<script src="../slick.editors.js"></script>
<script>
var columns = [
-  {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
+  {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Flatpickr, sortable: true},
]
</script>

Minified Versions available

You can also optionally use the new minified versions (we also included source maps for debugging purposes)

+ <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+ <script src="../dist/slick.interactions.min.js"></script>
+ <script src="../dist/slick.editors.min.js"></script>

Import/Require SortableJS

Some user might prefer to load SortableJS with import or require (instead of <script>), that works too but you will also need to make sure it's assigned on the global window object to make Sortable available in SlickGrid.

import 'slickgrid/slick.core';
import 'slickgrid/slick.grid';
import Sortable from 'sortablejs';
// or via require()
// const Sortable = require('sortablejs'); 

window.Sortable = Sortable; // make it globally available through window object

Live Demo

We only modified a few examples that no longer use jQueryUI, the main Examples that you can take a look at are the following

We did not modify all Examples, there are still plenty of them using jQueryUI (even though it's optional, you can still use jQueryUI if you wish). If you want to help in removing jQueryUI from more Examples, we would certainly be happy to receive PRs (Pull Request) for that matter.

Clone this wiki locally