O documento discute a arquitetura front-end do Elo7, incluindo o uso de componentes isomórficos, comunicação entre componentes e tempo real. Ele explica como o Elo7 implementa layouts para desktop e mobile, otimização para mecanismos de busca, melhoria progressiva e desempenho.

1. Implementando real time no front-end
William Mizuta
linkedin: br.linkedin.com/in/williamseitimizuta
twitter: @williammizuta

3. O que é front-end
no Elo7?

4. Marketplace

5. Marketplace

6. Marketplace mobile

7. Marketplace mobile

8. Marketplace mobile

9. Search engine optimization (SEO)

10. Search engine optimization (SEO)

11. Progressive enhancement

12. Performance

13. Performance

14. Performance

15. O que é front-end no Elo7?
1. Layout Desktop e Mobile
2. User experience (UX)
3. Search Engine Optimization (SEO)
4. Progressive enhancement
5. Performance

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

17. Arquitetura de aplicação de múltiplas páginas
HTML + CSS + JS

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

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

20. Real time

21. Real time

22. O que é front-end no Elo7?
1. Layout Desktop e Mobile
2. User experience (UX)
3. Search Engine Optimization (SEO)
4. Progressive enhancement
5. Performance

23. Ajax retornado HTML

24. Arquitetura utilizando ajax (HTML)
Requisição

25. Arquitetura utilizando ajax (HTML)
HTML + CSS + JS

26. Arquitetura utilizando ajax (HTML)
Ajax

27. Arquitetura utilizando ajax (HTML)
HTML + CSS + JS

28. Arquitetura utilizando ajax (HTML)

29. Preview

30. HTML via JS

31. H
T
M
L
HTML via JS
AJAX

32. H
T
M
L
HTML via JS
JSON

33. HTML via JS

34. Duplicação

35. Servidor de
componentes isomórficos

36. Servidor de componentes
Requisição

37. Servidor de componentes
JSON
Requisição

38. Servidor de componentes
Compo-
nente
JSON
Requisição

39. Servidor de componentes
Compo-
nente
Página
JSON
Requisição

40. Servidor de componentes
Requisição
Requisição

41. Servidor de componentes
JSON
Requisição
Requisição
Componente

42. Servidor de componentes

43. Servidor de componentes
JSON
Requisição
Componente

44. Servidor de componentes
JSON

45. Web app

46. Servidor de componentes
Compo-
nente
Página
JSON
Requisição

47. Progressive web app

48. O que é front-end no Elo7?
1. Layout Desktop e Mobile
2. User experience (UX)
3. Search Engine Optimization (SEO)
4. Progressive enhancement
5. Performance

49. Vitrine

50. Arquitetura utilizando ajax (JSON + componente)
Marketplace
Vitrine

51. Reaproveitamento
de componentes

52. Múltiplos componentes

53. Escopo

54. Escopo de componentes
1. Id / class

55. Escopo de componentes
1. Id
2. iframe

56. O que é front-end no Elo7?
1. Layout Desktop e Mobile
2. User experience (UX)
3. Search Engine Optimization (SEO)
4. Progressive enhancement
5. Performance

57. Escopo de componentes
1. Id
2. iframe
3. Web component

58. Escopo de componentes

59. Escopo de componentes

60. Web components

61. Múltiplos componentes

62. Comunicação

63. Comunicação entre componentes

64. Comunicação entre componentes

65. Comunicação entre componentes

66. Comunicação entre componentes

68. Broadcast de eventos

69. O que é front-end no Elo7 hoje?
1. Layout Desktop e Mobile
2. User experience (UX)
3. Search Engine Optimization (SEO)
4. Progressive enhancement
5. Performance
6. Real time

70. Servidor de
componentes isomórficos
com
broadcast de eventos

71. Dúvidas?

72. Envie sua dúvida no Twitter!
#elo7tech

73. Obrigado!
William Mizuta
linkedin: br.linkedin.com/in/williamseitimizuta
twitter: @williammizuta
github: github.com/williammizuta