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

VIM

http://www.vim.org/

SUBLIME

http://www.sublimetext.com/

SUBLIME

http://www.sublimetext.com/

NÃO É OPEN SOUCENEM FREE

BRACKETS

http://brackets.io/

DOTFILES

DOTFILES.GITHUB.IO

http://dotfiles.github.io/

automatize suasconfigurações

https://github.com/davidsonfellipe/dotfiles

CONTROLEDE

VERSÃO

gittrabalhar com repositóriosentender branchespull requestcode review

CONTROLE DE VERSÃO

https://bitbucket.org/

https://github.com/

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

http://gruntjs.com/

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

JSHINT

http://www.jshint.com/

CSSLINT

http://csslint.net/

TESTES

PERFORMANCE

YSLOW

http://developer.yahoo.com/yslow/

PAGE SPEED

https://developers.google.com/speed/pagespeed/insights

+PERFORMANCE?

http://browserdiet.com/pt

SPEEDLIMIT

http://mschrag.github.io

MAIS TOOLS

GRADIENTES?

http://www.colorzilla.com/gradient-editor/

GITIFIER

http://psionides.github.io/Gitifier/

IMAGEOPTIM

http://imageoptim.com/

MICROJS

http://microjs.com/#

http://html5boilerplate.com/

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?

http://html5weekly.com/

http://javascriptweekly.com

http://braziljs.org/

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...