ESTRATÉGIAS DE MANIPULAÇÃO DO DOM

@eduardojmatos eduardomatos.me OI, EU SOU O EDU

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

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

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

No content

No content

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

No content

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

No content

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

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')); //

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

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;

No content

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

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

MAS PODIA MELHORAR +

$('#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!");

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

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

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;

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

CHEGAM OS TEMPLATE ENGINES

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;

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

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

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.

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;

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’));

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

No content

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;

VIRTUAL DOM

renderA: renderB: => [insertNode second]

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;

No content

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

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');

BENCHMARKS

BENCHMARKS

BENCHMARKS

No content

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).

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

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

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