implementando realtime no frontend
TRANSCRIPT
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