How is JavaScript library bloat mitigated with Web Components?

Question

As someone who has tried to find a way to help content authors develop and maintain big web sites by creating (HTML) components for years, I\'m really excited to see web compone

Answer 1

Library bloat isn't necessarily mitigated by using web components, in fact you can trim down libraries by using custom builds (link is for Lo-Dash, but other popular libraries have build steps). Some kind of automation here can be very useful, i.e. a tool that can scan through your source code and generate a custom build based on what functions you are using.

I think with the rise of npm such libraries are becoming less and less relevant. Lo-Dash is a good example of this because its functions are being released on npm as standalone modules, but you also have things like Sizzle, the CSS selector engine that jQuery uses. If you look hard enough you can find lots of plugins that are being written without jQuery as a dependency, or it is in a project's roadmap to remove dependencies, or someone has already forked the project to remove its dependency on another library. For example, Exoskeleton, a completely underscore & jQuery free version of Backbone.

I don't think we're going to see another popular utility library such as jQuery or underscore; with npm we can simply choose the modules that we want, and fork projects that depend on these large libraries to rewrite them using only the modules that they need, or a completely dependency free version.

With AMD and requirejs, this is already a reality. You can define some source code's dependencies; instead of linking to monolithic libraries, in your code you can state that this component only needs for example microajax instead of the whole jQuery library:

define(['microajax'], function(microAjax) {
    microAjax("/resource/url", function (res) {
      alert (res);
    });
});

Check out the microjs website for more helper libraries like this one.

As far as web components go, I'd hope that the authors of these write their components in such a way so that they don't require massive libraries like jQuery that can do everything. And if they do I would also hope that I could fork them and trim out all the unnecessary parts myself. :-)

Edit: This 24ways article is a good primer on the rise of native JS features that will eventually supersede jQuery. It's worth mentioning that jQuery was written at a time where JavaScript implementations were wildly different; but as standardisation has risen and APIs have become more consistent, the need for a wrapper around native functionality has diminished somewhat. For example, now we have querySelectorAll:

// jQuery
$('.counter').each(function (index) {
  $(this).text(index + 1);
});

// Vanilla JavaScript
var counters = document.querySelectorAll('.counter');
[].slice.call(counters).forEach(function (elem, index) {
  elem.textContent = index + 1;
});