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

Polymer - El fin a tus problemas con el FrontEnd

Polymer - El fin a tus problemas con el FrontEnd

Presentación para el Google Developer Group DevFest 2016 de Granada sobre Polymer

C96b8242b26a40f2ee15e138b051779a?s=128

Israel Blancas

November 25, 2016
Tweet

Transcript

  1. Polymer el fin a tus problemas con el front-end +Israel

    Blancas @iblancasa #DevFestGRX GDG Granada
  2. #DevFestGRX GDG Granada

  3. #DevFestGRX GDG Granada

  4. #DevFestGRX GDG Granada

  5. Web Components are low-level primitives that let you define your

    own HTML Elements. #DevFestGRX GDG Granada
  6. Template Shadow DOM Custom Elements HTML Imports native client-side templating

    scoping, composition define new HTML/DOM loading web components #DevFestGRX GDG Granada
  7. Primitives are designed so we can build libraries on top

    of them. #DevFestGRX GDG Granada
  8. So what is Polymer? #DevFestGRX GDG Granada

  9. Polymer is not a framework #DevFestGRX GDG Granada

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

    (or not) #DevFestGRX GDG Granada
  11. Polymer is not a framework Sure? #DevFestGRX GDG Granada

  12. Over 3M pages #DevFestGRX GDG Granada

  13. #DevFestGRX GDG Granada

  14. #DevFestGRX GDG Granada

  15. #DevFestGRX GDG Granada

  16. #DevFestGRX GDG Granada

  17. #DevFestGRX GDG Granada

  18. #DevFestGRX GDG Granada

  19. Let’s build an element! Image by Gloria Viganò for the

    Noun Project #DevFestGRX GDG Granada
  20. Hey user! Something awesome happened! #DevFestGRX GDG Granada

  21. x Hey user! Something awesome happened! <alert-banner> #DevFestGRX GDG Granada

  22. 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”> #DevFestGRX GDG Granada
  23. 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 #DevFestGRX GDG Granada
  24. 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 #DevFestGRX GDG Granada
  25. 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”> #DevFestGRX GDG Granada
  26. Shadow DOM #DevFestGRX GDG Granada

  27. Shadow DOM || “Shady DOM” #DevFestGRX GDG Granada

  28. Shadow DOM || “Shady DOM” == Local DOM #DevFestGRX GDG

    Granada
  29. 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”> #DevFestGRX GDG Granada
  30. 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 #DevFestGRX GDG Granada
  31. 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 #DevFestGRX GDG Granada
  32. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story">

    <img src="headline.jpg"/> #DevFestGRX GDG Granada
  33. Hey user! Something awesome happened! #DevFestGRX GDG Granada

  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”> Replace hard-coded data #DevFestGRX GDG Granada
  35. 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! #DevFestGRX GDG Granada
  36. Light DOM - The world outside your component’s Local DOM

    #DevFestGRX GDG Granada
  37. 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 #DevFestGRX GDG Granada
  38. </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> #DevFestGRX GDG Granada
  39. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

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

    first component! </span> </alert-banner> Matching class #DevFestGRX GDG Granada
  41. Success! Your first component! #DevFestGRX GDG Granada

  42. Elements Building blocks for a better web #DevFestGRX GDG Granada

  43. There’s an element for that!

  44. https://beta.webcomponents.org /collection/Polymer/elements #DevFestGRX GDG Granada

  45. Applications Combining elements into something great #DevFestGRX GDG Granada

  46. Create or reuse elements in any app #DevFestGRX GDG Granada

  47. #DevFestGRX GDG Granada

  48. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color

    #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color #DevFestGRX GDG Granada
  49. Production-ising Apps #DevFestGRX GDG Granada

  50. Build process out of the box #DevFestGRX GDG Granada

  51. #DevFestGRX GDG Granada

  52. #DevFestGRX GDG Granada GDG Granada

  53. polymer-project.org #DevFestGRX GDG Granada

  54. Muchas gracias ¿Preguntas? +Israel Blancas @iblancasa #DevFestGRX GDG Granada