Tweet
Tweet

Slide 1

Slide 1 text

Aplicações Web Modernas GuilhermeFarias.com

Slide 2

Slide 2 text

nossomos.cc

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

JavaScript evoluiu

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Não há arquitetura "universalmente correta"

Slide 8

Slide 8 text

Aplicações Web Modernas

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

- 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

Slide 11

Slide 11 text

Single Page App

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Offline

Slide 15

Slide 15 text

Offline - Application Cache - LocalStorage - SessionStorage - IndexedDB - WebSQL - Cookies

Slide 16

Slide 16 text

Mobile

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Modern Workflow

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Real-Time WebSockets / HTTP 2 / WebRTC

Slide 21

Slide 21 text

WebSockets

Slide 22

Slide 22 text

HTTP 2 - Server-Push

Slide 23

Slide 23 text

WebRTC Web Real Time Communications

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Browser as “IDE”

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

JavaScript atual

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Futuro do JavaScript

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

/GuilhermeFarias @guiky Obrigado!