SlideShare uma empresa Scribd logo
1 de 8
html robusto
e elegante
com template engines
Murilo S. Ferreira
Dev. Frontend
Pug – robust, elegant, feature rich
template engine for Node.js
Indentação é muito
importante
O Pug utiliza a indentação/espaços em
branco do seu código para organizar a
hierarquia das suas tags html.
● Evite utilizar tags html (<body>)
● Configure uma indentação padrão no seu
editor (.editorconfig)
http://html2jade.org/
Principais
funcionalidades
➔ Herança de layout
➔ Interpolação
➔ Mixins
➔ Iteradores
(suporta each e while)
Herança de layout
Exemplo com gulp.js
(automatizador de tarefas)
https://github.com/muhroots/template-engine-pug-with-gulp
Referências
1. https://pugjs.org/api/getting-
started.html
2. https://blog.codecasts.com.br/ecossistem
a-javascript-parte-06-template-engines-
b41a41178dce
3. https://codeburst.io/getting-started-
with-pug-template-engine-e49cfa291e33
4. https://medium.com/@robmuh/why-i-
dropped-jade-pug-bf440c2269ae

Mais conteúdo relacionado

Semelhante a Pug: HTML robusto e elegante

Pense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkPense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkFlávio Lisboa
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e djangoIgor Sobreira
 
Qualidade em projetos PHP - SoLiSC 2011
Qualidade em projetos PHP - SoLiSC 2011Qualidade em projetos PHP - SoLiSC 2011
Qualidade em projetos PHP - SoLiSC 2011Luís Cobucci
 
Qualidade em projetos PHP - PHPSC Conf 2011
Qualidade em projetos PHP - PHPSC Conf 2011Qualidade em projetos PHP - PHPSC Conf 2011
Qualidade em projetos PHP - PHPSC Conf 2011Luís Cobucci
 
Python e Django
Python e DjangoPython e Django
Python e Djangopugpe
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonIgor Sobreira
 
Android DevConference - Automatizando testes sem sofrimento
Android DevConference - Automatizando testes sem sofrimentoAndroid DevConference - Automatizando testes sem sofrimento
Android DevConference - Automatizando testes sem sofrimentoiMasters
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmoitalomaia
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Gustavo Zimmermann
 
Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Jaime Neto
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpRodrigo Aramburu
 
1001 maneiras de debugar o WordPress
1001 maneiras de debugar o WordPress1001 maneiras de debugar o WordPress
1001 maneiras de debugar o WordPressRudá Almeida
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04Carlos Santos
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPressThiago Mendes
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Bruno Rocha
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com AngularElmano Cavalcanti
 

Semelhante a Pug: HTML robusto e elegante (20)

Django
DjangoDjango
Django
 
Pense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkPense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend Framework
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e django
 
Qualidade em projetos PHP - SoLiSC 2011
Qualidade em projetos PHP - SoLiSC 2011Qualidade em projetos PHP - SoLiSC 2011
Qualidade em projetos PHP - SoLiSC 2011
 
Qualidade em projetos PHP - PHPSC Conf 2011
Qualidade em projetos PHP - PHPSC Conf 2011Qualidade em projetos PHP - PHPSC Conf 2011
Qualidade em projetos PHP - PHPSC Conf 2011
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Python e Django
Python e DjangoPython e Django
Python e Django
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com Python
 
Android DevConference - Automatizando testes sem sofrimento
Android DevConference - Automatizando testes sem sofrimentoAndroid DevConference - Automatizando testes sem sofrimento
Android DevConference - Automatizando testes sem sofrimento
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmo
 
PHP: Como não programar em POG
PHP: Como não programar em POGPHP: Como não programar em POG
PHP: Como não programar em POG
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Seu framework é melhor pra quê?
Seu framework é melhor pra quê?
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephp
 
1001 maneiras de debugar o WordPress
1001 maneiras de debugar o WordPress1001 maneiras de debugar o WordPress
1001 maneiras de debugar o WordPress
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Vraptor 3
Vraptor 3Vraptor 3
Vraptor 3
 

Pug: HTML robusto e elegante

Notas do Editor

  1. Porque decidimos utilizar o pug, mesmo não estando em uma aplicação baseado em node.js?
  2. Comentar problemas ocorridos na compilação do pug
  3. Conversor online