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

Major Change

Great news we no longer require jQueryUI in SlickGrid, we removed all associated code and replaced it with SortableJS. To be clear, you can still use jQueryUI if you wish to (there are still a lot of Examples still using it), the difference is that it is now totally optional, however SortableJS is the new dependency requirement so be sure to install it. Also as a new feature, we now include minified versions (with source maps) of all JS files, these new files will be located in the dist/ folder.

Main Changes Quick List

• replace jQueryUI by SortableJS
• replace jquery.event.drag-2.3.0.js by slick.interactions.js (new)
  • it works for at least 90% of use cases, the exception might be when you need to use jquery.event.drop-2.3.0.js
• add minified dist folder

Why replace jQueryUI with SortableJS?

Prior to this new version, we required jQueryUI to be installed, even for basic grids, but the fact is that the only piece we needed from it was jQueryUI - Sortable for column reordering. Considering the fact that we required to download jQueryUI at 281Kb (js+css) just to get column reordering, it was a rather large request don't you think? To this, you might reply, wait a minute we also use jQueryUI Date Picker, Slider, Autocomplete & Draggable... indeed that could be true but only when you decide to add Slick.Editors. So at for a basic grid, the end we ended up downloading the entire jQueryUI just to get the Sortable feature, which is one of the reason to replace jQueryUI. Again, please note that you can still use jQueryUI, it just won't be required anymore by default (however SortableJS is the new default).

jQueryUI Cons

• old, barely supported and rather large
• it doesn't support Touch very well (mobile devices)
• it is rather large at 250Kb (.js) + 31Kb (.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 both jQueryUI & jquery.event.drop-2.3.0 with SortableJS and slick.interactions.js which itself is a tiny 200 lines of code that takes care of column resize and dragging for both mouse/touch. On top of the huge drop in size, it also works with touch and even cell/row selection will work just fine on touch devices.

Basic Grid

Creating basic grids is where we get the biggest file size difference (646% 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)	1Kb
Total	291Kb		45Kb

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 253% smaller). It is probably much smaller with GZip which we are not showing here.

before	size (js+css)	after	size	demo
jQueryUI	250+31Kb	SortableJS	44Kb
jquery.event.drop-2.3.0	10Kb	slick.interactions.js (new)	1Kb
.. 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	291Kb		115Kb

For a demo of all these alternatives, take a look at Slickgrid-Universal which uses all these new alternatives.

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, but even if we don't tackle this, we still managed to lower our footprint size and improve user experience by adding libs and code that work a lot better with mobile touch devices.

---

Migration

Replace Scripts

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

Importing SortableJS

Some user might prefer to load SortableJS by import or require, that works too but you will also need to make sure it's assigned to the window object to make Sortable available in SlickGrid

import 'slickgrid/slick.core';
import 'slickgrid/slick.grid';
import Sortable from 'sortablejs';

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

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 it's a separate file and it is also why 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)

Flatpickr is a date picker library, there are plenty of other libraries you can choose from.

<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="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>