Desenvolvendo
uma aplicação web
H e n r i q u e V i c e n t e
h t t p : / / h e n v i c . g i t h u b . i o
Slide 2
Slide 2 text
No princípio
HTML
Folha de estilo atrelada ao conteúdo
Pouco ou nenhum controle programático
Slide 3
Slide 3 text
Algum tempo depois
Separação de conteúdo e apresentação
HTML + CSS
Java applets, Flash
JScript, JavaScript e, finalmente,
ECMAScript
Slide 4
Slide 4 text
ECMAScript
Linguagem que veio da padronização do
JavaScript
Veio depois do JavaScript para melhorá-lo
Slide 5
Slide 5 text
Hoje
1000 maneiras de se fazer uma aplicação web
Todas envolvem JavaScript no client-side
Tendência: JavaScript no server-side
Slide 6
Slide 6 text
Você não tem
alternativas
Navegadores web de dispositivos web
trabalham apenas com JavaScript
Java, Flash Player, Silverlight nos
navegadores tradicionais?
Slide 7
Slide 7 text
Comparativo
http://www.google.com/trends/explore?q=Flash#q=Flash%2C%20Java%20plugin%2C%20iOS%2C
%20Android%2C%20app&cmpt=q
Esses dados podem ser imprecisos
Slide 8
Slide 8 text
JS contém partes
boas e partes ruins
Slide 9
Slide 9 text
Por onde começar?
Especificação do ECMAScript?
RFC 2616 - HTTP/1.1?
Controle de versão do código?
Testes automatizados, qualidade de código?
Test-Driven Development?
Complexidade ciclomática?
Contribuir com projetos open source existentes?
…
Slide 10
Slide 10 text
especificações e referências
para todo desenvolvedor web
ECMAScript 5 http://es5.github.io/
HTTP/1.1 http://tools.ietf.org/html/rfc2616
BrazilJS Weekly http://braziljs.org/
Mozilla MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript
24ways.org (todo Dezembro)
The Art of Unix Programming by Eric S. Raymond
http://catb.org/esr/writings/taoup/html/graphics/taoup.pdf
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Controle de versão
ano <= 2005 → ‘use svn’;
ano > 2005 → ‘use git’;
Escreva boas mensagens de commit
https://wiki.openstack.org/wiki/
GitCommitMessages
Gosta da linha de comando?
Conheça o Node GH.
Mãos à obra
O que usar para facilitar a criação de um
aplicativo?
Frameworks, bibliotecas? Quais as opções?
Esqueletos prontos? Exemplos?
Slide 15
Slide 15 text
Se você quer comparar opções de framework
esta pode ser o melhor lugar
Gerenciador de tarefas
bem simples implementado
com várias frameworks,
bibliotecas, sem nada, etc.
www.todomvc.com
Slide 16
Slide 16 text
Antes de usar
frameworks...
ou JavaScript...
Aprenda a fazer sem para não se tornar um
refém de uma
Antes de usar JavaScript:
Será que um simples CSS não resolve?
Slide 17
Slide 17 text
Ferramenta
essencial
IDE ou editor de texto?
IDEs:
WebStorm (JetBrains)
Eclipse, NetBeans
…
Editores de texto:
Sublime, TextMate
vi (hard core)
…
Vantagens?
x
Desvantagens?
Slide 18
Slide 18 text
Para quais browsers
produzir?
Não perca seu tempo fazendo adaptações
para seu site funcionar no IE 6 ou outro
navegador que ninguém usa
Use sempre métricas para avaliar o risco e
fazer o que vale a pena, não chute cegamente
se um navegador deve ser suportado ou não
Slide 19
Slide 19 text
gs.statcounter.com
Slide 20
Slide 20 text
Um console melhor…
https://github.com/robbyrussell/oh-my-zsh
Must Have Git Aliases: Advanced Examples
durdn.com/blog/2012/11/22/must-have-git-aliases-advanced-examples/
iTerm 2
Você já usa o Terminal, correto?
Slide 21
Slide 21 text
Ferramentas de linha de
comando para melhorar a sua
produtividade
Slide 22
Slide 22 text
Instalando...
Baixar o NodeJS em www.nodejs.org
E, após instalar o NodeJS, pelo terminal:
Yeoman: npm install -g yo
Grunt CLI: npm install -g grunt-cli
Bower: npm install -g bower
Slide 23
Slide 23 text
Yeoman + AngularJS
Vamos criar uma aplicação com AngularJS,
testes, e etc usando o Yeoman?
npm install -g generator-angular
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Testes automatizados!
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
henvic.github.io
!
HENRIQUE VICENTE
P a l e s t r a d i s p o n í v e l e m
h t t p s : / / s p e a k e r d e c k . c o m /
h e n v i c / d e s e n v o l v e n d o - u m a -
a p l i c a c a o - w e b