TURBINANDO SEU WORKFLOW PARA O DESENVOLVIMENTO DE WEBAPPSpor davidson fellipewww.fellipe.com
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
I’mDAVIDSON FELLIPE
WORKS
ESCOLHAS...http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
LAYOUT USANDO TABLE?
ENQUANTO ISSO EM 2000...
HTMLCSS
2006...
precisa saber
JAVASCRIPT?
2006...
ATUALMENTE...
+ poderosas+ complexas+ ambiciosas
2013...
www.igvita.com/slides/2012/devtools-tips-and-tricks/
CICLO DE VIDA DE UMA WEBPAGE
ATUALMENTE...
http://httparchive.org/trends.php
ATUALMENTE...
http://httparchive.org/trends.php
XBROWSERXDEVICEXPLATFORM
XBROWSERXDEVICEXPLATFORM
http://ondeviceresearch.com/
USUÁRIOS APENAS MOBILE
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIADOS COMPONENTES
outros - incluem conexões 3G e text rendering
css e js - maior consumo relacionado a transmissão e rendering
websites precisam ter exatamente o mesmo visual em todos os browsers?
COMO MELHORARMEU WORKFLOW
DIANTE DESSES DESAFIOS?
TECNOLOGIAS
MULTITASKING...
@flavioribeiro na globo.com
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
https://twitter.com/slicknet/status/292103833327370240
EDITORES
SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCENEM FREE
DOTFILES
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda
automatize suasconfigurações
https://github.com/davidsonfellipe/dotfiles
CONTROLEDE
VERSÃO
gittrabalhar com repositóriosentender branchespull requestcode review
CONTROLE DE VERSÃO
BITBUCKET VS GITHUB
repos privados ilimitados
preço baseado no número de colaboradores
número de colaboradores ilimitado
preço baseado no número de repositórios privados
TASK RUNNER
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
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADEDE
CÓDIGO
TESTES
PERFORMANCE
http://www.akamai.com/stateoftheinternet/
http://www.akamai.com/stateoftheinternet/
SÓ QUE NÃO!!!!!
performance de frontend?
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
PRINCIPAIS CUIDADOS
● Minificar CSS, JavaScript e HTML
● Inline images, CSS, e JavaScript
● Cache de assets
● Defer JavaScript
● Concatenar CSS e JavaScript
● Compressão de imagens & resizing
YSLOW
http://developer.yahoo.com/yslow/
YSLOW, MANTENEDOR?
https://twitter.com/marcelduran
brasileiro
@marcelduran
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE?
http://browserdiet.com/pt
TEM ATÉ EM CHINÊS...
http://browserdiet.com/zh
WEBPAGETEST
WEBPAGETEST
WEBPAGETEST
MAIS TOOLS
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
GITIFIER
http://psionides.github.io/Gitifier/
BUSQUESEU
WORKFLOW
MAS...
NUNCA EXISTIRÁWORKFLOW
DEFINITIVO!!!
LEMBRE-SEDAS
6 SEMANAS...
MAS O QUE ESTÁ VINDO
POR AÍ?
SPDY
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
WEB COMPONENTS
http://www.w3.org/TR/2013/WD-components-intro-20130606/
POLYMER
http://www.polymer-project.org/
SHOWYOURCODE
CONTRIBUAEM
PROJETOSOPENSOURCE
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
COMO SE MANTER ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
AH...É MUITA COISA
PARA ESTUDAR...
O SUCESSO DE SUA APP NÃO DEPENDE APENAS
DE SEU WORKFLOW
ELE APENASVAI TE DEIXAMAIS FELIZ
www.fellipe.com/talks
slides disponíveis em...
OBRIGADOgithub.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com