De 0 a Polymer

De 0 a Polymer

Charla sobre Polymer para las Jornadas del Hacklab Almería 2016, celebradas en "El Ejido".

C96b8242b26a40f2ee15e138b051779a?s=128

Israel Blancas

December 02, 2016
Tweet

Transcript

  1. De 0 a Polymer +Israel Blancas @iblancasa GDG Granada

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

    Group organizer
  3. GDG Granada

  4. Modular programming GDG Granada

  5. Aseptic Consistent Flexible Production GDG Granada

  6. Quality Speed GDG Granada

  7. Quality Speed GDG Granada

  8. GDG Granada

  9. None
  10. GDG Granada

  11. GDG Granada

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

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

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

    of them. GDG Granada
  15. So what is Polymer? GDG Granada

  16. Polymer is not a framework GDG Granada

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

    (or not) GDG Granada
  18. Polymer is not a framework Sure? GDG Granada

  19. Over 3M pages GDG Granada

  20. GDG Granada

  21. GDG Granada

  22. GDG Granada

  23. GDG Granada

  24. GDG Granada

  25. GDG Granada

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

    Noun Project GDG Granada
  27. Hey user! Something awesome happened! GDG Granada

  28. GDG Granada Install the tools

  29. GDG Granada NodeJS and NPM

  30. GDG Granada bower and polymer-cli npm install -g <package>

  31. x Hey user! Something awesome happened! <alert-banner> GDG Granada

  32. polymer init GDG Granada

  33. Select “element - A blank element template” GDG Granada

  34. Element name: alert-banner GDG Granada

  35. Element name: alert-banner Brief description of the element: Hacklab example

    GDG Granada
  36. bower_components demo test alert-banner.html bower.json index.html README.md GDG Granada

  37. GDG Granada

  38. 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”> GDG Granada
  39. 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 GDG Granada
  40. 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 GDG Granada
  41. 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”> GDG Granada
  42. Shadow DOM GDG Granada

  43. Shadow DOM || “Shady DOM” GDG Granada

  44. Shadow DOM || “Shady DOM” == Local DOM GDG Granada

  45. 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”> GDG Granada
  46. 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 GDG Granada
  47. 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 GDG Granada
  48. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story">

    <img src="headline.jpg"/> GDG Granada
  49. <!doctype html> <html lang="es"> <head> <title>Hacklab</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> <link

    rel="import" href="alert-banner.html"> </head> <body> <alert-banner></alert-banner> </body> </html> GDG Granada
  50. Hey user! Something awesome happened! GDG Granada

  51. 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 GDG Granada
  52. 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! GDG Granada
  53. Light DOM - The world outside your component’s Local DOM

    GDG Granada
  54. 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 GDG Granada
  55. </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> GDG Granada
  56. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

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

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

  59. Elements Building blocks for a better web GDG Granada

  60. There’s an element for that! GDG Granada

  61. https://beta.webcomponents.org /collection/Polymer/elements GDG Granada

  62. GDG Granada

  63. Applications Combining elements into something great GDG Granada

  64. Create or reuse elements in any app GDG Granada

  65. GDG Granada

  66. 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 GDG Granada
  67. Production-ising Apps GDG Granada

  68. Build process out of the box GDG Granada

  69. None
  70. What are the Progressive Web Apps?

  71. Progressive Web App uses modern web platform capabilities to deliver

    an app-like user experience
  72. Instant loading Fast Push notifications Add to home screen Secure

    Responsive
  73. None
  74. Android App Mobile Web $3.75 $0.07 Housing.com: User Acquisition Costs

  75. None
  76. None
  77. None
  78. None
  79. https://pwa.rocks/

  80. https://developers.google.com/ web/progressive-web-apps/

  81. Polymer Starter Kit Web app scaffolding, via web components. goo.gl/qy16Jk

  82. GDG Granada GDG Granada

  83. GDG Granada

  84. polymer-project.org GDG Granada

  85. Thank you :) Questions? +Israel Blancas @iblancasa GDG Granada