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

Polymer - Una bella historia de amor

Polymer - Una bella historia de amor

Charla para el DevFest de Córdoba 2016 sobre Polymer

Israel Blancas

December 08, 2016
Tweet

More Decks by Israel Blancas

Other Decks in Technology

Transcript

  1. Polymer
    Una bella historia de amor
    +Israel Blancas
    @iblancasa

    View Slide

  2. Israel Blancas
    @iblancasa
    Software Engineer at Real-Time Innovations
    Google Developer Group organizer

    View Slide

  3. Mejor tarde que nunca

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. Web Components are low-level
    primitives that let you define
    your own HTML Elements.

    View Slide

  9. Template
    Shadow DOM
    Custom Elements
    HTML Imports
    native client-side templating
    scoping, composition
    define new HTML/DOM
    loading web components

    View Slide

  10. Primitives are designed so we can
    build libraries on top of them.

    View Slide

  11. So what is Polymer?

    View Slide

  12. Polymer is not
    a framework

    View Slide

  13. Existing Frameworks
    Applications
    Web Platform
    Web Components built with Polymer (or not)

    View Slide

  14. Polymer is not
    a framework
    Sure?

    View Slide

  15. Over 3M pages

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Let’s build
    an element!
    Image by Gloria Viganò for the Noun Project

    View Slide

  23. Hey user! Something awesome happened!

    View Slide

  24. x
    Hey user! Something awesome happened!

    View Slide

  25. alert-banner.html



    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    View Slide

  26. alert-banner.html



    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    Import all of your
    dependencies

    View Slide

  27. alert-banner.html



    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    A container for your
    element definition

    View Slide

  28. alert-banner.html



    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>

    Local DOM is the DOM
    an elements is in charge of
    creating and managing

    View Slide

  29. Shadow DOM

    View Slide

  30. Shadow DOM || “Shady DOM”

    View Slide

  31. Shadow DOM || “Shady DOM” == Local DOM

    View Slide

  32. alert-banner.html



    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>

    Local DOM is the DOM
    an elements is in charge of
    creating and managing

    View Slide

  33. alert-banner.html


    <br/>.alert { background: blue; color: white; }<br/>

    Hey user! Something awesome happened!


    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    Hey user! Something awesome happ
    Hey user! Something awesome happ

    View Slide

  34. alert-banner.html


    <br/>.alert { background: blue; color: white; }<br/>

    Hey user! Something awesome happened!


    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    Define your
    prototype

    View Slide





  35. Polymer!




    View Slide

  36. Hey user! Something awesome happened!

    View Slide

  37. alert-banner.html


    <br/>.alert { background: blue; color: white; }<br/>

    Hey user! Something awesome happened!


    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    Replace hard-coded data

    View Slide

  38. alert-banner.html


    <br/>.alert { background: blue; color: white; }<br/>




    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>


    With content elements!

    View Slide

  39. Light DOM - The world outside
    your component’s Local DOM

    View Slide

  40. alert-banner.html


    <br/>.alert { background: blue; color: white; }<br/>




    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>

    Select content with
    CSS selectors

    View Slide




  41. Polymer!




    Lorem ipsum dolor sit amet…

    View Slide




  42. Polymer!


    Success! Your first component!


    View Slide




  43. Polymer!


    Success! Your first component!


    Matching class

    View Slide

  44. Success! Your first component!

    View Slide

  45. Elements
    Building blocks for a better web

    View Slide

  46. There’s an element for that!

    View Slide

  47. https://beta.webcomponents.org
    /collection/Polymer/elements

    View Slide

  48. Applications
    Combining elements into something great

    View Slide

  49. Create or reuse elements in any app

    View Slide

  50. Production-ising Apps

    View Slide

  51. Build process out of the box

    View Slide

  52. View Slide

  53. GDG Granada

    View Slide

  54. polymer-project.org

    View Slide

  55. Muchas gracias
    ¿Preguntas?
    +Israel Blancas
    @iblancasa

    View Slide