Em um mundo onde as aplicações e serviços são cada vez mais 'micro', muitas vezes nos vemos presos a legados monolíticos de difícil manutenção e/ou substituição completa, quer seja por questões econômicas ou estratégicas. Nesta palestra vamos abordar o tema citando uma aplicação desktop real que roda em milhares de operadores dos maiores callcenters do Brasil. Como decisões de arquitetura podem ajudar revitalizar este tipo de aplicação e entregar valor enquanto o backlog incremental é mantido? Vamos mostrar o modelo de arquitetura escolhido para o nosso caso, discutir cada componente, os motivos que nos fizeram escolhe-los e mostrar um pouco de código.

1. Revitalizando aplicações
Windows
Usando Cef/CefGlue, Message Bus e React.JS

2. Marcelo Palladino
public class MarceloPalladino: SerHumano,
IDesenvolvedor, IArquitetoDeSoftware
@mfpalladino
Henrique Sosa
Front-End Developer
@henriquesosa

3. Comunidades
- Inovação em SaaS
- React Brasil

4. Disclaimer

5. Arquitetura de software?
"A arquitetura de software engloba o conjunto de decisões importantes sobre a
organização de um sistema de software, incluindo a seleção dos elementos
estruturais e as interfaces pelas quais o sistema se compõe; comportamento
como especificado na colaboração entre esses elementos; composição destes
elementos estruturais e comportamentais em subsistemas maiores; e um estilo
de arquitetura que orienta essa organização. Arquitetura de software envolve
também a funcionalidade, usabilidade, resistência, desempenho, reutilização,
compreensibilidade, restrições econômicas e tecnológicas, vantagens e
desvantagens e preocupações estéticas ."
Philippe Kruchten, Grady Booch, Kurt Bittner, and Rich Reitman derived and refined a definition of architecture based on work by Mary Shaw and David
Garlan (Shaw and Garlan 1996).

6. Fowler sendo Fowler
“A indústria de software se delicia em pegar palavras e estendê-las em uma
miríade de significados sutilmente contraditórios. Uma das maiores sofredoras é
‘arquitetura’.”
● A decomposição em alto nível de um sistema em suas partes.
● Decisões que são difíceis de mudar.
● No final, a arquitetura se resume a coisas importantes - seja lá o que isso
signifique.
Patterns of Enterprise Application Architecture, Martin Fowler.

7. Alinhamento de Expectativas
- Não é um tutorial sobre Cef/CefGlue
- Não é uma palestra sobre React.JS
- Não é um live coding
- Detalhes de implementação
- https://github.com/henriquesosa
- https://github.com/mfpalladino

8. Tomadas de decisões de
arquitetura de software

9. Um pouco de contextualização

11. 1998
Contexto: Quem nunca?
- Cliente servidor
- Única aplicação de Chat no
Brasil
- Boom no mercado de
atendimento online
Operador
Windows
Chat
WEB
MSSQL
*desenho simplificado da arquitetura 1.0

12. Problema: Não escala!

13. 2007
Contexto: O famoso três
camadas
Operador
Windows
Chat
WEBMSSQL
Servidor de
aplicação
SOAP
SOAP
Aplicação
*desenho simplificado da arquitetura 2.0 (três camadas)

14. O problema de escalabilidade
persiste!

15. 2011 - 2012
Problema de escala no
servidor definitivamente
resolvido
Contexto: Microserviços
- Persistência poliglota
- Caches distribuídos
- Filas
- Processos assíncronos
- Load balancers
- Auto scaling
- Tolerância a falhas

16. Operador
Windows
Chat
WEB
MSSQL
Servidor de
aplicação
SOAP
REST
Serviço
MYSQL
Serviço
Dynamo
Serviço
S3
Serviço
Serviço
...
Serviço
Serviço ...
Aplicação
Microserviços
REST/XMPP
*desenho simplificado da arquitetura 3.0
(microserviços)

17. 2015 - 2016
Um típico WindowsForms
LEGADO
- Uma palavra: GORDO
- base de código de ~10 anos
- ~150MB
- 50 projetos
- Alto acoplamento
- Alta complexidade
- …
- …
- Mas o principal é...
Operador Windows

18. Outros tipos de problemas de
escala
- Do ponto de vista do produto
- Difícil garantir adoção de correções/melhorias
- Métrica: Em média 2 anos para atualização em todos os operadores
- Limitador da evolução do produto
- Dificulta priorização no backlog
- Do ponto de vista do desenvolvimento
- O WindowsForms é antigo
- Profissionais cada vez mais escassos

19. Idiossincrasias do mercado de
callcenters
- Gestão de mudança no ambiente extremamente burocrática
- Poucas “janelas” para modificação no ambiente
- Grande limitação de recursos
- Acesso a recursos locais
- Versão .net framework
- IP de saída

20. Respostas de arquitetura

21. Não fazer nada e pedir
para sair

22. Reescrever tudo
- Prazo estimado (8 meses a 1 ano)
- Custo sem entrega contínua de valor
- Muito tempo para concorrência agir
“They did it by making the single worst strategic mistake that any
software company can make:
They decided to rewrite the code from scratch.”
Joel Spolsky - Autor do artigo "Things You Should Never Do"

23. "Dar um jeito" de entregar valor
continuamente e resolver o
problema

24. Qual foi a forma e quais os finais esperados?
- Forma
- Substituir as partes da aplicação Windows por “micro” aplicações WEB
- Final intermediario
- Uma aplicação Windows que é apenas uma “casca” para várias aplicações WEB
- Final
- Uma aplicação Windows que é apenas uma “casca” para uma aplicação WEB

