A magia dos componentes nativos

Transcript

1. `
   E a magia
   dos componentes
   nativos
   

   View Slide

2. `
   @TheSweet_Lari
   Gamer,
   future Suicide Girl
   and Front-end Dev
   Larissa Abreu
   @LarissaAbreu
   [complete aqui]
   Nem eu!
   

   View Slide

3. Antes
   

   View Slide

4. Antes
   Hoje
   

   View Slide

5. Antes
   Comunidade
   

   View Slide

6. @valledevs
   

   View Slide

7. Components?
   In FrontEnd
   

   View Slide

8. Web Components?
   

   View Slide

9. index.html
   
   
   
   
   
   
   
   
   
   Native!
   

   View Slide

10. How?
    W3C specifications
    

    View Slide

11. 
    
    Custom Elements
    Shadow DOM
    Imports
    Template
    

    View Slide

12. View Slide

13. What is Polymer?
    By Polyme Team
    

    View Slide

14. View Slide

15. ???????
    

    View Slide

16. View Slide

17. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

18. December 2013
    Web Components Hype
    ? ? ? ?
    

    View Slide

19. After?
    Why didn't I know?
    

    View Slide

20. View Slide

21. November 2014
    Polymer 0.5
    Experiments
    ? ? ? ?
    

    View Slide

22. caniuse.com/#feat=template
    

    View Slide

23. View Slide

24. May 2015
    Polymer 1.0
    Ready to production
    ?
    

    View Slide

25. Shadow DOM v0
    Custom Elements v0
    The
    Problems
    

    View Slide

26. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

27. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

28. How to solve?
    Improving the platform
    

    View Slide

29. Shadow DOM v1
    Custom Elements v1
    

    View Slide

30. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

31. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

32. View Slide

33. May 2017
    Polymer 2.0
    Do less magic
    ?
    ES6
    Class
    Hybrid
    Mode
    

    View Slide

34. youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

35. How to solve?
    Look at the platform
    

    View Slide

36. ES Modules
    import myComponent from ‘./my-component.js'
    jakearchibald.com/2017/es-modules-in-browsers
    

    View Slide

37. ES
    youtube.com/watch?v=7Q0-E_rZ_Cc&t

    

    View Slide

38. Last problem!
    Management dependencies
    

    View Slide

39. Back to 2013
    VS
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    

    View Slide

40. github.com/bower/bower/issues/2298
    

    View Slide

41. Today
    VS
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    Management dependencies
    Solve version conflicts
    Flat dependencies tree
    Active Community
    

    View Slide

42. Today
    

    View Slide

43. Polymer 3.0
    Preview
    ES
    

    View Slide

44. Final support?
    https://www.webcomponents.org/
    

    View Slide

45. View Slide

46. Why Polymer?
    

    View Slide

47. Cross Stack?
    

    View Slide

48. View Slide

49. Custom
    Elements
    Everywhere
    custom-elements-everywhere.com/
    

    View Slide

50. DEMO
    

    View Slide

51. Who?
    

    View Slide

52. +6000 Components
    

    View Slide

53. youtube.com/new
    

    View Slide

54. twitter.com/AJStacy06/status/857628546507968512

    

    View Slide

55. Community
    

    View Slide

56. View Slide

57. #UseThePlatform
    

    View Slide

58. Thanks!
    #UseThePlatform
    

    View Slide