Re point 1: the problem being that the moment you introduce a specific data flow solution, the…
Evan You
35

> Re point 1: the problem being that the moment you introduce a specific data flow solution

There are a couple of ways:

  1. if you have a data-binding system, that can be used with custom elements.
  2. custom events — best option for communication interop. Everything should understand DOM events.
  3. Message passing can also be done by simplify invoking an element’s API

https://docs-05-dot-polymer-project.appspot.com/0.5/articles/communication.html is an oldie but goodie and highlights these different patterns.

> Re point 2: what happens when you have 20 custom elements that all depend on the same library

Rob didn’t touch on [HTML Imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/) in this post, but they solve this issue. Dependencies requested from the same URL will be de-duped, meaning the browser only loads them once. This is oe reason we encourage folks to use HTML imports for their dependencies. The 20 components race to load `<link rel=”jquery.html”>`. It gets included by any component that needs it, but only a single copy every appears on the page. Inside jquery.html, you’d load the actual lib:`<script src=”jquery.js></script>`.

Another benefit of this approach is not needing to use build tools that produce giant bundles of stuff. Many smaller resources is great for performance. The [“PRPL pattern”](https://www.polymer-project.org/1.0/toolbox/server) shows the power of http2, push/preload, and browser caching.

Show your support

Clapping shows how much you appreciated Eric Bidelman’s story.