Upload
tdc-globalcode
View
82
Download
0
Embed Size (px)
Citation preview
Revitalizando aplicações WindowsUsando Cef/CefGlue, Message Bus e React.JS
Marcelo Palladinopublic class MarceloPalladino: SerHumano,
IDesenvolvedor, IArquitetoDeSoftware@mfpalladino
Henrique SosaFront-End Developer
@henriquesosa
Comunidades!- Inovação em SaaS- ReactSP
Disclaimer
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
Problema: Não escala!
2007
Contexto: O famoso três camadas
Operador Windows
Chat WEBMSSQL
Servidor deaplicaçã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 deaplicaçã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 - 2016Um 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
Respostas de arquitetura
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(integrando através de mensageria)
- 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(integrando através de mensageria)
- 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ê?(integrando através de mensageria)
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
Problema: Não escala!
VIEW ACTION REDUCER STORE
*desenho de exemplo de recebimento de dados da aplicação Windows
MESSAGE HANDLER
Men
sage
m
Front-end
APLICAÇÃOWINDOWS
Redux- Redux is a predictable state container for JavaScript apps.- Wrote by @dan_abramov- http://redux.js.org
VIEW ACTION REDUCER STORE
MESSAGE HANDLER
APLICAÇÃOWINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows
VIEW ACTION REDUCER STORE
MESSAGE HANDLER
APLICAÇÃOWINDOWS
Men
sage
m
Front-end
*desenho de exemplo de requisição para a aplicação Windows
VIEW ACTION REDUCER STORE
MESSAGE HANDLER
APLICAÇÃOWINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows
VIEW ACTION REDUCER STORE
MESSAGE HANDLER
APLICAÇÃOWINDOWS
Front-end
*desenho de exemplo de requisição para a aplicação Windows
VIEW ACTION REDUCER STORE
MESSAGE HANDLER
APLICAÇÃOWINDOWS
Mensagem
Front-end
*desenho de exemplo de requisição para a aplicação Windows
VIEW ACTION REDUCER STORE
*desenho de exemplo de recebimento de dados da aplicação Windows
MESSAGE HANDLER
Men
sage
m
Front-end
APLICAÇÃOWINDOWS
Então por que React.js?
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
VelocidadePAGE
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
1
2
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
Pontos de atenção
- Contexto de thread - Menu de contexto- Log- DevTools- Memória- Um processo vs vários
processos
Pontos de atenção
- Contexto de thread - Menu de contexto- Log- DevTools- Memória- Um processo vs vários
processos
Pontos de atenção
- Contexto de thread - Menu de contexto- Log- DevTools- Memória- Um processo vs vários
processos
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
Obrigado!