[janpieterz]

You could take a look at [1]. The sheer amount of edge cases and bugs they've got covered are incredible.

Small kits can be great, but there are certainly drawbacks that you would never even notice (or rarely notice) with a framework like Bootstrap.

[1] https://github.com/twbs/bootstrap/issues

[franciscop]

Partially agree. The big problem IMO is momentum in the code. While they do solve many issues, once a browser is not supported anymore the library doesn't get "cleaned up" to reflect it because it just works. So you end up with this stark difference (disclaimer: Umbrella is my own):

- jQuery's addClass(), 35 lines: https://github.com/jquery/jquery/blob/master/src/attributes/...

- Umbrella JS's addClass(), 5 lines: https://github.com/franciscop/umbrella/blob/master/src/plugi...

So the choice is either well-tested libraries that slows your users down so you'll lose a % of them, optimize the hell out of them so you'll "waste"* time, or use a smaller library which is a compromise between them you'll loose a tiny % of users who you don't support, but you have to invest some time to learn it.

It is not black and white, so luckily we have a choice here and different scenarios warrant for different libraries.

* I specify waste since it's probably something you already know and just have to do it; if you're learning it for the first time then it's not wasted at all

[dsp1234]

Speaking of "edge" cases:

el.addClass("btn btn-primary")

works in JQuery and fails in UmbrellaJS

[franciscop]

What do you mean?? It seems to work perfectly:

https://jsfiddle.net/sfmdc5yy/

In Umbrella JS, you select elements with u() instead of $() because the APIs are not totally compatible so it avoids confusion for people joining a project that uses the library. Did you find a bug? Is the jsfiddle example not working on your device?

[nilliams]

jQuery's addClass 'does more', it can also take a callback:

    $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')

[franciscop]

Sorry to dissapoint you but Umbrella also takes a callback! It just has more sane (ES6-compatible) arguments :)

u('a').addClass((el, i) => (i % 2 == 0) ? 'odd' : '');

See example: https://jsfiddle.net/r2f87hzk/

Not only that, Umbrella will handle many more class name separations compared to jQuery. All of these (and more) are valid:

u('a').addClass('a,b c', 'd'); // No typo here, four classes added

u('a').addClass(['a'], ['b,c', ['d']]); // Again no typo, 4 classes added

Of course you normally don't use this, but you might have the class list in an array or a comma-separated string or something else which makes it really convenient and it was basically for free as the method is really reusable. See the documentation:

https://umbrellajs.com/documentation#addclass

[nilliams]

Heh, props, I'm not disappointed, and yes that's a much better callback! But that is not implemented in the 5 lines of code you linked to is it? :)

[franciscop]

Nop, but if you want to be fair jQuery's addClass is also not implemented in those 29 lines of code, it also uses these: each, jQuery.isFunction, getClass and stripAndCollapse.

Umbrella's single eacharg() uses in exchange .each() (which is public-facing, so it really doesn't count) and .args(), which is private but used in MANY places through the code. At 11 lines for args(), I'd say proportionally it'd be 1-3 lines corresponding to addClass. So worst-case scenario it'd be the equivalent to 8 lines exclusive for a much more flexible function with no internal dependencies which is still alot less than jQuery's 29 lines with 3 internal dependencies and 1 external.

* I wrongly counted spaces in jQuery's function while I didn't in Umbrella

Edit: the magic for the size of Umbrella JS is really through heavy code reuse and modern API usage. For this example, el.classList.add(name);

[derimagia]

I can move all of those lines to a new function "addClassHelper" and then ta-da - 1 line.

You can't just exclude other functions like that.

[franciscop]

Copy/paste from another answer:

Nop, but if you want to be fair jQuery's addClass is also not implemented in those 29 lines of code, it also uses these: each, jQuery.isFunction, getClass and stripAndCollapse.

Umbrella's single eacharg() uses in exchange .each() (which is public-facing, so it really doesn't count) and .args(), which is private but used in MANY places through the code. At 11 lines for args(), I'd say proportionally it'd be 1-3 lines corresponding to addClass. So worst-case scenario it'd be the equivalent to 8 lines exclusive for a much more flexible function with no internal dependencies which is still alot less than jQuery's 29 lines with 3 internal dependencies and 1 external.

Edit: the magic for the size of Umbrella JS is really through heavy code reuse and modern API usage. For this example, el.classList.add(name);

[derimagia]

Doesn't matter what jquery vs umbrella is, if you're wrong from the start then everything you're basing your argument is also misleading. Not saying jQuery doesn't have more lines, but the reasons for it aren't going to be discussed if you use helper functions as your example.

[crucialfelix]

The biggest bloat is that for every component you are always sending all the css for every possible combination of feature that might be used on that component.

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scs...

.card-outline-warning .card-blockquote .card-footer / .card-header .card-footer &:last-child .card { > .list-group:first-child { .list-group-item:first-child {

etc. etc. It's 280 lines of source code (before you even run auto-prefixer)

Each one of these components repeats styling that other components will use. Because they want it easy to use so you just apply .card instead of individually composing all the style effects you want.

The other day I used semantic-ui, just added in a few components and it was 56k compressed. Because the component ships with support for all options, not just what you use.

[janpieterz]

True, all those variants to allow the developer flexibility.

That's why plugins like purifycss[1] etc are interesting. When properly used and configured, a developer has the full framework under his fingers, while not outputting anything unused to the users.

[1]: https://github.com/webpack-contrib/purifycss-webpack

[crucialfelix]

For that to really work we need a way for react components, Ng directives etc to export classes they use so that purify can parse them.

Do you know or use such a setup ?

Edit. Oh it does read react and classNames. I'm sold!