Polytechnic 1.0 Granada

Polytechnic 1.0 Granada

Polymer Polytechnic Granada. Celebrado el 25 de abril de 2016 en la Escuela Técnica Superior de Ingenierías Informática y Telecomunicación de Granada.

C96b8242b26a40f2ee15e138b051779a?s=128

Israel Blancas

April 25, 2016
Tweet

Transcript

  1. None
  2. Israel Blancas @iblancasa

  3. 9:00 - 11:00 Intro to a wonderful world: Polymer 11:00

    - 11:30 Coffee break 11:30 - 12:15 Codelab(s) 13:00 - 14:00 “Challenges” Program
  4. Rob Dodson

  5. None
  6. None
  7. None
  8. Web Components are different. They are not like web standards

    that have come before.
  9. Web Components are low-level primitives that let you define your

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

    scoping, composition define new HTML/DOM loading web components
  11. Full article: https://goo.gl/SFaZKS “Web Components have been in planning for

    over three years, but we’re optimistic the end is near. All major vendors are on board, enthusiastic, and investing significant time to help resolve the remaining issues.” - Wilson Page, Mozilla
  12. Full article: https://goo.gl/N5n4SM “We are happy to announce that we

    are starting development to add HTML Template element support to Microsoft Edge today! This is just the beginning of our Web Components journey… the next goal is to implement Shadow DOM” - Travis Leithead & Arron Eicholz, Microsoft Edge https://dev.modern.ie/platform/status/shadowdom/
  13. “Lots of progress on shadow DOM last week.” - WebKit

    Twitter account https://twitter.com/webkit/status/648546431771344896
  14. Primitives are designed so we can build libraries on top

    of them.
  15. So what is Polymer?

  16. Polymer is not a framework

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

    (or not)
  18. Is it ready?

  19. +1.3M pages

  20. Full article: http://goo.gl/gJbdKu “We no longer build applications. We have,

    and are enriching, a module market sourced from industry and the ING global community. Modules are assembled into applications as the business requires.” - Ben Issa, ING Head of IT Strategy
  21. 300+ Google projects

  22. None
  23. None
  24. READY FOR PRODUCTION

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

    Noun Project
  26. Hey user! Something awesome happened!

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

  28. 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”>
  29. 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
  30. 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
  31. 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”>
  32. Shadow DOM

  33. Shadow DOM || “Shady DOM”

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

  35. 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”>
  36. 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
  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”> Define your prototype
  38. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story">

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

  40. 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
  41. 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!
  42. Light DOM - The world outside your component’s Local DOM

  43. 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
  44. </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>
  45. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

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

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

  48. <input type=“checkbox”>

  49. <input type=“checkbox” checked>

  50. <input type=“checkbox” checked> // or in JavaScript input.checked = true;

  51. <dom-module id=“alert-banner"> <template> … <div class=“alert”> <content select=“.message”></content> </div> </template>

    <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module>
  52. <dom-module id=“alert-banner"> <template> … <div class=“alert”> <content select=“.message”></content> </div> </template>

    <script> Polymer({ is: ‘alert-banner’, properties: { shown: { type: Boolean, value: false, notify: true } } Properties make your element configurable
  53. <dom-module id=“alert-banner"> <template> … <div class=“alert” hidden="{{!shown}}"> <content select=“.message”></content> </div>

    </template> <script> Polymer({ is: ‘alert-banner’, properties: { shown: { type: Boolean, value: false, notify: true } } Bind attributes to the state of a property
  54. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your

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

    Your first component! </span> </alert-banner>
  56. Elements Building blocks for a better web

  57. There’s an element for that!

  58. core paper

  59. None
  60. None
  61. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube>

  62. None
  63. None
  64. None
  65. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …

  66. None
  67. None
  68. None
  69. <gold-cc-input> <gold-zip-input> <gold-cc-expiration-input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> …

  70. None
  71. elements.polymer-project.org

  72. There’s an element for that!

  73. Applications Combining elements into something great

  74. Polymer Starter Kit

  75. Polymer Starter Kit

  76. Polymer Starter Kit New version soon

  77. Image: https://www.flickr.com/photos/wwarby/16600407462/ App templates

  78. Navigation Cards Layout

  79. Navigation List Detail

  80. List Card Over

  81. Image: goo.gl/QZlMwX Responsive breakpoints

  82. Material Design breakpoints

  83. 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
  84. Web App install banner Mobile Web defaults Meta theme color

  85. Icons

  86. Offline-first (in your app)

  87. None
  88. There’s an element for that!

  89. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …

  90. Service Worker caching Take your app offline with ease <link

    rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
  91. Production-ising Apps

  92. image: http://gulpjs.com

  93. Build process out of the box

  94. Live-reload and cross-device development

  95. Polymer is lean, and production ready

  96. Create or reuse elements in any app

  97. Starter Kit gets you up and running

  98. None
  99. polymer-project.org

  100. Thanks! @iblancasa @GDGgranada

  101. More? https://polymer.slack.com/ https://github.com/Polymer https://twitter.com/rob_dodson