Eliminate Dependency on jQuery

[martindale]

The dependency on jQuery is largely unnecessary, and this library would be much smaller and even more performant if it were to find more specialized tools to implement the features that jQuery currently provides.

[jlukic]

We're using all the toolkit provided in jQuery. There may be a way to roll with Zepto, but I haven't had a chance to check it out. Most of the stuff is pretty necessary for our project, selector engine, dom insertion, etc.

[sethlivingston]

I wish you guys would reconsider opening this. jQuery is really slow, especially on smaller devices, and there is very little that jQuery does today that you couldn't do in a much, much smaller library. I encourage you to learn more about jQuery's diminished position in this industry. I would love to use Semantic-UI, but this is a show-stopper.

[FoxxMD]

👍

[ftaljaard]

would love to use Semantic-UI, but this is a show-stopper. Same here jQuery is a no go for me

[fgarcia]

I would love a good overview of the parts depending on jQuery. Semantic UI is a clear winner because of the amount of elements, but depending on jQuery sounds scary for users of libraries based on a virtual DOM such as React.

If I want to use Semantic UI without jQuery, which components will stop working?

I am ok with loading jQuery, but it seems more of an unnecessary burden every year that goes by.

[dobrych]

@fgarcia i've found a way to handle it in React by just applying conditioned css classes using React states, this enables widgets like menus, drop-downs, etc, but not animation
jQuery is definitely a burden for such a simple tasks like class manipulation and animation

[FoxxMD]

Also can't do validation of forms without jquery.

[tubia]

I really don't understand why to close this issue.
As many people here have pointed out, jquery is unnecessary burden.
I'm writing a small component for a legacy web application which will break if I use jquery. I implemented some semantic-UI elements but stopped when I found that the JS for an element like tabs requires jquery.
Well, I'll try to refactor a bit of the tabs.js or maybe I'll write a little tab switch on my own.
I still remain with a great question mark: do you use jquery only to select DOM elements and to make a few AJAX calls? Really?

[fgarcia]

I don't think removing jQuery is an easy task or even practical considering the large amount of widgets there are in Semantic-UI but it would be great having two versions of Semantic-UI, something like the "base" version and then the "extras" requiring jQuery.

[nicbarker]

+1 for removal of the jQuery dependency. The extra weight makes it just that much harder for someone to justify dropping semantic into a production project, especially if it's only for one or two components.

[sunnysingh]

jQuery dependency is a show-stopper for me as well. I understand the amount of time it would take to transition the project over to pure JS or a smaller library (see Bliss.js), but in the end it would attract a ton of developers. All the use cases for jQuery are honestly overshadowed by browser support for document.querySelectorAll() and fetch() although some polyfilling would be necessary. Hope this issue sees a re-consideration at least for the future of Semantic UI.

[amir-s]

I came across semantic-ui and was quite impressed by it, until I found that I need jQuery to get it to work. Specially if one wants to use semantic-ui with angular or react.

I would also suggest to drop jQuery. I'd be happy to help with that.

[djyde]

I used CommonJS so there was no global jQuery instance. But...

[hiteshjoshi]

+1

[brickyang]

This topic is closed on 22 Oct 2014. Today is 20 Mar 2016. The JavaScript and browser world has a huge processing. It's apparently jQuery is not necessary nowadays. I understand it's not a easy task to remove all jQuery dependency, but I think it's the right way.

I think the advice of two versions from @fgarcia is a good idea.

[bigzhu]

+1
Jquery is too big in the mobile, and semantic-ui had some css bug in some mobile browser like wechat x5 browser.
Need do this work as soon as possible

[jfarlow]

Semantic UI's ember module doesn't work with the new Ember Fastboot because of its jQuery dependency. It would be great to continue using the framework while gaining the benefits of fastboot.

[controversial]

Please reopen this. As everybody above has said, jQuery adds a lot of unnecessary weight to this. I lie this library over Foundation and Bootstrap, but I don't want to add jQuery to my project just for Semantic UI

[avalanche1]

I reopen this since so many people have asked for this. And since Jack expressed his opinion 1.5 years ago, things might have changed since then. At least we should keep this open as a feature request.

[controversial]

Yay!

[jlukic]

Seems fair to leave it open, although this would be nothing short of a rewrite of all js components.

[controversial]

@jlukic How many of the components would require rewrite? How many are jQuery based, in short? I'd be happy to take a look at a few, but many are likely over my head.

[martindale]

I'm sure there are plenty of people who will want to take this on; perhaps we can start a milestone to track issues against?

[franciscolourenco]

Ok, just to clarify if I understood correctly:

1. Does the React version still use jQuery?
2. Is there a version which doesn't require React or jQuery?

[levithomason]

