a arquitetura de um chat integrado ao checkout

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

Upload: elo7

Post on 14-Jan-2017

1.029 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: A arquitetura de um chat integrado ao checkout

A arquitetura de um chat integrado ao checkout

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

Page 2: A arquitetura de um chat integrado ao checkout

Envie sua dúvida no Twitter!

#elo7tech

Wifi: cubo-eventos Senha: cubo2016

Page 3: A arquitetura de um chat integrado ao checkout

Evolução tecnológica• Backend

• Frontend

• Produto

Page 4: A arquitetura de um chat integrado ao checkout

Evoluindo o BACKEND

Page 5: A arquitetura de um chat integrado ao checkout
Page 6: A arquitetura de um chat integrado ao checkout
Page 7: A arquitetura de um chat integrado ao checkout

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

Page 8: A arquitetura de um chat integrado ao checkout

Evoluir o sistema sem parar de funcionar ?

Page 9: A arquitetura de um chat integrado ao checkout

FC

V

M

C

Page 10: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 11: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 12: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 13: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 14: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 15: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 16: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 17: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 18: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 19: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 20: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 21: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 22: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 23: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 24: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 25: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 26: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 27: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 28: A arquitetura de um chat integrado ao checkout

FC

V

M

C

FC

V

M

C

Page 29: A arquitetura de um chat integrado ao checkout

Implementando o chat

Page 30: A arquitetura de um chat integrado ao checkout

Envia Msg

Recebe Msg

Page 31: A arquitetura de um chat integrado ao checkout

Ajax Polling

Page 32: A arquitetura de um chat integrado ao checkout

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

Page 33: A arquitetura de um chat integrado ao checkout

Não escala.

Page 34: A arquitetura de um chat integrado ao checkout

1 req/sX

Page 35: A arquitetura de um chat integrado ao checkout

550.740 req/min

Page 36: A arquitetura de um chat integrado ao checkout

Wow!

Page 37: A arquitetura de um chat integrado ao checkout

WebSockets

Page 38: A arquitetura de um chat integrado ao checkout

WebSockets

Page 39: A arquitetura de um chat integrado ao checkout

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

Page 40: A arquitetura de um chat integrado ao checkout

Não é a solução perfeita

Page 41: A arquitetura de um chat integrado ao checkout

Loadbalancer

Marketplace

Page 42: A arquitetura de um chat integrado ao checkout

FilaMarketplace Chat Publisher

Chat Service

Loadbalancer

websocket websocket

POST

HTTP

Discovery

Broadcast

A

B

Page 43: A arquitetura de um chat integrado ao checkout

Mas e nos Apps?

Page 44: A arquitetura de um chat integrado ao checkout

FilaMarketplace Push Publisher

POST

HTTP

Amazon SNS

Page 45: A arquitetura de um chat integrado ao checkout

Backendrecap

• 2 frameworks MVC simultâneos

• Teste de micro serviços para chat

Page 46: A arquitetura de um chat integrado ao checkout

Evoluindo o FRONTEND

Page 47: A arquitetura de um chat integrado ao checkout

REST

json

Marketplace

HTTP

html

Views diferentes

Page 48: A arquitetura de um chat integrado ao checkout

Views diferentesREST

json

Marketplace

HTTP/REST

html/json

Page 49: A arquitetura de um chat integrado ao checkout

Duplicação de códigoBackend Frontend

Endpoint JSP

Controller Javascript

Page 50: A arquitetura de um chat integrado ao checkout

Isomorphic Javascript

Page 51: A arquitetura de um chat integrado ao checkout

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

Page 52: A arquitetura de um chat integrado ao checkout

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

Page 53: A arquitetura de um chat integrado ao checkout
Page 54: A arquitetura de um chat integrado ao checkout

1 - [get/post]

2 - JSON [post]3 - Parcial HTML

4 - Complete HTML

HTML

Page 55: A arquitetura de um chat integrado ao checkout

HTML

Page 56: A arquitetura de um chat integrado ao checkout

1 - fetch templates [get]

2 - template (js+css+html)

HTML +

template

Page 57: A arquitetura de um chat integrado ao checkout

HTML +

template

Page 58: A arquitetura de um chat integrado ao checkout

HTML +

template

1 -fetch data [get]

2 - JSON

3 - Template + JSON

Page 59: A arquitetura de um chat integrado ao checkout

Frontend

• Javascript isomórfico

• JS Template engine

recap

Page 60: A arquitetura de um chat integrado ao checkout

Evoluindo o PRODUTO

Page 61: A arquitetura de um chat integrado ao checkout
Page 62: A arquitetura de um chat integrado ao checkout
Page 63: A arquitetura de um chat integrado ao checkout

Testes A/B

Page 64: A arquitetura de um chat integrado ao checkout
Page 65: A arquitetura de um chat integrado ao checkout

Buckets

Features Flags

Page 66: A arquitetura de um chat integrado ao checkout

BucketsBucket Filter

bucket=2567 /DISPLAY_CART_CHAT_ICON/2567

truecookie:

bucket=2567

Page 67: A arquitetura de um chat integrado ao checkout

Controle de buckets

Page 68: A arquitetura de um chat integrado ao checkout

Feature Flag

/ACTIVE_FREE_SHIPMENT

true

user_id = 33456

Page 69: A arquitetura de um chat integrado ao checkout

Métricas

Page 70: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 71: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 72: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 73: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 74: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 75: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 76: A arquitetura de um chat integrado ao checkout

MUITAS Métricas

Page 77: A arquitetura de um chat integrado ao checkout

Produto

• Teste A/B para novas features

• Métricas em todo o sistema

recap

Page 78: A arquitetura de um chat integrado ao checkout

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