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 full-size slide

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

    View full-size slide

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

    ActionScript, QML, QtScript, …

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  12. • 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 full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. npm ~ apt-get do Node.js

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    npm install pacote -g

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. Calculando o fatorial na CLI

    View full-size slide

  25. 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 full-size slide

  26. package.json

    View full-size slide

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

    View full-size slide

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

    View full-size slide