Workflow Open Source para Frontend Developers
82
WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com
-
Upload
davidson-fellipe -
Category
Technology
-
view
1.018 -
download
4
description
Um Workflow Open Source para Frontend Developers
Transcript of Workflow Open Source para Frontend Developers
WORKFLOWOPENSOURCEPARA FRONTENDDEVELOPERSpor davidson fellipewww.fellipe.com
I’mDAVIDSON FELLIPE
WORKS
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
LAYOUT USANDO TABLE?
ENQUANTO ISSO EM 2000...
HTMLCSS
2006...
precisa saber
JAVASCRIPT?
2006...
ATUALMENTE...
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
XBROWSERXDEVICEXPLATFORM
XBROWSERXDEVICEXPLATFORM
MULTITASKING...
@flavioribeiro na globo.com
VAMOS ARRUMARA CASA?
EDITORES
SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCENEM FREE
DOTFILES
automatize suasconfigurações
https://github.com/davidsonfellipe/dotfiles
CONTROLEDE
VERSÃO
gittrabalhar com repositóriosentender branchespull requestcode review
CONTROLE DE VERSÃO
BITBUCKET VS GITHUB
repos privados ilimitados
princing baseado no número de colaboradores
número de colaboradores ilimitado
princing baseado no número de colaboradores
TASK RUNNER
O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript
O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watches para Pré-processadores
Por que usar o GRUNT?
Facil de usar
Grande número de plugins
Imensa comunidade
Open source
Instalados e gerenciados via NPM (node.js)
Adiciona grunt command no system path
INICIANDO COM GRUNT
$ npm install -g grunt-cli
package.json
{
"name": "project-name",
"version": "0.1.0",
"description": "Project description"
}
gruntfile.js
module.exports = function( grunt ) {
grunt.initConfig({
// configuracoes
});
//plugins
grunt.loadNpmTasks( 'plugin-name' );
//tarefas
grunt.registerTask( 'default', [ 'watch' ] );
};
INSTALANDO GRUNT
$ npm install grunt --save-dev
Instala a ultima versão no seu folder
Adiciona ao package.json
ANT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
RAKE
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
GRUNT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
PRÉ-PROCESSADORES
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADEDE
CÓDIGO
TESTES
PERFORMANCE
YSLOW
http://developer.yahoo.com/yslow/
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE?
http://browserdiet.com/pt
MAIS TOOLS
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
GITIFIER
http://psionides.github.io/Gitifier/
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
Pull requests em projetos no github ou bitbucket
COMO SE MANTER ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
AH...É MUITA COISA
PARA ESTUDAR...
O SUCESSO DE SUA APP NÃO DEPENDE APENAS
DE SEU WORKFLOW
ELE APENASVAI TE DEIXAMAIS FELIZ
OBRIGADOgithub.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com
www.fellipe.com/talks
slides disponíveis em...
