Semantic-ui: Eliminate Dependency on jQuery - Tasklist

[avalanche1]

• [ ] Create a list of all jquery functions SUI uses on the left and their modern alternatives on the right.
• [ ] next task

[controversial]

Looks good. We can probably start with http://youmightnotneedjquery.com.

@avalanche1 How familiar are you with this codebase? Is jQuery mostly used for animations, or is it used for all kinds of DOM manipulation, etc?

[avalanche1]

I'm only a user of a few modules, not an active contributor. Jack is the expert here.
Skimming through https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.js I come to realize that it isn't a trivial task. We need some type of automation here.
Maybe a reference of all jquery API and check against semantic.js - which ones are present

[henri-hulski]

It could be worth looking what @hallister and @asvetliakov have done for eliminating the jQuery dependency in semantic-react.
There is also an interesting discussion about replacing jQuery with React based modules at jessy1092/react-semantify#20.

[hrstoyanov]

I was talking to @jlukic before about dropping jQuery from SUI ... it is basically not going to happen. The JS module code is heavily dependent on jQuery. I learnt to live with it.

[Ryuno-Ki]

What about migrating to jqLite first?

This way, the first step would be to replace DOM accessors. Angular users would benefit from it I guess.

[Assassyn]

Problem with migrating to jqLite is that it is possible to hit the problem of missing implementation.

It migth not be the easies but moving to vanila js or maybe TypeScript (my preference) seems like a proper way.

Looking at the code is all modules, splited into separet files, so taking module by moduels should be achivable. It might require to leave the jQuery wrapping until all work is done.

Edited:
changed TS to typescript.

[levithomason]

Adding our React implementation to this list, Stardust :) My previous comment on a related thread:

At TechnologyAdvice we are using https://github.com/TechnologyAdvice/stardust in production. We have 6 humans and 2 robots working on it so far. I spend the majority of my day job on Stardust.

I am rewriting the modules without jQuery. We first tried to keep SUI DOM manipulations in sync with React state through each of the library's lifecycle methods, in the end, this just was not realistic.

I've rewritten the Dropdown with selection, search, and complete keyboard navigation. You can try it out here. I will continue to move forward with all other modules as well. If any one is interested in assisting, let me know.

[Assassyn]

@avalanche1: I mean typescript, I have edited my previus post.

@levithomason: it is great, but what is a point of moving from jQuery to React? People which are using any other framework than React might have problems. I think that possible solution is to add a thin layer to allow the use of differenet frameworks, similair solution to angular ones.

[levithomason]

My comment was in regard to https://github.com/Semantic-Org/Semantic-UI/issues/3981#issuecomment-216186917

It could be worth looking what @hallister and @asvetliakov have done for eliminating the jQuery dependency in semantic-react.
There is also an interesting discussion about replacing jQuery with React based modules at jessy1092/react-semantify#20.

For those looking for a React implementation of SUI. Since no matter the choice of JS SUI uses for DOM manipulation, it will always be incompatible with React's virtual DOM.

[asvetliakov]

@levithomason Glad you're going fine with stardust :smiley:

[italomaia]

Moving to "react" would be kind of bad for a lot of people.
@Assassyn one could also use Flow instead of TS, which is less intrusive.

[levithomason]

To clarify, the React components are not intended to help non-react apps. They are required for React apps as vanilla JS and jQuery DOM manipulations do not work in React.

[13protons]

Maybe something tiny like https://umbrellajs.com/ (I'm not affiliated) could handle this. Umbrella is mostly jQuery compatible, and would not also bring on the pain of recreating everything jQuery had been doing.

@franciscop - any interest?

[franciscop]

@alanguir thanks for proposing my library and yes, I'd be really interested. Though I have to ask first, what is the reason to remove jQuery? And is jQuery available for people using the library or just used internally?

Umbrella's codebase is really modular though many modules are tightly coupled (to optimize for size) so you could just remove some parts if they are not needed. It stands at 3kb min+gzip right now. Some functions might also be missing so if it makes sense I'd be willing to implement them inside umbrella or as a separate file.

PS, great work with Semantic UI, I have known it for a while and I love it

[italomaia]

As chamadas ao jquery no semantic são estas:

1. $.Deferred,
2. $._data, (not really jquery)
3. $.address, (not really jquery)
4. $.ajax,
5. $.api, (not really jquery)
6. $.contains,
7. $.cookie,
8. $.data,
9. $.each,
10. $.easing,
11. $.events,
12. $.expr,
13. $.extend,
14. $.grep,
15. $.inArray,
16. $.isArray,
17. $.isEmptyObject,
18. $.isFunction,
19. $.isPlainObject,
20. $.isWindow,
21. $.merge,
22. $.removeCookie,
23. $.site, (not really jquery)
24. $.tab, (not really jquery)
25. $.test, (not really jquery)
26. $.trim,
27. $.visit, (not really jquery)
28. $.when

It also uses $.fn a lot.

I used this script to build the list:

import io, re, os
rs = set()
c = re.compile(r"\$\.\w+") 

for root, dirs, files in os.walk("."):
    for file in files:
        if file.endswith('.js'):
            path = os.path.join(root, file)
            with io.open(path, 'r', encoding='utf-8') as fs:
                data = fs.read()
                for m in c.findall(data):
                    rs.add(m)

Semantic-ui clearly uses very few jquery functions. Maybe lodash + axios + "some events library"? could supply all that semantic-ui needs with just enough fat to the side.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.