Polymer Step by Step

Create Elements page : https://www.polymer-project.org/docs/start/creatingelements.html

• npm install -g bower
• bower init
• bower install --save Polymer/polymer
• bower install --save Polymer/core-elements
• bower install --save Polymer/paper-elements
• bower install --save Polymer/core-ajax

Chrome Dev Editor

index.html:
bower_components/
elements/

index.html:

<!DOCTYPE html><html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="elements/my-element.html"> </head>
<body>
<!-- 3. Declare the element by its tag. -->
<my-element></my-element>
</body>
</html>

elements/my-element.html:

         <link rel="import" href="../bower_components/polymer/polymer.html"> 
         <link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 
         <polymer-element name="my-element" noscript>
           <template> 
             <span>I'm <b>my-element</b>. This is my Shadow DOM.</span>
             <core-ajax url="https://api.github.com/users/angular" auto response="{{resp}}">
             </core-ajax> 
             <textarea value="{{resp}}"></textarea> 
           </template> 
         </polymer-element>

elements/proto-element.html:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">

<polymer-element name="proto-element">
<template>
      <span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
<script> Polymer({
                                ready: function() {
                                        // properties and methods here
                                    }
                             });
</script>
</polymer-element>

API Guide


GDG Triangle Polymer Introduction

• Intro Polymer with Kyle Aug 6, 2014 [slides]

