Implementando real time no front-end

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

O que é front-endno Elo7?

Marketplace

Marketplace

Marketplace mobile

Marketplace mobile

Marketplace mobile

Search engine optimization (SEO)

Search engine optimization (SEO)

Progressive enhancement

Performance

Performance

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

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

HTML + CSS + JS

Bootstrap

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

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

Real time

Real time

O que é front-end no Elo7?

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

Ajax retornado HTML

Arquitetura utilizando ajax (HTML)

Requisição

Arquitetura utilizando ajax (HTML)

HTML + CSS + JS

Arquitetura utilizando ajax (HTML)

Ajax

Arquitetura utilizando ajax (HTML)

HTML + CSS + JS

Arquitetura utilizando ajax (HTML)

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

Servidor de componentes

JSONRequisição

Servidor de componentes

Compo-nente

JSONRequisição

Servidor de componentes

Compo-nente

PáginaJSON

Requisição

Servidor de componentes

Requisição

Requisição

Servidor de componentes

JSONRequisição

RequisiçãoComponente

Servidor de componentes

Servidor de componentes

JSON

RequisiçãoComponente

Servidor de componentes

JSON

Web app

Servidor de componentes

Compo-nente

PáginaJSON

Requisição

Progressive web app

O que é front-end no Elo7?

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

Vitrine

Arquitetura utilizando ajax (JSON + componente)

Marketplace

Vitrine

Reaproveitamentode componentes

Múltiplos componentes

Escopo

Escopo de componentes

1. Id / class

Escopo de componentes

1. Id2. iframe

O que é front-end no Elo7?

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

Escopo de componentes

1. Id2. iframe3. Web component

Escopo de componentes

Escopo de componentes

Web components

Múltiplos componentes

Comunicação

Comunicação entre componentes

Comunicação entre componentes

Comunicação entre componentes

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