Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Como remover o HTML do arquivo JS

Talvez algo relacionado ao que o Carlos apontou... Problema: No passo 14, o exemplo final que popula a tabela com as negociacões possui código HTML dentro do JS.

Dúvida: Existe uma forma, boa pratica ou padrão para componentizar ou colocar este HTML fora do JS? Vamos imaginar que vamos passar o HTML para um web designer e queremos apenas que ele se concentre nos arquivos .html ...

Obs: Acredito que mesmo utilizando algo como o http://handlebarsjs.com/, podemos ter o mesmo problema. Mas como externalizar esta string html?

  class NegociacoesView {
    ...
    _template(model) {

        return `
        <table class="table table-hover table-bordered">
            <thead>
            </thead>
                <tbody>
                    ${model.negociacoes.map(n => `
                        <tr>
                            <td>${DateHelper.dataParaTexto(n.data)}</td>
                            <td>${n.quantidade}</td>
                            <td>${n.valor}</td>
                            <td>${n.volume}</td>
                        </tr>
                      `).join('')}
                </tbody>

        </table>
            `;
    }

Valeu e abraco. Roger.

5 respostas

Oi Roger, tudo bem? Na real, acho sim que podemos elaborar alguma forma de extrair o HTML para fora do JS, mas isso tornaria o processo bem mais complexo do que precisa ser.

Isso por que se você externa isso em arquivos de modelo externos, você quando fizer a leitura do arquivo, teria que fazer um searching dentro do texto para enxertar os dados.

Isso é só uma parte do problema, agora, com o arquivo separado, você iria precisar realizar um request a mais na página para capturar o arquivo, encher o conteúdo e printar ele na página.

Consegue ver que é bem mais trabalhoso?

Oi Wanderson! Obrigado pela resposta. Mas apesar de entender seus pontos. Meu maior problema é que o HTML fica mudando, pode receber um novo CSS... Se o "template" esta hard coded no JAVASCRIPT fica dificil de manter... E se o time que tem separacão entre design e pessoal da logica de negócio, ficou mais difícil ainda...

Entende meu ponto?

Acredito que por este motivo existem web components e algo na linha do Polymer. Mas a questão é, será que existe algum padrão mais simples sem usar um framework?

Valeu

Olá, pode ser feito de várias formas, mas no final o template tem que ser sempre convertido em JS e carregado em um bundle para sua aplicação final.

O padrão que eu segui é o mesmo usando pela famosa biblioteca React do Facebook. Conhece essa biblioteca? Nela, você escreve o template dentro do JavaScript com auxílio do JSX.

Eu poderia ter feito diferente, ter carregado o template via Ajax ? Sim, poderia, mas como o curso foca ES6 e não foca processo de build, a performance de carregar o template seria sofrível, uma má prática sem um processo de build adequado.

A estratégia de React me proporcionou manter o foco em ES6 sem entrar em detalhes de processo de build que fogem o escopo do curso.

Mas nada o impede de usar o seu conhecimento de JavaScript + ajax e carregar o template sobre demanda se assim desejar, mas como disse, será uma má prática caso você não tenha um sistema de build adequado.

Roger, é isso mesmo que o Flavio comenta. No caso, se quer se ver totalmente livre de frameworks, tudo bem. Você pode usar um template engine que não é um framework, mas sim um parser, assim você pode ter as coisas separadas sem muito trabalho.

Mas ainda sim, você precisará de um passo a mais, o do build que o Flavio fala acima.

Duas opções bem conhecidas de template engine são o EJS e o Jade. Sendo o primeiro muito mais amigável e ambos possíveis de serem utilizados sem nenhum framework.

solução!

Perfeito Anderson. Eu também concordo com o Roger que a manutenção ficaria mais fácil que o template estivesse em separado. Aliás, há um grande racha na comunidade do escrevermos um template dentro do JS ou fora.

Se quiser ter uma ideia por alto sobre o carregamento via Ajax pode conferir esse meu projeto.

https://github.com/flaviohenriquealmeida/routerix

Sucesso e bom estudo meu aluno.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software