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

A magia dos componentes nativos

Avatar for Larissa Abreu Larissa Abreu
January 31, 2018
Programming
400
2

A magia dos componentes nativos

Avatar for Larissa Abreu

Larissa Abreu

January 31, 2018

More Decks by Larissa Abreu

See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
Avatar for Larissa Abreu larissaabreu
0
320
Sempre teste mas debug se precisar
Avatar for Larissa Abreu larissaabreu
2
260
Guia prático para criação de componentes perfeitos
Avatar for Larissa Abreu larissaabreu
1
230
Custom Elements Everywhere
Avatar for Larissa Abreu larissaabreu
0
290
JavaScript e o teste filosofal
Avatar for Larissa Abreu larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS - Brasília
Avatar for Larissa Abreu larissaabreu
0
160
Web Components: fazendo do futuro uma realidade através do JS
Avatar for Larissa Abreu larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
140
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
140

Other Decks in Programming

See All in Programming
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
2
1.2k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1.1k
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
720
Dockerfile CMD for Node.js
Avatar for Ohno Keita grazie1999
0
120
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
500
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
110
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
380
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
880
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
510
私のClaude Code活用法 （個人開発編） - PHPerKaigi mini #4（2026/08/24）
Avatar for panda_program panda_program
1
160
夏だ！祭りだ！祭りとはドメインモデリングでは？
Avatar for ryugen04 ryugen04
0
400
Cloudflare is Agents
Avatar for chimame chimame
0
180

Featured

See All Featured
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
620
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
280
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
200
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
450
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
430
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.5k

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