Devtalk 0 - Sobre

Html, Jade, e
Web Components

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<title>Document</title>
    </head>
<body>
    <h1>Hello</h1>
</body>
</html>

Um simples html

Um html jade mais simples ainda

Problemas do HTML

  • Não tem include
  • Não tem funções
  • Não tem herança
  • Código miojo

Features do Jade/Pug

  • Tem include
  • Tem funções
  • Tem herança
  • Syntax legível
  • Força indentação

Por que eu preciso melhorar meu html?

Por que eu quero trabalhar assim

Ok, mas como eu reuso

coisas de front em outros projetos?

Reutilização

Java => bibliotecas / jar

Rails => gems

Node.js => modules

Front => ?

WebComponents

por exemplo,

um componente de Interface

Tabs

Como ficaria o html disso?

Crie tags para definir um componente

E no fim isso irá gerar um html diferente

Quem define isso é um código javascript

E cada framework implementa isso de forma diferente

...

Basicamente,

é como se seu js fosse a "classe" do seu component

e no seu html, com uma tag você
"instancia" seu componente

Vantagens

  • Fácil manutenção
  • Testes automatizados
  • Distribuição
bower install meuModulo
npm install meuModulo
bower update meuModulo
  • Atualização
npm update meuModulo

Daí com tudo bem perfeito...

podemos ser felizes:

Github, Slack

@darlanmendonca

Slack Channel

#devtalk

deck

By Darlan Mendonça

Made with Slides.com

deck

  • 147

More from Darlan Mendonça