Polymer - El fin a tus problemas con el FrontEnd

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

Transcript

1. Polymer
   el fin a tus problemas con el front-end
   +Israel Blancas
   @iblancasa
   #DevFestGRX
   GDG Granada
   

   View Slide

2. #DevFestGRX
   GDG Granada
   

   View Slide

3. #DevFestGRX
   GDG Granada
   

   View Slide

4. #DevFestGRX
   GDG Granada
   

   View Slide

5. Web Components are low-level
   primitives that let you define
   your own HTML Elements.
   #DevFestGRX
   GDG Granada
   

   View Slide

6. Template
   Shadow DOM
   Custom Elements
   HTML Imports
   native client-side templating
   scoping, composition
   define new HTML/DOM
   loading web components
   #DevFestGRX
   GDG Granada
   

   View Slide

7. Primitives are designed so we can
   build libraries on top of them.
   #DevFestGRX
   GDG Granada
   

   View Slide

8. So what is Polymer?
   #DevFestGRX
   GDG Granada
   

   View Slide

9. Polymer is not
   a framework
   #DevFestGRX
   GDG Granada
   

   View Slide

10. Existing Frameworks
    Applications
    Web Platform
    Web Components built with Polymer (or not)
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

12. Over 3M pages
    #DevFestGRX
    GDG Granada
    

    View Slide

13. #DevFestGRX
    GDG Granada
    

    View Slide

14. #DevFestGRX
    GDG Granada
    

    View Slide

15. #DevFestGRX
    GDG Granada
    

    View Slide

16. #DevFestGRX
    GDG Granada
    

    View Slide

17. #DevFestGRX
    GDG Granada
    

    View Slide

18. #DevFestGRX
    GDG Granada
    

    View Slide

19. Let’s build
    an element!
    Image by Gloria Viganò for the Noun Project
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

21. x
    Hey user! Something awesome happened!
    
    #DevFestGRX
    GDG Granada
    

    View Slide

22. alert-banner.html
    
    
    
    <br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
    
    
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

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

    View Slide

25. 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
    
    #DevFestGRX
    GDG Granada
    

    View Slide

26. Shadow DOM
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

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

    View Slide

29. 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
    
    #DevFestGRX
    GDG Granada
    

    View Slide

30. 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
    #DevFestGRX
    GDG Granada
    

    View Slide

31. 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
    #DevFestGRX
    GDG Granada
    

    View Slide

32. 
    
    
    
    Polymer!
    
    
    
    
    #DevFestGRX
    GDG Granada
    

    View Slide

33. Hey user! Something awesome happened!
    #DevFestGRX
    GDG Granada
    

    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/>
    
    
    Replace hard-coded data
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

36. Light DOM - The world outside
    your component’s Local DOM
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

38. 
    
    
    Polymer!
    
    
    
    
    Lorem ipsum dolor sit amet…
    #DevFestGRX
    GDG Granada
    

    View Slide

39. 
    
    
    Polymer!
    
    
    Success! Your first component!
    
    
    #DevFestGRX
    GDG Granada
    

    View Slide

40. 
    
    
    Polymer!
    
    
    Success! Your first component!
    
    
    Matching class
    #DevFestGRX
    GDG Granada
    

    View Slide

41. Success! Your first component!
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

43. There’s an element for that!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. #DevFestGRX
    GDG Granada
    

    View Slide

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
    

    View Slide

49. Production-ising Apps
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide

51. #DevFestGRX
    GDG Granada
    

    View Slide

52. #DevFestGRX
    GDG Granada
    GDG Granada
    

    View Slide

53. polymer-project.org
    #DevFestGRX
    GDG Granada
    

    View Slide

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

    View Slide