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: adumesny@40f7286

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