JavaScript além do navegador

Transcript

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

   View Slide

2. JavaScript
   • Criada por Brendan Eich
   • Surgiu para o mundo nos betas do Netscape
   Navigator 2.0
   

   View Slide

3. ECMAScript
   • “Padronização do JS”
   • ECMA-262, ISO/IEC 16262
   • Deu origem a [outras] implementações como

   ActionScript, QML, QtScript, …
   

   View Slide

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
   

   View Slide

5. Alternativas no navegador
   • Menor performance
   • Menor disseminação
   • Menor simplicidade
   • ???
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

8. JS runtimes
   • Google V8 (Chrome)
   • SpiderMonkey (Firefox)
   • WebKit (Safari)
   • Trident (IE)
   • Rhino
   • Wakanda
   • …
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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…)
    

    View Slide

12. View Slide

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
    

    View Slide

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
    

    View Slide

15. View Slide

16. Exemplo: testes funcionais bem
    simples com Wordpress e CasperJS
    https://github.com/henvic/phantom-casper-simple-talk/blob/master/wordpress.js
    

    View Slide

17. View Slide

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)
    

    View Slide

19. npm ~ apt-get do Node.js
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

23. O que instalar global?
    • Ferramentas como o Cordova, grunt-cli, bower,
    serviços…
    • npm install -g pacote ou

    npm install pacote -g
    

    View Slide

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.
    

    View Slide

25. Implementação final do chat,
    também com Node.js e Socket.IO
    

    View Slide

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:
    

    View Slide

27. Calculando o fatorial na CLI
    

    View Slide

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
    

    View Slide

29. package.json
    

    View Slide

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

    View Slide

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

    View Slide