Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Reusable Polymer Elements

Creating Reusable Polymer Elements

In this talk, you'll learn how to create your own reusable elements using Polymer.

Addy Osmani

August 11, 2014
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. Polymer
    Google Developer Group Hackathon.

    View full-size slide

  2. Creating Reusable
    Elements
    +AddyOsmani
    @addyosmani

    View full-size slide

  3. Apps should be composed of
    reusable, responsive & testable
    elements.

    View full-size slide


  4. Today you might write an

    View full-size slide

  5. Element Docs Tests

    View full-size slide

  6. Element
    Create a component we’ve all written before.

    View full-size slide

  7. Tabs
    http://drbl.in/bAsu
    http://drbl.in/esYL

    View full-size slide

  8. PILE ON THE
    JAVASCRIPT

    View full-size slide

  9. https://www.flickr.com/photos/
    darkismus/4179361946

    View full-size slide

  10. https://www.flickr.com/photos/
    goodspeed/2669719176

    View full-size slide

  11. http://goo.gl/lKk7iT

    View full-size slide

  12. Tabs using web components

    View full-size slide

  13. !

    Tab 1
    Tab 2
    Tab 3

    HTML

    View full-size slide

  14. !

    Tab 1
    Tab 2
    Tab 3

    HTML

    View full-size slide

  15. Building a tabs element

    View full-size slide

  16. Start with
    github.com/PolymerLabs/seed-element

    View full-size slide

  17. Download
    Boilerplate

    View full-size slide

  18. /development
    /seed-element
    /tests
    .bowerrc
    bower.json
    demo.html
    index.html
    README.md
    seed-element.css
    seed-element.html
    Unzip it locally Workspace
    Element

    View full-size slide

  19. /development
    /seed-element
    /tests
    .bowerrc
    bower.json
    demo.html
    index.html
    README.md
    seed-element.css
    seed-element.html
    Boilerplate files
    Rename
    for my-tabs

    View full-size slide

  20. /development
    /my-tabs
    /tests
    .bowerrc
    bower.json
    demo.html
    index.html
    README.md
    my-tabs.css
    my-tabs.html
    Renamed files

    View full-size slide

  21. $ npm install -g bower
    Terminal

    View full-size slide

  22. $ npm install -g bower
    !
    npm http GET https://registry.npmjs.org/bower
    npm http 200 https://registry.npmjs.org/bower
    npm http GET https://registry.npmjs.org/bower/-/bower-1.3.3.tgz
    npm http 200 https://registry.npmjs.org/bower/-/bower-1.3.3.tgz
    npm http GET https://registry.npmjs.org/bower-endpoint-parser
    npm http GET https://registry.npmjs.org/bower-json
    npm http GET https://registry.npmjs.org/bower-config
    npm http GET https://registry.npmjs.org/bower-logger
    npm http GET https://registry.npmjs.org/bower-registry-client
    npm http GET https://registry.npmjs.org/insight

    Terminal

    View full-size slide

  23. ~/development/my-tabs
    $ bower install
    Terminal

    View full-size slide

  24. ~/development/
    $ ls
    !
    core-action-icons
    core-component-page
    my-tabs
    platform
    polymer
    chai
    mocha
    Terminal

    View full-size slide

  25. ~/development/
    $ ls
    !
    core-action-icons
    core-component-page
    my-tabs
    platform
    polymer
    chai
    mocha
    Terminal
    Avoids nested dependency trees
    my-tabs / bower_components
    my-toolbar / bower_components
    my-button / bower_components

    View full-size slide

  26. !

    !

    !



    !
    <br/>Polymer(‘seed-element’, {…});<br/>

    my-tabs.html

    View full-size slide

  27. !

    !

    !



    !

    my-tabs.html
    noscript
    if not using JS

    View full-size slide

  28. RE-USING
    ELEMENTS

    View full-size slide

  29. polymer-project.org/docs/elements/

    View full-size slide

  30. http://polymer.github.io/core-docs/
    #core-selector

    View full-size slide

  31. http://polymer.github.io/core-docs/
    #core-selector

    View full-size slide

  32. http://polymer.github.io/core-docs/
    #core-selector

    View full-size slide

  33. !
    $ bower install Polymer/core-selector —save
    Terminal

    View full-size slide

  34. !
    $ bower install Polymer/core-selector —save
    !
    bower cached git://github.com/Polymer/core-selector.git#0.3.0
    bower validate 0.3.0 against git://github.com/Polymer/core-selector.git#*
    bower not-cached git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0
    bower resolve git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0
    bower not-cached git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0
    bower resolve git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0
    Terminal

    View full-size slide

  35. !

    !

    !


    !

    !

    my-tabs.html

    View full-size slide

  36. !

    !

    !

    !

    !

    my-tabs.html

    View full-size slide

  37. :host { font-family: ‘Roboto’, ‘Arial’, sans-serif; }
    !
    polyfill-next-selector { content: ':host > .core-selected'; }
    ::content > .core-selected {
    background: #5599FF;
    color: white;
    }
    !
    polyfill-next-selector { content: ':host > *'; }
    ::content > * {
    min-width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 8px;
    font-size: 14px;
    color: #999;
    }
    my-tabs.css

    View full-size slide

  38. !

    Tab 1
    Tab 2
    Tab 3

    Ideal usage

    View full-size slide

  39. !

    Tab 1
    Tab 2
    Tab 3

    Ideal usage

    View full-size slide

  40. !

    !

    !





    !

    my-tabs.html

    View full-size slide



  41. my-tabs Demo


    !


    !

    !


    demo.html

    View full-size slide



  42. ...


    !

    One
    Two
    Three

    !


    demo.html

    View full-size slide



  43. ...


    !

    One
    Two
    Three

    !


    demo.html
    selected=“0”
    selects the first tab

    View full-size slide

  44. !
    $ python -m SimpleHTTPServer 8000
    Terminal

    View full-size slide

  45. ELEMENTS CAN
    BE SHARED

    View full-size slide

  46. Push to master!

    View full-size slide

  47. Push docs, demos, landing page
    to gh-pages!
    Next

    View full-size slide

  48. ~/development/my-tabs
    $ cd ..
    Terminal

    View full-size slide

  49. $ mkdir temp && cd temp
    Terminal

    View full-size slide

  50. $ git clone git://github.com/Polymer/tools.git
    !
    Cloning into 'tools'...
    remote: Reusing existing pack: 1201, done.
    remote: Total 1201 (delta 0), reused 0 (delta 0)
    Receiving objects: 100% (1201/1201), 834.45 KiB | 277.00 KiB/s, done.
    Resolving deltas: 100% (476/476), done.
    Checking connectivity... done.
    !
    !
    Terminal

    View full-size slide

  51. $ ./tools/bin/gp.sh my-tabs
    Terminal

    View full-size slide

  52. http://bit.ly/NZmXRP

    View full-size slide

  53. http://addyosmani.github.io/my-tabs

    View full-size slide

  54. Docs
    Automatically scraped and generated from source.

    View full-size slide

  55. https://www.flickr.com/photos/
    bensutherland/2274353620

    View full-size slide

  56. Tests
    Unit testing your elements

    View full-size slide

  57. !
    var myEl = document.querySelector('seed-element');
    assert.equal(myEl.author, 'Dimitri Glazkov');
    Test properties

    View full-size slide

  58. !
    var hello = myEl.sayHello();
    assert.equal(hello, 'seed-element says, Hello World!');
    !
    var greetings = myEl.sayHello('greetings Earthlings');
    assert.equal(greetings, 'seed-element says, greetings Earthlings');
    Test methods

    View full-size slide

  59. !
    myEl.addEventListener('seed-element-lasers-success', function(event) {
    !
    assert.equal(event.detail.sound, 'Pew pew pew!');
    done();
    });
    !
    myEl.fireLasers();
    Test events

    View full-size slide

  60. Elements
    !
    Docs
    !
    Tests
    !

    View full-size slide

  61. GO COMPONENTIZE
    THE WEB TODAY

    View full-size slide

  62. Thank you!
    #componentizetheweb
    +AddyOsmani
    @addyosmani

    View full-size slide


  63. github.com/PolymerLabs/seed-element

    View full-size slide