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

Aplicações Web Modernas (2015)

Aplicações Web Modernas (2015)

Guilherme Farias

August 07, 2015
Tweet

More Decks by Guilherme Farias

Other Decks in Programming

Transcript

  1. Aplicações Web
    Modernas

    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
    Moderna

    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 aplicação 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. GET
    POST
    PUT
    DELETE

    View full-size slide

  9. EXIBIR
    POST http://meusistema.com/cliente
    LISTAR
    POST http://meusistema.com/listar-cliente
    ADICIONAR
    POST http://meusistema.com/adicionar-cliente
    EDITAR
    POST http://meusistema.com/editar-cliente
    DELETAR
    POST http://meusistema.com/deletar-cliente

    View full-size slide

  10. EXIBIR
    GET http://meusistema.com/clientes/1
    LISTAR
    GET http://meusistema.com/clientes
    ADICIONAR
    POST http://meusistema.com/clientes
    EDITAR
    PUT http://meusistema.com/clientes/1
    DELETAR
    DELETE http://meusistema.com/clientes/1

    View full-size slide

  11. Cross-domain / CORS
    Uma abordagem baseada em tokens permite que você faça chamadas
    de AJAX para qualquer servidor, em qualquer domínio.
    Stateless (Server side scalability) (PERFORMANCE)
    Não há necessidade de manter registros de sessão, o token é uma
    entidade que transmite nele mesmo, todas as informações do usuário.
    O resto do estado vive no lado do cliente.
    Mobile ready
    Quando você começar a trabalhar em uma plataforma nativa (iOS,
    Android, Windows 8, etc.) os cookies dificultam o trabalho de consumir
    uma API segura. A adoção de uma abordagem baseada em tokens
    simplifica muito isso.

    View full-size slide

  12. Flux é uma idéia para organizar a sua aplicação que foi
    desenvolvida no Facebook, com base em um princípio simples:
    “Data moves in one direction
    through your application.”

    View full-size slide

  13. Modern Wokflow

    View full-size slide

  14. NPM
    (Node Package Manager)
    172.198 total packages
    86.438.044 downloads no último dia
    470.632.536 downloads na última semana
    1.986.474.800 downloads no último mês

    View full-size slide

  15. Node Frameworks

    View full-size slide

  16. - Application Cache
    - LocalStorage
    - SessionStorage
    - IndexedDB
    - WebSQL
    - Cookies
    - Cache Storage
    Offline

    View full-size slide

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

    View full-size slide

  18. Real-Time
    WebSockets / HTTP 2 / WebRTC

    View full-size slide

  19. HTTP 2 – Server-Push

    View full-size slide

  20. WebRTC
    Web Real Time Comunications

    View full-size slide

  21. Dados: Troca de mensagens multimidia, jogos, compartilhamentos de
    arquivos e telas.
    Vídeo: Vídeo conferência, 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

  22. Browser as “IDE”

    View full-size slide

  23. JavaScript Atual

    View full-size slide

  24. Futuro do JavaScript

    View full-size slide