These videos are great Scott. Very helpful. Rob and I talked about
shortening them a bit and overlaying some commentary.
If people are interested in building + using a single .min.js file for a
polyfill, it's basically the same procedure. Instead of enumerating the
sources for the polyfill, install the node modules and build with Grunt.
Example building the Custom Elements polyfill:
bower install Polymer/CustomElements
cd bower_components/CustomElements
npm install
grunt
...gets you custom-elements.min.js
On Wed, Jan 22, 2014 at 10:52 AM, Rob Eisenberg <[email protected]
> wrote:
> Thanks Scott! I'll take a look at this soon.
>
>
> On Wed, Jan 22, 2014 at 1:49 PM, Scott Miles <[email protected]> wrote:
>
>> Erps, actual 'vulcanizing' video link:
>>
>> http://www.youtube.com/watch?v=FvFfJ0ODj0Y&feature=youtu.be
>>
>>
>> On Wed, Jan 22, 2014 at 10:48 AM, Scott Miles <[email protected]> wrote:
>>
>>> Remixing the polyfills is supposed to be relatively easy. I assume the
>>> devil is in the details, so I made a couple of screen captures of me
>>> starting from a blank folder and building up functionality, ultimately
>>> constructing a single js file containing the platform remix.
>>>
>>> remixing:
>>> http://www.youtube.com/watch?v=MfZxqONVzJA&feature=youtu.be
>>>
>>> vulcanizing the js:
>>> http://www.youtube.com/watch?v=MfZxqONVzJA&feature=youtu.be
>>>
>>> The resulting files are zipped up here:
>>> https://drive.google.com/file/d/0BwsasHLO95kdQXQzLTN2czFjVW8/edit?usp=sharing
>>>
>>> Tools used: Node, Bower, Terminal, Notepad, Browser.
>>>
>>> IMO, Bower is preferred over Git here, because we are read-only users in
>>> this context, and we can take advantage of the dependency fetching.
>>>
>>> The videos are kinda blurry (sorry!) and I there is no commentary. I
>>> figured we can do progressive refinement on these materials if they are
>>> found to be useful.
>>>
>>>
>>>
>>>
>>> On Tue, Jan 21, 2014 at 5:15 PM, Rob Eisenberg <
>>> [email protected]> wrote:
>>>
>>>> Thanks for the feedback. Part of what I'm creating is similar to
>>>> x-tags, but with my own spin, based on my own experience building large
>>>> scale componentized UI. For now, while I'm prototyping, I think I'll just
>>>> use the platform.js file...but eventually I'm going to have to figure out
>>>> how to do a custom build without the shadow dom pieces.
>>>>
>>>>
>>>> On Tue, Jan 21, 2014 at 7:04 PM, <[email protected]> wrote:
>>>>
>>>>> Rob,
>>>>>
>>>>> I asked a similar question about the "necessity" of the Shadow DOM a
>>>>> few months ago -
>>>>> https://groups.google.com/forum/?fromgroups=#!topic/polymer-dev/oVWSsMhFDnc.
>>>>> Basic upshot was although the polyfills themselves don't have a
>>>>> *dependency* on the Shadow DOM, Polymer depends on it, and it will be
>>>>> used if you use platform.js as well, even if you are only planning on
>>>>> using
>>>>> part of the platform like custom elements.
>>>>>
>>>>> If you are looking for simple, non-shadow DOM pre-built library,
>>>>> x-tags is maybe the way to go (although from my experience, the x-tag
>>>>> community is way less active). It is the biggest issue we have with
>>>>> Polymer
>>>>> - the shadow DOM polyfill is a bit invasive, and degrades performance - in
>>>>> our case, polymer doubles the time to load a page compared to x-tags. We
>>>>> have decided we will need to try "re-package" parts of the Polymer
>>>>> platform
>>>>> in our own library to get the performance characteristics we require,
>>>>> which
>>>>> is a shame, because I really like the library and the layer of sugar it
>>>>> provides.
>>>>>
>>>>> Regards,
>>>>> Ian
>>>>>
>>>>>
>>>>>
>>>>> On Tuesday, January 21, 2014 8:45:49 AM UTC+11, Rob Eisenberg wrote:
>>>>>
>>>>>> I think I can answer my own #3 question. Looks like the easiest way
>>>>>> to do this is to use pull-all.sh
>>>>>> I'd still like to know about the necessity of shadow dom and any
>>>>>> availability of pre-built platform libraries.
>>>>>>
>>>>>>
>>>>>> On Mon, Jan 20, 2014 at 4:35 PM, Rob Eisenberg <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>>>> Ok. I found that just a few minutes ago. It looks like there are
>>>>>>> lots of little pieces that may be missing from what I've got. I've got a
>>>>>>> few questions:
>>>>>>>
>>>>>>> 1. I purposefully excluded the shadow dom pieces from my build. Do
>>>>>>> you see any problems with that? Should custom elements still work,
>>>>>>> assuming
>>>>>>> I'm not using shadow dom at all?
>>>>>>> 2. Where can I find the latest build of platform.js? Let's say I
>>>>>>> just want to make my life easy for now...and not do my own build. Where
>>>>>>> do
>>>>>>> I get latest? None of the github releases seem to have any actual built
>>>>>>> libraries in them.
>>>>>>> 3. Any advice on building this thing? There are tons of
>>>>>>> repositories. It seems like a major effort to track them all and keep an
>>>>>>> updated build happening...thoughts?
>>>>>>>
>>>>>>>
>>>>>>> On Mon, Jan 20, 2014 at 4:27 PM, Scott Miles <[email protected]>wrote:
>>>>>>>
>>>>>>>> The build is sadly non-trivial, but you can start with the
>>>>>>>> manifest here:
>>>>>>>>
>>>>>>>> https://github.com/Polymer/platform-dev/blob/master/build.json
>>>>>>>>
>>>>>>>>
>>>>>>>> On Mon, Jan 20, 2014 at 12:21 PM, Rob Eisenberg <
>>>>>>>> [email protected]> wrote:
>>>>>>>>
>>>>>>>>> There's definitely a difference between my custom build of the
>>>>>>>>> pollyfills and platform.js. When I replace my build with platform.js,
>>>>>>>>> I see
>>>>>>>>> the correct behavior. I would just use platform.js, but there's some
>>>>>>>>> stuff
>>>>>>>>> in there I don't think I need..and I'm trying to get things down as
>>>>>>>>> small
>>>>>>>>> as possible. Can someone point me to the build file for platform.js?
>>>>>>>>> I'd
>>>>>>>>> like to see if I can figure out what the real difference is.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Thursday, January 16, 2014 12:13:59 PM UTC-5, Rob Eisenberg
>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>> I had a pretty nice custom element system build on the pollyfills
>>>>>>>>>> from Stable release 2013-11-07 When I updated to 0.1.2, everything
>>>>>>>>>> broke.
>>>>>>>>>> I've been going throughout, fixing things bit by bit, but now I'm to
>>>>>>>>>> a
>>>>>>>>>> point where I'm wondering if there's something wrong with Polymer.
>>>>>>>>>> It seems
>>>>>>>>>> as if custom element binding are being evaluated before the element
>>>>>>>>>> is
>>>>>>>>>> upgraded. I'm not sure about that, but I can't explain the behavior
>>>>>>>>>> I'm
>>>>>>>>>> seeing any other way. Here's my custom element test code:
>>>>>>>>>>
>>>>>>>>>> var proto = Object.create(HTMLElement.prototype);
>>>>>>>>>>
>>>>>>>>>> proto.createdCallback = function () {
>>>>>>>>>> this.customAttributes = {};
>>>>>>>>>> console.log('created');
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> proto.attachedCallback = function() {
>>>>>>>>>> console.log('attached');
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> proto.bind = function(name, value, oneTime) {
>>>>>>>>>> console.log('bind', name, value, oneTime);
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> proto.setAttribute = function(name, value) {
>>>>>>>>>> console.log('setAttribute', name, value);
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> proto.attributeChangedCallback = function(attrName, oldVal,
>>>>>>>>>> newVal) {
>>>>>>>>>> console.log('attribute changed', attrName, oldVal, newVal);
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> Object.defineProperty(proto, 'something', {
>>>>>>>>>> get: function () {
>>>>>>>>>> return this.customAttributes['something'];
>>>>>>>>>> },
>>>>>>>>>> set: function (val) {
>>>>>>>>>> this.customAttributes['something'] = value;
>>>>>>>>>> console.log('something change', value);
>>>>>>>>>> }
>>>>>>>>>> });
>>>>>>>>>>
>>>>>>>>>> document.registerElement('dx-test', { prototype: proto });
>>>>>>>>>>
>>>>>>>>>> Then I use it inside of one of my templates like this:
>>>>>>>>>>
>>>>>>>>>> <dx-test something="{{someProperty}}"></dx-test>
>>>>>>>>>>
>>>>>>>>>> When I do this, the only callback that is fired is *createdCallback
>>>>>>>>>> * and by then it seems to have already parsed the bindings out.
>>>>>>>>>> This prevents me from having any custom *bind* logic and even
>>>>>>>>>> from reliably getting the value of my own property. If
>>>>>>>>>> *something* is not a primitive value, then attribute's value is
>>>>>>>>>> the result of *toString().*
>>>>>>>>>>
>>>>>>>>>> Am I doing something wrong here? Is this a bug?
>>>>>>>>>>
>>>>>>>>> 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 [email protected].
>>>>>>>>> To view this discussion on the web visit
>>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/70e68a23-
>>>>>>>>> a5aa-4b1a-8b7e-48de9604325a%40googlegroups.com.
>>>>>>>>>
>>>>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Rob Eisenberg,
>>>>>>> President - Blue Spire
>>>>>>> www.durandaljs.com
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Rob Eisenberg,
>>>>>> President - Blue Spire
>>>>>> www.durandaljs.com
>>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Rob Eisenberg,
>>>> President - Blue Spire
>>>> www.durandaljs.com
>>>>
>>>
>>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Polymer" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/polymer-dev/puRMCV1-8nI/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected].
>>
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/CAHbmOLZxfQq4yDfnPUtuXY%3DvL2h3N3ckKFfuqbw%2BPHkvb7O_5A%40mail.gmail.com
>> .
>>
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
>
> --
> Rob Eisenberg,
> President - Blue Spire
> www.durandaljs.com
>
> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/CAMsr9Pm2FAycLjknWzuLLmEkMyveKhrz6YJnws0u-y7AdzH3AA%40mail.gmail.com
> .
>
> For more options, visit https://groups.google.com/groups/opt_out.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCDU00AWT%3D%3D4wmDAJxhJ-%3DnXym%2B_Jkxi0KxzofZYsO0yWQ%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
