A última atualização do Windows (Limite 2) apresentou suporte a novos padrões no Edge. Embora existam muitos novos recursos e correções de bugs, um que me deixou um pouco animado é o elemento TEMPLATE. Eu estava esperando o Edge adicionar suporte para elemento TEMPLATE por um tempo porque Eu uso modelos HTML extensivamente em meus aplicativos da web.
Eu evitei fazer qualquer experiência séria com o elemento TEMPLATE até que ele fosse comumente suportado em navegadores. Com o Edge que completa todos os navegadores de fluxo principal atuais , decidi ver o que seria necessário para atualizar minha infraestrutura de elementos SCRIPT para Elementos TEMPLATE. Spoiler, fiquei muito desapontado com minha descoberta.
O hack do elemento SCRIPT
Comecei a usar a renderização do lado do cliente no final de 2008 e criei minha primeira técnica formal há cerca de um ano mais tarde. Essa técnica usou o que chamo de hack SCRIPT. É aqui que você envolve um modelo HTML em um elemento SCRIPT, mas define o tipo para algo personalizado.
Esta técnica faz duas coisas, impede o navegador de renderizar a marcação e faz com que o navegador não avalie o conteúdo como um script. Esses dois recursos são importantes e eu pensei que é o que o elemento TEMPLATE faria.
Se a marcação do modelo for renderizada pelo navegador, o usuário a verá. A pré-renderização não é desejável porque você deseja mesclar dados com o modelo para gerar a marcação para adicionar ao DOM imediatamente. Isso cria confusão na mente do cliente porque ele vê esse conteúdo que não faz sentido com o estado do aplicativo. Ele também adiciona mais elementos para o navegador renderizar, o que significa que ele fica mais lento.
Embora você possa ocultar seus modelos definindo a propriedade display: none e valor no elemento de embalagem, isso não resolve tudo nossos problemas. Outro ponto negativo quando um modelo é renderizado é o download de imagens, o que pode ocupar conexões HTTP valiosas e fazer com que seu aplicativo seja inicializado mais lentamente.
Usar um elemento SCRIPT impede que a marcação seja renderizada e que as imagens sejam baixadas por causa do navegador vê esses blocos como scripts. No entanto, agora o navegador pensa que o conteúdo do elemento é um script e tenta analisar o conteúdo como JavaScript, o que não é verdade. Embora a maioria dos modelos inclua uma mistura de script e marcação, não é um script no sentido tradicional.
É por isso que você deve sempre definir o atributo type como um valor personalizado. Quando o navegador avalia o tipo e não o reconhece como um tipo JavaScript, ele ignora o conteúdo e não tenta avaliar o conteúdo. Em essência, o navegador considera os modelos SCRIPT como algum tipo de conteúdo inerte que não faz nada. Os elementos permanecem no DOM, mas não são estilizados, renderizados ou avaliados, exatamente o que precisamos.
Se você leu meu livro de aplicativo da Web de página única de alto desempenho, leia este blog ou participou de um de meus SPA apresentações ao longo dos últimos anos, você sabe que confiei no hack SCRIPT para conduzir meus SPAs. Usar o hack SCRIPT é apenas um hack. Não é natural, mas é um truque que podemos usar para habilitar nossos aplicativos modernos, baseados em AJAX.
O elemento TEMPLATE, uma nova esperança
O elemento Template prometia tornar nativo o que O hack de tag de script vem ocorrendo nos últimos 8 ou 9 anos. Isso significa que a marcação no elemento Template não é renderizada e quaisquer ativos, como imagens, não são solicitados. Isso significa que o conteúdo do modelo é inerte e não causa nenhum impacto real no desempenho, que é o que queremos. A vantagem do elemento Template sobre o hack do Script é que ele é semanticamente correto.
Estou entusiasmado com a promessa de um elemento semântico para ajudar a conduzir aplicativos da web modernos e sofisticados. E se o elemento TEMPLATE fizesse essas duas coisas, tudo estaria ótimo. Mas, infelizmente, faz mais. É aqui que a história descarrila e nos encontramos no abismo da decepção.
No mês passado, tirei um tempo em um fim de semana para refatorar meu Aplicativo Fast Furniture para usar o elemento TEMPLATE. Achei que não seria muito mais do que apenas uma busca global e substituição de elementos SCRIPT por elementos TEMPLATE. Depois de fazer esse rápido exercício, carreguei o aplicativo e o vi explodir. Meu console estava cheio de mensagens de erro vermelho-sangue.
Eu cometi o erro de não lendo as instruções e quando o fiz, meio que encobri as letras miúdas. Você vê que o elemento TEMPLATE não é um substituto semântico do elemento SCRIPT, ele adiciona complicações ao fluxo de trabalho.
Primeiro, você não pode usar o elemento TEMPLATE como um wrapper de modelo, ele precisa ser clonado. Acho isso um tanto estranho e em contraste com o que descobri ser uma prática recomendada de SPA.
Criei vários SPAs bastante grandes e, como tal, lidei com centenas de modelos em um aplicativo. Eu carrego modelos, scripts, CSS etc. com preguiça. Tenho técnicas sofisticadas para garantir que o aplicativo carregue rapidamente e rode super rápido. Isso envolve analisar e remover minhas visualizações, layouts e modelos do DOM durante o processo de inicialização e cache desses componentes no armazenamento do navegador .
O elemento TEMPLATE adiciona requisitos extras que tornam essa técnica difícil, senão impossível. Passei a maior parte do fim de semana tentando fazer isso funcionar e não achei nada. Se você ler as instruções no artigo HTML5 Rocks , deverá ver que o elemento TEMPLATE deve fazer parte do DOM. Além disso, o elemento deve ser clonado antes de ser usado.
Isso significa que um SPA exigiria potencialmente que centenas de modelos permanecessem na memória. Você pode estar dizendo, e daí? Eu sei que fiz quando comecei a criar aplicativos de página única. Então tentei executá-los em telefones e aprendi rapidamente que você precisa manter o DOM muito fino para obter o desempenho de tempo de execução desejado. Árvores DOM grandes são lentas e os usuários odeiam essa experiência. Minha técnica limpa o DOM dos modelos de aplicativo, ajudando-o a executar o mais rápido possível quando o usuário interage com o conteúdo.
Em segundo lugar, passei por vários giros de modelos e técnicas de vinculação. Comecei com a micro-modelos de John Resig em 2009, passei para o MUSTACHE, Handlebars e, em seguida, vinculação MVVM. Fiz o círculo completo e voltei ao microtemplating, que também é empregado por Underscore e Backbone . Em sua essência, é a construção de string, a maneira mais rápida de mesclar marcação com dados .
Eu poderia ter vivido com uma nova técnica que exigisse clonagem, mas não consegui fazer isso funcionar sem injetar o modelo de volta no DOM. Achei que era apenas uma perda boba de tempo e recursos. Por que não posso simplesmente acessar o conteúdo do template e fazer o que venho fazendo?
Para complicar ainda mais, não pude usar meus templates. Uma das reclamações sobre os modelos’Push’, ou modelos de construção de strings, é a preocupação com XSS. Isso significa que um usuário pode enviar uma marcação sem escape que pode executar um script maligno.
Claro, isso significa que você precisa projetar seu código de forma bastante descuidada, o que pode acontecer até mesmo com os melhores de nós. Mas a realidade é que você pode escapar de qualquer conteúdo enviado como parte de seu processo lógico. Além disso, seu aplicativo deve ser inteligente o suficiente para saber quem está enviando conteúdo e controlar para onde esse conteúdo vai. Portanto, faço uma pequena exceção a essa objeção, mas entendo a preocupação. É aqui que o elemento template tenta fazer muito, ele expandiu seu escopo além de seus requisitos.
Infelizmente, o elemento TEMPLATE retorna apenas uma versão de escape do template, o que significa que você não pode usar uma técnica de mesclagem baseada em campo , que novamente é minha técnica preferida. Em vez disso, você deve ter um conjunto de JavaScript pesado, seja uma biblioteca/estrutura ou alguma rotina personalizada feia para definir os valores do modelo. Isso significa muita sobrecarga, que eu simplesmente não posso pagar.
Simplificando, isso tornou o elemento TEMPLATE inutilizável. Uma decepção muito triste.
E os navegadores legados
Ainda pensando em usar o elemento TEMPLATE? Mas e aquelas pessoas que ainda usam Internet Explorer ou Opera Mini? E há o Android.
Primeiro Opera Mini. A menos que eu tenha um tráfego significativo do Opera Mini, não vou considerar isso. No entanto, se eu tiver tráfego, implementaria algum tipo de núcleo opção do site , mas isso está fora do escopo deste artigo.
Como você sabe, o Internet Explorer não receberá novos recursos e suporte a padrões, portanto, nenhum elemento de modelo. Na verdade, em menos de um mês o IE 10 e menos não são mais compatíveis. Isso por si só limpa a área de superfície de suporte com a qual se preocupar. Mas ainda haverá milhões, senão um bilhão ou mais de usuários do Internet Explorer por aí.
Primeiro, Windows Phone. É cerca de 3-5% de penetração de mercado, o que infelizmente não é muito. Espero que a maioria seja capaz de atualizar para o Windows 10 em breve, o que significa que eles usarão o Edge, problema resolvido. Mas digamos que seja 50% (sendo generoso e usando um número muito redondo). Agora temos cerca de 2% do mundo móvel em um navegador obsoleto que não oferece suporte a Template.
O próximo é o desktop, dominado pelo Windows. Embora a maioria dos consumidores use o Chrome e o Firefox (e um número crescente de Edge) como navegador de desktop, muitas empresas não usam. Eles estão preocupados com a falha de seu software de negócios legado nesses ambientes modernos. Mesmo com a suspensão do uso de todos, exceto o Internet Explorer 11 no mês que vem, muitos continuarão com as versões mais antigas do Internet Explorer.
A grande maioria desses sistemas não está sendo atualizada para o Windows 10, o que significa que não têm acesso ao Edge e o elemento TEMPLATE. E lembre-se de que este é um ambiente corporativo, então é mais provável que eles não consigam usar o Chrome, Opera ou FireFox. Esses usuários finais estão presos ao Internet Explorer, mesmo que seja 11. Isso é bilhões de computadores desktop.
Finalmente, e quanto ao Android. Claro que você está usando o Chrome no seu andróide, mas a maioria usa o navegador padrão. Os navegadores padrão não suportam o elemento TEMPLATE. E é claro que você também precisaria de um Android mais recente, quantos ainda usam um Gingerbread ou um Android antigo. De novo, muitos.
Embora eu tivesse grandes esperanças de que o elemento TEMPLATE adicionasse bondade semântica ao mundo dos aplicativos da Web de página única, ele foi longe demais e se tornou inútil. Em vez de ser uma solução simples e agradável, ele faz muito e se torna um problema em vez de uma solução.
A natureza do elemento TEMPLATE também significa que não é um polyfil fácil, as imagens ainda serão baixadas, portanto, o suporte a navegadores legados não é viável.
A combinação de fazer muito e o suporte a navegadores legados tornam o elemento TEMPLATE uma má ideia. Continue com o hack SCRIPT e você poderá continuar a construir aplicativos da Web de uma única página de alto desempenho.
