Gridstack.js: Consider dropping JQuery / typescript conversion ?

[SylvainCorlay]

Hello, thanks for this great project! I have used it for a couple of projects and it has been working really well.

I am curious on whether there had been discussions in the core team on dropping JQuery altogether in the gridstackJS project? I presume that a lot could be done with native DOM APIs now...

[adumesny]

for sure and one of the biggest topic!
(I had to push to drop lodash couple months back, and that was BIG 450k min lib!)

It would have been great to first drop Jquery-UI (which is dead) when the original owner added D&D plugin support back in 0.3.0 but that never happened even thought that was the plan...
@radiolips has a branch with some initial work to remove jq-ui but I'm not hearing back from him.

In parallel I looked at removing jq from the main code (we use and return that type in a lot of places so API would have to change as well) and using cash as 5k gzip replacement (I have a locally modified version that suit our needs) in the meantime before making all native calls. http://youmightnotneedjquery.com has good info on replacement, and with modern browser support there isn't really a need for jq.

I would love to have community contributions to make that happen ! if someone can do the drag&drop jquery-ui part, I could take care of the main code... I already reduced jqui to 1/5th it's size (custom build) and hide it in for now (bundle just what's used) but we need more.

[SylvainCorlay]

Thanks @adumesny this is really great news!

We use gridstack for the Voilà project which turns Jupyter notebooks into standalone web applications. We have a templating system that allows changing the behavior to e.g. transform a notebook in a slideshow, or into a dashboards. The voilà-gridstack template makes use of gridstack: https://blog.jupyter.org/voila-gridstack-template-8a431c2b353e

For 2020, we are considering to push voila-gridstack forward but the upgrade of gridstack to a more recent stack will be necessary. If we move forward with this plan, we should be able to put some cycles into GridstackJS and help with the upgrade. I'll keep you posted.

[adumesny]

That would be awesome as I don't have the bandwidth to do it all... but really want to remove JQ as well.
I just released 0.6.0 with a bunch of changes and plan on working on 1-column auto mode and custom ordering (PR from community) to support responsive design better with all the work I did in setColumn() and could tackle JQ next.

Would be nice to convert project to Typescript as well (and generate JS) to make it easier to maintain and take advantage of newer features.

[RSWilli]

Typescript would be a great change, since you can split up the code in modules.

But why do you want to change jQuery for cash? What (in your opinion) are the advantages over Standard JS/DOM Objects/Methods?

[adumesny]

cash would only be a temporary step (if at all) as there are a lot of calls and return signatures that would need changing.
All my work is done in typescript/Angular so I would prefer to convert it to TS using the type file I already include in the builds and remove JQ code as the code migrates over, but I have not looked into D&D replacement and hoping others can help.

[RSWilli]

if you explained what you mean by "D&D replacement", I would gladly help you.

would it be possible to include cash in the final bundle, so gridstack does not need any dependencies/global modules?

[adumesny]

we use jqueryUI today to do the drag, drop, resize, move, animation - that part of the code would have to be replaced FIRST before we can consider removing JQuery (which has easier replacement API and tiny libs like cash)

[adumesny]

FYI as a first step I will be dropping JQuery from all APIs and dependencies so you will only need to include gridstack.all.js and nothing else. It will be temporally used internally (due to jquery-ui drag&drop) until we can removed later, without app code change.

you will have to create a grid / item using these now:

var grid = GridStack.init( opt );
grid.addWidget('<div><div class="grid-stack-item-content">item 1</div></div>', nodeOpt );

I already have some of the changes done locally and will be releasing an official v1.0.0 soon with these changes. Please comment and let me know if you can help migrate the internal code, especially the drag&drop replacement which I have not looked at yet.

Update: branch https://github.com/adumesny/gridstack.js/tree/jq will contain the "remove jquery" work mentioned.
Update2: branch https://github.com/adumesny/gridstack.js/tree/typescript will contain the "typescript + remove jquery" work mentioned.

[adumesny]

@SylvainCorlay any update on your usage/requirement ?
@RSWilli any chance you might be able to help ?

Phase 1 is pretty much done (link above) and wouldn't mind getting another pair of eyes on some changes: https://github.com/adumesny/gridstack.js/commit/40f7286c35aaa77adc0b78864a165a6aa2a69dc2

I'll be posting on slack https://gridstackjs.troolee.com the NPM files to gather some early feedback and testing as well.

[RSWilli]

@adumesny I overlooked some of your code

I would suggest that you open a WIP Pull Request so the code changes can be discussed there

[adumesny]

@RSWilli I started phase 2 which is to convert to typescript as well. Decided to try that as I was getting some uglify only errors on gridstack.min.js (ok if Include regular .js) for my webpack app...

This is early as I have NOT compiled/tested the TS files yet (need to change build system) but didn't want to loose 4+ days of work!
new branch typescript https://github.com/gridstack/gridstack.js/tree/typescript

[RSWilli]

the issue I'm still having even in 1.0.0 is that when I'm bundling gridstack (using rollup), I get the Error:

Uncaught TypeError: $ is not a function
    at Function.GridStack.init (gridstack.js:2074)
    at HTMLElement.connectedCallback (grid.ts:55)

