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

JavaScript além do navegador

JavaScript além do navegador

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/

    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