Aplicações Web Modernas (2015)

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