A magia dos componentes nativos independente de frameworks

Vocês já se perguntaram por que a galera fica sofrendo para decidir se vai utilizar Angular, React ou Vue em seus projetos? E se alguém te dissesse que você pode criar seus próprios componentes encapsulados e utilizá-los em qualquer framework sem nenhum problema? Nessa talk irei compartilhar um pouco do que estou aprendendo trabalhando com web components nativos em produção. E lembre-se: Malfeito, feito.

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. Components?
   In FrontEnd
   

   View Slide

6. Web Components?
   

   View Slide

7. index.html
   
   
   
   
   
   
   
   
   
   Native!
   

   View Slide

8. How?
   W3C specifications
   

   View Slide

9. 
   
   Custom Elements
   Shadow DOM
   Imports
   Template
   

   View Slide

10. Shadow DOM
    Native CSS Scoped
    

    View Slide

11. View Slide

12. What is Polymer?
    By Polymer Team
    

    View Slide

13. View Slide

14. ???????
    

    View Slide

15. View Slide

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

    

    View Slide

17. December 2013
    Web Components
    Hype
    ? ? ? ?
    

    View Slide

18. After?
    Why didn't I know?
    

    View Slide

19. View Slide

20. November 2014
    Polymer 0.5
    Experiments
    ? ? ? ?
    

    View Slide

21. caniuse.com/#feat=template
    

    View Slide

22. View Slide

23. May 2015
    Polymer 1.0
    Ready to production
    ?
    

    View Slide

24. Shadow DOM v0
    Custom Elements v0
    The
    Problems
    

    View Slide

25. https://caniuse.com/#feat=custom-elements
    

    View Slide

26. https://caniuse.com/#feat=shadowdom
    

    View Slide

27. How to solve?
    Improving the platform
    

    View Slide

28. Shadow DOM v1
    Custom Elements v1
    

    View Slide

29. https://caniuse.com/#feat=custom-elementsv1
    

    View Slide

30. https://caniuse.com/#feat=shadowdomv1
    

    View Slide

31. View Slide

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

    View Slide

33. https://caniuse.com/#feat=imports
    

    View Slide

34. How to solve?
    Look at the platform
    

    View Slide

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

    View Slide

36. ES
    https://caniuse.com/#feat=es6-module
    

    View Slide

37. Last problem!
    Management dependencies
    

    View Slide

38. 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

39. github.com/bower/bower/issues/2298
    

    View Slide

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

    View Slide

41. Today
    

    View Slide

42. Polymer 3.0
    Is here!
    ES
    

    View Slide

43. Google IO - 09/05/2018
    

    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. github.com/LarissaAbreu/front-in-campinas
    

    View Slide

52. github.com/LarissaAbreu/front-in-campinas
    

    View Slide

53. Who?
    

    View Slide

54. +6000 Components
    

    View Slide

55. youtube.com/new
    

    View Slide

56. twitter.com/AJStacy06/status/857628546507968512

    

    View Slide

57. Community
    

    View Slide

58. View Slide

59. #UseThePlatform
    

    View Slide

60. Thanks!
    #UseThePlatform
    

    View Slide

61. A-FRAME
    Bônus!
    +
    Webcomponents and VR
    

    View Slide