Aplicações Web Modernas

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