Transferir como PDF, PPTX
Carregado portdc-globalcode
TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js
O documento discute a revitalização de aplicações Windows legadas usando tecnologias web como Cef/CefGlue, message bus e React.JS. As decisões de arquitetura incluíram dividir a aplicação monolítica em microserviços, usar message bus para integrá-los e estado imutável com Redux para melhor gerenciamento de estado no frontend.
Mais conteúdo relacionado
Semelhante a TDC2016POA | Trilha Arquetetura - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js
TDC2016POA | Trilha Arquetetura - 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 classMarceloPalladino: SerHumano, IDesenvolvedor, IArquitetoDeSoftware @mfpalladino Henrique Sosa Front-End Developer @henriquesosa
- 3. Comunidades - Inovação emSaaS - React Brasil
- 4.
- 5. Arquitetura de software? "Aarquitetura 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 “Aindú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õesde arquitetura de software
- 9. Um pouco decontextualizaçã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.
- 13. 2007 Contexto: O famosotrê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 deescalabilidade persiste!
- 15. 2011 - 2012 Problemade 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 *desenhosimplificado da arquitetura 3.0 (microserviços)
- 17. 2015 - 2016 Umtí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 deproblemas 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 mercadode 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.
- 21. Não fazer nadae pedir para sair
- 22. Reescrever tudo - Prazoestimado (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 aforma 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 decasos parecidos - Palestra do Felipe Ribeiro (Spotify) na BrazilJS 2015 - Conferência com o time de desenvolvimento - Provas de conceito
- 26. Message Bus (integrando atravésde mensageria) WindowsForms UserControl Message Bus WindowsForms UserControl WindowsForms UserControl WEB APP WEB APP WEB APP
- 27. Message Bus (integrando atravésde 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ésde mensageria) - As partes "assinam" o canal para que sejam notificadas quando mensagens forem "adicionadas" 1 2
- 29. Message Bus: Porquê? (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 paratratamento 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 daarquitetura do Front 1.0
- 33. CONTROLLER MODEL VIEW *desenho simplificado daarquitetura do Front 2.0 VIEW CONTROLLER CONTROLLER CONTROLLER MODEL MODEL
- 34. Problema: Não atendeaos requisitos!
- 36. Redux - Redux isa predictable state container for JavaScript apps. - Wrote by @dan_abramov - http://redux.js.org
- 37. VIEW ACTION REDUCERSTORE *desenho de exemplo de recebimento de dados da aplicação Windows Front-end
- 38. Fluxo do estado AplicaçãoWEB -> Aplicação Windows
- 39. VIEW ACTION REDUCERSTORE MESSAGE HANDLER APLICAÇÃO WINDOWS Front-end *desenho de exemplo de requisição para a aplicação Windows
- 40. VIEW ACTION REDUCERSTORE MESSAGE HANDLER APLICAÇÃO WINDOWS Mensagem Front-end *desenho de exemplo de requisição para a aplicação Windows
- 41. VIEW ACTION REDUCERSTORE MESSAGE HANDLER APLICAÇÃO WINDOWS Mensagem Front-end *desenho de exemplo de requisição para a aplicação Windows
- 42. VIEW ACTION REDUCERSTORE MESSAGE HANDLER APLICAÇÃO WINDOWS Front-end *desenho de exemplo de requisição para a aplicação Windows
- 43. VIEW ACTION REDUCERSTORE MESSAGE HANDLER APLICAÇÃO WINDOWS Front-end *desenho de exemplo de requisição para a aplicação Windows
- 44. Fluxo do estado AplicaçãoWindows -> Aplicação WEB
- 45. VIEW ACTION REDUCERSTORE *desenho de exemplo de recebimento de dados da aplicação Windows MESSAGE HANDLER Mensagem Front-end APLICAÇÃO WINDOWS
- 46. Então por queReact.JS?
- 48. React.JS - A Javascriptlibrary for building user interfaces - Wrote by Instagram - Maintained by Facebook - Brand new - https://facebook.github.io/react
- 49.
- 50. React.JS Velocidade PAGE LIST HEADER SEARCH LIST ITEM LIST LISTITEM LIST ITEM State
- 51. Chromium Embedded Framework - Frameworkopen 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 poucomais 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/Monopara o Chromium Embedded Framework (CEF). - https://bitbucket.org/xilium/xilium.cefglue/wiki/Home
- 55.
- 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 avisã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.