SlideShare uma empresa Scribd logo
WORKFLOW
OPENSOURCE
PARA FRONTEND
DEVELOPERS
por davidson fellipe
www.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...
HTML
CSS
2006...
precisa saber
JAVASCRIPT?
2006...
ATUALMENTE...
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
XBROWSER
XDEVICE
XPLATFORM
XBROWSER
XDEVICE
XPLATFORM
MULTITASKING...
@flavioribeiro na globo.com
VAMOS
ARRUMAR
A CASA?
Workflow Open Source para Frontend Developers
EDITORES
VIM
http://www.vim.org/
SUBLIME
http://www.sublimetext.com/
SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCE
NEM FREE
BRACKETS
http://brackets.io/
DOTFILES
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles
CONTROLE
DE
VERSÃO
git
trabalhar com repositórios
entender branches
pull request
code 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
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADE
DE
CÓDIGO
JSHINT
http://www.jshint.com/
CSSLINT
http://csslint.net/
TESTES
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
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
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
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...
Workflow Open Source para Frontend Developers
O SUCESSO DE SUA APP
NÃO DEPENDE APENAS
DE SEU WORKFLOW
ELE APENAS
VAI TE DEIXA
MAIS FELIZ
OBRIGADO
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com
www.fellipe.com/talks
slides disponíveis em...

Mais conteúdo relacionado

Semelhante a Workflow Open Source para Frontend Developers

LESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - IntroduçãoLESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - Introdução
Marcos César
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
Giovanni Kenji Shiroma
 
Desenvolvimento Web com Software Livre
Desenvolvimento Web com Software LivreDesenvolvimento Web com Software Livre
Desenvolvimento Web com Software Livre
Givanaldo Rocha
 
Presentta: usando Node.js na prática
Presentta: usando Node.js na práticaPresentta: usando Node.js na prática
Presentta: usando Node.js na prática
Nando Vieira
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
Ivan Banov
 
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
Rogerio Prado de Jesus
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
dualpixel
 
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Desmistificando um Ambiente de Desenvolvimento WEB com VagrantDesmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Luis Henrique Costa
 
Joomla!: uma visão geral
Joomla!: uma visão geralJoomla!: uma visão geral
Joomla!: uma visão geral
Marcelo Andrade
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Nayara Felix
 
Desenvolvimento PHP com Vagrant - 7Masters PHP
Desenvolvimento PHP com Vagrant - 7Masters PHPDesenvolvimento PHP com Vagrant - 7Masters PHP
Desenvolvimento PHP com Vagrant - 7Masters PHP
Rogerio Prado de Jesus
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
Edgar Silva
 
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
Márcio Dutra
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe
 
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
iMasters
 
Apostila dreamweavercs5
Apostila dreamweavercs5Apostila dreamweavercs5
Apostila dreamweavercs5
Missão Salesiana de Mato Grosso
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
Tersis Zonato
 
JavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividadeJavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividade
Rafael Ponte
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Leonardo Balter
 

Semelhante a Workflow Open Source para Frontend Developers (20)

LESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - IntroduçãoLESS CSS (Pré compiladores) - Introdução
LESS CSS (Pré compiladores) - Introdução
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
 
Desenvolvimento Web com Software Livre
Desenvolvimento Web com Software LivreDesenvolvimento Web com Software Livre
Desenvolvimento Web com Software Livre
 
Presentta: usando Node.js na prática
Presentta: usando Node.js na práticaPresentta: usando Node.js na prática
Presentta: usando Node.js na prática
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
 
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
 
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Desmistificando um Ambiente de Desenvolvimento WEB com VagrantDesmistificando um Ambiente de Desenvolvimento WEB com Vagrant
Desmistificando um Ambiente de Desenvolvimento WEB com Vagrant
 
Joomla!: uma visão geral
Joomla!: uma visão geralJoomla!: uma visão geral
Joomla!: uma visão geral
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
 
Desenvolvimento PHP com Vagrant - 7Masters PHP
Desenvolvimento PHP com Vagrant - 7Masters PHPDesenvolvimento PHP com Vagrant - 7Masters PHP
Desenvolvimento PHP com Vagrant - 7Masters PHP
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva
 
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...
 
Apostila dreamweavercs5
Apostila dreamweavercs5Apostila dreamweavercs5
Apostila dreamweavercs5
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
 
JavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividadeJavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividade
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 

Mais de Davidson Fellipe

O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
Davidson Fellipe
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
Davidson Fellipe
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?
Davidson Fellipe
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
Davidson Fellipe
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
 
Esse cara é o grunt
Esse cara é o gruntEsse cara é o grunt
Esse cara é o grunt
Davidson Fellipe
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Davidson Fellipe
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Davidson Fellipe
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineers
Davidson Fellipe
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
Davidson Fellipe
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
Davidson Fellipe
 
RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupo
Davidson Fellipe
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}
Davidson Fellipe
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
 
Canvas element
Canvas elementCanvas element
Canvas element
Davidson Fellipe
 
Tutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas HuginTutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas Hugin
Davidson Fellipe
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe
 

Mais de Davidson Fellipe (18)

O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Esse cara é o grunt
Esse cara é o gruntEsse cara é o grunt
Esse cara é o grunt
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineers
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupo
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
Canvas element
Canvas elementCanvas element
Canvas element
 
Tutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas HuginTutorial Crição De Imagens Panoramicas Hugin
Tutorial Crição De Imagens Panoramicas Hugin
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
 
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PICSistema De Comunicação Bluetooth Usando Microcontrolador PIC
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
 

Workflow Open Source para Frontend Developers