Se quisermos pensar em como melhorar o trabalho dos desenvolvedores para um futuro bem próximo, é preciso falar em Houdini CSS. Não é raro desenvolvedores web encontrarem problemas ao tentar usar uma feature CSS ainda não implementada por um determinado navegador. Neste caso, faz-se necessário buscar uma solução alternativa ou escrever um polyfill.
Pensando no primeiro aspecto, soluções alternativas podem não atender à demanda por completo nem agregar valor à solução como um todo. Além disso, polyfills de CSS são muito difíceis de serem escritos. Ainda assim, é quase impossível criar um que não tenha um impacto muito grande na performance. Isso porque o JavaScript não atua na primeira renderização e, assim, precisa forçar um novo processo de renderização da página.
Houdini é uma das inovações mais excitantes para o desenvolvimento web dos últimos tempos. Analisando este cenário, empresas como a Apple, Microsoft, Opera, Google e Firefox trabalham em conjunto para exporem partes da engine do CSS. Assim, os desenvolvedores podem fazer parte dessa construção mágica.
Quando todos os navegadores tiverem colocado em prática o Houdini, qualquer feature poderá ser implementada diretamente. Além de rodar como se fosse CSS nativo em qualquer navegador. Esse é o futuro que a força-tarefa das empresas citadas acima está tentando construir.
Estágios de evolução do Houdini CSS nos principais navegadores
Worklets
Worklets são um conceito para tornar várias das API’s possíveis. Nós já tínhamos o conceito de Web Workers, mas algumas das API’s precisam ser rodadas frame por frame. Logo, essas Web Workers vão onerando demais o navegador. As Worklets são uma versão mais leve e com pouco tempo de vida desses Web Workers.
Layout API
Essas API ainda está sendo implementada no Google Chrome Canary. Ela promete ser tão poderosa (ou mais) que a paint API. Com ela podemos criar nossas próprias propriedades de display. O que essa API faz é nos permitir entrar na fase de renderização do layout e implementar o nosso próprio algoritmo. Além de podermos implementar layouts como o Masonry sem a perda de performance, já que o nosso algoritmo rodará nativamente.
Paint API
Na data da publicação deste artigo, essa API foi entregue para o Chrome (65) e para o Opera (52). Com a paint API nós podemos retornar uma imagem CSS para propriedades que a esperam. Mas, ao invés de retornar um valor padrão, utilizando JavaScript, podemos registrar uma classe com um callback com parâmetros que nos permitem desenhar uma imagem.
Essa API é uma das mais surpreendentes até o momento. Se você é um desenvolvedor web talvez já tenha passado pela situação de receber um layout com elementos visuais difíceis de serem reproduzidos pelo CSS. Sem essa API são necessárias soluções alternativas com CSS, que na maioria das vezes não atende às demandas. Entretanto, com o Houdini as possibilidades se expandem, pode-se criar uma própria forma de mostrar um elemento CSS e definir como ele se comporta.
Exemplo de código usando Houdini CSS e imagem gerada a partir dele
See the Pen
Hello Houdini: Animated Polka Dot Fade by Luis (@luisteixeira)
on CodePen.
https://codepen.io/luisteixeira/pen/GzLmMO
Typed OM
Typed OM é uma forma de expandir o antigo CSSOM (CSS object model). Essa era uma forma de modificar o CSS via JavaScript. O problema é que ele não mantinha o tipo correto do dado quando era utilizado. Assim, se por exemplo, decidíssemos dar a uma propriedade um valor numérico, ele o converteria para uma String. Agora esses valores são expostos como objetos JavaScript, o que ajuda na performance da manipulação do CSS. Isto porque o navegador não precisa mais serializar e desserializar as strings de cada valor. Apesar da sintaxe ficar um pouco mais “verbosa”, agora conseguimos diminuir a quantidade de bugs potenciais, já que mantemos o tipo do dado. Também conseguimos realizar cálculos aritméticos e conversões, aumentamos a performance e conseguimos lidar melhor com erros de CSS. Afinal, agora podemos fazer um Parse do CSS antes de utilizá-lo e recuperar qualquer exceção utilizando um bloco try catch.
Usando o CSSOM
Usando Typed OM
Apesar de estar engatinhando ainda, o Houdini CSS é, para dizer no mínimo, empolgante. Durante anos, nós, devs, só pudemos resolver nossos problemas testando diversas propriedades, usando imagens, usando polyfills, etc. Agora poderemos ter um controle maior, nos inserir na hora de renderização e lá criar nossa própria mágica. Isso porque moldamos as propriedades à nossa criatividade construímos coisas novas, trazendo mais “magia” para a Web.
Fontes:
https://developers.google.com/web/updates/2016/05/houdini
https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/
https://drafts.css-houdini.org/
https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md
https://developers.google.com/web/updates/2018/03/cssom
https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/
*Artigo escrito por Luis Teixeira, programador na Kbase.
