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 Slide

  2. Creating Reusable
    Elements
    +AddyOsmani
    @addyosmani

    View Slide

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

    View Slide

  4. Examples

    View Slide

  5. Bad
    Reusable

    View Slide

  6. Bad
    Reusable

    View Slide

  7. Not

    View Slide

  8. Not

    View Slide

  9. View Slide


  10. Today you might write an

    View Slide

  11. Element Docs Tests

    View Slide

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

    View Slide

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

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. PILE ON THE
    JAVASCRIPT

    View Slide

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

    View Slide

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

    View Slide

  21. http://goo.gl/lKk7iT

    View Slide

  22. Tabs using web components

    View Slide

  23. !

    Tab 1
    Tab 2
    Tab 3

    HTML

    View Slide

  24. View Slide

  25. View Slide

  26. !

    Tab 1
    Tab 2
    Tab 3

    HTML

    View Slide

  27. Building a tabs element

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

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

    View Slide

  32. View Slide

  33. Download
    Boilerplate

    View Slide

  34. /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 Slide

  35. /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 Slide

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

    View Slide

  37. bower.io

    View Slide

  38. $ npm install -g bower
    Terminal

    View Slide

  39. $ 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 Slide

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

    View Slide

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

    View Slide

  42. ~/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 Slide

  43. !

    !

    !



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

    my-tabs.html

    View Slide

  44. !

    !

    !



    !

    my-tabs.html
    noscript
    if not using JS

    View Slide

  45. RE-USING
    ELEMENTS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. !
    $ 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 Slide

  52. !


    !
    !

    View Slide

  53. !

    !

    !


    !

    !

    my-tabs.html

    View Slide

  54. !

    !

    !

    !

    !

    my-tabs.html

    View Slide

  55. :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 Slide

  56. !

    Tab 1
    Tab 2
    Tab 3

    Ideal usage

    View Slide

  57. !

    Tab 1
    Tab 2
    Tab 3

    Ideal usage

    View Slide

  58. !

    !

    !





    !

    my-tabs.html

    View Slide



  59. my-tabs Demo


    !


    !

    !


    demo.html

    View Slide



  60. ...


    !

    One
    Two
    Three

    !


    demo.html

    View Slide



  61. ...


    !

    One
    Two
    Three

    !


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

    View Slide

  62. !
    $ python -m SimpleHTTPServer 8000
    Terminal

    View Slide

  63. View Slide

  64. View Slide

  65. Deployment

    View Slide

  66. ELEMENTS CAN
    BE SHARED

    View Slide

  67. View Slide

  68. View Slide

  69. Push to master!

    View Slide

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

    View Slide

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

    View Slide

  72. $ mkdir temp && cd temp
    Terminal

    View Slide

  73. $ 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 Slide

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

    View Slide

  75. http://bit.ly/NZmXRP

    View Slide

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

    View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. Docs
    Automatically scraped and generated from source.

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

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

    View Slide

  87. Tests
    Unit testing your elements

    View Slide

  88. View Slide

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

    View Slide

  90. !
    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 Slide

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

    View Slide

  92. View Slide

  93. Elements
    !
    Docs
    !
    Tests
    !

    View Slide

  94. View Slide

  95. GO COMPONENTIZE
    THE WEB TODAY

    View Slide

  96. Thank you!
    #componentizetheweb
    +AddyOsmani
    @addyosmani

    View Slide


  97. github.com/PolymerLabs/seed-element

    View Slide