Autenticação e Autorização - MercadoLivre Developers Conference
Workflow Open Source para Frontend Developers
-
Upload
davidson-fellipe -
Category
Technology
-
view
1.020 -
download
4
description
Transcript of Workflow Open Source para Frontend Developers
![Page 1: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/1.jpg)
WORKFLOWOPENSOURCEPARA FRONTENDDEVELOPERSpor davidson fellipewww.fellipe.com
![Page 2: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/2.jpg)
I’mDAVIDSON FELLIPE
![Page 3: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/3.jpg)
WORKS
![Page 4: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/4.jpg)
ERA UMA VEZ...
![Page 5: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/5.jpg)
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
![Page 6: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/6.jpg)
LAYOUT USANDO TABLE?
![Page 7: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/7.jpg)
ENQUANTO ISSO EM 2000...
![Page 8: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/8.jpg)
HTMLCSS
2006...
![Page 9: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/9.jpg)
precisa saber
JAVASCRIPT?
2006...
![Page 10: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/10.jpg)
ATUALMENTE...
![Page 11: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/11.jpg)
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
![Page 12: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/12.jpg)
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
![Page 13: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/13.jpg)
XBROWSERXDEVICEXPLATFORM
![Page 14: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/14.jpg)
XBROWSERXDEVICEXPLATFORM
![Page 15: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/15.jpg)
MULTITASKING...
@flavioribeiro na globo.com
![Page 16: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/16.jpg)
VAMOS ARRUMARA CASA?
![Page 17: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/17.jpg)
![Page 18: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/18.jpg)
EDITORES
![Page 21: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/21.jpg)
SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCENEM FREE
![Page 23: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/23.jpg)
DOTFILES
![Page 25: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/25.jpg)
automatize suasconfigurações
https://github.com/davidsonfellipe/dotfiles
![Page 26: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/26.jpg)
CONTROLEDE
VERSÃO
![Page 27: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/27.jpg)
gittrabalhar com repositóriosentender branchespull requestcode review
CONTROLE DE VERSÃO
![Page 30: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/30.jpg)
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
![Page 31: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/31.jpg)
TASK RUNNER
![Page 33: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/33.jpg)
O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript
![Page 34: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/34.jpg)
O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watches para Pré-processadores
![Page 35: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/35.jpg)
Por que usar o GRUNT?
Facil de usar
Grande número de plugins
Imensa comunidade
Open source
![Page 36: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/36.jpg)
Instalados e gerenciados via NPM (node.js)
Adiciona grunt command no system path
INICIANDO COM GRUNT
$ npm install -g grunt-cli
![Page 37: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/37.jpg)
package.json
{
"name": "project-name",
"version": "0.1.0",
"description": "Project description"
}
![Page 38: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/38.jpg)
gruntfile.js
module.exports = function( grunt ) {
grunt.initConfig({
// configuracoes
});
//plugins
grunt.loadNpmTasks( 'plugin-name' );
//tarefas
grunt.registerTask( 'default', [ 'watch' ] );
};
![Page 39: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/39.jpg)
INSTALANDO GRUNT
$ npm install grunt --save-dev
Instala a ultima versão no seu folder
Adiciona ao package.json
![Page 40: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/40.jpg)
ANT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
![Page 41: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/41.jpg)
RAKE
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
![Page 42: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/42.jpg)
GRUNT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
![Page 43: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/43.jpg)
PRÉ-PROCESSADORES
![Page 44: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/44.jpg)
![Page 45: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/45.jpg)
![Page 46: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/46.jpg)
![Page 47: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/47.jpg)
![Page 48: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/48.jpg)
![Page 49: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/49.jpg)
![Page 50: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/50.jpg)
http://usablica.github.io/front-end-frameworks/compare.html
![Page 51: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/51.jpg)
QUALIDADEDE
CÓDIGO
![Page 54: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/54.jpg)
TESTES
![Page 55: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/55.jpg)
![Page 56: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/56.jpg)
![Page 57: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/57.jpg)
PERFORMANCE
![Page 58: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/58.jpg)
YSLOW
http://developer.yahoo.com/yslow/
![Page 59: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/59.jpg)
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
![Page 60: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/60.jpg)
+PERFORMANCE?
http://browserdiet.com/pt
![Page 62: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/62.jpg)
MAIS TOOLS
![Page 63: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/63.jpg)
![Page 64: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/64.jpg)
![Page 65: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/65.jpg)
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
![Page 66: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/66.jpg)
GITIFIER
http://psionides.github.io/Gitifier/
![Page 70: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/70.jpg)
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
Pull requests em projetos no github ou bitbucket
![Page 71: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/71.jpg)
COMO SE MANTER ATUALIZADO?
![Page 72: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/72.jpg)
https://twitter.com/slicknet/status/292103833327370240
![Page 73: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/73.jpg)
6 SEMANAS?
![Page 77: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/77.jpg)
AH...É MUITA COISA
PARA ESTUDAR...
![Page 78: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/78.jpg)
![Page 79: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/79.jpg)
O SUCESSO DE SUA APP NÃO DEPENDE APENAS
DE SEU WORKFLOW
![Page 80: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/80.jpg)
ELE APENASVAI TE DEIXAMAIS FELIZ
![Page 81: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/81.jpg)
OBRIGADOgithub.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com
![Page 82: Workflow Open Source para Frontend Developers](https://reader034.fdocumentos.com/reader034/viewer/2022052222/554f658fb4c905bb178b4a04/html5/thumbnails/82.jpg)
www.fellipe.com/talks
slides disponíveis em...