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
320
O melhor da monitoração de web performance
fellipe
0
430
Guia do Front-end das galáxias
fellipe
3
260
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
130
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
86
Esse cara é o Grunt
fellipe
9
790
It's Javascript Time
fellipe
6
490
Other Decks in Programming
See All in Programming
クラシルを支える技術と組織
rakutek
0
190
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
Model Pollution
hschwentner
1
180
XP, Testing and ninja testing ZOZ5
m_seki
2
270
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
750
Advance Your Career with Open Source
ivargrimstad
0
310
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
130
明日から始めるリファクタリング
ryounasso
0
110
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Mobile First: as difficult as doing things right
swwweet
224
10k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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...