Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvendo uma aplicação web

Desenvolvendo uma aplicação web

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

Henrique Vicente

October 25, 2013
Tweet

More Decks by Henrique Vicente

Other Decks in Programming

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