Desenvolvendo uma aplicação web

Palestra no Fórum Nabuco: Descobrindo o conhecimento e despertando o aprendizado!

Transcript

1. 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
   

   View Slide

2. No princípio
   HTML
   
   Folha de estilo atrelada ao conteúdo
   
   Pouco ou nenhum controle programático
   

   View Slide

3. Algum tempo depois
   Separação de conteúdo e apresentação

   HTML + CSS
   
   Java applets, Flash
   
   JScript, JavaScript e, finalmente,
   ECMAScript
   

   View Slide

4. ECMAScript
   Linguagem que veio da padronização do
   JavaScript
   
   Veio depois do JavaScript para melhorá-lo
   

   View Slide

5. Hoje
   1000 maneiras de se fazer uma aplicação web
   
   Todas envolvem JavaScript no client-side
   
   Tendência: JavaScript no server-side
   

   View Slide

6. Você não tem
   alternativas
   Navegadores web de dispositivos web
   trabalham apenas com JavaScript
   
   Java, Flash Player, Silverlight nos
   navegadores tradicionais?
   

   View Slide

7. 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
   

   View Slide

8. JS contém partes
   boas e partes ruins
   

   View Slide

9. 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?
   
   …
   

   View Slide

10. 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
    

    View Slide

11. View Slide

12. 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.
    

    View Slide

13. http://try.github.io/levels/1/challenges/1
    http://octodex.github.com/labtocat/
    

    View Slide

14. Mãos à obra
    O que usar para facilitar a criação de um
    aplicativo?
    
    Frameworks, bibliotecas? Quais as opções?
    
    Esqueletos prontos? Exemplos?
    

    View Slide

15. 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
    

    View Slide

16. 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?
    

    View Slide

17. Ferramenta
    essencial
    IDE ou editor de texto?

    

    IDEs:

    WebStorm (JetBrains)

    Eclipse, NetBeans

    …

    

    Editores de texto:

    Sublime, TextMate

    vi (hard core)

    …
    Vantagens?
    
    x
    
    Desvantagens?
    

    View Slide

18. 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
    

    View Slide

19. gs.statcounter.com
    

    View Slide

20. 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?
    

    View Slide

21. Ferramentas de linha de
    comando para melhorar a sua
    produtividade
    

    View Slide

22. 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
    

    View Slide

23. Yeoman + AngularJS
    Vamos criar uma aplicação com AngularJS,
    testes, e etc usando o Yeoman?

    

    npm install -g generator-angular
    

    View Slide

24. View Slide

25. Testes automatizados!
    

    View Slide

26. View Slide

27. 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
    

    View Slide