Slide 1

Slide 1 text

ESTRATÉGIAS DE MANIPULAÇÃO DO DOM

Slide 2

Slide 2 text

@eduardojmatos eduardomatos.me OI, EU SOU O EDU

Slide 3

Slide 3 text

a maior plataforma de contratação de serviços do Brasil

Slide 4

Slide 4 text

O QUE É O DOM? Document Object Model (DOM) Uma API para HTML e XML que define uma estrutura lógica de documentos e a forma que ele são acessados

Slide 5

Slide 5 text

// armazenando o DOM da table var table = document.querySelector('table'); // acesando o da tabela var tbody = table.firstChild;

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

console.log(typeof document.body) // "object" LOGO…

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

MÓDULOS DO DOM • Core module; • XML module; • Events module; • Mouse Events module; • …

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

CORE var button = document.createElement('button'); button.setAttribute('type', 'button'); button.setAttribute('id', 'colossus'); document.body.appendChild(button); var theButton = document.getElementById('colossus');

Slide 13

Slide 13 text

CORE var button2 = document.createElement('button'); button2.setAttribute('type', 'button'); button2.setAttribute('id', 'cyclope'); document.body.replaceChild(button2, button); console.log(document.getElementById('colossus')); // null console.log(document.getElementById('cyclope')); //

Slide 14

Slide 14 text

EVENTS var button = document.querySelector('#cyclope'); button.addEventListener('click', function(event) { console.log('Cyclope is clicked!'); });

Slide 15

Slide 15 text

BLZ, PRA MANIPULAR ENTÃO? - API um pouco complexa; - Criar elementos consumindo muitas linhas de código; - Renderizar novamente, de forma dinâmica, também consumia muito tempo/linhas;

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

AÍ SIM! document.getElement('button.btn'); // ou $$('button.btn');

Slide 18

Slide 18 text

AÍ SIM! var button = new Element('button', { 'class': 'btn', id: 'wolverine', type: 'button' });

Slide 19

Slide 19 text

MAS PODIA MELHORAR +

Slide 20

Slide 20 text

$('#wolverine').addClass('btn--success'); $('#wolverine').attr('role', 'button'); $('#wolverine').text('Vai Wolverine!'); $('#wolverine').click(function(event) { console.log('Opa! Clicou hein!'); }); $("body").append("Vai filhão!");

Slide 21

Slide 21 text

E ASSIM SURGIU "TEMPLATES"… var message = "É. Não deu certo, que pena :("; var template = "
" + message + "
"; $('body').append(template);

Slide 22

Slide 22 text

var message = "É. Não deu certo, que pena :(";
 var template = "
\ MESSAGE_FIELD
"; $('body').append(template.replace(/MESSAGE_FIELD/g, message));

Slide 23

Slide 23 text

MAS… NÃO ESCALA(VA)! • Templates muito grandes gerando uma baita manutenção; • Iterar listas com trechos de markup; • Problemas de XSS; • Performance baixa no content append; • Atualização gerando render novamente; • SEO*; • JS com HTML com String. Urgh;

Slide 24

Slide 24 text

JS COM HTML STRING. URGH • Mesmos problemas de manutenção; • Mistura de markup com código; • HTML menos independente;

Slide 25

Slide 25 text

CHEGAM OS TEMPLATE ENGINES

Slide 26

Slide 26 text

O(S) PROBLEMA(S) • Alguns frameworks começam a usar as template engines (ex: Backbone e o _.template do Underscore.js); • Começa a ganhar força o conceito de Data Model no browser;

Slide 27

Slide 27 text

O(S) PROBLEMA(S) • Atualização entre state do model e UI começa a criar problemas de performance; • A detecção dessas mudanças no model e reflexão na UI também é algo que cada framework tem tentado resolver de sua forma

Slide 28

Slide 28 text

SPAS Alguns frameworks implementam renderização de DOM de forma diferente

