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 Slide

  2. View Slide

  3. View Slide

  4. JavaScript Evoluiu

    View Slide

  5. View Slide

  6. Não Há arquitetura
    “universalmente correta”

    View Slide

  7. Aplicações Web
    Moderna

    View Slide

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

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

  10. Single Page App

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. REST

    View Slide

  15. GET
    POST
    PUT
    DELETE

    View Slide

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

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

  18. View Slide

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

  20. Flux

    View Slide

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

  22. View Slide

  23. View Slide

  24. Modern Wokflow

    View Slide

  25. View Slide

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

  27. 27/05/2015

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Node Frameworks

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Offline

    View Slide

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

    View Slide

  38. Mobile

    View Slide

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

    View Slide

  40. Real-Time
    WebSockets / HTTP 2 / WebRTC

    View Slide

  41. WebSockets

    View Slide

  42. HTTP 2 – Server-Push

    View Slide

  43. WebRTC
    Web Real Time Comunications

    View Slide

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

  45. View Slide

  46. View Slide

  47. Browser as “IDE”

    View Slide

  48. View Slide

  49. View Slide

  50. JavaScript Atual

    View Slide

  51. View Slide

  52. Futuro do JavaScript

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. Obrigado!

    View Slide