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

VIM

http://www.vim.org/

SUBLIME

http://www.sublimetext.com/

SUBLIME

http://www.sublimetext.com/

NÃO É OPEN SOUCENEM FREE

BRACKETS

http://brackets.io/

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

https://bitbucket.org/

https://github.com/

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

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

http://usablica.github.io/front-end-frameworks/compare.html

QUALIDADEDE

CÓDIGO

JSHINT

http://www.jshint.com/

CSSLINT

http://csslint.net/

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

SPEEDLIMIT

http://mschrag.github.io

JSLITMUS

http://mschrag.github.io

WEBPAGETEST

WEBPAGETEST

WEBPAGETEST

MAIS TOOLS

GRADIENTES?

http://www.colorzilla.com/gradient-editor/

GITIFIER

http://psionides.github.io/Gitifier/

MICROJS

http://microjs.com/#

http://html5boilerplate.com/

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?

http://html5weekly.com/

http://javascriptweekly.com

http://braziljs.org/

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