Polymer

Knock your socks off!

Getting Started


bower init
bower install --save Polymer/polymer

## Polymer Web Components
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
				

Using Polymer


<!doctype html>
<html>
    <head>
        <!-- 1. Load platform.js for polyfill support. -->
        <script src="bower_components/platform/platform.js"></script>
        
        <!-- 2. Use an HTML Import to bring in the element. -->
        <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    </head>
    <body unresolved>
        <core-toolbar>
            <div>Toolbar</div>
        </core-toolbar>
    </body>
</html>
                

Result

Want To Use a Bunch of Elements All at Once?

Have at it!

Polymer Elements

How Do I Create My Own Element?


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

<polymer-element name="my-element" noscript>
    <template>
        <p>This is my really cool element</p>
    </template>
</polymer-element>
                

View it in action!

I think I'm getting the hang of this. What's next?

Start thinking of everything as an element.

My PolymerPlayer Prototype

PolymerPlayer Polymer Elements

  • core-animated-pages
  • core-signals
  • core-ajax
  • core-header-panel
  • core-toolbar
  • paper-icon-button
  • paper-fab

Here's How it Looks on the Web

http://kylebuch8.github.io/PolymerPlayer/

Let's Take a Look at the Code

https://github.com/kylebuch8/PolymerPlayer

That's Awesome Kyle!

But can I use Polymer now?

Yes!

But not everywhere

Browser Compatibility

  • Chrome Android
  • Chrome
  • Canary
  • Firefox
  • IE 10+
  • Safari 6+
  • Mobile Safari

Source: http://www.polymer-project.org/resources/compatibility.html

Want to play around?

Polymer Designer

Resources

http://www.polymer-project.org/

Thank You!

Kyle Buchanan


kylebuch8@gmail.com

http://github.com/kylebuch8