Slide 29

Slide 29 text

BACKBONE.JS • Usa apenas o append com o _.template do Underscore.js • Toda a árvore é atualizada, não importa se a mudança ocorreu apenas em um childrenNode; • Usa eventos do model pra avisar das alterações.

Slide 30

Slide 30 text

ANGULARJS • Dirty checking: o Angular cria um watcher para cada atributo do model. • Parece ruim, mas o update se torna muito mais rápido; • Problemas acontecem em interfaces com muitos models;

Slide 31

Slide 31 text

EMBERJS • Assim como o Backbone, manda eventos do model quando as alterações ocorrem; • A diferença é que intercepta essas mudanças com um bind de UI; • O problema é que é preciso usar os métodos da API do Ember pra isso ocorrer (ex: post.set(‘title’, ‘JavaScript Rocks’));

Slide 32

Slide 32 text

GLIMMER • Nova engine do Ember que tenta usar os benefícios do Virtual DOM enquanto mantém compatibilidade com API; • Os nodes são armazenados em filas de valores

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

REACT • Virtual DOM: uma cópia (não full, mas mais leve) do seu DOM que só renderiza o que for necessário; • Você não fica “escutando” mudanças, só faz o “re-render” novamente, sempre; • Quem se encarrega de aplicar os diffs é o Virtual DOM;

Slide 35

Slide 35 text

VIRTUAL DOM

Slide 36

Slide 36 text

renderA:
first
renderB:
secondfirst
=> [insertNode second]

Slide 37

Slide 37 text

OM • Uma interface de ClojureScript para o React; • Immutable data structures: você não altera apenas um atributo, mas produz uma cópia do objeto; • A performance é maior, mas não é o principal ganho;

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

VOLTANDO AO DOM • Outras libs que fazem apenas manipulação de DOM surgiram, como: • Incremental DOM; • virtual-dom; • inferno;

Slide 40

Slide 40 text

INCREMENTAL DOM • Uma lib responsável por aplicar update no DOM de forma performática; • Faz diff incremental (um node por vez); • Foco na performance de alocação de memória; • É uma lib não acoplada a algum framework. elementOpen('ul'); items.forEach(function(item) { elementOpen('li', item.id); text(item.text); elementClose('li'); }); elementClose('ul');

Slide 41

Slide 41 text

BENCHMARKS

Slide 42

Slide 42 text

BENCHMARKS

Slide 43

Slide 43 text

BENCHMARKS

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

RESUMINDO • Detecção e realização de mudanças é um grande problema ao usar o DOM. Use com cuidado; • Cada estratégia tem seus benefícios. O correto é avaliar se a lib ou framework que você usa atendem as demandas do projeto; • Ou seja, não use pelo hype; • Mas… Teste as novidades. Não seja ultra conservador! • Abra a mente pra novos conceitos (JSX).

Slide 46

Slide 46 text

FONTES • http://teropa.info/blog/2015/03/02/change-and-its-detection-in- javascript-frameworks.html • https://auth0.com/blog/2015/11/20/face-off-virtual-dom-vs-incremental- dom-vs-glimmer/ • https://auth0.com/blog/2016/01/11/updated-and-improved-more- benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ • http://reactkungfu.com/2015/10/the-difference-between-virtual-dom- and-dom/ • https://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ introduction.html • https://medium.com/google-developers/introducing-incremental-dom- e98f79ce2c5f • https://github.com/auth0-blog/blog-dombench/tree/dombench2

Slide 47

Slide 47 text

DOIS RECADINHOS =D • Para as meninas: FrontinVale está com call4paperz aberto (50% dos palestrantes serão mulheres)! • Fórum FrontendBR: https://frontendbr.github.io

Slide 48

Slide 48 text

[email protected] @eduardojmatos http://eduardomatos.me OBRIGADO ;) GetNinjas contrata front-end: https://getninjas.workable.com/