5 ms·

jQuery UI

41 points by otobrglez 2y ago

ognarb 2y ago
Blast of the past
pzmarzly 2y ago
The jQuery UI Datepicker widget[0] still remains my favourite date picker implementation, even though it sadly never supported mobile phones that well. Non-confusing design, live-reacting to user typing the date with keyboard, accessible, configurable, and offering 0-effort localisation in 60+ languages[1]. Is there anything like this in React world? [0] https://jqueryui.com/datepicker/#dropdown-month-year https://jqueryui.com/datepicker/#dropdown-month-year [1] https://github.com/jquery/jquery-ui/tree/main/ui/i18n https://github.com/jquery/jquery-ui/tree/main/ui/i18n
- troupo 2y ago
  That date picker is really good. > Is there anything like this in React world? None in any world, to be honest. It's amazing that most UI libraries go out of their way to make month and year selection as awkward and non-intuitive as possible.
  - kijin 2y ago
    It's as if today's UI designers can't imagine why someone would pick a date 20 years in the past. I wonder if they ever had to enter their own date of birth on a form somewhere. Surely most of them are over 20 years old?
    - paulryanrogers 2y ago
      My guess is they've never built a birthday input, and possibly never had to use one. Or rather their LLM has never.
  - skrebbel 2y ago
    Current top comment links to PrimeVue and I feel like it solves month/year selection very similarly (except not with a dropdown): https://primevue.org/datepicker/ https://primevue.org/datepicker/ This is the first UI component lib I checked. I'm curious what's missing here in your opinion?
    - troupo 2y ago
      It's not obvious you can click month/year. Unclear how to back out if you think you made a mistake. One of the better ones I've seen is https://vaadin.com/docs/latest/components/date-picker https://vaadin.com/docs/latest/components/date-picker
      - skrebbel 2y ago
        Fair! Thanks EDIT: ooh wow that Vaadin one is super nice indeed!
- miunau 2y ago
  Unless you require something special, just a regular <input type="date"> or datetime-local is a good choice these days. There's week and time types as well.
  - _mlbt 2y ago
    It’s amazing how far you can get with just HTML and a gentle sprinkle of CSS these days.
diggan 2y ago
Worth keeping in mind: > Please remember jQuery UI is in a maintenance state: we’ll make sure the library is compatible with new jQuery releases and that security issues are fixed but no new significant feature work is planned. We’ll also try to fix important regressions from jQuery UI 1.12.1; older long-standing bugs may not get fixed. Note that this does not affect jQuery Core which is still actively maintained. From the release notes of the latest release (October 30, 2024): https://blog.jqueryui.com/2024/10/jquery-ui-1-14-1-released/ https://blog.jqueryui.com/2024/10/jquery-ui-1-14-1-released/
phoronixrly 2y ago
Guys, didn't you get the memo? We're doing this differently now, we've replaced https://github.com/jquery/jquery-ui/blob/main/ui/widgets/tabs.js https://github.com/jquery/jquery-ui/blob/main/ui/widgets/tab... with the much better, much simpler, more readable and not at all depending on 42(!) modules (/s) https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/tabs/tabs.tsx https://github.com/tailwindlabs/headlessui/blob/main/package... What joy! (/s) // inb4 oh but you don't understand anything... it's declarative
- rob 2y ago
  Crazy how over-engineered the Headless UI one looks. Like they had a 5,000 word assignment but could only come up with 1,000 words and had to keep expanding and expanding to fit their quota. The import statements alone give nightmares.
  - phoronixrly 2y ago
    It's astonishing... It looks like it's not meant to be read by humans, let alone debugged or extended...
- floydnoel 2y ago
  what about the jqueryui example seems better to you? it's over 100 lines longer and seems less organized to me when looking over both. if you asked me to modify one of my choice to add a new feature i think the react example would be easier. is it just preference differences or am i missing something?
  - deleted 2y ago
    [deleted]
