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.
Small kits can be great, but there are certainly drawbacks that you would never even notice (or rarely notice) with a framework like Bootstrap.
- 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
el.addClass("btn btn-primary")
works in JQuery and fails in UmbrellaJS
$el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')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:
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);
There is a case where jQuery cannot use it since they aim to support SVG in all officially supported browsers, and classList doesn't work properly inside SVG in IE11 (Umbrella doesn't officially support SVG).
I tried refactoring a bit of the code of jQuery, but every thing I touched or changed a lot of tests failed; so I'd have to do a ton of work ignoring the tests and then fix a ton of bugs for a low chance of success (so it was not cost-effective relatively to improving Umbrella).
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?
You can't just exclude other functions like that.
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);
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.
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.
Do you know or use such a setup ?
Edit. Oh it does read react and classNames. I'm sold!