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 Slide

  2. nossomos.cc

    View Slide

  3. View Slide

  4. View Slide

  5. JavaScript evoluiu

    View Slide

  6. View Slide

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

    View Slide

  8. Aplicações Web
    Modernas

    View Slide

  9. - 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 Slide

  10. - 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 Slide

  11. Single Page App

    View Slide

  12. View Slide

  13. View Slide

  14. Offline

    View Slide

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

    View Slide

  16. Mobile

    View Slide

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

    View Slide

  18. Modern Workflow

    View Slide

  19. View Slide

  20. Real-Time
    WebSockets / HTTP 2 / WebRTC

    View Slide

  21. WebSockets

    View Slide

  22. HTTP 2 - Server-Push

    View Slide

  23. WebRTC
    Web Real Time Communications

    View Slide

  24. 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 Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Browser as “IDE”

    View Slide

  29. View Slide

  30. JavaScript atual

    View Slide

  31. View Slide

  32. Futuro do JavaScript

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. /GuilhermeFarias
    @guiky
    Obrigado!

    View Slide