25. Preparação
- Pesquisa de casos parecidos
- Palestra do Felipe Ribeiro (Spotify) na BrazilJS 2015
- Conferência com o time de desenvolvimento
- Provas de conceito

26. Message Bus
(integrando através de mensageria)
WindowsForms
UserControl
Message Bus
WindowsForms
UserControl
WindowsForms
UserControl
WEB APP WEB APP WEB APP

27. Message Bus
(integrando através de mensageria) - O conteúdo da mensagem inclui
informações relacionadas ao evento
(ex: lista de categorias de habilidades)
- O formato da mensagem define um
contrato entre a aplicação Windows e
as partes WEB
(ex: uma categoria de habilidade possui
id, nome e uma lista de habilidades)
1
2

28. Message Bus
(integrando através de mensageria)
- As partes "assinam" o canal para que
sejam notificadas quando mensagens
forem "adicionadas"
1
2

29. Message Bus: Por quê?
(integrando através de mensageria)
A relação de "publicação" e "consumo" passa a ser naturalmente assíncrona e
desacoplada!
Fonte: http://elemarjr.com/pt/2012/10/18/sobre-a-integracao-de-aplicacoes-atraves-de-mensageria/

30. Requisitos:
- Padrão para tratamento de
estado de forma imutável
- Ponto centralizado para
“desarmar” a comunicação
entre as aplicações
- Modelo claro e conveniente de
web components

31. Lidando com estado: Uma
abordagem possível

32. CONTROLLER
MODELVIEW
*desenho simplificado da arquitetura do Front 1.0

33. CONTROLLER
MODEL
VIEW
*desenho simplificado da arquitetura do Front 2.0
VIEW
CONTROLLER
CONTROLLER
CONTROLLER
MODEL
MODEL

34. Problema: Não atende aos
requisitos!

36. Redux
- Redux is a predictable state container for JavaScript apps.
- Wrote by @dan_abramov
- http://redux.js.org

37. VIEW ACTION REDUCER STORE
*desenho de exemplo de recebimento de dados da aplicação Windows
Front-end

38. Fluxo do estado
Aplicação WEB -> Aplicação Windows

39. VIEW ACTION REDUCER STORE
MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows

40. VIEW ACTION REDUCER STORE
MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Mensagem
Front-end
*desenho de exemplo de requisição para a aplicação Windows

41. VIEW ACTION REDUCER STORE
MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Mensagem
Front-end
*desenho de exemplo de requisição para a aplicação Windows

42. VIEW ACTION REDUCER STORE
MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows

43. VIEW ACTION REDUCER STORE
MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows

44. Fluxo do estado
Aplicação Windows -> Aplicação WEB

45. VIEW ACTION REDUCER STORE
*desenho de exemplo de recebimento de dados da aplicação Windows
MESSAGE
HANDLER
Mensagem
Front-end
APLICAÇÃO
WINDOWS

46. Então por que React.JS?

48. React.JS
- A Javascript library for building user interfaces
- Wrote by Instagram
- Maintained by Facebook
- Brand new
- https://facebook.github.io/react

49. React.JS
Componentização
PAGE
LIST HEADERSEARCH
LIST ITEM

50. React.JS
Velocidade
PAGE
LIST
HEADER
SEARCH
LIST ITEM
LIST LIST ITEM
LIST ITEM
State

51. Chromium Embedded
Framework
- Framework open source que
permite embedar web browser
baseado no Chromium core.
- https://bitbucket.org/chromiu
membedded/cef
Aplicação
Windows
Renderer 1
CEF Host
Renderer
“N”

52. CEF um pouco mais de perto
- CEF é um projeto de código aberto que permite aos desenvolvedores
facilmente exibir conteúdo HTML em suas aplicações desktop. A exibição de
HTML pode ser finamente controlada e até mesmo ampliado através da API
disponíveis. Por baixo dos panos, a renderização do HTML é feita por meio
do Chromium browser, usando a engine Blink (anteriormente WebKit) e a
máquina virtual V8 JavaScript.

53. CEF como framework
- Como framework, o CEF fornece um conjunto de headers e uma biblioteca.
Ele está disponível para Windows, Mac OSX e Linux. As APIs C++ e C estão
disponíveis como parte do projeto, mas há projetos que mantêm bindings
para outros ambientes como .NET, Java e Python.

54. CefGlue
- Binding .NET/Mono para o Chromium Embedded Framework (CEF).
- https://bitbucket.org/xilium/xilium.cefglue/wiki/Home

55. 1
2

63. CEF: Por quê?
- Tentamos usar o IE…
- Mais casos de uso conhecidos com CEF

64. Pontos de atenção
- Contexto de thread
- Menu de contexto
- Log
- DevTools
- Memória
- Um processo vs vários
processos

65. Pontos de atenção
- Contexto de thread
- Menu de contexto
- Log
- DevTools
- Memória
- Um processo vs vários
processos

66. Pontos de atenção
- Contexto de thread
- Menu de contexto
- Log
- DevTools
- Memória
- Um processo vs vários
processos

67. Pontos de atenção
- Contexto de thread
- Menu de contexto
- Log
- DevTools
- Memória
- Um processo vs vários
processos

68. Pontos de atenção
- Contexto de thread
- Menu de contexto
- Log
- DevTools
- Memória
- Um processo vs vários
processos

69. Conclusões
- Entender a visão de longo prazo do projeto
- Trabalhar com restrições econômicas
- Trabalhar com restrições tecnológicas
- Gerar, entender, trabalhar e argumentar com base em métricas
- Transitar bem entre diferentes times (técnicos ou não)
- Lidar com conflitos técnicos e expectativas

70. Obrigado!