Diogo Moretti | [email protected]
Componetização e o mundo
moderno do front-end
Slide 2
Slide 2 text
Roadmap
● The Walking Dead da web
● Componetização sem frameworks css
● BEM, Smacss, OOCSS e o melhor jeito
● Semântica
● Grid Systems
● O melhor dos pré-processadores css
● Utilizando NodeJS como tooling
Slide 3
Slide 3 text
Roadmap
● Gulp, Grunt e como automatizar tudo
● Yeoman, Slush e generators
● Static Generators
● Git, Github e seu projeto no gh-pages
● Comunidade web/front-end
● Universo open-source
● Eventos
Sim! Isso são palavras do
nosso dia-a-dia
… e ~90% delas surgiram nos últimos 2 anos!
Slide 7
Slide 7 text
Componetização
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Muitos
fazem
assim
=[
Enviar
( + ) faz sentido com css puro
( + ) agilidade (pessoal do back-end like this)
( + ) prototipagem
( - ) semântica
( - ) estilo do html (!)
( - ) se precisar alterar o estilo… =(
Slide 10
Slide 10 text
Só faz sentido se
você NÃO usa pré-processador
Mas nós amamos eles...
Slide 11
Slide 11 text
Mas
deveriam
fazer
assim
=]
Enviar
( + ) boa semântica
( + ) lógica fica no css (.styl, .sass, .less)
( + ) apenas UMA classe
( + ) padrão de nomenclatura (tipo-acao)
( - ) precisa prototipar
( - ) only front-end
Slide 12
Slide 12 text
mimimi #1
Ahh, mas terá muito código duplicado
Slide 13
Slide 13 text
Não se
usar
placeholder
=]
● disponível em sass e stylus
● cria uma pseudo-classe "modelo"
● só é compilado se alguma classe/id
extender esse modelo
● todas as classes que chamarem o mesmo
placeholder ficarão aninhadas
Slide 14
Slide 14 text
Componetização
Como criar seu projeto de forma modular
utilizando pré-processador e
esquecendo de uma vez por todas o Bootstrap
Slide 15
Slide 15 text
Organizar as pastas é uma das tarefas mais
complicadas. Pode demorar um tempo, mas é
essencial para uma boa modularização
1.
Arquitetura
Procure o melhor das ferramentas de
modularização/metodologias de CSS, como Smacss,
OOCSS, BEM, Atomic Design...
Crie a sua, mas com moderação =]
2.
Metodologia
#2.2
BEM
/* Block */
.site-search {}
/* Element */
.site-search__field {}
/* Modifier */
.site-search--full {}
( + ) Organização
( - ) Nomenclatura pouco convencional
http://bem.info
Slide 22
Slide 22 text
#2.3
SMACSS
/* Formulário de Login */
.form-login {}
/* Título do Formulário de Login */
.form-login.form-login-title {}
/* Formulário de Login maior */
.form-login.form-login-large {}
( ! ) Parecido com o BEM
( + ) Boa nomenclatura
( - ) Nesting
http://smacss.com
Slide 23
Slide 23 text
Eles são guias.
E não regras!
CRIE O SEU!
Slide 24
Slide 24 text
Responsivo, modular, adaptativo, fuído, colunas, semântico, px, em,
rem… Esse são alguns dos pontos que temos que escolher na hora de
montar ou aplicar um bom grid system
3.
Grid/Estrutura
Slide 25
Slide 25 text
● Coluna x Modular
● Fluído x Não-Fluído
● Semântico x Não-semântico
● Responsivo x Não-responsivo x Adaptativo
Tipos de Grid
More: http://www.vanseodesign.com/web-design/grid-types/
Slide 26
Slide 26 text
#3.1
Semântica
...
...
...
( ! ) Bootstrap e Foundation usam por default
( + ) CSS Puro
( + ) Controle das @media-queries com classes
( - ) Semântica
( - ) Manutenção
Grid não-semântico
Slide 27
Slide 27 text
#3.1
Semântica
...
...
( + ) Só faz sentido com o uso de pré-processador
( + ) Lógica fica inteira no CSS (.sass, .styl, .less)
( + ) Menos marcação no HTML
( + ) Boa manutenção
( - ) Um pouco mais de código gerado
( - ) Controle das @media-queries no css
Grid semântico
Slide 28
Slide 28 text
#3.2
Medida
Grid não-fluído
● Colunas com tamanho fixo
● Normalmente utiliza-se px ou em
Slide 29
Slide 29 text
#3.2
Medida
Grid fluído
● Colunas com tamanho flexível
● Normalmente utiliza-se porcentagem (%)
● Cada coluna possui 12 colunas *
* Em um grid de 12 colunas
Slide 30
Slide 30 text
Tudo isso é muito bonito, mas se precisar...
CRIE O SEU!
Slide 31
Slide 31 text
diogomoretti.github.io/sgs diogomoretti.github.io/grider
● Responsivo
● Semântico e não-semântico
● Stylus e CSS puro
● Utiliza @extend no Stylus
● Responsivo
● Semântico
● Stylus
● Utiliza $placeholder no Stylus
Slide 32
Slide 32 text
● Tire o máximo dos pré-processadores
● Evite nesting (.header{} .header.header-title{})
● Evite gerar muito código
● Não prenda o css ao seu html (.header ul li > a > span)
● Não utilize pixels (px)
● Dependendo do projeto faça responsivo SIM!
● Evite código não semântico (class="span-2 pull-right")
● Não reinvente a roda!
Resumindo...
Slide 33
Slide 33 text
Pré-processadores
Tirando o melhor deles
Slide 34
Slide 34 text
( + ) Comunidade muito ativa
( + ) Dois tipos de sintaxe (.sass, .scss)
( + ) Plataforma Ruby
( + ) Muitos frameworks (compass, bourbon...)
( - ) Plataforma Ruby
( - ) Um pouco pesado em relação aos outros
( - ) Muito verboso com mixins
http://sass-lang.com
( + ) Sintaxe flexível
( + ) Core team ativo (+features)
( + ) Feito em NodeJS
( + ) Compilação muito rápida
( + ) Frameworks silenciosos
( + ) Base64 nativo
( - ) Sintaxe flexível
http://learnboost.github.io/stylus
Slide 37
Slide 37 text
.styl
.button-send
color red
transition all .2s ease
&:hover
color darken(@color, 10%)
http://learnboost.github.io/stylus
Slide 38
Slide 38 text
Componetização + Pré-processadores
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Task Runners
Automatize!
Slide 41
Slide 41 text
Features
● Lint e Hint
● Minificação de HTML, CSS e JS
● Otimização de Imagens
● Testes
● Deploy
● Compilação de Pré-Processadores HTML, JS e CSS
● Watch em arquivos
...e muito mais (MESMO)!
npm install -g yo
Instalação
Generators
1. yeoman.io/generators
2. npm install -g generator-angular
3. Na pasta do projeto: yo angular
http://yeoman.io
Slide 49
Slide 49 text
npm install -g slush
Instalação
Generators
1. slushjs.github.io/generators
2. npm install -g slush-angular
3. Na pasta do projeto: slush angular
http://slushjs.github.io
Slide 50
Slide 50 text
Tudo isso é muito bonito, mas se precisar...
CRIE O SEU!
Slide 51
Slide 51 text
diogomoretti.github.io/slush-ixqueleo
● Scaffolding simples com Gulp + Stylus
● Utiliza o SGS (Stylus Grid System)
● Mais em: diogo.nu/slush-o-novo-yeoman
O que é?
Uma stack em alguma linguagem
(Javascript/Node, PHP, Python,
Ruby…) onde provê de templates e
helpers afim de compilar tudo isso em
vários arquivos html simples, onde as
"URL`s amigáveis" ficam em pastas.
https://github.com/pinceladasdaweb/Static-Site-Generators
Slide 54
Slide 54 text
Quais tem?
docpad.org (JS / Cases: BrazilJS, Eventos Front in * )
assemble.io (JS / Plugin do Grunt)
hexo.io (JS / Ótimo para blogs)
jekyllrb.com (Ruby / Ótimo para blogs)
harpjs.com (JS / Ótimo para blogs e sites)
sculpin.io (PHP)
middlemanapp.com (Ruby)
gohugo.io (Go)
https://github.com/pinceladasdaweb/Static-Site-Generators
...e muito mais!
Slide 55
Slide 55 text
Vantagens
● Roda em qualquer servidor
● Rapidez (nenhuma requisição back-end)
● Ótimo para sites de projetos open-source
● Muito bom para documentações
● Perfeito para blog de desenvolvedores
● Roda no Github Pages (gh-pages)
https://github.com/pinceladasdaweb/Static-Site-Generators
Slide 56
Slide 56 text
Yeoman + Assemble.io + Grunt + Github Pages
Slide 57
Slide 57 text
Comunidade Front-
end
Participe!
Slide 58
Slide 58 text
Onde
estão?
● Grupos no Facebook
● Listas de Discussões no Google
● StackOverflow
● Fóruns
● Lista de comentários em Blogs
Slide 59
Slide 59 text
Por que
participar?
● Notícias em primeira mão (tools, links)
● Você ajuda e é ajudado
● Amizades
● Networking profissional
● Muitos projetos saem ali
Slide 60
Slide 60 text
Universo
Open-Source
Contribua!
Slide 61
Slide 61 text
Freela não compensa!
Zeno Rocha e Bernard de Luna
Slide 62
Slide 62 text
Por que
contribuir?
● 99% das tools que usamos são open-source
● Dá prazer ao fazer
● Faz amigos e conhece contribuidores
● Devolve a comunidade tudo o que ela já nos
proporcionou
Slide 63
Slide 63 text
Dicas
● Escolha um nome único
● Faça um site bonito
● Crie uma boa documentação
● Mesmo que sua ideia seja 1% diferente de
uma já existente: CRIE O SEU!
Slide 64
Slide 64 text
Eventos
Aprendizado e Networking
Slide 65
Slide 65 text
Quais?
● Academia Chaordic (a cada 1 ou 2 meses)
● Startup Weekend (1x por ano)
● The Developers Conference (FLN e POA, 1x por ano)
● SECCOM (1x por ano)
● BrazilJS (em Porto Alegre, 1x por ano)
● FloripaJS (encontros a cada 1 ou 2 meses)
● Front in Floripa (1x por ano. Em novembro)
...e muito mais!
Slide 66
Slide 66 text
Meetup
Formato flexível
1 ~ 2 meses
www.floripajs.org
Palestras e Workshops
Maior número de pessoas
1x por ano (Novembro)
www.frontinfloripa.com.br
Slide 67
Slide 67 text
Conheça.
Participe.
Contribua.
A web depende de você!