Implementando realtime no frontend
-
Upload
elo7 -
Category
Technology
-
view
1.218 -
download
2
Transcript of Implementando realtime no frontend
![Page 1: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/1.jpg)
Implementando real time no front-end
William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizuta
![Page 2: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/2.jpg)
![Page 3: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/3.jpg)
O que é front-endno Elo7?
![Page 4: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/4.jpg)
Marketplace
![Page 5: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/5.jpg)
Marketplace
![Page 6: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/6.jpg)
Marketplace mobile
![Page 7: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/7.jpg)
Marketplace mobile
![Page 8: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/8.jpg)
Marketplace mobile
![Page 9: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/9.jpg)
Search engine optimization (SEO)
![Page 10: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/10.jpg)
Search engine optimization (SEO)
![Page 11: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/11.jpg)
Progressive enhancement
![Page 12: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/12.jpg)
Performance
![Page 13: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/13.jpg)
Performance
![Page 14: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/14.jpg)
Performance
![Page 15: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/15.jpg)
O que é front-end no Elo7?
1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance
![Page 16: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/16.jpg)
Arquitetura de aplicação de múltiplas páginas
Requisição
![Page 17: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/17.jpg)
Arquitetura de aplicação de múltiplas páginas
HTML + CSS + JS
![Page 18: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/18.jpg)
Bootstrap
http://www.elo7.com.br/bootstrap
![Page 19: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/19.jpg)
Arquitetura de aplicação de múltiplas páginas
![Page 20: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/20.jpg)
Real time
![Page 21: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/21.jpg)
Real time
![Page 22: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/22.jpg)
O que é front-end no Elo7?
1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance
![Page 23: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/23.jpg)
Ajax retornado HTML
![Page 24: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/24.jpg)
Arquitetura utilizando ajax (HTML)
Requisição
![Page 25: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/25.jpg)
Arquitetura utilizando ajax (HTML)
HTML + CSS + JS
![Page 26: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/26.jpg)
Arquitetura utilizando ajax (HTML)
Ajax
![Page 27: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/27.jpg)
Arquitetura utilizando ajax (HTML)
HTML + CSS + JS
![Page 28: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/28.jpg)
Arquitetura utilizando ajax (HTML)
![Page 29: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/29.jpg)
Preview
![Page 30: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/30.jpg)
HTML via JS
![Page 31: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/31.jpg)
HTML
HTML via JS
AJAX
![Page 32: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/32.jpg)
HTML
HTML via JS
JSON
![Page 33: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/33.jpg)
HTML via JS
![Page 34: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/34.jpg)
Duplicação
![Page 35: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/35.jpg)
Servidor decomponentes isomórficos
![Page 36: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/36.jpg)
Servidor de componentes
Requisição
![Page 37: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/37.jpg)
Servidor de componentes
JSONRequisição
![Page 38: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/38.jpg)
Servidor de componentes
Compo-nente
JSONRequisição
![Page 39: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/39.jpg)
Servidor de componentes
Compo-nente
PáginaJSON
Requisição
![Page 40: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/40.jpg)
Servidor de componentes
Requisição
Requisição
![Page 41: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/41.jpg)
Servidor de componentes
JSONRequisição
RequisiçãoComponente
![Page 42: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/42.jpg)
Servidor de componentes
![Page 43: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/43.jpg)
Servidor de componentes
JSON
RequisiçãoComponente
![Page 44: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/44.jpg)
Servidor de componentes
JSON
![Page 45: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/45.jpg)
Web app
![Page 46: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/46.jpg)
Servidor de componentes
Compo-nente
PáginaJSON
Requisição
![Page 47: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/47.jpg)
Progressive web app
![Page 48: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/48.jpg)
O que é front-end no Elo7?
1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance
![Page 49: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/49.jpg)
Vitrine
![Page 50: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/50.jpg)
Arquitetura utilizando ajax (JSON + componente)
Marketplace
Vitrine
![Page 51: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/51.jpg)
Reaproveitamentode componentes
![Page 52: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/52.jpg)
Múltiplos componentes
![Page 53: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/53.jpg)
Escopo
![Page 54: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/54.jpg)
Escopo de componentes
1. Id / class
![Page 55: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/55.jpg)
Escopo de componentes
1. Id2. iframe
![Page 56: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/56.jpg)
O que é front-end no Elo7?
1. Layout Desktop e Mobile2. User experience (UX)3. Search Engine Optimization (SEO)4. Progressive enhancement5. Performance
![Page 57: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/57.jpg)
Escopo de componentes
1. Id2. iframe3. Web component
![Page 58: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/58.jpg)
Escopo de componentes
![Page 59: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/59.jpg)
Escopo de componentes
![Page 60: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/60.jpg)
Web components
![Page 61: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/61.jpg)
Múltiplos componentes
![Page 62: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/62.jpg)
Comunicação
![Page 63: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/63.jpg)
Comunicação entre componentes
![Page 64: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/64.jpg)
Comunicação entre componentes
![Page 65: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/65.jpg)
Comunicação entre componentes
![Page 66: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/66.jpg)
Comunicação entre componentes
![Page 67: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/67.jpg)
![Page 68: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/68.jpg)
Broadcast de eventos
![Page 69: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/69.jpg)
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
![Page 70: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/70.jpg)
Servidor de componentes isomórficos
com broadcast de eventos
![Page 71: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/71.jpg)
Dúvidas?
![Page 72: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/72.jpg)
Envie sua dúvida no Twitter!#elo7tech
![Page 73: Implementando realtime no frontend](https://reader031.fdocuments.net/reader031/viewer/2022030316/587a33d41a28abdb1c8b5329/html5/thumbnails/73.jpg)
Obrigado!
William Mizutalinkedin: br.linkedin.com/in/williamseitimizutatwitter: @williammizutagithub: github.com/williammizuta