Aplicações Web Modernas (2015)

Transcript

1. 1.

   Aplicações Web Modernas

2. 2.

   None
3. 3.

   None
4. 4.

   JavaScript Evoluiu

5. 5.

   None
6. 6.

   Não Há arquitetura “universalmente correta”

7. 7.

   Aplicações Web Moderna

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

    Single Page App

11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

    REST

15. 15.

    GET POST PUT DELETE

16. 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
17. 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
18. 18.

    None
19. 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.
20. 20.

    Flux

21. 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.”
22. 22.

    None
23. 23.

    None
24. 24.

    Modern Wokflow

25. 25.

    None
26. 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
27. 27.

    27/05/2015

28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    Node Frameworks

33. 33.

    None
34. 34.

    None
35. 35.

    None
36. 36.

    Offline

37. 37.

    - Application Cache - LocalStorage - SessionStorage - IndexedDB -

    WebSQL - Cookies - Cache Storage Offline
38. 38.

    Mobile

39. 39.

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

40. 40.

    Real-Time WebSockets / HTTP 2 / WebRTC

41. 41.

    WebSockets

42. 42.

    HTTP 2 – Server-Push

43. 43.

    WebRTC Web Real Time Comunications

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

    None
46. 46.

    None
47. 47.

    Browser as “IDE”

48. 48.

    None
49. 49.

    None
50. 50.

    JavaScript Atual

51. 51.

    None
52. 52.

    Futuro do JavaScript

53. 53.

    None
54. 54.

    None
55. 55.

    None
56. 56.

    None
57. 57.

    None
58. 58.

    None
59. 59.

    Obrigado!