KronisLV 2y ago
I've been using the likes of PrimeVue (https://primevue.org/ https://primevue.org/), PrimeReact (https://primereact.org/ https://primereact.org/) and PrimeNG (https://primeng.org/ https://primeng.org/) because they attempt to give you a library of components that work well out of the box and have a similar API across multiple technologies: Vue, React and Angular, respectively. I feel like at some point I'll probably make a project with just jQuery and possibly jQuery UI for the sake of it: while what's there doesn't seem too flashy, it would probably work just fine for most web based CRUD needs. I might end up rediscovering up close why people moved to Vue/React/Angular in droves instead of jQuery, but honestly something that you just drop in and that works has a lot of appeal. No complex toolchains, no configuring a bunch of plugins and registering them with the app, no endless abstractions for state management and things about render loops to keep in mind, just a silly JS import and writing some schlocky code that still sorta works. I like to consider the UI of Kanboard as a good example. It's minimalist, but works great for what it is: https://kanboard.org/ https://kanboard.org/
- diob 2y ago
  I started working in a project using prime and the exposed api is just frustrating compared to MUI, at least for me. Feels like they take the idealistic view of things versus pragmatism.
- CharlieDigital 2y ago
  > ...might end up rediscovering up close why people moved to Vue/React/Angular in droves instead of jQuery Vue, React, and Angular are fundamentally MVC in disguise: a "controller" modifies some state (model) and on the next render cycle, the "view" is updated by the library/framework to draw the change. (Simplifying here to ignore details of the implementation like vDOM, components, etc.) Not so with jQuery. You draw the change directly. You can write a framework on top of jQuery to achieve something similar where a model/state gets updated -> detect the change -> jQuery to draw the change. (That might be interesting or perhaps something like this already exists.) In other words, in Vue, React, and Angular, you are discouraged from doing direct DOM manipulation; you always modify some state from which the framework applies the DOM changes and in jQuery, it's the opposite: you directly manipulate the DOM in reaction to some action. So the reason why people moved is that an MVC-aligned paradigm is ultimately more productive and a better abstraction than directly manipulating trees of rectangles.
rco8786 2y ago
Holy cow what year is it. I miss these days.
ErikAugust 2y ago
God forbid you used this now a days, other developers may get mad at you.
- cuttysnark 2y ago
  jQuery got the Nickelback treatment. Except I really did enjoy using jQuery, and only moved on because "the industry" was and I didn't want to be left behind. Looking back now, we all were lead down a path of needless complexity. Even thought I'd never use jQuery or jQueryUI professionally now, I still have a voice in the back of my mind that will pop up every now and then to say "well, if it's not gonna be complex or long-lived..." when something calls for a quick UI. I feel this way about Bootstrap and maybe now am old enough that I don't care if it upsets other developers.
  - bilbo0s 2y ago
    I don't know? Something like bootstrap seems so ludicrously non-complex that I don't think anyone competent should be getting upset with you for its use. I mean, OK fine, go ahead and fanboy/girl Vue/React/(Needless complexity api) whatever. But really? They get upset looking through code for an HTML5/bootstrap page? Something's not right there. That's when you start suspecting they can only work in one api, and likely don't even really understand css.
    - watwut 2y ago
      Bootstrap and Vue/React are orthogonal. People who use react use it with some css framework. Afaik bootstrap is getting replaced by tailwind. Which is actually pleasure to work with.
      - cuttysnark 2y ago
        > Afaik bootstrap is getting replaced by tailwind. By whom? Not by me. > Which is actually pleasure to work with. Have you heard of jQueryUI, by chance?
andybak 2y ago
The high water mark of front end development. Change my mind.
- cluckindan 2y ago
  As far as front end development is interpreted in the modern way — as in, building a means to deliver informational or experiential content as hypertext that is well structured, browser-agnostic, and universally human-and-machine-accessible — the high-water mark was somewhere in the early 1990’s, before mouseovers and animated gifs.
cjauvin 2y ago
For building a serious business CRUD app, to this day, I've never found a JS UI toolkit that matches the power and scope of the 4.X era of Ext JS: https://docs.sencha.com/extjs/4.1.3/ https://docs.sencha.com/extjs/4.1.3/
- thunderbong 2y ago
  I second this. The speed at which you could deliver stuff with ExtJs was truly remarkable.
