Polymer - Una bella historia de amor

Polymer - Una bella historia de amor

Charla para el DevFest de Córdoba 2016 sobre Polymer

C96b8242b26a40f2ee15e138b051779a?s=128

Israel Blancas

December 08, 2016
Tweet

Transcript

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

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

    Group organizer
  3. Mejor tarde que nunca

  4. None
  5. None
  6. None
  7. None
  8. Web Components are low-level primitives that let you define your

    own HTML Elements.
  9. Template Shadow DOM Custom Elements HTML Imports native client-side templating

    scoping, composition define new HTML/DOM loading web components
  10. Primitives are designed so we can build libraries on top

    of them.
  11. So what is Polymer?

  12. Polymer is not a framework

  13. Existing Frameworks Applications Web Platform Web Components built with Polymer

    (or not)
  14. Polymer is not a framework Sure?

  15. Over 3M pages

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. Let’s build an element! Image by Gloria Viganò for the

    Noun Project
  23. Hey user! Something awesome happened!

  24. x Hey user! Something awesome happened! <alert-banner>

  25. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' });

    </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”>
  26. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' });

    </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Import all of your dependencies
  27. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' });

    </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> A container for your element definition
  28. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' });

    </script> </dom-module> Local DOM is the DOM an elements is in charge of creating and managing <link rel=“import” href=“../polymer/polymer.html”>
  29. Shadow DOM

  30. Shadow DOM || “Shady DOM”

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

  32. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' });

    </script> </dom-module> Local DOM is the DOM an elements is in charge of creating and managing <link rel=“import” href=“../polymer/polymer.html”>
  33. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color:

    white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Hey user! Something awesome happ Hey user! Something awesome happ
  34. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color:

    white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Define your prototype
  35. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story">

    <img src="headline.jpg"/>
  36. Hey user! Something awesome happened!

  37. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color:

    white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Replace hard-coded data
  38. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color:

    white; } </style> <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> With content elements!
  39. Light DOM - The world outside your component’s Local DOM

  40. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color:

    white; } </style> <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> <link rel=“import” href=“../polymer/polymer.html”> Select content with CSS selectors
  41. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story"> <img

    src="headline.jpg"/> <p>Lorem ipsum dolor sit amet…</p>
  42. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

    first component! </span> </alert-banner>
  43. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

    first component! </span> </alert-banner> Matching class
  44. Success! Your first component!

  45. Elements Building blocks for a better web

  46. There’s an element for that!

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

  48. Applications Combining elements into something great

  49. Create or reuse elements in any app

  50. Production-ising Apps

  51. Build process out of the box

  52. None
  53. GDG Granada

  54. polymer-project.org

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