Polymer - Una bella historia de amor

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