Implementando real time no front-end
William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizuta
O que é front-endno Elo7?
Marketplace mobile
Marketplace mobile
Marketplace mobile
Search engine optimization (SEO)
Search engine optimization (SEO)
Progressive enhancement
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
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)
HTML
HTML via JS
AJAX
HTML
HTML via JS
JSON
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
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
Arquitetura utilizando ajax (JSON + componente)
Marketplace
Vitrine
Reaproveitamentode componentes
Múltiplos componentes
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
Múltiplos componentes
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
Envie sua dúvida no Twitter!#elo7tech
Obrigado!
William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizutagithub: github.com/williammizuta