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
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
200
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
120
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
110
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
580
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
250
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
540
What's New in Android 2026
Avatar for Veronikapj veronikapj
0
270
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
110
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
220
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
310
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
670

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
250
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
540
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
170
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.7k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
520
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
950
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
790

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