which is at the GridStack.init Fn:

GridStack.init = function(opts, elOrString) {
    if (!elOrString) { elOrString = '.grid-stack' }
    var el = $(elOrString).get(0);         // <---- Error
    if (!el) return;
    if (!el.gridstack) {
      el.gridstack = new GridStack(el, opts);
    }
    return el.gridstack
  };

I would really like to help with removing jQuery, but I think I need to wait until you finished the TS conversion, or we'll get conflicts

[RSWilli]

Thinking about a solution, I came up with the idea to modify the included Jquery file, so it would be an ES Module, that can be seamlessly bundled with gridstack

This could be a solution for the transition period to completely removing it

At the moment the window object still gets the $ from jQuery attached

@adumesny what do you think?

[RSWilli]

@adumesny I reviewed the commit https://github.com/adumesny/gridstack.js/commit/2d79abcf946c2624d8eaf6fd54a58908f5585d72 I don't think that I got everything, but I wrote some comments

[adumesny]

@RSWilli in your app did you include gridstack.all.js and not just gridstack.js ? that will include jquery+jqueryui+gridDragDrop code so window.$ should be there.

I didn't have runtime issues in my webpack Angular app with it (only issue is I had to add @types/jquery and @types/jqueryui for my TS code that has drag&drop code still using jqueryui).

Also I included gs in the module that uses it rather than on global scope
import 'gridstack/dist/gridstack.all.js';

If you have a suggestion on making an ES Module I'm all ear as I had to comment some of the imports - search for '[alain]' in 3 files as it didn't work in webpack vs browser include before. I want to hide the fact we use jq/jqui (bundle with code that needs it for now) while supporting those that do use jq to not have to include it again.

If you want to work on my typescript branch there is plenty left to do (building is next and likely can't work on it till this weekend.

[btecu]

Hopefully the _transitioning_ does not take a long time but it might be safer to also create a dist file that assumes jQuery is already provided by the application.

[adumesny]

@btecu dist/ folder contains all the parts. gridstack.all.js just happens to include all 5 files right now, The app can still use jquery/jqueryui from us, or import their own and include just the 2 gridstack js files. see https://github.com/gridstack/gridstack.js#migrating-to-v100 (jQuery Applications section)

drag&drop using HTML5 custom code will be the hardest.

[adumesny]

@adumesny I have experience converting JS codebases to TS. Are you looking for any help?

@mikehaas763 absolutely! the typescript branch has all the code converted into Ts classes and most methods should now have arg signatures and many of the code re-written to TS and take jquery away from main code but there is still more to do...

For one thing the karma tests are not running anymore (I changed .js entry to use .ts files for code coverage as well) and wondering if that something you might be more familiar with. Also I'm using webpack to generate a single gridstack.all.js and all the demos are finally working, BUT I'm also wondering if I should generate ES6 files or other format for other TS app to compile against (like my Angular8 based app I'm working on).

so yeah any help would be greatly appreciated!

Using this ticket to track issues/progress.

[Altraya]

Do you know approximately when it will be finish (sorry can't help here, I am pretty new in migrating things like that) ? Good luck, and you are going great :)

To know if I work on an other thing when waiting for the next release or if I use the script version ?
Since release 1.0 I am having trouble with jquery inside my project, your adding in the documentation helped, thanks :).

Some people are using the npm version since release 1.0 ? For me it's totally broken with my build.

[adumesny]

@Altraya

Do you know approximately when it will be finish (sorry can't help here...)

a lot longer without help! and yes you can help by donating as well (hint) I'm doing this on my own spare time...

my plan is to release a v2.0 typescript based version where all jquery code has been removed from gridstack.ts and moved to the drag&drop plugin - this is a LOT of work but getting close. later we can see about html5 or other drag&drop plugins.

Some people are using the npm version since release 1.0 ? For me it's totally broken with my build.

make sure you read the https://github.com/gridstack/gridstack.js#migrating-to-v100 and bottom section and file a bug if that doesn't work.

[capc0]

is there any beta version without the jQuery dependency out yet?
Thanks for your efforts

[adumesny]

@capc0 no, 2.0 isn't out yet but I'm still working on the typescript branch (what is 2.x) with a bunch of fixes as well - not working on main branch anymore as I want to switch now. I need to get back to packaging issues to publish it but could really use some help there...

[jaderson-araujo]

Hello @adumesny,

I know it's hard to predict a date, but can this version without JQuery take a long time yet?

Thanks for your work!

[adumesny]

@jaderson-araujo I haven't seen your contribution to this project (time/code or $ - there is a donation button in case you missed it) - this has been an enormous amount of work (many times over the original owner contributions) and yet people expect it to just be done...
Hoping to release 3.0 during the holidays when I have more time to finalize things and fix remaining issues...

[SylvainCorlay]

@adumesny btw, I take this occasion to say how grateful we are for your work on gridstack.

[adumesny]

@SylvainCorlay good to hear you are still hanging around as you started this thread... but still waiting on that help :)

[adumesny]

very happy to say this is finally done with release of v3.0.0 - yeah!