Uma pergunta do Kewerson Hugo no meu post “Os músculos do Javascript” me lembrou de escrever sobre algo que parece tão simples, mas esconde nuances importantes que menosprezamos e deixamos de explicitar.
Respondendo diretamente: Template literals só resolve interpolação de strings e nada mais.
Em vez de fazer coisas como o primeiro código, pode interpolar valores em uma string usando o acento grave como marcador dessa string como pode ver no código seguinte.
https://gist.github.com/cmilfont/09b0623feaa3b6caaf1a01914747e3d4#file-template-concat-js
Engines de Template
Desde 1990 quando o HTML foi criado que ninguém tinha pensado (e se pensou não entregou) levar o XML pra dentro da linguagem para montar templates em vez do contrário como fizeram com PHP, JSP, ASP e todos os seguintes.
Há alguns poucos anos eu palestrei uma Lightning Talk no QCONSP sobre estratégias de engines de template em javascript.
Já na época eu contava mais de 20 existentes, não importa que estratégia era, tudo se resumia a no fim das contas concatenar/interpolar strings com estratégias mais elaboradas.
Templates não existem mais
Em 2013 quando o React surgiu eu lembro de um grande amigo, Mozart Diniz, me perguntar:
“- Milfont, o que acha desse React?”
E eu na minha ignorância usando meus preconceitos, respondi:
“- não vai dar em nada, idiotice”
Como sempre o idiota sou eu e talvez por isso eu seja pobre, na hora o que me veio a mente foi Javascript Obstrutivo
.
Interfaces Gráficas
Na própria página do JSX na documentação do React eles são bem humildões e dizem que é apenas um assucar sintático para o React.createElement.
É óbvio que JSX funciona muito bem com o Virtual-DOM, um assucar sintático pra montar a árvore DOM virtual dentro da sua árvore de componentes e usar uma linguagem ubíqua falando e mostrando as mesmas estruturas pra ir modelando o mindset de “dados sempre da raiz pras folhas”, unidirecional, etc.
Mas o que não percebemos até gastar algumas horas é o quão maravilhoso é esquecer de templates e considerar que XML agora é uma extensão bem vinda dentro da linguagem como cidadão de primeira classe no Javascript.
Atributo vira propriedade, tag vira classe na compilação, isso é só mais uma sintaxe Javascript, baby!
Se é linguagem, eu posso escrever uma ferramenta que compile, analize, verifique, me notifique e complete código.
Valores morais e boas práticas
Como template não existe mais, o que temos é um componente em uma linguagem que tanto devs quanto designers entendem (parcialmente pelo menos).
Por isso bato muito no curso de React sobre evitar trazer as más práticas da época do template pra o JSX, código como o seguinte é fácil de entender e talvez até o designer que não saiba programar consiga com algum esforço.
https://gist.github.com/cmilfont/60e77f8c7836aed63f98e4dbdd30fcc0
Em vez disso, escreveria como o seguinte.
https://gist.github.com/cmilfont/52026518d75b846c56d335ccbc484280
Parece bobagem a primeira vista, mas é civilizatório, acredite.
Quando um código em sintaxe XML cresce você decompõe em sub-componentes e tenta evitar dentro da marcação ter algum fluxo em outra sintaxe, apenas demarcações.
https://gist.github.com/cmilfont/a0b374345882f9d2aa6fbf93d3b10c9b
Os seus containers mais avançados com ciclo de vida se tornam também mais limpos e claros para todos os envolvidos no projeto.
Eu não consigo mais trabalhar com HTML fora do meu código Javascript.
Uso WebStorm (com essa extensão pra React) e Atom (no Atom o Nuclide e a extensão React por causa dos snippets dele).
Experimenta e me diz o que achou do JSX.
Ah, com o Babel, seja Webpack ou Browserify, você consegue usar em qualquer projeto.
Ah, pra quem se incomodou com assucar essa é a grafia correta. Jornais antigos demonstram isso.