• Using Polymer with a Toolbar  

               [ core-elements.html#core-toolbar ] :

              <body unresolved> 
                <core-toolbar>
                    <div>Toolbar</div> 
                </core-toolbar> 
              </body>

• Using Polymer with Tabs

          [ paper-elements.html#paper-icon-button]

          [ paper-elements.html#paper-tabs ]

           <body unresolved fullbleed> 
              <core-toolbar class="medium-tall"> 
                    <paper-icon-button icon="menu"> </paper-icon-button> 
                    <div flex>Title</div> 
                    <paper-icon-button icon="search"></paper-icon-button> 
                    <paper-icon-button icon="more-vert"></paper-icon-button> 
                    <div class="bottom fit" horizontal layout> 
                          <paper-tabs selected="0" flex style="max-width: 600px;"> 
                               <paper-tab>ITEM ONE</paper-tab> 
                               <paper-tab>ITEM TWO</paper-tab> 
                                <paper-tab>ITEM THREE</paper-tab>
                           </paper-tabs> 
                   </div> 
             </core-toolbar> 
         </body>

Polymer Player

https://github.com/kylebuch8/PolymerPlayer/blob/master/index.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-song/player-song.html

https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-songs.html

    <template repeat="{{sng, i in songs}}">
       <div class="song" needZ?="{{song.title === sng.title}}"> 
             <div hero-id="{{sng.title}}" hero>
                  <div class="bg" style="background-image: url(images/{{sng.img}});"> 
                         <player-color-thief song="{{sng}}"></player-color-thief>
                  </div> 
                  <div class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};"> 
                        <span class="title">{{sng.title}}</span>
                        <br> <small>{{sng.artist}}</small> 
                 </div> 
           </div> 
       </div> 
</template>

https://github.com/flatiron/director

https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-color-thief.html

<polymer-element name="player-color-thief" attributes="song">

• https://www.polymer-project.org/docs/elements/
• https://www.polymer-project.org/docs/elements/core-elements.html
• http://kylebuch8.github.io/PolymerPlayer/
• https://github.com/kylebuch8/PolymerPlayer
• https://github.com/KamiQuasi/wc-overview
• https://www.polymer-project.org/apps/topeka/
• https://github.com/polymer/topeka

ng + web components

The ng duo of  Carmen Popoviciu and Pascal Precht  have a video on integration of angular and web components.

Four technologies

Clone template

Create Shadow Dom

Create new elements [more]

Angular with web components

Angular doesn't know and shouldn't know about custom elements. - just another element on page

http://pascalprecht.github.io/dont-stop-thinking-about-tomorrow/#/39

A custom element can change DOM attributes or Element properties

https://github.com/eee-c/angular-bind-polymer


http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/

http://pascalprecht.github.io/talks/

DevFest at American Underground 2014

The Dev Fest is organized by  Luke Dary  +Luke Dary .  Next GDG meeting possibly will  be held in the Google office in Chapel Hill. Udacity will be partnering to do Android development course thru GDG.

Polymer  #itshackademic

polymer-project.org

Intro Video

Rob Dodson - Core Icons

what problems solving?   css is global , phone/tablets,smart tvs  etc  Front end development so it works on all devices. i.e Tabs should be easy, not easy to plop in anywhere. old frameworks can be a challenge,

<paper-tabs>
<paper-tab>one</paper-tab>

tip: do a  view source of gmail
table soup, div soup
web components
-  required to have dash in name to be custom element (otherwise show as unknown)
- paper tab (material design )
- resusable
-  templates -native client side  , parsed, does not render, content inert til cloned/used,
- shadow dom - browser not rendering all, chrome has ability to show hidden structure you dont usually see
- html imports <link rel="import" href="bootstrap.html">      vulcanize - tool to concat your dependencies and do it once
- custom elements : use existing, extend others, encapsulated css customelements.io


http://itshackademic.com/
https://www.polymer-project.org/docs/start/getting-the-code.html


https://www.polymer-project.org/docs/start/creatingelements.html

Next Web

I recently watched Eric Bidelman's talk from Google I/O 2013 on Web Components.  This talk was on the Future of the web platform. This talk reminds me of Angular methodology where you are adding custom tags to HTML.

As well  Peter Gasston talks about web components and CSS. Example of video player which runs on javascript, html, css.  If you show hidden dom, you can see markup.

Show shadow dom in web tools under wrench:

shadow root, host, dom

shadow root:

var newroot  = $(foo).createShadowRoot(), newElem =  '<h2<test</h2>' ;

newroot.innerHTML = newElem ;

<div id ="foo"><h1> First</h1></div>

div tag  is the shadow host, and h1 text replaces h2 with test.

widget example: <div id ="foo"><h1> First</h1></div>
want it but in different color
encapsulation - has all it needs contains within itslef, nothing gets in, nothing gets out
encapsulation in html is iframe today - issues extra network, multiplee rendering, cross orgin conflicts
better encapsulation is web components
reusable web components - shadowdom, templates,  custom tags

templates - put stuff in it

<template id ="foo"><h2> First</h2></template>
<div id ="bar"><h1>text 2</h1></div>

mark up inside is inert - does nothing, does not get loaded

inside template known as content

var test = $(foo).content.cloneNode(true), bar = document.getElementById('bar');
bar.appendChild(test);

puts template inside bar div tag  - template active

share templates across multiple files using import

4 main areas (Shadow DOM gives encapsulation, templates or chunk of markup that later you can stamp out your elements, custom tags, html imports that can be reused via CDN URLs):

http://www.webcomponentsshift.com/#11

HTML templates:
Template out your markup 

Put dom in it

Parsed not rendered - won't run until you stamp it out, same for media

Hidden from document, cant traverse into,  its in its own context

Content property - document fragment , clone it, stamp it out, see whats in it

Example:

Clone it is what stamps it out (here it runs script when that happens):

http://www.webcomponentsshift.com/#15

See example in plunkr.

New spec for html templates  : chrome supports it.

Shadow dom (Secret markup in elements):

markup encapsulation, DOM encapsulation, css style boundary protection, no bleeding in, style boundaries, exposes to developers mechanics browser vendors use to create their html elements

iframe has it but bloated, hard to use  (extra network requests needed, multiple rendering contexts)

http://www.webcomponentsshift.com/#20

Dom nodes can host hidden dom

hidden dom  can't be accessed by outside  javscript

Hidden document fragment

Using markup to control it

Browser vendors been holding out

http://www.webcomponentsshift.com/#23

See example in plunkr.

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red

http://www.webcomponentsshift.com/#24

@host

Host element provide default styles

http://www.webcomponentsshift.com/#25
http://www.webcomponentsshift.com/#26

http://html5-demos.appspot.com/shadowdom-visualizer

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

http://www.webcomponentsshift.com/#32

http://www.webcomponentsshift.com/#33

http://www.webcomponentsshift.com/#34

Using js html.prototype 

http://www.webcomponentsshift.com/#35

extending elements

http://www.webcomponentsshift.com/#36

http://www.webcomponentsshift.com/#37

Html imports

http://www.webcomponentsshift.com/#45

Links
http://www.webcomponentsshift.com/#52

http://ericbidelman.tumblr.com/

Polymer

Polymer approach:

Elements are pretty great. They’re the building blocks of the web. Unfortunately, as web apps got more complex, we collectively outgrew the basic set of elements that ships in browsers. Our solution was to replace markup with gobs of script. In that shift, we’ve lost the elegance of the element. Polymer returns to our roots. We think the answer is not gobs of script, but rather to build more powerful elements. A set of powerful new technologies called Web Components makes this possible.

Custom Elements:

Embracing the philosophy means a web app becomes a collection of well-defined, reusable components.

• custom elements polyfill
• creating elements

Using Elements

• Core Elements
• Paper Elements - implements the Material Design [demo]

Creating Elements

https://www.youtube.com/watch?v=5b5O5cclPbk (web components overview)

- https://github.com/KamiQuasi/wc-overview
- natively without polyfills



Intro Polymer
- easier to create custom elements
- quiz application demo app w paper elements
- inimation 60 frames / sec

https://www.youtube.com/watch?v=3CJcHJGZfws (web components and polymer overview)

https://github.com/kylebuch8/PolymerTutorial

http://www.polymer-project.org/resources/video.html




http://www.polymer-project.org/docs/start/tutorial/intro.html
http://www.html5rocks.com/en/tutorials/webcomponents/template/
https://www.youtube.com/watch?v=eJZx9c6YL8k
http://www.polymer-project.org/docs/polymer/polymer.html#altregistration
http://www.polymer-project.org/docs/polymer/databinding.html
http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

https://github.com/Polymer/observe-js