3 ms·

This is excellent! Thanks for sharing this. I wonder what even goes on behind other larger frameworks like bootstrap that makes them so huge.

nilliams 9y ago
As I explain in this comment [1], Bootstrap is modular, you shouldn't be using the whole thing. The simple answer why it is larger is because it offers far more features/components (and browser support is considerably better). [1] https://news.ycombinator.com/item?id=14121631 https://news.ycombinator.com/item?id=14121631
janpieterz 9y ago
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 https://github.com/twbs/bootstrap/issues
- franciscop 9y ago
  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/classes.js#L16 https://github.com/jquery/jquery/blob/master/src/attributes/... - Umbrella JS's addClass(), 5 lines: https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js 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 9y ago
    Speaking of "edge" cases: el.addClass("btn btn-primary") works in JQuery and fails in UmbrellaJS
    - nilliams 9y ago
      jQuery's addClass 'does more', it can also take a callback: $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')
      - franciscop 9y ago
        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/ 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 https://umbrellajs.com/documentation#addclass
        nilliams 9y ago
        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 9y ago
        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);
- crucialfelix 9y ago
  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.scss 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 9y ago
    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 https://github.com/webpack-contrib/purifycss-webpack
    - crucialfelix 9y ago
      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!

nilliams 9y ago

As I explain in this comment [1], Bootstrap is modular, you shouldn't be using the whole thing. The simple answer why it is larger is because it offers far more features/components (and browser support is considerably better). [1] https://news.ycombinator.com/item?id=14121631 https://news.ycombinator.com/item?id=14121631

janpieterz 9y ago

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 https://github.com/twbs/bootstrap/issues

franciscop 9y ago
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/classes.js#L16 https://github.com/jquery/jquery/blob/master/src/attributes/... - Umbrella JS's addClass(), 5 lines: https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js 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 9y ago
  Speaking of "edge" cases: el.addClass("btn btn-primary") works in JQuery and fails in UmbrellaJS
  - nilliams 9y ago
    jQuery's addClass 'does more', it can also take a callback: $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')
    - franciscop 9y ago
      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/ 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 https://umbrellajs.com/documentation#addclass
      - nilliams 9y ago
        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 9y ago
        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);
crucialfelix 9y ago
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.scss 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 9y ago
  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 https://github.com/webpack-contrib/purifycss-webpack
  - crucialfelix 9y ago
    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!