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
220
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
280
O melhor da monitoração de web performance
fellipe
0
410
Guia do Front-end das galáxias
fellipe
3
240
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
110
Como é trabalhar na Globo.com?
fellipe
3
95
Guia prático de desenvolvimento front-end para django devs
fellipe
1
130
Practical guide for front-end development for Django Devs
fellipe
0
66
Esse cara é o Grunt
fellipe
9
730
It's Javascript Time
fellipe
6
470
Other Decks in Programming
See All in Programming
Kamal 2 – Get Out of the Cloud
aleksandrov
0
130
Vibe Codingをせずに Clineを使っている
watany
3
530
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
270
RCPと宣言型ポリシーについてのお話し
kokitamura
2
150
ノーコードツールの裏側につきまとう「20分岐」との戦い
oguemon
0
110
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
770
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
140
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2k
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
6k
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
650
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
170
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
1k
Featured
See All Featured
Designing for Performance
lara
606
69k
The Pragmatic Product Professional
lauravandoore
33
6.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
BBQ
matthewcrist
88
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
How STYLIGHT went responsive
nonsquared
99
5.4k
Embracing the Ebb and Flow
colly
85
4.6k
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...