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

Marko e HTML (Curso de NodeJS)

Boa tarde,

estou fazendo o curso de NodeJS aqui na Alura com o professor Gabriel e está fantástico, porém, devido a minha condição de iniciante não compreendi muito bem o que é o "Marko" que foi instalado na aula de "Templates Dinâmicos".

Dúvida: criei um layout utilizando HTML + CSS e queria utilizar este mesmo layout, tornando ele dinâmico no Back end utilizando o NodeJS, caso eu utilize este layout que já criei, preciso instalar o template Marko no meu projeto? Ou não tem necessidade de instalar o Marko pois já possuo um Front End que criei? (ou minha pergunta não tem pé nem cabeça? rsrs)

Agradeço desde já a atenção.

2 respostas
solução!

Olá Marcelo, tudo bem?

Então o "Marko" nada mais é que do que um template dinâmico de HTML, isso é organizamos nosso arquivo como se fosse um html normal, entretanto temos alguns bônus como poder passar dados para esse html, poder utilizar alguns recursos mais programáticos como ter recursos como tags for, if dentro de nosso próprio html.

Em relação a sua pergunta: O ideal seria utilizar o marko para conseguir passar as informações para o seu template, mas veja que podemos copiar um html e css para o marko que ele irá renderizar normalmente, então você não precisa refazer aquilo que você já tem :)

Observe uma parte de um dos formulários que será apresentado no curso, veja que é um html padrão um pouco mais inteligente com os recursos do marko:

<div class="container">
                <h1>Cadastro de livros</h1>

                <form action="/livros" method="post">

                    <div if(data.livro.id)>
                        <input type="hidden" name="_method" value="PUT">
                        <input type="hidden" name="id" value="${data.livro.id}">
                    </div>

                    <div class="form-group">
                        <label for="titulo">Titulo:</label>
                        <input type="text" id="titulo" name="titulo" value="${data.livro.titulo}" placeholder="coloque o titulo" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="preco">Preço:</label>
                        <input type="text" id="preco" name="preco" placeholder="150.25" value="${data.livro.preco}" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="descricao">Descrição:</label>
                        <textarea cols="20" rows="10"  id="descricao" name="descricao" placeholder="fale sobre o livro" class="form-control">${data.livro.descricao}</textarea>
                    </div>

                    <input type="submit" value="Salvar" class="btn btn-primary"/>
                </form>
            </div>

Não temos como passar informações para um arquivo html pois ele é estático, então precisamos de bibliotecas como o marko para poder renderizar nosso frontend com as informações que temos no banco de dados, ou que vieram da requisição do usuário para ter algo mais dinâmico :)

Conseguiu compreender?

Abraços e bons estudos!

Valeu Geovani, compreendi perfeitamente! Muito obrigado!