Polymer - Una bella historia de amor

Charla para el DevFest de Córdoba 2016 sobre Polymer

Transcript

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

   View Slide

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

   View Slide

3. Mejor tarde que nunca
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. Web Components are low-level
   primitives that let you define
   your own HTML Elements.
   

   View Slide

9. Template
   Shadow DOM
   Custom Elements
   HTML Imports
   native client-side templating
   scoping, composition
   define new HTML/DOM
   loading web components
   

   View Slide

10. Primitives are designed so we can
    build libraries on top of them.
    

    View Slide

11. So what is Polymer?
    

    View Slide

12. Polymer is not
    a framework
    

    View Slide

13. Existing Frameworks
    Applications
    Web Platform
    Web Components built with Polymer (or not)
    

    View Slide

14. Polymer is not
    a framework
    Sure?
    

    View Slide

15. Over 3M pages
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. Let’s build
    an element!
    Image by Gloria Viganò for the Noun Project
    

    View Slide

23. Hey user! Something awesome happened!
    

    View Slide

24. x
    Hey user! Something awesome happened!
    
    

    View Slide

25. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    

    View Slide

26. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    Import all of your
    dependencies
    

    View Slide

27. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    A container for your
    element definition
    

    View Slide

28. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    Local DOM is the DOM
    an elements is in charge of
    creating and managing
    
    

    View Slide

29. Shadow DOM
    

    View Slide

30. Shadow DOM || “Shady DOM”
    

    View Slide

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

    View Slide

32. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    Local DOM is the DOM
    an elements is in charge of
    creating and managing
    
    

    View Slide

33. alert-banner.html
    
    
    <br/>.alert { background: blue; color: white; }<br/>
    
    Hey user! Something awesome happened!
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    Hey user! Something awesome happ
    Hey user! Something awesome happ
    

    View Slide

34. alert-banner.html
    
    
    <br/>.alert { background: blue; color: white; }<br/>
    
    Hey user! Something awesome happened!
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    Define your
    prototype
    

    View Slide

35. 
    
    
    
    Polymer!
    
    
    
    
    

    View Slide

36. Hey user! Something awesome happened!
    

    View Slide

37. alert-banner.html
    
    
    <br/>.alert { background: blue; color: white; }<br/>
    
    Hey user! Something awesome happened!
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    Replace hard-coded data
    

    View Slide

38. alert-banner.html
    
    
    <br/>.alert { background: blue; color: white; }<br/>
    
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    With content elements!
    

    View Slide

39. Light DOM - The world outside
    your component’s Local DOM
    

    View Slide

40. alert-banner.html
    
    
    <br/>.alert { background: blue; color: white; }<br/>
    
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    Select content with
    CSS selectors
    

    View Slide

41. 
    
    
    Polymer!
    
    
    
    
    Lorem ipsum dolor sit amet…
    

    View Slide

42. 
    
    
    Polymer!
    
    
    Success! Your first component!
    
    
    

    View Slide

43. 
    
    
    Polymer!
    
    
    Success! Your first component!
    
    
    Matching class
    

    View Slide

44. Success! Your first component!
    

    View Slide

45. Elements
    Building blocks for a better web
    

    View Slide

46. There’s an element for that!
    

    View Slide

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

    View Slide

48. Applications
    Combining elements into something great
    

    View Slide

49. Create or reuse elements in any app
    

    View Slide

50. Production-ising Apps
    

    View Slide

51. Build process out of the box
    

    View Slide

52. View Slide

53. GDG Granada
    

    View Slide

54. polymer-project.org
    

    View Slide

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

    View Slide