Polymer and organizing javascript files

[jimin...@gmail.com]

I am just starting out to learn Polymer.

I have built a small web application using it but I find myself puzzled about how to organize my javascript files.

If my polymer components that go on the same HTML page and a number of them need to use the same javascript library,

do I include that js file at the very top HTML page? Because that's is what I am doing right now basically.

I have a long list of all the javascript files that all the polymer components on that page needs.

Inside the polymer components code, they assume those javascript libraries are included already and start using them.

[Ian MacLeod]

There are a couple options for treating the JS lib as a regular dependency (that only loads once):

One approach is to create a new HTML file that's sole purpose is to load the library - and then you import that HTML file.

Alternatively, we also provide a helper for this in the form of https://github.com/Polymer/core-shared-lib

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/c92cf77a-b5ca-4781-ab12-45ed9c5ceef6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ian MacLeod]

Oh, and a third approach if you are authoring the JS lib: consider authoring it in an HTML file (e.g. wrap it in a <script> tag)

On Thu, Dec 11, 2014, 10:19 Ian MacLeod <im...@google.com> wrote:

There are a couple options for treating the JS lib as a regular dependency (that only loads once):

One approach is to create a new HTML file that's sole purpose is to load the library - and then you import that HTML file.

Alternatively, we also provide a helper for this in the form of https://github.com/Polymer/core-shared-lib

On Thu, Dec 11, 2014, 09:57 null <jimin...@gmail.com> wrote:

I am just starting out to learn Polymer.

I have built a small web application using it but I find myself puzzled about how to organize my javascript files.

If my polymer components that go on the same HTML page and a number of them need to use the same javascript library,

do I include that js file at the very top HTML page? Because that's is what I am doing right now basically.

I have a long list of all the javascript files that all the polymer components on that page needs.

Inside the polymer components code, they assume those javascript libraries are included already and start using them.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

[jimin...@gmail.com]

So the top most level HTML will import this HTML file whose sole purpose is to important other JS files?

So my web-component, as much as I want them to be stand alone components, they are really depended on the javascript files being there.

Is there like some kind of interface approach in polymer I can do like in Java? I come from the Java world.

If I need some lower level functionality done by like a common library, I just use the interface and just care for the results right?

On Thursday, December 11, 2014 1:21:22 PM UTC-5, Ian MacLeod wrote:

Oh, and a third approach if you are authoring the JS lib: consider authoring it in an HTML file (e.g. wrap it in a <script> tag)

On Thu, Dec 11, 2014, 10:19 Ian MacLeod <im...@google.com> wrote:

There are a couple options for treating the JS lib as a regular dependency (that only loads once):

One approach is to create a new HTML file that's sole purpose is to load the library - and then you import that HTML file.

Alternatively, we also provide a helper for this in the form of https://github.com/Polymer/core-shared-lib

On Thu, Dec 11, 2014, 09:57 null <jimin...@gmail.com> wrote:

I am just starting out to learn Polymer.

I have built a small web application using it but I find myself puzzled about how to organize my javascript files.

If my polymer components that go on the same HTML page and a number of them need to use the same javascript library,

do I include that js file at the very top HTML page? Because that's is what I am doing right now basically.

I have a long list of all the javascript files that all the polymer components on that page needs.

Inside the polymer components code, they assume those javascript libraries are included already and start using them.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

[Ian MacLeod]

Hmm, can you provide some more detail to how you'd like to interact w/ the shared library from your components?

But in the general sense, you can take advantage of HTML Imports (or <core-shared-lib>) to load that shared library - but we can't make many guarantees about what interface that library exposes (it's up to the library, after all)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2eed3e16-4b79-46f9-8c2e-d88114228724%40googlegroups.com.

[jimin...@gmail.com]

So I just read this document

https://www.polymer-project.org/docs/elements/core-elements.html#core-shared-lib

There is no example I could find how to use this in Internet.

Are you suggesting that I use <core-shared-lib> as the first line after my <template> inside all the custom tags that need this library?

And judging by how it has the attribute on-core-shared-lib-load="{{load}}", does it mean this particular library is being loaded in lazy fashion? What I mean is whichever custom component gets rendered first will load the library first for the others.

What exactly do you mean by HTML import? Are you suggesting that I put <link rel-"import" href="...html"> inside my custom component HTML files where the HTML file being imported would wrap all <script src=...></script> to load necessary javascript files?

[Ian MacLeod]

Yeah, sorry for lack of thorough documentation on that element :(  Here's some examples of the various approaches:

I actually can't find a good example of using core-shared-lib directly. google-apis uses it, but in a more advanced fashion (they inherit from it).

Using an import to load the shared library: firebase-element/firebase-import.html (and example where it is used)

Similarly, just wrapping shared scripts in HTML: more-routing/routing.html (and example where it is used)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0c33eaf5-34db-45f1-836f-f8cf5cf4c4ff%40googlegroups.com.

[Jimin Park]

Let's say 5 of my polymer components use your HTML import example to load the same JS file, would I be downloading and loading it 5 times? DO you also know if it's a synchronous load? Say one polymer component who appears first in the top HTML file tries to use the javascript without loading it because later components included it?

[Eric Bidelman]

The beautiful thing about using HTML imports for dependencies is that the browser will de-dupe the URL. As long as the 5 resources come from the same resolved URL, the browser will only load it once. 

http://www.html5rocks.com/en/tutorials/webcomponents/imports/#deps

On Thu, Dec 11, 2014 at 12:35 PM, Jimin Park <jimin...@gmail.com> wrote:

Let's say 5 of my polymer components use your HTML import example to load the same JS file, would I be downloading and loading it 5 times? DO you also know if it's a synchronous load? Say one polymer component who appears first in the top HTML file tries to use the javascript without loading it because later components included it?

Scripts inside an import load sync. Inside your components HTML import, you should load any dependencies it relies on. That way you're guaranteed to not have race conditions.

Some more info here: http://www.html5rocks.com/en/tutorials/webcomponents/imports/#perf-parsing

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAD4op9YWPVXHH4%2BmXYnLQa3w9eA66VvyaEjS1B4tMr8c4VOM6A%40mail.gmail.com.

[jimin...@gmail.com]

Thank you so much guys!