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

Guia prático para criação de componentes perfeitos

Avatar for Larissa Abreu Larissa Abreu
December 01, 2018
Programming
1
200

Guia prático para criação de componentes perfeitos

Venha comigo falar sobre os passos fundamentais para criar componentes que sejam fáceis de customizar, tenham uma boa performance, sejam impecáveis na questão acessibilidade, ainda por cima não sejam impossíveis de fazer manutenções que com certeza aparecerão e muito mais.

Ps.: E tudo isso sem depender de nenhum framework ;)
Avatar for Larissa Abreu

Larissa Abreu

December 01, 2018
Tweet

More Decks by Larissa Abreu

See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
Avatar for Larissa Abreu larissaabreu
0
280
Sempre teste mas debug se precisar
Avatar for Larissa Abreu larissaabreu
2
220
Custom Elements Everywhere
Avatar for Larissa Abreu larissaabreu
0
250
JavaScript e o teste filosofal
Avatar for Larissa Abreu larissaabreu
0
90
Web Components: fazendo do futuro uma realidade através do JS - Brasília
Avatar for Larissa Abreu larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
Avatar for Larissa Abreu larissaabreu
0
77
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
110
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
Avatar for Larissa Abreu larissaabreu
0
210

Other Decks in Programming

See All in Programming
LRパーサーはいいぞ
Avatar for ydah ydah
7
1.4k
Storybookの情報をMCPサーバー化する
Avatar for Shota Iwamatsu shota_tech
3
1.2k
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.9k
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
740
大LLM時代にこの先生きのこるには-ITエンジニア編
Avatar for Kuu fumiyakume
8
3.4k
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
150
知識0からカンファレンスやってみたらこうなった！
Avatar for syossan27 syossan27
5
280
監視 やばい
Avatar for syossan27 syossan27
12
10k
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
250
Duke on CRaC with Jakarta EE
Avatar for ivargrimstad ivargrimstad
1
150
“技術カンファレンスで何か変わる？” ──RubyKaigi後の自分とチームを振り返る
Avatar for shun ssagara00
0
120
ASP.NETアプリケーションのモダナイゼーションについて
Avatar for tomokusaba tomokusaba
0
260

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
183
22k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
76
9.4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
Side Projects
Avatar for Sacha Greif sachag
453
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.6k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k

Transcript

  1. Guia prático para Componentes Perfeitos

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

    @LarissaAbreu larissaabreu.github.io

  3. Por onde começar?

  4. None

  5. Componentes? No Front-end

  6. None

  7. Web Components?

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

    rel="import" href=“front-in.html”> <front-in></front-in> Nativo!

  9. Como? Especificações W3C

  10. <link rel="import" href=“front-in.html”> <front-in></front-in> Custom Elements Shadow DOM Imports Template

  11. Shadow DOM Escopo nativo do CSS

  12. None

  13. O que é Polymer? Pelo time do Polymer

  14. None

  15. ???????

  16. 2013

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


  18. Dezembro 2013 Web Components Hype ? ? ? ?

  19. O que aconteceu? Por que ninguém conhece?

  20. 2014

  21. Novembro 2014 Polymer 0.5 Experiments ? ? ? ?

  22. caniuse.com/#feat=template

  23. 2015

  24. Maio 2015 Polymer 1.0 Ready to production ?

  25. Shadow DOM v0 Custom Elements v0 Os Problemas

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

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

  28. Como resolver? Melhorando a plataforma

  29. Shadow DOM v1 Custom Elements v1

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

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

  32. 2017

  33. Maio 2017 Polymer 2.0 Do less magic ? ES6 Classes

    Modo Híbrido

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

  35. Como resolver? Olhando para a plataforma

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

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

  38. Último problema! Gerenciamento de dependências

  39. De volta para 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. Hoje em dia VS Management dependencies Solve version conflicts Flat

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

  42. Hoje

  43. Polymer 3.0 Is here! ES

  44. Google IO - 09/05/2018

  45. Na prática Criando web component (vanilla)

  46. class FrontIn extends HTMLElement { } constructor() { super(); }

    customElements.define('front-in', FrontIn); shadowroot.appendChild(h1); const shadowroot = this.attachShadow({mode: ‘open'}); const h1 = document.createElement('h1'); h1.innerText = ‘Front in’; front-in.js

  47. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    </body> </html> <front-in></front-in> <script type="module" src=“front-in.js"></script>
  48. None

  49. Utilizando propriedades

  50. front-in.js class FrontIn extends HTMLElement { constructor() { super(); const

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = ‘Front in ' + local; shadowroot.appendChild(h1); } } customElements.define('front-in', FrontIn);

  51. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    <front-in local=“Floripa"></front-in> <script type="module" src=“front-in.js"></script> </body> </html>
  52. None

  53. Ciclo de vida

  54. front-in.js class FrontIn extends HTMLElement { constructor() { super(); const

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'Front in ' + local; shadowroot.appendChild(h1); } connectedCallback() { // Conectado ao DOM } } customElements.define('front-in', FrontIn);

  55. Com o Polymer

  56. yarn add @polymer/polymer //12k

  57. front-in.js class FrontIn extends PolymerElement { }; customElements.define('front-in', FrontIn); import

    { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; static get properties() { return { local: String }; }; static get template() { return html` <h1>Front in [[local]]</h1> `; };

  58. Focando na Plataforma

  59. boas práticas? web components Como te ajuda com

  60. A11y Aria roles (semantic) Aria states (behavior) Focus Controle via

    teclado Testes de acessibilidade

  61. A11y

  62. Testes Unitários Regressão visual Lint

  63. Testes

  64. boas práticas? Polymer Como te ajuda com

  65. Performance Ready () AfterNextRender() LitHTML “Do less, be lazy”

  66. API estilo Custom properties

  67. API JS ReflectToAttribute Observer

  68. muito E MAIS!

  69. Cross Stack?

  70. None

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

  72. Design system Valle

  73. Suporte?

  74. None
  75. None

  76. Quem usa?

  77. +6000 Components

  78. youtube.com/new

  79. twitter.com/AJStacy06/status/857628546507968512


  80. https://larissaabreu.github.io/web-components-good-practices/

  81. "Ter componentes acessíveis, testados e performáticos é o primeiro passo

    para que sua aplicação também seja!" - Larissa Abreu

  82. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io