Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Workflow Open Source para Frontend Developers
Search
Davidson Fellipe
July 20, 2013
Programming
3
240
Workflow Open Source para Frontend Developers
Davidson Fellipe
July 20, 2013
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
300
O melhor da monitoração de web performance
fellipe
0
420
Guia do Front-end das galáxias
fellipe
3
250
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
120
Como é trabalhar na Globo.com?
fellipe
3
100
Guia prático de desenvolvimento front-end para django devs
fellipe
1
150
Practical guide for front-end development for Django Devs
fellipe
0
76
Esse cara é o Grunt
fellipe
9
770
It's Javascript Time
fellipe
6
480
Other Decks in Programming
See All in Programming
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
160
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
120
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
790
XSLTで作るBrainfuck処理系
makki_d
0
210
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
エンジニア向け採用ピッチ資料
inusan
0
150
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
560
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
160
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Speed Design
sergeychernyshev
31
1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing Experiences People Love
moore
142
24k
What's in a price? How to price your products and services
michaelherold
246
12k
BBQ
matthewcrist
89
9.7k
Designing for Performance
lara
609
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Gamification - CAS2011
davidbonilla
81
5.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com
I’m DAVIDSON 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?
None
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
None
None
None
None
None
None
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADE DE CÓDIGO
JSHINT http://www.jshint.com/
CSSLINT http://csslint.net/
TESTES
None
None
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
None
None
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...
None
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...