Implementando realtime no frontend

Implementando real time no front-end

William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizuta

O que é front-endno Elo7?

Marketplace

Marketplace mobile

Search engine optimization (SEO)

Progressive enhancement

Performance

O que é front-end no Elo7?

1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance

Arquitetura de aplicação de múltiplas páginas

Requisição


HTML + CSS + JS

Bootstrap

http://www.elo7.com.br/bootstrap



Real time

Ajax retornado HTML

Arquitetura utilizando ajax (HTML)

Requisição


HTML + CSS + JS


Ajax


HTML + CSS + JS

Preview

HTML via JS

HTML

HTML via JS

AJAX

HTML

HTML via JS

JSON

HTML via JS

Duplicação

Servidor decomponentes isomórficos

Servidor de componentes

Requisição


JSONRequisição


Compo-nente

JSONRequisição


Compo-nente

PáginaJSON

Requisição


Requisição

Requisição


JSONRequisição

RequisiçãoComponente


JSON

RequisiçãoComponente


JSON

Web app


Compo-nente

PáginaJSON

Requisição

Progressive web app

Vitrine

Arquitetura utilizando ajax (JSON + componente)

Marketplace

Vitrine

Reaproveitamentode componentes

Múltiplos componentes

Escopo

Escopo de componentes

1. Id / class


1. Id2. iframe


1. Id2. iframe3. Web component

Web components

Múltiplos componentes

Comunicação

Comunicação entre componentes

Broadcast de eventos

O que é front-end no Elo7 hoje?

1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance6. Real time

Servidor de componentes isomórficos

com broadcast de eventos

Dúvidas?

Envie sua dúvida no Twitter!#elo7tech

Obrigado!

William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizutagithub: github.com/williammizuta

Implementando realtime no frontend

Technology

Transcript of Implementando realtime no frontend