A compra de um produto personalizado exige uma constante troca de informações entre comprador e vendedor. Nesta palestra mostraremos a evolução da arquitetura dos sistemas. Incluir um chat em fluxo de checkout fez com que mudássemos completamente a maneira com que construimos nossos sistemas desencadeando uma série de mudanças.

1. A arquitetura de um chat integrado ao
checkout
Mario Amaral
linkedin: https://br.linkedin.com/in/mariofts
twitter: @mario_fts

2. Envie sua dúvida no Twitter!
#elo7tech
Wifi: cubo-eventos
Senha: cubo2016

3. Evolução tecnológica
• Backend
• Frontend
• Produto

4. Evoluindo o
BACKEND

7. http://www.joelonsoftware.com/articles/fog0000000069.html

8. Evoluir o sistema
sem parar de
funcionar ?

9. FC
V
M
C

10. FC
V
M
C
FC
V
M
C

11. FC
V
M
C
FC
V
M
C

12. FC
V
M
C
FC
V
M
C

13. FC
V
M
C
FC
V
M
C

14. FC
V
M
C
FC
V
M
C

15. FC
V
M
C
FC
V
M
C

16. FC
V
M
C
FC
V
M
C

17. FC
V
M
C
FC
V
M
C

18. FC
V
M
C
FC
V
M
C

19. FC
V
M
C
FC
V
M
C

20. FC
V
M
C
FC
V
M
C

21. FC
V
M
C
FC
V
M
C

22. FC
V
M
C
FC
V
M
C

23. FC
V
M
C
FC
V
M
C

24. FC
V
M
C
FC
V
M
C

25. FC
V
M
C
FC
V
M
C

26. FC
V
M
C
FC
V
M
C

27. FC
V
M
C
FC
V
M
C

28. FC
V
M
C
FC
V
M
C

29. Implementando o
chat

30. Envia Msg
Recebe Msg

31. Ajax Polling

32. http://bstavroulakis.com/blog/web/real-time-web-applications/

33. Não escala.

34. 1 req/sX

35. 550.740
req/min

36. Wow!

37. WebSockets

38. WebSockets

39. http://bstavroulakis.com/blog/web/real-time-web-applications/

40. Não é a solução
perfeita

41. Loadbalancer
Marketplace

42. FilaMarketplace
Chat
Publisher
Chat
Service
Loadbalancer
websocket websocket
POST
HTTP
Discovery
Broadcast
A
B

43. Mas e nos Apps?

44. FilaMarketplace
Push
Publisher
POST
HTTP
Amazon
SNS

45. Backendrecap
• 2 frameworks MVC simultâneos
• Teste de micro serviços para chat

46. Evoluindo o
FRONTEND

47. REST
json
Marketplace
HTTP
html
Views diferentes

48. Views diferentes
REST
json
Marketplace
HTTP/REST
html/json

49. Duplicação de código
Backend Frontend
Endpoint JSP
Controller Javascript

50. Isomorphic
Javascript

51. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

52. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

54. 1 - [get/post]
2 - JSON [post]3 - Parcial HTML
4 - Complete HTML
HTML

55. HTML

56. 1 - fetch templates [get]
2 - template (js+css+html)
HTML
+
template

57. HTML
+
template

58. HTML
+
template
1 -fetch data [get]
2 - JSON
3 - Template + JSON

59. Frontend
• Javascript isomórfico
• JS Template engine
recap

60. Evoluindo o
PRODUTO

63. Testes
A/B

65. Buckets
Features Flags

66. Buckets
Bucket
Filter
bucket=2567
/DISPLAY_CART_CHAT_ICON/2567
true
cookie:
bucket=2567

67. Controle de buckets

68. Feature Flag
/ACTIVE_FREE_SHIPMENT
true
user_id =
33456

69. Métricas

70. MUITAS
Métricas

71. MUITAS
Métricas

72. MUITAS
Métricas

73. MUITAS
Métricas

74. MUITAS
Métricas

75. MUITAS
Métricas

76. MUITAS
Métricas

77. Produto
• Teste A/B para novas features
• Métricas em todo o sistema
recap

78. Obrigado!
Mario Amaral
linkedin: https://br.linkedin.com/in/mariofts
twitter: @mario_fts