Frontend de gente grande com Grunt e Bower
Frontend de gente grande com Grunt e Bower
0 0
palestra-bower-e-grunt
Frontend de gente grande com Grunt e BowerOn Github josenaldo / palestra-bower-e-grunt
Frontend de gente grande com Grunt e Bower
Quem sou?
Josenaldo de Oliveira Matos Filho
Jugleader no UaiJUG
Arquiteto de Software do comdominiodigital.com.br
Code, Coffee and Rock'n'Roll
Quem somos?
Grupo de usuários Java do Triângulo Mineiro
Como se fazia web antes de Noé?
Frontend à moda antiga
Dreamwearver
Frontpage
FTP
Fazer página de dreamwearver ou frontpage
Subir html gerado para o servidor
Fazer página de dreamwearver ou frontpage
Colocar páginas no diretorio de páginas da aplicação e fazer deploy da aplicação
Ou enviar para o servidor via FTP
Quem fazia o frontend
Webmaster: faz site de fundo preto
Webdesigner: faz site de fundo branco
Quem fazia frontend
O “MONTADOR”
O CARA QUE DEIXA O SITE BONITINHO
O CARA QUE FAZ AQUELES SCRIPTZINHOS LÁ
O mundo mudou
HTML 5
CSS
MOBILE
TESTES
MINIFICAÇÃO
DESEMPENHO
AJAX
TABLETS
Ajax
Novas formas de interação
Mobile
Fim do pixel perfect
Olá responsividade
As coisas complicaram
Bibliotecas
Frameworks
CSS 3
Pre processadores de css
CSS/JS Lint
Otimização de imagens
Testes
Criação de sprites
Executar de webserver
Live Reloading
Minificação
Obfuscação
Geração de release
Deploy
Conversão de arquivos
O profissional do frontend hoje
Criar experiência
Cuidar da performance
Aprendizado contínuo
Desenvolvedor
O CARA QUE CRIA EXPERIÊNCIAS
O CARA DA SEMÂNTICA
O CARA DA PERFORMANCE
O CARA SEMPRE PRECISA APRENDER ALGO NOVO
O problema
Muitas tarefas
Muitos detalhes
Projetos complexos
Trabalho repetitivo
A solução
Automação for the works!
Não faça trabalho de máquina
No mundo backend isso já foi resolvido
ant
maven
graddle
make
rake
cake
*ake
No mundo frontend...
Grunt: Automatizador de tarefas
Bower: Gestão de dependências
Quem usa?
Todo mundo
Dá uma olhada no github
Empresas e projetos de nome!
Twitter
jQuery
Adobe
Pivotal
Modernizr
Mozilla
Bootstrap
Opera
Wordpress
Walmart
Victoria's Secret
Microsoft
Angular
momentjs
backbone
Porque usar?
Produtividade
Porque usar?
Menos complexidade
Porque usar?
Paz de espírito
Porque usar?
Estabilidade
Onde encontrar
Grunt
http://gruntjs.com/
Bower
http://bower.io/
Instalação
1. Instalar o Nodejs
Instalação
2. Instalar o grunt
npm install -g grunt-cli
Instalação
3. Instalar o bower
npm install -g bower
Atividades de Desenvolvimento
Desenho Codificação Pré-processamento Execução Teste Correção Live reloadingAtividades de Deploy
Pré-processamento Replace Cópia de arquivos Concatenação Minificação Obfuscação Otimização de imagens Geração de pacoteConfiguração do bower
bower.json
Usando o bower
Instalando as dependências do projeto
$ bower install
Instalando um pacote no projeto
$ bower install PACKAGE
Usando o bower
Instalando e SALVANDO o pacote no bower.json
$ bower install PACKAGE --save
Usando os arquivos
<script src="bower_components/jquery/dist/jquery.min.js"></script>
Configuração do npm
package.json
Configuração do grunt
Gruntfile.json
Concatenação
grunt-contrib-concat
Obfucação e minificação
grunt-contrib-uglify
Pré-processamento
Compilar o sass
- grunt-contrib-compass
- grunt-contrib-less
- grunt-contrib-stylus
- grunt-contrib-coffe
Testes
grunt-contrib-jasmine
grunt-contrib-qunit
grunt-contrib-mocha
Servidor com live reloading
grunt-contrib-watch
grunt-contrib-connect
Perguntas?
Email: josenaldo@gmail.com
Twitter: @josenaldomatos
Github: https://github.com/josenaldo
0
Frontend de gente grande com Grunt e Bower