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

JavaScript além do navegador

JavaScript além do navegador

5733fd332f2a0da11931e0e73ddfb20d?s=128

Henrique Vicente

November 09, 2013
Tweet

More Decks by Henrique Vicente

Other Decks in Programming

Transcript

  1. JavaScript além do navegador Henrique Vicente http://henvic.github.io/

  2. JavaScript • Criada por Brendan Eich • Surgiu para o

    mundo nos betas do Netscape Navigator 2.0
  3. ECMAScript • “Padronização do JS” • ECMA-262, ISO/IEC 16262 •

    Deu origem a [outras] implementações como
 ActionScript, QML, QtScript, …
  4. No navegador, por que JS? • Como oferecer uma experiência

    melhor ao usuário de um webmail? • Mais portável • Onipresente • Rápido (e cada vez mais) • Simplicidade
  5. Alternativas no navegador • Menor performance • Menor disseminação •

    Menor simplicidade • ???
  6. E por que JavaScript além do navegador? 1. Evitar duplicidade

    de código-fonte 2. Usar o conhecimento da linguagem para atacar mais problemas 3. JavaScript é uma das linguagens mais usadas 4. Por que não?
  7. Aplicação web com JS no client-side e no server-side •

    Mesmo código para validação de dados:
 
 Menor fonte de inconsistências
 
 Feedback instantâneo para o usuário
 
 Verificação segura no lado do servidor * * Thou shalt never trust the user https://www.owasp.org/index.php/Don't_trust_user_input
  8. JS runtimes • Google V8 (Chrome) • SpiderMonkey (Firefox) •

    WebKit (Safari) • Trident (IE) • Rhino • Wakanda • …
  9. JS além do navegador • Web apps para Chrome, Firefox

    * • Apache Cordova / PhoneGap • PhantomJS • SlimerJS • CasperJS • MongoDB (para as funções de map / reduce) • Node.js * na forma de extensões / apps, ao invés de sites
  10. Web apps para Chrome, Firefox • No próprio navegador •

    Acesso a APIs não disponíveis para páginas na web • Aplicativos instalados como extensão, ao invés de páginas na web
  11. • Framework para desenvolvimento de aplicativos mobile usando uma stack

    web (HTML, JS, CSS) • Permite desenvolver um só sistema para diferentes plataformas (i.e., Android, iOS, Windows Phone…)
  12. None
  13. • Web stacks programáveis por scripts em JavaScript • PhantomJS:

    headless, WebKit-based • SlimerJS: Gecko-based • Exemplos de uso:
 web crawler, testes funcionais, monitoramento, bots
  14. Exemplos • Exemplos da minha palestra “Testes e automação com

    PhantomJS e CasperJS”
 
 https://speakerdeck.com/henvic/testes-e- automacao-com-phantomjs-e-casperjs
 
 https://github.com/henvic/phantom-casper- simple-talk
  15. None
  16. Exemplo: testes funcionais bem simples com Wordpress e CasperJS https://github.com/henvic/phantom-casper-simple-talk/blob/master/wordpress.js

  17. None
  18. Node.js • Comunidade forte e crescendo • Excelente para criação

    de ferramentas, prototipagem rápida, e… • Também tomando algum espaço de Apache + PHP, Python, Ruby, etc, como servidor / stack de aplicação web tradicional • non-blocking I/O, single-threaded event loop
 isso pode confundir muita gente… (event-driven programming)
  19. npm ~ apt-get do Node.js

  20. npmjs.org • Qualquer pessoa publica um pacote no npm, sem

    burocracias ou grandes dificuldades
 “npm publish” • Quantidade enorme de pacotes disponíveis • É recomendável ser responsável
  21. npm ~ apt-get do Node.js • npm_modules - diretório onde

    ficam instalados os módulos do npm • Existem módulos locais e globais • Cada módulo contém suas próprias dependências (outros módulos) instaladas em seu diretório npm_modules
  22. Incluindo um módulo em seu programa • var expressValidator =

    require(‘express-validator’);
 // Inclui o módulo express-validator disponível no npm
 
 Esse módulo deve ser instalado previamente, de forma local, com
 npm install express-validator
 
 Por via de regras, módulos assim você deve instalar localmente.
  23. O que instalar global? • Ferramentas como o Cordova, grunt-cli,

    bower, serviços… • npm install -g pacote ou
 npm install pacote -g
  24. Exemplo real: Criando um protótipo de chat para uma rede

    social corporativa Usando socket.io, mas o Faye com o protocolo Bayeux poderia ter sido uma escolha mais adequada.
  25. Implementação final do chat, também com Node.js e Socket.IO

  26. Servindo arquivos estáticos 1. O node não disponibiliza nenhum meio

    “oficial” de se fazer isso. 2. Instalar algum módulo como o node-static
 > npm install node-static
 
 e então:
  27. Calculando o fatorial na CLI

  28. package.json • Para publicar um pacote do Node você precisa

    de um documento deste • Mesmo se não for publicar no npm, você vai querer criar um por conta das vantagens
  29. package.json

  30. Algumas ferramentas interessantes construídas com o Node.js

  31. Slides disponíveis em https://speakerdeck.com/henvic/javascript-alem-do- navegador