Componetização e o mundo moderno do front-end

Transcript

1. Diogo Moretti | diogo@chaordic.com.br Componetização e o mundo moderno do front-end
2. 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
3. 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
4. The Walking Dead da web Como não se tornar um...
5. html5 - css3 - javascript - semântica grid - bower - testes - yeoman - sass - git atomic design - nodejs - c. integration lodash - stylus - pré-processador componetização - slush - gulp - less grunt - github - sublime - photoshop flat design - mocha - backbone - ember bootstrap - express - mean - mongodb static generators - jekyll - compass handlebars - underscore - marionette angularjs - hexo - docpad - browserify requirejs - jasmine - react - redis modularização - reactivejs - jquery zepto - responsivo - mobile - ux
6. Sim! Isso são palavras do nosso dia-a-dia … e ~90% delas surgiram nos últimos 2 anos!
7. Componetização
9. Muitos fazem assim =[ <a class="btn btn-primary btn-success btn- large">Enviar</a> ( + ) faz sentido com css puro ( + ) agilidade (pessoal do back-end like this) ( + ) prototipagem ( - ) semântica ( - ) estilo do html (!) ( - ) se precisar alterar o estilo… =(
10. Só faz sentido se você NÃO usa pré-processador Mas nós amamos eles...
11. Mas deveriam fazer assim =] <a class="button-send">Enviar</a> ( + ) 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
12. mimimi #1 Ahh, mas terá muito código duplicado
13. 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
14. Componetização Como criar seu projeto de forma modular utilizando pré-processador e esquecendo de uma vez por todas o Bootstrap
15. Organizar as pastas é uma das tarefas mais complicadas. Pode demorar um tempo, mas é essencial para uma boa modularização 1. Arquitetura
16. #1.1 Funcional _app settings.styl mixins.styl app.styl _vendor normalize.styl main.styl
17. #1.2 Templates e Páginas _templates header.styl footer.styl post.styl _pages home.styl contact.styl _mixins.styl _settings.styl main.styl
18. #1.3 Componentes _base typography.styl _components buttons.styl _layout grid.styl _pages home.styl _vendor owl-carousel.styl main.styl http://modernweb.com/2014/04/14/organizing-your-css-code-for-preprocessors
19. 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
20. #2.1 OOCSS .button-primary { color: red; background: green; font-size: 1.4em; } .button-large { font-size: 2em; } ( ! ) Bootstrap utiliza ( + ) Bom com css puro http://oocss.org
21. #2.2 BEM /* Block */ .site-search {} /* Element */ .site-search__field {} /* Modifier */ .site-search--full {} ( + ) Organização ( - ) Nomenclatura pouco convencional http://bem.info
22. #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
23. Eles são guias. E não regras! CRIE O SEU!
24. 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
25. • 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/
26. #3.1 Semântica <div class="row"> <div class="small-2 large-4 columns">...</div> <div class="small-2 large-4 columns">...</div> <div class="small-2 large-4 columns">...</div> </div> ( ! ) Bootstrap e Foundation usam por default ( + ) CSS Puro ( + ) Controle das @media-queries com classes ( - ) Semântica ( - ) Manutenção Grid não-semântico
27. #3.1 Semântica <div class="header"> <div class="logo">...</div> <div class="menu">...</div> </div> ( + ) 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
28. #3.2 Medida Grid não-fluído • Colunas com tamanho fixo • Normalmente utiliza-se px ou em
29. #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
30. Tudo isso é muito bonito, mas se precisar... CRIE O SEU!
31. 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
32. • 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...
33. Pré-processadores Tirando o melhor deles
34. ( + ) 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
35. .scss .header { color: red; @include transition(all .2s ease) } .sass .header color: red +transition(all .2s ease) http://sass-lang.com
36. ( + ) 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
37. .styl .button-send color red transition all .2s ease &:hover color darken(@color, 10%) http://learnboost.github.io/stylus
38. <live code> Componetização + Pré-processadores
40. Task Runners Automatize!
41. 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)!
42. npm install -g gulp Instalação package.json "devDependencies": { "gulp": "*" }, http://gulpjs.com
43. Gulpfile.js var gulp = require('gulp'); gulp.task('hello', function() { console.log('Hello, Gulp!'); }); // => Hello, Gulp! http://gulpjs.com
44. npm install -g grunt-cli Instalação package.json "devDependencies": { "grunt": "~0.4.5" }, http://gruntjs.com
45. Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ // tasks aqui }); }); http://gruntjs.com
46. <live code> Task Runners
47. Generators Inicialize seus projetos muito rápido!
48. 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
49. 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
50. Tudo isso é muito bonito, mas se precisar... CRIE O SEU!
51. diogomoretti.github.io/slush-ixqueleo • Scaffolding simples com Gulp + Stylus • Utiliza o SGS (Stylus Grid System) • Mais em: diogo.nu/slush-o-novo-yeoman
52. Static Generators Compile local. Faça upload! http://staticsitegenerators.net
53. 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
54. 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!
55. 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
56. <live code> Yeoman + Assemble.io + Grunt + Github Pages
57. Comunidade Front- end Participe!
58. Onde estão? • Grupos no Facebook • Listas de Discussões no Google • StackOverflow • Fóruns • Lista de comentários em Blogs
59. Por que participar? • Notícias em primeira mão (tools, links) • Você ajuda e é ajudado • Amizades • Networking profissional • Muitos projetos saem ali
60. Universo Open-Source Contribua!
61. Freela não compensa! Zeno Rocha e Bernard de Luna
62. 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
63. 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!
64. Eventos Aprendizado e Networking
65. 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!
66. 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
67. Conheça. Participe. Contribua. A web depende de você!
68. Diogo Moretti diogo@chaordic.com.br diogo.nu