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
79
Esse cara é o Grunt
fellipe
9
770
It's Javascript Time
fellipe
6
490
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
効率的な開発手段として VRTを活用する
ishkawa
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Done Done
chrislema
184
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Facilitating Awesome Meetings
lara
54
6.4k
Balancing Empowerment & Direction
lara
1
430
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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...