Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A magia dos componentes nativos

251c46a689557c394ceb553775e7ad3a?s=47 Larissa Abreu
January 31, 2018
Programming
2
190

A magia dos componentes nativos

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

January 31, 2018
Tweet

More Decks by Larissa Abreu

See All by Larissa Abreu
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
2
77
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
1
190
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
76
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
76
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
53
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
94
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
75

Other Decks in Programming

See All in Programming
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
180
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
2
1.4k
E10ba38646a905c8cd2c893c84d5c520?s=48 suzushin54
0
280
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
922f51d458d6ffee8578b9d3ab0a52b6?s=48 ug
1
180
35e08efcf39d692f540047fb756eb4e3?s=48 konifar
0
1.9k
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
940
F9e11bea0c22333596791dd0696f5d4f?s=48 daiksy
1
3.3k
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
180
E35f18d9e5584b48a7cf5550f905522f?s=48 zntfdr
1
140
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
PRO
2
2.7k
7e56a691cfb413e0f6e631791f33fe54?s=48 mismith0227
0
200

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
47k
78b475797a14c84799063c7cd073962f?s=48 holman
295
140k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
112
15k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
120
7.5k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
56
3.6k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
33
2.7k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
17
1k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
18k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k

Transcript

  1. ` E a magia dos componentes nativos

  2. ` @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa

    Abreu @LarissaAbreu [complete aqui] Nem eu!

  3. Antes

  4. Antes Hoje

  5. Antes Comunidade

  6. @valledevs

  7. Components? In FrontEnd

  8. Web Components?

  9. index.html <!doctype html> <html> <head> </head> <body> </body> </html> <link

    rel="import" href=“harry-potter.html”> <harry-potter></harry-potter> Native!

  10. How? W3C specifications

  11. <link rel="import" href=“harry-potter.html”> <harry-potter></harry-potter> Custom Elements Shadow DOM Imports Template

  12. None

  13. What is Polymer? By Polyme Team

  14. None

  15. ???????

  16. 2013

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


  18. December 2013 Web Components Hype ? ? ? ?

  19. After? Why didn't I know?

  20. 2014

  21. November 2014 Polymer 0.5 Experiments ? ? ? ?

  22. caniuse.com/#feat=template

  23. 2015

  24. May 2015 Polymer 1.0 Ready to production ?

  25. Shadow DOM v0 Custom Elements v0 The Problems

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


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


  28. How to solve? Improving the platform

  29. Shadow DOM v1 Custom Elements v1

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


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


  32. 2017

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

    Hybrid Mode

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


  35. How to solve? Look at the platform

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

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


  38. Last problem! Management dependencies

  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

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

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

    Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community

  42. Today

  43. Polymer 3.0 Preview ES

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

  45. None

  46. Why Polymer?

  47. Cross Stack?

  48. None

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

  50. DEMO

  51. Who?

  52. +6000 Components

  53. youtube.com/new

  54. twitter.com/AJStacy06/status/857628546507968512


  55. Community

  56. None

  57. #UseThePlatform

  58. Thanks! #UseThePlatform