TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js
0 gostou54 visualizações
O documento discute a revitalização de aplicações Windows utilizando CEF, message bus e React.js, destacando a evolução das arquitecturas de software e os desafios de escalabilidade enfrentados ao longo do tempo. A proposta é substituir partes da aplicação Windows por micro aplicações web, integradas por meio de um message bus, favorecendo uma abordagem sincrona e desacoplada. Além disso, o uso de Redux para gerenciamento de estado e CEF para renderização de HTML é explorado como uma solução eficaz para os problemas identiificados.
TDC2016SP Trilha Arquitetura.NET - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js
- 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
- 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
- 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
- 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!