TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando CefGlue, MessageBus e...
-
Upload
tdc-globalcode -
Category
Education
-
view
55 -
download
2
Transcript of TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando CefGlue, MessageBus e...
Marcelo Palladinopublic class MarceloPalladino: SerHumano,
IDesenvolvedor, IArquitetoDeSoftware@mfpalladino
Henrique SosaFront-End Developer
@henriquesosa
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).
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.
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
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 deaplicação
SOAP
SOAP
Aplicação
*desenho simplificado da arquitetura 2.0 (três camadas)
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
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
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"
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
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(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
Message Bus(integrando através de mensageria)
- 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!
Fonte: http://elemarjr.com/pt/2012/10/18/sobre-a-integracao-de-aplicacoes-atraves-de-mensageria/
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
CONTROLLER
MODEL
VIEW
*desenho simplificado da arquitetura do Front 2.0
VIEW
CONTROLLER
CONTROLLER
CONTROLLER
MODEL
MODEL
Redux- Redux is a predictable state container for JavaScript apps.- Wrote by @dan_abramov- http://redux.js.org
VIEW ACTION REDUCER STORE
*desenho de exemplo de recebimento de dados da aplicação Windows
Front-end
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
Mensagem
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
*desenho de exemplo de recebimento de dados da aplicação Windows
MESSAGE HANDLER
Men
sage
m
Front-end
APLICAÇÃOWINDOWS
React.JS- A Javascript library for building user interfaces- Wrote by Instagram- Maintained by Facebook- Brand new- https://facebook.github.io/react
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
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, 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