deleted 2y ago
[deleted]
abraxas 2y ago
Looking at the selection of the controls, does any of this even require any JS or can all this be made with HTML/CSS only?
synergy20 2y ago
I recall jquery ui was not really responsive ready
TheAceOfHearts 2y ago
One of my first major projects was a Cordova Android app written with jQuery UI. It was incredibly hacky because I had no idea what I was doing. It worked well enough to let me pass the course though. I don't think there's any situation in which I would reach for this tool in the modern era. I'm honestly amazed that it has even managed to survive this long. But I guess if I had a working app already using this tool then there might not be a huge incentive to migrate away.
marpstar 2y ago
I spent way too much time building with this at Cartegraph. We utilized the jQuery UI Widget pattern[0] for pretty much any UI we wrote from 2011-2013 when we started utilizing Knockout instead. I have to believe most of those components are still in use in production today. They were when I left in 2022. [0]: https://api.jqueryui.com/jQuery.widget/ https://api.jqueryui.com/jQuery.widget/
- lemme_tell_ya 2y ago
  Same (2012 for us)! The Widget Factory was awesome for its time and not well advertised.
anonymous344 2y ago
never liked jquery ui, don't remember anymore even why. Was it maybe ugly or something. bootstrap was the way, and now quasar(vue) so awesome and easy
lemme_tell_ya 2y ago
In 2012, we build the front end of an application by making heavy use of the JQuery UI widget class and extending it for our own needs. That application is still running today largely unchanged on the front-end.
ulrischa 2y ago
The Jquery UI Combobox is still the best implementation I saw
ttfkam 2y ago
Party over, oops, out of time! Tonight we're gonna party like it's the year 2009!
dave333 2y ago
In retrospect the best feature of jQuery is its longevity - could have learned one framework and used it for 20+ years. Better than learning a new framework/toolset every 18 months which is the path I took. However React/Vue/Angular are now stable enough for long term use as well.

41 points by otobrglez 2y ago

Blast of the past

The jQuery UI Datepicker widget[0] still remains my favourite date picker implementation, even though it sadly never supported mobile phones that well. Non-confusing design, live-reacting to user typing the date with keyboard, accessible, configurable, and offering 0-effort localisation in 60+ languages[1]. Is there anything like this in React world? [0] https://jqueryui.com/datepicker/#dropdown-month-year https://jqueryui.com/datepicker/#dropdown-month-year [1] https://github.com/jquery/jquery-ui/tree/main/ui/i18n https://github.com/jquery/jquery-ui/tree/main/ui/i18n

troupo 2y ago
That date picker is really good. > Is there anything like this in React world? None in any world, to be honest. It's amazing that most UI libraries go out of their way to make month and year selection as awkward and non-intuitive as possible.
- kijin 2y ago
  It's as if today's UI designers can't imagine why someone would pick a date 20 years in the past. I wonder if they ever had to enter their own date of birth on a form somewhere. Surely most of them are over 20 years old?
  - paulryanrogers 2y ago
    My guess is they've never built a birthday input, and possibly never had to use one. Or rather their LLM has never.
- skrebbel 2y ago
  Current top comment links to PrimeVue and I feel like it solves month/year selection very similarly (except not with a dropdown): https://primevue.org/datepicker/ https://primevue.org/datepicker/ This is the first UI component lib I checked. I'm curious what's missing here in your opinion?
  - troupo 2y ago
    It's not obvious you can click month/year. Unclear how to back out if you think you made a mistake. One of the better ones I've seen is https://vaadin.com/docs/latest/components/date-picker https://vaadin.com/docs/latest/components/date-picker
    - skrebbel 2y ago
      Fair! Thanks EDIT: ooh wow that Vaadin one is super nice indeed!
miunau 2y ago
Unless you require something special, just a regular <input type="date"> or datetime-local is a good choice these days. There's week and time types as well.
- _mlbt 2y ago
  It’s amazing how far you can get with just HTML and a gentle sprinkle of CSS these days.

