Skip to content

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

Jump to bottom Edit New page
Ghislain B edited this page Nov 10, 2022 · 18 revisions

Bye Bye jQueryUI... 👋🏻 welcome SortableJS 🚀

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 becomes totally optional, however SortableJS is the new minimum requirement, so make sure to install it (as shown below). We also created a new internal file, which is also a new required dependency, it is named slick.interactions.js which is replacing jquery.mousewheel.js and jquery.event.drag-2.3.0.js which are no longer required (the new file is much smaller and also brings touch support).

As yet another bonus, we now also include minified versions (with source maps) of all JS/CSS files, these new files will be located (and published) in the dist/ folder and will provide much smaller files.

Main Changes - Quick Summary List
  • replace jQueryUI with SortableJS
  • replace jquery.event.drag-2.3.0.js & jquery.mousewheel.js with a new file slick.interactions.js
    • note that the jquery.event.drag replacement should 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 purposely load jquery.event.drag which would then take priority
    • as for jquery.mousewheel.js it is no longer used anywhere, it was entirely replaced with slick.interactions.js
  • add dist/ folder to serve minified JS/CSS files

Why replace jQueryUI with SortableJS?

Prior to this new version, we required jQueryUI to be installed and that was even true for creating 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 the entire jQueryUI at 281Kb (js+css) just to get column reordering, we figured that it was a rather large request, don't you think? Some of you might reply, wait a minute that seems incorrect since we are also using jQueryUI for its Date Picker, Slider, Autocomplete & Draggable... and to which we could reply that indeed it was true but only partially and that was when the user decided to include Slick.Editors into their grids. Some other reasons to decide on removing jQueryUI could be that it is barely maintained and is quite outdated. Please note that you can still use jQueryUI if you wish to, but it is no longer required by default (however SortableJS is the new requirement).

jQueryUI Cons

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

SortableJS Pros

  • much smaller at 44Kb (min.js doesn't require any css)
  • touch friendly (mobile devices)
  • much smoother UX and better performance
  • more modern & written in pure JS without any dependencies

Changes & Alternative Libraries

The biggest drop in file size can be visible when creating a basic grid and the biggest reason is because we replaced jQueryUI, jquery.event.drop-2.3.0 and jquery.mousewheel.js with SortableJS & an in-house slick.interactions.js which itself is a tiny 250 lines of code (-50 lines of comments) that will take care of column resize, reordering, dragging & mouse wheel. On top of the huge drop in size, the latter brings touch support and will even work with cell & row selections (dragging) on touch devices.

Basic Grid

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

before size (js+css) after size notes
jQueryUI 250+31Kb SortableJS 44Kb
jquery.event.drag-2.3.0 10Kb slick.interactions.js (new) 4Kb if jQuery.event is loaded,
it will use its drag & drop instead of the one from slick.interactions.js
jquery.mousewheel.js 3Kb " " no longer used anywhere, you should remove it from your imports
Total 294Kb 48Kb
Grid with Editors

When creating grids with Slick.Editors use, we are showing below a list of possible 3rd party lib alternatives (which are all written in pure JS) which you can use to replace some or all of jQueryUI features (mostly for Slick.Editors), please note that these are all just suggestions and you can still choose whichever lib you want or even stick with jQueryUI, it's really up to you. The sizes shown below are all for minified versions (min.[js|css]) and as you can see if we sum up all alternatives, we are still much smaller in size (291kb vs 115kb which is 2.5x smaller). We can only assume that they'll be even smaller when GZip, even though we don't have the stats to prove that. Note again that nothing stops you from still using jQueryUI for Editors if it is still your preference (at least now, you have the choice).

before size after (with suggestions) size (js+css) notes/demo
jquery.event.drag-2.3.0 10Kb slick.interactions.js (new) 4Kb always required
jquery.mousewheel.js 3Kb " "
jQueryUI 250+31Kb SortableJS 44Kb
.. UI Date Picker Flatpickr 49Kb+15Kb (js+css) Slick.Editors.Flatpickr / online demo
.. UI Slider pure JS < 10 lines of code pure JS / online demo
.. UI Autocomplete Kraaden Autocomplete 5Kb+1Kb (js+css) no Editor created, see note below
Total 294Kb 118Kb
  • Note we modified Slick.Editors to support Flatpickr but we did not include the Autocomplete since it's not used as often (you'll have to implement it yourself). However, if you wish to see a demo of all of these alternative suggestions, you can take a look at Slickgrid-Universal - Example 12 which implements all of them and also uses SlickGrid 3.x (check the "Product" and other columns).

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 time and effort 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 of jQuery code in pure JS but that is an even greater task especially for an Open Source project like this one. If you want to get involved that would be awesome, and even if we don't tackle this, we still managed to lower the SlickGrid library footprint size and improve the user experience by adding libs that are more modern and improved user experience even with mobile/touch devices. If you're really concerned about jQuery's size, then you could maybe give a try to the jQuery slim version or simply wait for jQuery 4.x which is expected to be much smaller (it will drop a few legacy browsers support) and is expected to be released in the next few months as mentioned in this jQuery 4.x post.

Breaking Change - Draggable Grouping

Please note that the Slick.DraggableGrouping Plugin had its CSS file in the wrong folder (it was under /controls instead of /plugins where the JS file is located), this is now fixed, and both the plugin and its CSS are now under the same plugins/ folder 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 (*optional)

This new CSS file is mainly for demo purpose and the icons are expected to be different in every browser, which is why we provided it 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 pure JS

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 for Slick.Editors (ie, Flatpickr)

For a date editor, we suggest the use of the 3rd party lib Flatpickr and we also added a new Slick.Editors.Flatpickr to support it, and if you prefer to use something else, well the choice is yours and you can simply extend Slick.Editors to your needs (or even rewrite it entirely, it's up to you).

<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 now choose to use the new minified versions of all JS/CSS files (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 users might prefer to load SortableJS with import or require (instead of <script>), that works too but please be aware that you might also need to assign it to the global window object to make Sortable available in SlickGrid. You might have other ways to assign it globally with WebPack or Rollup, just remember to make it available globally so that SlickGrid can use it (note that SlickGrid will throw an error if it can't find it).

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
// window.Sortable = Sortable.default || Sortable; // in some case you might need to pull it from default

Live Demos

We modified nearly all examples to no longer use jQueryUI (unless it's jQueryUI specific, like accordions & tabs), take a look at these main Examples that were modified, and try the live demos

We removed jQueryUI from most Examples, however there are still some of them that still uses jQueryUI and like we said earlier you can still use jQueryUI if you wish to, the only difference is that it becomes entirely optional.

That's all for now and now it's time for you to give it a try 🚀

Add a custom footer

Navigation

SlickGrid Repo

Jump Start

Resources

Learning

Tests

Contact/Support

Clone this wiki locally