Polymer: v2.0 cdn: is there an official cdn?

Created on 17 Jan 2017  路  10Comments  路  Source: Polymer/polymer

hi, all,

is there an official cdn for at least the core parts of Polymer? E.g., the imports below are probably imported by everyone who ends up using Polymer:

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer-element.html">

From my own looking at https://www.webcomponents.org/element/PolymerElements/iron-list. The imports are hosted on, e.g.,:

https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-list/v1.3.15/iron-list/demo/index.html

Q:

  1. is there a technical reason why most of the examples suggest using bower to install all the deps. rather than linking to a cdn?
  2. would be safe to use URLs to import Polymer and/or element listed in the catalog?
2.x

Most helpful comment

Working! This is awesome!

All 10 comments

There is a polygit, which is widely used in jsbins etc. It is not meant to be used for production apps, though.

ok i found this:

~/dev/Polymer/docs $ git remote get-url origin
[email protected]:Polymer/docs.git
~/dev/Polymer/docs $ git branch
* 2.0-preview
  master
~/dev/Polymer/docs $ grep -R "polymer-element.html" .
./app/2.0/docs/devguide/registering-elements.md:    <link rel="import" href="bower_components/polymer/polymer-element.html">
./app/2.0/docs/upgrade.md:<link rel="import" href="bower_components/polymer/polymer-element.html">
~/dev/Polymer/docs $ 

and

~/dev/Polymer/docs $ grep -R polygit .
...
./app/2.0/docs/devguide/samples/name-tag/index.html:    <script src="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/webcomponentsjs/webcomponents-lite.js"></script>
...

I think I'll use that one but i'd like to get an official reply if this is going to remain, i.e., supported...

So, there is a technical reason. HTML imports dedup by URL. Using a conventional CDN doesn't work well, because all of the imports that reference a common dependency (for example, Polymer) need to use exactly the same URL, or you'll get two copies of the dependency.

Bower installs dependencies in a flat structure, which ensures that everyone can use the same URLs. There's a little bit of background on this here: https://www.polymer-project.org/1.0/docs/tools/polymer-cli#element-project-layout

many thanks for the reply :)

why can't we just checksum the files and do the dedup on the checksums of the files?
maybe i am missing something, if it's possible to encode the file in the url this might get around this problem:

  1. https://goo.gl/qQcvlH -> http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js, use the shortened url.
  2. my ideal approach, would be a meta flag on the HTML import that checksums that contents of the actual file and the engine can take to verify duplicate contents based on checksums.
  3. or regardless of the URL the HTML imports implementation would verify checksums instead of depending on the file urls, i.e., fetch both regardless but if the checksums are the same display only one file to the user.

i don't think any of these approach are computionallity expensive? especially when http/2 is used.

anywho, there's probably a reasonable answer for all these points, however, using URLs instead of files contents seems a bit ... strange.

Not much to add to Arthur's explanation. Because multiple different cdn'd elements could load shared dependencies from different locations, collisions can occur. We'll revisit this issue in the future when Polymer supports alternate loading mechanisms from HTMLImports.

Bower installs dependencies in a flat structure, which ensures that everyone can use the same URLs.

I'm using this very mechanism to create a pre-baked CDN where you can use relative URLs and everything works as expected:

download/polymer-cdn

Try it in a code pen here:

Polymer CDN Example

More info in my Stack Overflow answer on the topic.

This CDN only has Polymer 1.0 thought right? I can't find any CDN for Polymer 2.0, can we revisit this?

Damn you are right! I need to take some time to do the upgrade. Polymer is moving too fast to keep up :)

That seemed to go very smooth :)

download/polymer-cdn now supports Polymer 2!

@mbana @yebrahim
Can you maybe try it and let me know if this works for you? I'm out of Polymer so haven't done anything with Polymer 2 yet.

Working! This is awesome!

Was this page helpful?
0 / 5 - 0 ratings