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

Aplicações Web Modernas

Aplicações Web Modernas

Guilherme Farias

November 04, 2014
Tweet

More Decks by Guilherme Farias

Other Decks in Programming

Transcript

  1. Aplicações Web
    Modernas
    GuilhermeFarias.com

    View full-size slide

  2. JavaScript evoluiu

    View full-size slide

  3. Não há arquitetura
    "universalmente correta"

    View full-size slide

  4. Aplicações Web
    Modernas

    View full-size slide

  5. - Elas usam muito do HTML 5 para ter a sensação de
    ser uma aplicação nativa (desktop)
    - São desenvolvidas pensando-se que, ao ficar
    offline, o usuário possa continuar a utilizar a
    aplicação (como um aplicativo desktop)
    - Elas reconhecem o dispositivo em que estão
    sendo executadas (celular, desktop, tablet, etc)
    - A aplicação é projetada num estilo client-side.

    View full-size slide

  6. - Apresentam uma performance bem maior que as
    aplicações Web antigas e seu uso é muito mais
    agradável
    - O cliente (navegador) se comunica de forma
    assíncrona com o servidor e muitas vezes o servidor
    envia dados sem haver uma requisição (push de
    conteúdo) usando AJAX, WebSockets ou WebRTC
    - Apresentam um estilo de navegação com poucos
    links e elementos de navegação tradicionais da Web

    View full-size slide

  7. Single Page App

    View full-size slide

  8. Offline
    - Application Cache
    - LocalStorage
    - SessionStorage
    - IndexedDB
    - WebSQL
    - Cookies

    View full-size slide

  9. Navegadores
    modernos como
    Firefox e Chrome
    são “IDE”

    View full-size slide

  10. Modern Workflow

    View full-size slide

  11. Real-Time
    WebSockets / HTTP 2 / WebRTC

    View full-size slide

  12. HTTP 2 - Server-Push

    View full-size slide

  13. WebRTC
    Web Real Time Communications

    View full-size slide

  14. Dados: Troca de mensagens multimidia, jogos, compartilhamentos de
    arquivos e telas.
    Vídeo: Vídeo conferencia, Reconhecimento facial e de objeto, conferência de
    várias pessoas (ex: Hangout)
    Audio: Compartilhamento de audio, Telefonia, Reconhecimento de voz.
    SEM PLUGINS,
    É NATIVO DO
    JAVASCRIPT

    View full-size slide

  15. Browser as “IDE”

    View full-size slide

  16. JavaScript atual

    View full-size slide

  17. Futuro do JavaScript

    View full-size slide

  18. /GuilhermeFarias
    @guiky
    Obrigado!

    View full-size slide