
Show HN: Umbrella JS, a 2.5kb jQuery alternative - franciscop
https://umbrellajs.com/
======
franciscop
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.

[1]
[https://news.ycombinator.com/item?id=10954191](https://news.ycombinator.com/item?id=10954191)

[2] [https://npm-
stat.com/charts.html?package=umbrellajs&from=201...](https://npm-
stat.com/charts.html?package=umbrellajs&from=2016-01-01)

[3]
[https://www.jsdelivr.com/package/npm/umbrellajs](https://www.jsdelivr.com/package/npm/umbrellajs)

~~~
brennebeck
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!

~~~
franciscop
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]).

[1]
[https://github.com/franciscop/umbrella/blob/master/src/plugi...](https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js)

[2]
[https://github.com/jquery/jquery/blob/master/src/attributes/...](https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L27)

------
simonw
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](https://github.com/franciscop/picnic)

~~~
franciscop
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] [https://picnicss.com/](https://picnicss.com/)

[2] [https://serverjs.io/](https://serverjs.io/)

~~~
pritambaral
Two suggestions, both slightly pedantic:

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.

~~~
postcss
are u joking?

------
throwawaysky9
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.

~~~
simonw
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.

~~~
throwawaysky9
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.

~~~
wild_preference
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.

~~~
gremlinsinc
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.

------
GuB-42
How does it fare when it comes to browser compatibility?

IIRC, one of the main selling point of jQuery is compatibility with browsers
like IE6.

~~~
franciscop
jQuery doesn't claim compatibility with IE6, they dropped it on jQuery 2.0 to
IE8+: [https://jquery.com/browser-support/](https://jquery.com/browser-
support/)

Umbrella JS supports Internet Explorer 11+, with some of the known bugs and
wont-fix here: [https://github.com/franciscop/umbrella#support-
ie11](https://github.com/franciscop/umbrella#support-ie11)

There is a polyfill to help here:
[https://github.com/franciscop/umbrella/blob/master/polyfill....](https://github.com/franciscop/umbrella/blob/master/polyfill.js)

~~~
kristianp
Thanks for those links. Also the latest jQuery now only supports Internet
Explorer: 9+

------
bufferoverflow
There are established tiny jQuery alternatives:

Zepto: [https://github.com/madrobby/zepto](https://github.com/madrobby/zepto)

Cash: [https://github.com/kenwheeler/cash](https://github.com/kenwheeler/cash)

How is yours better?

~~~
franciscop
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](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-](https://github.com/kenwheeler/cash#fnaddclass-)

[2] Umbrella docs:
[https://umbrellajs.com/documentation#addclass](https://umbrellajs.com/documentation#addclass)

[3] Cash tests:
[https://github.com/kenwheeler/cash/blob/master/test/index.js](https://github.com/kenwheeler/cash/blob/master/test/index.js)

[4] Umbrella tests:
[https://github.com/franciscop/umbrella/blob/master/docs/test...](https://github.com/franciscop/umbrella/blob/master/docs/test.js)

[5] Cash addClass code:
[https://github.com/kenwheeler/cash/tree/master/src/attribute...](https://github.com/kenwheeler/cash/tree/master/src/attributes)

[6] Cash addClass tests:
[https://github.com/kenwheeler/cash/blob/master/test/index.js...](https://github.com/kenwheeler/cash/blob/master/test/index.js#L57)

[7] Umbrella addClass folder:
[https://github.com/franciscop/umbrella/tree/master/src/plugi...](https://github.com/franciscop/umbrella/tree/master/src/plugins/addclass)

------
intellix
Angular Ivy hello world is 2.5kb as well

~~~
franciscop
That is a very early, highly experimental minimal demo from what I found...

------
trumped
oh good, maybe that will help reduce the general reliance on CDNs... (me
dreaming)

------
aphextron
Is anyone actually still using jQuery in a new project? I can’t think of a
single good reason to do so.

~~~
dagoat
You still need jQuery for Bootstrap

~~~
aphextron
Another great reason to never use Bootstrap

~~~
boubiyeah
Not sure why you get downvoted haha

------
Joyfield
KB != kb.

------
paradite
Slightly off topic, but I have this OCD that my brain hurts when I see people
use wrong capitalization for products.

> It is strongly influenced by jquery...

Please use jQuery instead, thank you.

~~~
franciscop
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.

~~~
paradite
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.

------
hughes
The fake scrollbar on the documentation page is infuriatingly nonfunctional.

~~~
franciscop
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](https://github.com/franciscop/umbrella/issues/new)
, but here is fine as well.

~~~
acqq
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:

[https://umbrellajs.com/documentation](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.

~~~
franciscop
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.

~~~
hughes
No, I really meant that the scrollbar was broken. I wasn't clickable or
draggable and was not a system scrollbar.

I'm pretty confused now, as it seems to be working.