diggan 2y ago

Worth keeping in mind: > Please remember jQuery UI is in a maintenance state: we’ll make sure the library is compatible with new jQuery releases and that security issues are fixed but no new significant feature work is planned. We’ll also try to fix important regressions from jQuery UI 1.12.1; older long-standing bugs may not get fixed. Note that this does not affect jQuery Core which is still actively maintained. From the release notes of the latest release (October 30, 2024): https://blog.jqueryui.com/2024/10/jquery-ui-1-14-1-released/ https://blog.jqueryui.com/2024/10/jquery-ui-1-14-1-released/

phoronixrly 2y ago

Guys, didn't you get the memo? We're doing this differently now, we've replaced https://github.com/jquery/jquery-ui/blob/main/ui/widgets/tabs.js https://github.com/jquery/jquery-ui/blob/main/ui/widgets/tab... with the much better, much simpler, more readable and not at all depending on 42(!) modules (/s) https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/tabs/tabs.tsx https://github.com/tailwindlabs/headlessui/blob/main/package... What joy! (/s) // inb4 oh but you don't understand anything... it's declarative

rob 2y ago
Crazy how over-engineered the Headless UI one looks. Like they had a 5,000 word assignment but could only come up with 1,000 words and had to keep expanding and expanding to fit their quota. The import statements alone give nightmares.
- phoronixrly 2y ago
  It's astonishing... It looks like it's not meant to be read by humans, let alone debugged or extended...
floydnoel 2y ago
what about the jqueryui example seems better to you? it's over 100 lines longer and seems less organized to me when looking over both. if you asked me to modify one of my choice to add a new feature i think the react example would be easier. is it just preference differences or am i missing something?
- deleted 2y ago
  [deleted]

KronisLV 2y ago

I've been using the likes of PrimeVue (https://primevue.org/ https://primevue.org/), PrimeReact (https://primereact.org/ https://primereact.org/) and PrimeNG (https://primeng.org/ https://primeng.org/) because they attempt to give you a library of components that work well out of the box and have a similar API across multiple technologies: Vue, React and Angular, respectively. I feel like at some point I'll probably make a project with just jQuery and possibly jQuery UI for the sake of it: while what's there doesn't seem too flashy, it would probably work just fine for most web based CRUD needs. I might end up rediscovering up close why people moved to Vue/React/Angular in droves instead of jQuery, but honestly something that you just drop in and that works has a lot of appeal. No complex toolchains, no configuring a bunch of plugins and registering them with the app, no endless abstractions for state management and things about render loops to keep in mind, just a silly JS import and writing some schlocky code that still sorta works. I like to consider the UI of Kanboard as a good example. It's minimalist, but works great for what it is: https://kanboard.org/ https://kanboard.org/

diob 2y ago
I started working in a project using prime and the exposed api is just frustrating compared to MUI, at least for me. Feels like they take the idealistic view of things versus pragmatism.
CharlieDigital 2y ago
> ...might end up rediscovering up close why people moved to Vue/React/Angular in droves instead of jQuery Vue, React, and Angular are fundamentally MVC in disguise: a "controller" modifies some state (model) and on the next render cycle, the "view" is updated by the library/framework to draw the change. (Simplifying here to ignore details of the implementation like vDOM, components, etc.) Not so with jQuery. You draw the change directly. You can write a framework on top of jQuery to achieve something similar where a model/state gets updated -> detect the change -> jQuery to draw the change. (That might be interesting or perhaps something like this already exists.) In other words, in Vue, React, and Angular, you are discouraged from doing direct DOM manipulation; you always modify some state from which the framework applies the DOM changes and in jQuery, it's the opposite: you directly manipulate the DOM in reaction to some action. So the reason why people moved is that an MVC-aligned paradigm is ultimately more productive and a better abstraction than directly manipulating trees of rectangles.

rco8786 2y ago

Holy cow what year is it. I miss these days.

