I submitted this 3 years back [1] when I was starting. But now I think it's finished and well polished, so I am resubmitting it. I am happy to say that I don't normally find bugs anymore and the bug reports have slowed down while adoption has skyrocketed [2] [3]
It follows loosely a subset of jQuery methods, but it adds some others where relevant for common JS patterns (.handle() == .on() + e.preventDefault()) and the existing ones are generally more flexible.
Looks interesting. How compatible with jquery is it? You say a subset, but is that an exact subset that would pass tests for those methods? Either way, well done!
No, no method would pass all of the tests for said method in jQuery. I believe a part of those tests in jQuery are retroactive to settle the behavior of very edge undocumented cases, which might be different in Umbrella.js.
I did in fact try to improve the size of jQuery, but the tests are too coupled to the internal behavior of the methods, even if undocumented and (potentially) unintended initially. So it was very difficult even to change the most basic things, let alone change the internal structure of the whole method.
With Umbrella JS I'm trying to get to somewhere closer to native Javascript than jQuery. See for instance the arguments of any looping function (follows similar to the native arrays), or how things like .addClass(name) [1] are thin wrappers around .classList.add(name) (but quite more permissive/flexible). So it will follow closer to classList behavior than to whatever is defined in jQuery's tests, which is a win-win IMHO (since it also makes for a much smaller size, compare to jQuery's .addClass(name) [2]).
Thank for npm-stat! I use it a lot and love it, see my other repos from my website (in my profile).
Not sure how much sense it makes for Umbrella JS though, since traditionally it'd be used under a CDN but now with webpack it's treated as another dependency. Indeed, the CDN has remain constant-ish but the npm one has grown quite a bit in the last year.
Feel free to use Umbrella JS and ask me any question!
Yeah, right. I thought I still had jQuery in there and thought about replacing it. But now as I looked at the code I realized that it's already mostly using Vanilla JS.
This looks pretty great - I really like the look of Picnic, the author's lightweight (10KB) bootstrap alternative as well: https://github.com/franciscop/picnic
Thanks! I have two other libraries (besides Umbrella JS) that I really care about: Picnic CSS [1] and Server.js [2]. I'll be trying to do some cleaning in my spare time, but both of those require humongous amounts of work to get to the quality level of Umbrella JS.
1. I went by the name and typed picniccss.com instead of picnicss.com and it didn't work. picnic-es-es does sound weird in one's head too.
2. On the website, you say '10kb' but should probably use '10kB'. The small-b is conventionally used to indicate bits and the capital-b is used to indicate bytes.
I don't want to be "that guy", but haven't most people moved on to something like Vue instead of manipulating the DOM directly? Every developer I've worked with learned the basics of Vue quickly (less than a day) and marveled at how great it was compared to manipulating the DOM through jQuery (or something similar like Umbrella JS). But sure, there are edge cases where jQuery and similar libs still serve a purpose.
Vue and React make sense for large SPA-style applications, but I often find myself wanting to drop a few lines of JavaScript onto a page to implement something simple without pulling in a massive framework dependency that requires a webpack compile step.
You don’t have to use webpack with vue. Only if you want single file components. You literally just include in script line and you can use vue. No harder than jquery.
jQuery is 84 KB minimized, while Vue is 85 KB. Not much of a difference (although, granted, Umbrella JS is notably smaller). You don't necessarily need Webpack for Vue, you can just include Vue in a script tag and write your code.
But it’s also about abstraction overhead. You wouldn’t bring in Vue to add a Select All button that checks a bunch of checkboxes.
You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
You might use VUE for that if you need it to work across pages/tabs and use a state/store like vuex to maintain the state of the checkboxes....or the react equivs...I mean you can use localStorage..but I prefer vuex.
> Vue and React make sense for large SPA-style applications
Agreed, but I want to point out that modern, large SPA-style app architecture and jQuery are not necessarily mutually exclusive. jQuery might not work with React and Vue, but it can work alongside other frameworks just fine (yep, without manual DOM manipulations).
jQuery offers utility beyond ensuring your code runs the same across different browsers. For instance, I've yet to see another `replaceWith` as concise as what jQuery offers or DocumentFragment generation as expressive as this: `$("<div>hello world <span>foo bar</span></div>");` For those two examples, the alternatives listed on http://youmightnotneedjquery.com/ are either very verbose or do not mimic the full functionality offered by jQuery.
Where I work we've built an in-house JS framework inspired by React and Vue but that "plays nicely" with our jQuery legacy codebase. The framework evens uses jQuery at it's core for UI state management and DocumentFragment generation. Re-factoring our jQuery legacy code is a breeze when compared with re-writing it to conform to React or Vue standards. We write modular and consistent components with `this.props`-style state management, one-way data binding, and zero manual DOM manipulations while still using jQuery.
TLDR: jQuery offers utility beyond manual DOM manipulations and smoothing out browser differences. When used appropriately, it still has a place in modern JS component architecture.
Vue is VERY much an easy drop in for small things..I've totally started replacing it wherever I'd otherwise have used jquery... and I can't say I'm sorry I have. But all my projects use laravel on backend, and laravel has webpack/vue baked in so there's really nothing I need to configure for it to work, too much..a little tweaking in the app.js file..that's all.
Not all of them. There are still plenty of sites that aren't SPAs, especially those built with CMS' like WordPress, Drupal and Joomla (or various forums, wikis, etc). In those cases, you don't want to have to redo the whole frontend in React or Vue, you just wanta simple way to manipulate DOM elements for things like a dropdown menu or modal or what not.
Something like this may work fine for that purpose. There are still thousands or millions of websites that don't act like an SPA/
According to this website [1] jQuery is still used by over 70% of websites. I have built production sites in extjs, Dojo, Angular, React etc. but nothing beats the fun of throwing up a quick website in jQuery and Bootstrap. Its even more fun with es6 now! I am looking forward to where jQuery and other DOM manipulation libraries go in the future.
[1] https://w3techs.com/technologies/details/js-jquery/all/all
Spot on! I'm a ReactJS developer by trade, but when doing side projects, I still use jQuery from time to time, especially if the client is not that state-heavy. I know I can make do with fetch, querySelector/All and the like, but I'd rather take the convenience.
Yep, exactly. I use Umbrella JS (author here!) for most side projects. I only reach for React for SPA and state-heavy projects. These cases with jQuery (or Umbrella JS) is tricky because while you can do it with template strings, you don't get the modularity, build tools and it's difficult to protect against XSS.
You have to be very, very careful with .html(...) and only for that reason sometimes React is worth it, specially with SPA. But for small-to-mid sizes projects, Umbrella JS FTW!
There are tiny alternatives to React that support JSX syntax. This library is better when you want to be "closer to the metal":
https://github.com/wisercoder/uibuilder
Just to balance the "70% of websites" number, I've worked on a number of websites where there was still some legacy jQuery floating around, but where all new development is expected to happen in a modern framework like React, and new code using jQuery would be unlikely to pass code review. Or, perhaps, where jQuery is legitimately used as part of the occasional escape hatch when you can't use React for some technical reason, but is discouraged and only used with careful scrutiny.
I suspect that if you refined it to "How many new websites in the last year use jQuery as their primary UI library?", the number would be much lower.
For the other points, the other comments are quite spot on.
Load speed:
Umbrella's 2.5kb loads well under the rule-of-thumb size of a single packet of 14kb [1], so you have to do a single roundtrip for that [2]. In this 3rd party test [3] it takes ~200ms to load the whole Umbrella JS. JQuery weights ~30x more kb, so there are several packets sent, which makes it load in ~2s in the same test.
Not to mention parsing and running all that extra JS.
Heck, I regularly bundle my whole JS in a single file and thanks to Umbrella JS tiny size the whole thing weights well under 14kb. It loads in a snap.
it's definitely less used nowadays, partially because vue/react take care about a lot of work themselves, but also partially because virtual DOMs and component scopes make it complicated to work with DOM directly. I often run into little eye-candy things that jQ could take care of efficiently in a few lines of code, but because of everything else you end up building Animation components and HOCs instead that are in the end much more complex...
Not only that, a code comment on the homepage refers to "ajax" rather than "AJAX". And would you believe that in the page copy, "JS" isn't in an <abbr> tag? The nerve of some people!
English is my 3rd language so please forgive some typos and inaccuracies like these. I understand that these are similar for some people as when I see people using "their" when they mean "they're".
I agree it looks less professional, so I'll try fixing those. Is there any other bit that sounds off?
Edit: That should be fixed! Also a couple of missing `css` => `CSS`, `umbrella` => `Umbrella`, etc.
Thank you for the quick fix. And no, I don't go crazy over grammar or spelling (English is my second language as well). I think the website looks pretty cool and well written overall.
+1. Using "OCD" casually to mean "things that annoy me when maybe they shouldn't" is a bit insensitive to people with real diagnosable OCD. Elements of OCD, like intrusive thoughts, are present in almost everyone, but usually the term "OCD" is reserved for cases where it has a significant negative impact on life.
jQuery is a library of shortcuts. Everything you can do using jQuery you can do without jQuery, but that's like saying everything you can do in Excel you can do with just a Calculator app. Yes, it is possible, but why would you want to?
When you do things like drag & drop and interactive resize you have to query DOM to get position and sizes, and perform hit detection, and you have to manipulate DOM directly. jQuery is very convenient for these kinds of things.
I know exactly what jQuery is. I’ve used it happily for years on many projects. However it is completely obsolete in 2018 for anyone that does not need to support IE8.
I may be mistaken, but sounds like you are referring to browser compatibility not being a good reason to adopt jQuery anymore.
But like the parent said above, there's more to jQuery than just getting browser compatibility - it's an abstraction for UI concepts that would require writing a ton of low level JS otherwise.
I maintain a number of widgets with jQuery for an edtech app with drag and drop, works on mobile and desktop, etc.
I'm starting to rewrite those to Vue and I've found the main limitation is not the DOM access (since you can use refs) but the model logic. In Vue all data is made of primitives or dumb objects, you can't really use classes for reactive data.
jQuery is still very prevalent, especially on the legacy-web (those websites you rarely visit, but litter the web like a plague). Think e-commerce sites, Wordpress sites, spam blogs (splogs), e-book shops - they mostly use jQuery to sell you random crap you don't need, and jQuery was added on last minute to add some sheen to an otherwise plain site.
From time to time, I need to make small interaction JS, which using React or Vue will be super overkill. Instead of using vanilla JS, I just use jQuery.
The biggest issue is that "small JS interaction" end up in an app. In that case, I will re-write in React.
Ie6 was is a piece of shit and a security issue. it needs to go away. I would go so far as saying websites should actively block that browser. I don't care about some legacy compatible bullshit. Ie6 was a scourge on the internet. If some corporation doesn't want to upgrade, that's their problem.
Why would you support a legacy system that currently supports just .21% of web traffic? There is no reason to do that and you are just creating more work for yourself with very, very little payoff.
Zepto is intended as a full clone; objectives are quite different from Umbrella, so I don't see an overlap here since size is not such a priority. Using plugins? Zepto. Care about size a lot? Umbrella. Flexible methods? Umbrella.
About Cash, first Umbrella is about 0.5x the size. The version 1.0 of both were released the same year (Umbrella a bit later), so back then it was not established. Then, there are these differences (opinionated ofc):
Better documentation in Umbrella. As an example, let's see the .addClass() in Cash [1] and in Umbrella [2]. Umbrella has many input examples, a lot more flexibility in the arguments (functions, comma-separated, etc), practical explained examples and related methods. This holds true for every single method.
Better testing in Umbrella. Compare Cash tests [3] with Umbrella tests [4]; Cash has 663 LOC of testing while Umbrella has 2234 LOC, a 3.3x improvement. Not only that, but Umbrella has a public testing page so you can test it in any browser you want: https://umbrellajs.com/tests
Cleaner code in Umbrella. If you want to modify any method, it will be self-contained in `src/plugins/NAME/`. In there you will find the relevant documentation displayed from the readme.md, the relevant tests and the actual code. To modify Cash's addClass you'd have to chase down the code [5], the tests [6] and the documentation [1] while in Umbrella you'd only need to go to the plugin folder [7]
More methods in Cash. This is the one I've seen that seems nicer, since it supports many more methods. Still, Umbrella's objectives is to be the minimum useful set. .insert() is enough and there's no need for .insertBefore() IMHO, but that's just different opinions. Some people prefer to have the choice, so this one is for Cash.
Extra useful methods in Umbrella. .handle() is the common pair of .on() + e.preventDefault(). .size() returns an object with the size of the element like { width: 20, height: 20, top: 10, ... }.
Better methods in Umbrella. Examples: .append(), .prepend(), etc will clone events and values (if any) from the DOM. More functions accepted as arguments.
Uh? There is definitely no purposefully fake scrollbar, could you please share a screenshot and/or the device and browser you are using please? Ideally in Github as an issue: https://github.com/franciscop/umbrella/issues/new , but here is fine as well.
I believe hughes means: "when you click on an entry of the documentation, e.g. '.wrap' in the "Contents" you see a scrolling animation instead of just the entry you'd like to read."
So not "scrollbar" but "scrolling" as the result of the click, on the documentation page:
I'm one of those who have the problem with the animations in the UIs too. Believe or not some people get effectively a real sickness feeling just by looking at some specific movements, in my case that page manages to achieve that.
Ah I see, that makes sense. Unfortunately for me it's the opposite! These kind of animations helps me know where I am, if it jumps suddently without any notice I tend to not know the size/position I am in respectto the whole page.
78 comments
[ 3.1 ms ] story [ 151 ms ] threadIt follows loosely a subset of jQuery methods, but it adds some others where relevant for common JS patterns (.handle() == .on() + e.preventDefault()) and the existing ones are generally more flexible.
[1] https://news.ycombinator.com/item?id=10954191
[2] https://npm-stat.com/charts.html?package=umbrellajs&from=201...
[3] https://www.jsdelivr.com/package/npm/umbrellajs
I did in fact try to improve the size of jQuery, but the tests are too coupled to the internal behavior of the methods, even if undocumented and (potentially) unintended initially. So it was very difficult even to change the most basic things, let alone change the internal structure of the whole method.
With Umbrella JS I'm trying to get to somewhere closer to native Javascript than jQuery. See for instance the arguments of any looping function (follows similar to the native arrays), or how things like .addClass(name) [1] are thin wrappers around .classList.add(name) (but quite more permissive/flexible). So it will follow closer to classList behavior than to whatever is defined in jQuery's tests, which is a win-win IMHO (since it also makes for a much smaller size, compare to jQuery's .addClass(name) [2]).
[1] https://github.com/franciscop/umbrella/blob/master/src/plugi...
[2] https://github.com/jquery/jquery/blob/master/src/attributes/...
Not sure how much sense it makes for Umbrella JS though, since traditionally it'd be used under a CDN but now with webpack it's treated as another dependency. Indeed, the CDN has remain constant-ish but the npm one has grown quite a bit in the last year.
Feel free to use Umbrella JS and ask me any question!
[1] https://picnicss.com/
[2] https://serverjs.io/
1. I went by the name and typed picniccss.com instead of picnicss.com and it didn't work. picnic-es-es does sound weird in one's head too.
2. On the website, you say '10kb' but should probably use '10kB'. The small-b is conventionally used to indicate bits and the capital-b is used to indicate bytes.
You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
Agreed, but I want to point out that modern, large SPA-style app architecture and jQuery are not necessarily mutually exclusive. jQuery might not work with React and Vue, but it can work alongside other frameworks just fine (yep, without manual DOM manipulations).
jQuery offers utility beyond ensuring your code runs the same across different browsers. For instance, I've yet to see another `replaceWith` as concise as what jQuery offers or DocumentFragment generation as expressive as this: `$("<div>hello world <span>foo bar</span></div>");` For those two examples, the alternatives listed on http://youmightnotneedjquery.com/ are either very verbose or do not mimic the full functionality offered by jQuery.
Where I work we've built an in-house JS framework inspired by React and Vue but that "plays nicely" with our jQuery legacy codebase. The framework evens uses jQuery at it's core for UI state management and DocumentFragment generation. Re-factoring our jQuery legacy code is a breeze when compared with re-writing it to conform to React or Vue standards. We write modular and consistent components with `this.props`-style state management, one-way data binding, and zero manual DOM manipulations while still using jQuery.
TLDR: jQuery offers utility beyond manual DOM manipulations and smoothing out browser differences. When used appropriately, it still has a place in modern JS component architecture.
Something like this may work fine for that purpose. There are still thousands or millions of websites that don't act like an SPA/
It's as if those sites don't exist for the HN crowd, even though they make up the majority of the web.
Related: https://robots.thoughtbot.com/how-we-replaced-react-with-pho...
You have to be very, very careful with .html(...) and only for that reason sometimes React is worth it, specially with SPA. But for small-to-mid sizes projects, Umbrella JS FTW!
Sidenote: Anyway in my brain jquery/templates never made sense. I always wanted components, pass some arguments and get the component, self contained.
I suspect that if you refined it to "How many new websites in the last year use jQuery as their primary UI library?", the number would be much lower.
Load speed:
Umbrella's 2.5kb loads well under the rule-of-thumb size of a single packet of 14kb [1], so you have to do a single roundtrip for that [2]. In this 3rd party test [3] it takes ~200ms to load the whole Umbrella JS. JQuery weights ~30x more kb, so there are several packets sent, which makes it load in ~2s in the same test.
Not to mention parsing and running all that extra JS.
Heck, I regularly bundle my whole JS in a single file and thanks to Umbrella JS tiny size the whole thing weights well under 14kb. It loads in a snap.
Edit: early send
[1] https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tc...
[2] Excluding the TLS trip, which is common anyway.
[3] https://speakerdeck.com/mattclaffey/using-umbrella-js-for-mo...
Other than that, I don't see any reason to use jQuery (or something similar) in 2018.
> It is strongly influenced by jquery...
Please use jQuery instead, thank you.
I agree it looks less professional, so I'll try fixing those. Is there any other bit that sounds off?
Edit: That should be fixed! Also a couple of missing `css` => `CSS`, `umbrella` => `Umbrella`, etc.
https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_d...
“Ugh, it’s ‘Lego’, not ‘legos’! ‘jQuery’, not ‘jquery’!”
IMO the world needs more people who don’t give a shit.
When you do things like drag & drop and interactive resize you have to query DOM to get position and sizes, and perform hit detection, and you have to manipulate DOM directly. jQuery is very convenient for these kinds of things.
But like the parent said above, there's more to jQuery than just getting browser compatibility - it's an abstraction for UI concepts that would require writing a ton of low level JS otherwise.
I'm starting to rewrite those to Vue and I've found the main limitation is not the DOM access (since you can use refs) but the model logic. In Vue all data is made of primitives or dumb objects, you can't really use classes for reactive data.
The biggest issue is that "small JS interaction" end up in an app. In that case, I will re-write in React.
IIRC, one of the main selling point of jQuery is compatibility with browsers like IE6.
Umbrella JS supports Internet Explorer 11+, with some of the known bugs and wont-fix here: https://github.com/franciscop/umbrella#support-ie11
There is a polyfill to help here: https://github.com/franciscop/umbrella/blob/master/polyfill....
PS: I admit that it's hard to support IE6 when it's no longer supperted by MS itself.
I wouldn’t want to build a new website for IE6. I guess you’ll have a very hard time setting up a test environment with IE6 installed.
Zepto: https://github.com/madrobby/zepto
Cash: https://github.com/kenwheeler/cash
How is yours better?
About Cash, first Umbrella is about 0.5x the size. The version 1.0 of both were released the same year (Umbrella a bit later), so back then it was not established. Then, there are these differences (opinionated ofc):
Better documentation in Umbrella. As an example, let's see the .addClass() in Cash [1] and in Umbrella [2]. Umbrella has many input examples, a lot more flexibility in the arguments (functions, comma-separated, etc), practical explained examples and related methods. This holds true for every single method.
Better testing in Umbrella. Compare Cash tests [3] with Umbrella tests [4]; Cash has 663 LOC of testing while Umbrella has 2234 LOC, a 3.3x improvement. Not only that, but Umbrella has a public testing page so you can test it in any browser you want: https://umbrellajs.com/tests
Cleaner code in Umbrella. If you want to modify any method, it will be self-contained in `src/plugins/NAME/`. In there you will find the relevant documentation displayed from the readme.md, the relevant tests and the actual code. To modify Cash's addClass you'd have to chase down the code [5], the tests [6] and the documentation [1] while in Umbrella you'd only need to go to the plugin folder [7]
More methods in Cash. This is the one I've seen that seems nicer, since it supports many more methods. Still, Umbrella's objectives is to be the minimum useful set. .insert() is enough and there's no need for .insertBefore() IMHO, but that's just different opinions. Some people prefer to have the choice, so this one is for Cash.
Extra useful methods in Umbrella. .handle() is the common pair of .on() + e.preventDefault(). .size() returns an object with the size of the element like { width: 20, height: 20, top: 10, ... }.
Better methods in Umbrella. Examples: .append(), .prepend(), etc will clone events and values (if any) from the DOM. More functions accepted as arguments.
[1] Cash docs: https://github.com/kenwheeler/cash#fnaddclass-
[2] Umbrella docs: https://umbrellajs.com/documentation#addclass
[3] Cash tests: https://github.com/kenwheeler/cash/blob/master/test/index.js
[4] Umbrella tests: https://github.com/franciscop/umbrella/blob/master/docs/test...
[5] Cash addClass code: https://github.com/kenwheeler/cash/tree/master/src/attribute...
[6] Cash addClass tests: https://github.com/kenwheeler/cash/blob/master/test/index.js...
[7] Umbrella addClass folder: https://github.com/franciscop/umbrella/tree/master/src/plugi...
So not "scrollbar" but "scrolling" as the result of the click, on the documentation page:
https://umbrellajs.com/documentation
I'm one of those who have the problem with the animations in the UIs too. Believe or not some people get effectively a real sickness feeling just by looking at some specific movements, in my case that page manages to achieve that.
I'm pretty confused now, as it seems to be working.