Roadmap to v4.0 - jQuery removal 🚀

[ghiscoding]

Roadmap to jQuery removal (v4.0)

This is a work in progress, though I did manage to get it all working in Slickgrid-Universal and even removed jQuery entirely on that project and it works, so I know it's achievable in SlickGrid as well (here). Thanks to @MarkoBL for starting the work and making the biggest work of migrating all the core files in PR #734 (however that did not include any Controls/Plugins, so these have to be migrated too in separate PRs).

We probably don't want to release a new version 4.0 without migrating everything to vanilla JS. The goal is to make it happen sometime around June of this year.

Note all PRs (Pull Requests) should be done against the next branch and all Cypress E2E tests must still be passing

Core (9/9, all done in PR #734, thanks to @MarkoBL)

• slick.grid.js
• slick.core.js
• slick.compositeeditor.js
• slick.dataview.js
• slick.interaction.js
• slick.groupitemmetadataprovider.js
• slick.remotemodel.js
  • skipped since this one since it's too specific to jQuery with JSONP
• slick.editors.js
• slick.formatters.js

Controls (3/3)

• slick.columnpicker.js (ref PR feat(plugins): remove jQuery from ColumnPicker & GridMenu controls #752)
• slick.gridmenu.js (ref PR feat(plugins): remove jQuery from ColumnPicker & GridMenu controls #752)
• slick.pager.js (ref PR feat(controls): remove jQuery from Slick Pager control #762)

Plugins (19/19)

• slick.autotooltips.js (ref PR feat(plugin): convert slick.autotooltips to vanillaJS #745)
• slick.cellcopymanager.js (ref PR feat(plugins): convert copy manager plugins to vanillaJS #746)
• slick.cellexternalcopymanager.js (ref PR feat(plugins): convert copy manager plugins to vanillaJS #746)
• slick.cellmenu.js (ref PR feat(plugins): remove jQuery from CellMenu & ContextMenu plugins #753)
• slick.cellrangedecorator.js (ref PR feat(plugins): remove jQuery from range decorator selection model #754)
• slick.cellrangeselector.js (ref PR feat(plugins): remove jQuery from range decorator selection model #754)
• slick.cellselectionmodel.js (ref PR feat(plugins): remove jQuery from range decorator selection model #754)
• slick.checkboxselectcolumn.js (ref PR feat(plugins): remove jQuery from CheckboxSelectColumn plugins #755)
• slick.contextmenu.js (ref PR feat(plugins): remove jQuery from CellMenu & ContextMenu plugins #753)
• slick.crossgridrowmovemanager.js (ref PR feat(plugins): remove jQuery from RowMove plugins #756)
• slick.customtooltip.js (ref PR feat(plugins): remove jQuery from slick.customtooltip plugin #747)
• slick.draggablegrouping.js (ref PR feat(plugins): convert slick.draggablegrouping to vanillaJS #744)
• slick.headerbuttons.js (ref PR feat(plugins): remove jQuery from header buttons/menus plugins #748)
• slick.headermenu.js (ref PR feat(plugins): remove jQuery from header buttons/menus plugins #748)
• slick.resizer.js (ref PR feat(plugins): remove jQuery from Grid Resizer plugin #758)
• slick.rowdetailview.js (ref PR feat(plugins): remove jQuery from Row Detail plugin #760)
• slick.rowmovemanager.js (ref PR feat(plugins): remove jQuery from RowMove plugins #756)
• slick.rowselectionmodel.js (ref PR feat(plugins): remove jQuery from range decorator selection model #754)
• slick.state.js (ref PR feat(plugins): remove jQuery from Grid State plugin #757)

Others

• get it all working in Slickgrid-Universal without jQuery
  • all unit tests & Cypress E2E tests are now passing and jQuery was entirely removed
• remove jQuery dependency from package.json
• remove jQuery from all possible examples (ref PR chore: remove jQuery from all possible examples #767)
  • remove jQuery/jQueryUI from /lib folder and replace with CDN for the examples that still require it (ref PR chore: remove jQuery from lib folder, replace with CDN #771)
  • maybe keep jQuery event drag but add their license into folder
• we should include PR feat: Enable hidden property for column. Adds example-column-hidden, method… #765 as well
• remove Map polyfill in slick.core.js since we will target ES6 and Map is supported (ref PR chore: remove Map polyfill since we will target ES6 #759)
• remove an eval() function that was added and could be a security risk
  • this came from X-SlickGrid merge, it serves no purpose and it is safe to remove
• look at replacing .grep() with vanilla .filter() if possible
• revisit all jQuery .each that were replaced by forEach since their previous return have to be replaced with continue
  • I think this one got covered by @6pac, checked if confirmed
• replace all Slick.Utils.template with createDomElement function (ref PR chore: convert html template to pure DOM create element with JS #766)
• bug found with grid scrolling
• possibly address this issue Not so much an issue. More a question: slick.grid.js updateColumnProps - if (!m.resizable).. #559
• this will also close the issue Remove jQuery objects from row cache #388
• add better aria accessibility (ref PR fix: add missing aria accessibility #764)
• add a note in issue Filling the whole window we loose the horizontal scroll #515 that filling the window with grid is a one time thing, the alternative is to use the Grid Resizer and we should add a note in the filling window example
• need to test if having column name with html code still works
• possibly look into the issue Unnecessary call to ensureIdUniqueness in slick.dataview.js:setItems #238
• look at using passive event listener with scroll, mouse, ... for better perf, see SO and MDN details (ref PR fix(core): set wheel/touch listeners to passive for better perf #769)
  • also probably better to add check if browser supports passive listener, see MDN and alternative
  • this will probably close issue Horizontal scrollbar scrolls in very small steps  #199
• close SlickGrid distribution bundles third-party dependencies without proper license attribution #393 since we no longer require any 3rd party, apart from SortableJS which is used as CDN and not part of /lib folder
• write up a Migration Guide and add link to homepage
  • we no longer provide jQuery (removed from lib folder, use CDN)
  • here's the Migration Guide v4.0
• provide another styling theme that is a bit more modern (for example vue-slimgrid is nice)

After new Release

• compare file sizes to show in migration
  • the size is expected to grow since we had to replace certain jQuery functions with our own implementation
  • I checked these 3 files in the root (core, grid & dataview) and the size grew by 18.9Kb but that's unminified
• the slickgrid.net website should also be updated to drop jQuery & jQueryUI
• look at closing some of the old PRs, and maybe old issues, that are no longer relevant
• remove jQuery from example4-model, we do it later because this example uses minified dist files

[ghiscoding]

@6pac so I think we're ready for a 4.0.0-beta, just run it on the next branch and make sure to use pre-release option, that should be either option 6 or 7. I will then be able to complete the testing in my libs and then write a Migration Guide

I also assume that your .env file has the correct GITHUB_TOKEN now, right?

[6pac]

OK, will make sure I'm not in a hurry or distracted this time ;-)

I did fix up the token, so I think we're good.

[ghiscoding]

@6pac alright, I used v4.0 beta from npm and it's all good on my side in my lib, so I went ahead and created PR #777 to merge the next branch to master, I left the PR open feel free to merge

[ghiscoding]

[ ] the slickgrid.net website should also be updated to drop jQuery & jQueryUI

@6pac can you look at this one since you are the only one who has access to that 😉 Just mention the jQuery & jQueryUI drop from your website.

Also note that I added the 2 new Examples you created under the Examples list, I've added them into the Other Features section... but there seems to be some issues with the new feature, I left a comment in PR #765

[6pac]

@ghiscoding working on it but also going to spruce up the site a bit

[6pac]

@ghiscoding done

[ghiscoding]

@6pac I'm ready for a final release of v4.0 whenever you are ready, I finished preparing the conversion of all my libs and I'm done testing. You could release without the hidden feature since I'm not using it yet, you could release without it and take your time to fix it later unless you think it's an easy fix. Cheers

[ghiscoding]

@6pac not sure if you saw my comment, but I'm done with all my testing and migration so could you proceed with a final v4 release? I'm not using the Hidden Column feature yet, but I probably will in the future, so I don't mind that it's not finalized just yet. Cheers

[6pac]

@ghiscoding yep I did but just very busy this week. Will fix bug and release tomorrow.