TDC2016SP - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js

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

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

Comunidades!
- Inovação em SaaS
- ReactSP

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).

Arquitetura de software: Flowler sendo Flowler
“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.

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

Tomadas de decisões de
arquitetura de software

Um pouco de contextualização

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

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)

O problema de escalabilidade ainda
persiste!

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

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)

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

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

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

Não fazer nada e pedir
para sair

Reescrever tudo
- Prazo (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"

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

Qual foi a forma e quais os finais esperados?
- Forma
- Substituir as partes da aplicação Windows por “micro” aplicações WEB
- Final intermediário
- 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

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

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

Message Bus
- O conteúdo da mensagem inclui
informações relacionadas ao evento
- O formato da mensagem define um
contrato entre a aplicação Windows e
as partes WEB
1
2

Message Bus
- O Message Bus funciona como um
"canal inteligente".
- As partes "assinam" o canal para que
sejam notificadas quando mensagens
forem "adicionadas"
1
2

Message Bus: Por quê?
A relação de "publicação" e "consumo" passa a ser naturalmente assíncrona e
desacoplada!

Desejos:
- Uma aplicação Web totalmente
passiva
- Componentização
- Facilidade para manipulação
de diversos estados
- Transparência

CONTROLLER
MODELVIEW
*desenho simplificado da arquitetura do Front 1.0

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

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

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

MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows

MESSAGE
HANDLER
APLICAÇÃO
WINDOWS
Mensagem
Front-end
*desenho de exemplo de requisição para a aplicação Windows

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

React.Js
Componentização
PAGE
LIST HEADERSEARCH
LIST ITEM

React.Js
Velocidade
PAGE
LIST
HEADER
SEARCH
LIST ITEM
LIST LIST ITEM
LIST ITEM
State

Só mais uma peça do quebra-
cabeças

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

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.

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.

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

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

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

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 e trabalhar com base em métricas
- Transitar bem entre diferentes times
- Lidar com conflitos técnicos

TDC2016SP - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a TDC2016SP - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js

Mais de tdc-globalcode

Último

TDC2016SP - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js