ErikAugust 2y ago

God forbid you used this now a days, other developers may get mad at you.

cuttysnark 2y ago
jQuery got the Nickelback treatment. Except I really did enjoy using jQuery, and only moved on because "the industry" was and I didn't want to be left behind. Looking back now, we all were lead down a path of needless complexity. Even thought I'd never use jQuery or jQueryUI professionally now, I still have a voice in the back of my mind that will pop up every now and then to say "well, if it's not gonna be complex or long-lived..." when something calls for a quick UI. I feel this way about Bootstrap and maybe now am old enough that I don't care if it upsets other developers.
- bilbo0s 2y ago
  I don't know? Something like bootstrap seems so ludicrously non-complex that I don't think anyone competent should be getting upset with you for its use. I mean, OK fine, go ahead and fanboy/girl Vue/React/(Needless complexity api) whatever. But really? They get upset looking through code for an HTML5/bootstrap page? Something's not right there. That's when you start suspecting they can only work in one api, and likely don't even really understand css.
  - watwut 2y ago
    Bootstrap and Vue/React are orthogonal. People who use react use it with some css framework. Afaik bootstrap is getting replaced by tailwind. Which is actually pleasure to work with.
    - cuttysnark 2y ago
      > Afaik bootstrap is getting replaced by tailwind. By whom? Not by me. > Which is actually pleasure to work with. Have you heard of jQueryUI, by chance?

andybak 2y ago

The high water mark of front end development. Change my mind.

cluckindan 2y ago
As far as front end development is interpreted in the modern way — as in, building a means to deliver informational or experiential content as hypertext that is well structured, browser-agnostic, and universally human-and-machine-accessible — the high-water mark was somewhere in the early 1990’s, before mouseovers and animated gifs.

cjauvin 2y ago

For building a serious business CRUD app, to this day, I've never found a JS UI toolkit that matches the power and scope of the 4.X era of Ext JS: https://docs.sencha.com/extjs/4.1.3/ https://docs.sencha.com/extjs/4.1.3/

thunderbong 2y ago
I second this. The speed at which you could deliver stuff with ExtJs was truly remarkable.

deleted 2y ago

[deleted]

abraxas 2y ago

Looking at the selection of the controls, does any of this even require any JS or can all this be made with HTML/CSS only?

synergy20 2y ago

I recall jquery ui was not really responsive ready

TheAceOfHearts 2y ago

One of my first major projects was a Cordova Android app written with jQuery UI. It was incredibly hacky because I had no idea what I was doing. It worked well enough to let me pass the course though. I don't think there's any situation in which I would reach for this tool in the modern era. I'm honestly amazed that it has even managed to survive this long. But I guess if I had a working app already using this tool then there might not be a huge incentive to migrate away.

marpstar 2y ago

I spent way too much time building with this at Cartegraph. We utilized the jQuery UI Widget pattern[0] for pretty much any UI we wrote from 2011-2013 when we started utilizing Knockout instead. I have to believe most of those components are still in use in production today. They were when I left in 2022. [0]: https://api.jqueryui.com/jQuery.widget/ https://api.jqueryui.com/jQuery.widget/

lemme_tell_ya 2y ago
Same (2012 for us)! The Widget Factory was awesome for its time and not well advertised.

anonymous344 2y ago

never liked jquery ui, don't remember anymore even why. Was it maybe ugly or something. bootstrap was the way, and now quasar(vue) so awesome and easy

lemme_tell_ya 2y ago

In 2012, we build the front end of an application by making heavy use of the JQuery UI widget class and extending it for our own needs. That application is still running today largely unchanged on the front-end.

ulrischa 2y ago

The Jquery UI Combobox is still the best implementation I saw

ttfkam 2y ago

Party over, oops, out of time! Tonight we're gonna party like it's the year 2009!

dave333 2y ago

In retrospect the best feature of jQuery is its longevity - could have learned one framework and used it for 20+ years. Better than learning a new framework/toolset every 18 months which is the path I took. However React/Vue/Angular are now stable enough for long term use as well.