Os desafios de um chat integrado ao checkout

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

Evolução tecnológica• Backend

• Frontend

• Produto

Evoluindo o BACKEND

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

Evoluir o sistema sem parar de funcionar ?

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

FC

V

M

C

Implementando o chat

Envia Msg

Recebe Msg

Ajax Polling

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

Não escala.

1 req/sX

550.740 req/min

Wow!

WebSockets

WebSockets

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

Não é a solução perfeita

Loadbalancer

Marketplace

FilaMarketplace Chat Publisher

Chat Service

Loadbalancer

websocket websocket

POST

HTTP

Discovery

Broadcast

A

B

Mas e nos Apps?

FilaMarketplace Push Publisher

POST

HTTP

Amazon SNS

Backendrecap

• 2 frameworks MVC simultâneos

• Teste de micro serviços para chat

Evoluindo o FRONTEND

REST

json

Marketplace

HTTP

html

Views diferentes

Views diferentesREST

json

Marketplace

HTTP/REST

html/json

Duplicação de códigoBackend Frontend

Endpoint JSP

Controller Javascript

Isomorphic Javascript

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

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

1 - [get/post]

2 - JSON [post]3 - Parcial HTML

4 - Complete HTML

HTML

HTML

1 - fetch templates [get]

2 - template (js+css+html)

HTML +

template

HTML +

template

HTML +

template

1 -fetch data [get]

2 - JSON

3 - Template + JSON

Frontend

• Javascript isomórfico

• JS Template engine

recap

Evoluindo o PRODUTO

Testes A/B

Buckets

Features Flags

BucketsBucket Filter

bucket=2567 /DISPLAY_CART_CHAT_ICON/2567

truecookie:

bucket=2567

Controle de buckets

Feature Flag

/ACTIVE_FREE_SHIPMENT

true

user_id = 33456

Métricas

MUITAS Métricas

MUITAS Métricas

MUITAS Métricas

MUITAS Métricas

MUITAS Métricas

MUITAS Métricas

MUITAS Métricas

Produto

• Teste A/B para novas features

• Métricas em todo o sistema

recap

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

Obrigado!