1. No. http://react.semantic-ui.com/introduction#jquery-free
2. Not that I know of.

Out of curiosity, what is the use case for excluding jQuery as a viable option?

[multivoltage]

Is still now jquery included as dependency? If I type $(selector) it works so I think yes.

[GuacheSuede]

#6109

[rhamedy]

I wanted to use Semantic-UI for a project and then I came across JQuery dependency and all a sudden it didn't feel right. I guess I will stick with Bulma for now.

[tomdavidson]

The intro claims to be JQuery free. Should this be closed? @rhamedy where did you find the JQuery dependency?

[necmettin]

No, actually the React integration is jQuery free. Semantic-UI is jQuery dependent: https://semantic-ui.com/introduction/getting-started.html check the HTML code towards the bottom. On 1 February 2018 at 23:59:20, Tom Davidson ([email protected]) wrote: The intro claims to be JQuery free. Should this be closed? @rhamedy where did you find the JQuery dependency? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kspeakman]

The primary way I use Semantic UI is in CSS only form with Elm. @jlukic has done a great job making nearly all elements controllable through CSS classes, which fits very easily into VirtualDom-based frameworks. Previously, the documentation did not make it obvious which classes to apply to control the behavior, so I would have to play with the controls on the site and inspect the DOM to see. But now the docs mostly have this information.

Aside from triggering animations with CSS classes (Transitions section), I can't think of an element that I had to avoid using because it required jQuery.

Edit: Some elements like Search/Rating still do not document the classes needed to control the states without jQuery.

[therealglazou]

I would support a de-jQuery-ification. Semantic UI is a superb library (I hate the word 'framework') I'd like to use inside a WebExtension we build but jQuery inside WebExtensions raises issues, some being quite painful.

Daniel (former W3C CSS WG Co-chair)

[morganbarrett]

I'm rewriting a fork to remove the jQuery dependency, it's about time someone did something about this mess. You can follow it's progress here:

https://github.com/morganbarrett/Vanilla-Semantic-UI

VIVA LA VANILLA

[pocesar]

do we have any plans for this? the issue was closed 4 years ago, would be good to rethink / revisit some "set in stone" ideas

[Atulin]

Don't think there are any plans for that. Unless guys who maintain FomanticUI want to surprise us 😄
SUI is, for all intents and purposes, one man's endeavor. I wouldn't count on anything that requires rewriting a large part of the codebase, be it removing jQ or making the theming system sane. In forks we trust!

[domenkozar]

@jlukic if people start contributing JS components without jQuery, would you accept PRs? I'd do it for dropdown.

Another Elm user, loving semantic UI and really the only thing that bothers me so much is jQuery.

[gerardmrk]

Is there an official list of components that utilises jQuery? I'd like to help remove the jQuery dependency, unless it's deeply integrated.

[Atulin]

Seeing how you initialize pretty much everything using the stuff like $(".dropdown"), I'd say everything requires jQ.

[morganbarrett]

@gerardmrk head over to vanilla semantic UI and contribute there

[domenkozar]

See fomantic/Fomantic-UI#319 (comment) for ambitious plans at Fomantic

[MichaelMandel26]

I was really looking forward to using Semantic-UI from the moment I heard about it, but JQuery is a real dealbreaker. Please consider removing JQuery as a dependency.

[alexboor]

2020
have been used semantic in several projects in the past.
Now starting a new one and have to find a way how import jquery to my beautiful and clean es6 project? It's painful, really.

[kspeakman]

@Dzefo @alexboor Please see my previous comment. Semantic UI is usable purely in CSS form. See npm package semantic-ui-css. Even the animations are controllable with declarative CSS classes, though you may want to keep animation state on your model to remove transient animation classes when done. (Although we use animate.css for animations, which is CSS only.) What could use some improvement here is documentation explaining how to use the current jQuery-specific sections as CSS only.

[hdasdoria]

@kspeakman What about modules like dropdown? I still haven't found a clean way to use dropdown on <select> element without jquery.

[kspeakman]

@hdasdoria You use the same technology that you are already using for handling button clicks, input changes, etc. If you are already using jQuery, then keep using it. Only the Semantic lib doesn't have to make you require it specially. All of the states are controllable with only CSS classes. But these are not well documented or rather are documented as "call jQuery in this way" instead of the actual classes used.

For drop-downs we use the plain select and onchange events (in React) and let the browser render its animations. Or we use the constructed drop-down with just onclick events on the individual items to handle value changes. Using "select" to construct an JS-based dropdown is just using select as a source of values but is actually rendering its own separate UI with divs. You could do that just as well as it could if you knew the exact classes to use and you would retain more control over it. And doing so is actually easier when using techs other than jQuery.