Uma breve explicação sobre o pug.js, html template engine que roda em node.

1. PUG.js
Thamyres Guedes Corrêa
thataguedis@gmail.com

2. Sobre mim
● Formada em Redes de
Computadores pela Estácio
de Sá em 2012
● 6 anos na área de tecnologia
● Já trabalhei em Infra
Estrutura, Web Design e
Desenvolvimento.
● Atualmente sou WebDesigner
na eMiolo.com

3. O que é Pug.js?
● Um Template Engine
● Sintaxe simples e intuitiva
● Estrutura e sintaxe baseada
em indentação
● Pode gerar somente o HTML,
ou ser usando em junto com
uma API.

4. Estrutura Básica

5. Exemplo
Simples

6. O que ele faz de
diferente do HTML
comum?
● Fragmentar HTML
● Extends, Include, Block e
Mixin
● Estruturas de Repetição
● Estruturas de Controle (if,
else)
● Variáveis

7. Includes

8. Extends & Blocks

9. If, else

10. each, while

11. Mixins

12. Como Funciona?
● Exemplo de Landing Page
● Exemplo de Multi Page
● Usando uma API

13. Integração com
outras tecnologias
--extension whatever
● Pode ser utilizado somente
por Web Designer para gerar
o HTML
● Na camada de view, usando
os dados de uma API
● Ou junto com outras
Template Engines como
Blade, Twig, Smarty, etc.

14. Carregando dados
dinamicamente
Utilizando o NODE, eu consigo
carregar dados na view via
javascript ao acessar a página.
Não é necessário gerar o HTML
antes.

15. Por que usar?
● Páginas menores
● Reutilizar blocos de código
● Agilizar a codificação HTML
● Estrutura familiar a todos os
setores (Web Designer e
Desenvolvedor)
● Views totalmente separadas
da lógica do projeto e
indepente da linguagem*
● Pug Já minifica o HTML

16. Como começar?
npm install pug

17. Perguntas?

18. Obrigada !
Documentação
https://pugjs.org/api/getting-started.html