TDC2016SP - Revitalizando aplicações desktop usando CefGlue, MessageBus e React.js
0 gostou301 visualizações
O documento discute as tomadas de decisões de arquitetura de software para revitalizar aplicações legadas do Windows usando tecnologias web como Cef/CefGlue, mensageria e React.JS. As decisões incluíram substituir partes da aplicação Windows por "micro" aplicações web, integrá-las através de uma fila de mensagens e usar Redux para gerenciar estado na aplicação front-end.
TDC2016SP - 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 - ReactSP
- 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. 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.
- 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 ainda 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
- 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 (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 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
- 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 - O formato da mensagem define um contrato entre a aplicação Windows e as partes WEB 1 2
- 28. 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
- 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!
- 30. Desejos: - Uma aplicação Web totalmente passiva - Componentização - Facilidade para manipulação de diversos estados - Transparência
- 31. CONTROLLER MODELVIEW *desenho simplificado da arquitetura do Front 1.0
- 32. CONTROLLER MODEL VIEW *desenho simplificado da arquitetura do Front 2.0 VIEW CONTROLLER CONTROLLER CONTROLLER MODEL MODEL
- 34. VIEW ACTION REDUCER STORE *desenho de exemplo de recebimento de dados da aplicação Windows MESSAGE HANDLER Mensagem Front-end APLICAÇÃO WINDOWS
- 36. Redux - Redux is a predictable state container for JavaScript apps. - Wrote by @dan_abramov - http://redux.js.org
- 37. VIEW ACTION REDUCER STORE MESSAGE HANDLER APLICAÇÃO WINDOWS Front-end *desenho de exemplo de requisição para a aplicação Windows
- 38. VIEW ACTION REDUCER STORE MESSAGE HANDLER APLICAÇÃO WINDOWS Mensagem Front-end *desenho de exemplo de requisição para a 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 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 *desenho de exemplo de recebimento de dados da aplicação Windows MESSAGE HANDLER Mensagem Front-end APLICAÇÃO WINDOWS
- 43. Então por que React.js?
- 45. React.Js - A Javascript library for building user interfaces - Wrote by Instagram - Maintained by Facebook - Brand new - https://facebook.github.io/react
- 47. React.Js Velocidade PAGE LIST HEADER SEARCH LIST ITEM LIST LIST ITEM LIST ITEM State
- 48. Só mais uma peça do quebra- cabeças
- 49. 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”
- 50. 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.
- 51. 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.
- 52. CefGlue - Binding .NET/Mono para o Chromium Embedded Framework (CEF). - https://bitbucket.org/xilium/xilium.cefglue/wiki/Home
- 53. 1 2
- 56. CEF: Por quê? - Tentamos usar o IE… - Mais casos de uso conhecidos com CEF
- 57. Pontos de atenção - Contexto de thread - Menu de contexto - Log - DevTools - Memória - Um processo vs vários processos
- 58. Pontos de atenção - Contexto de thread - Menu de contexto - Log - DevTools - Memória - Um processo vs vários processos
- 59. Pontos de atenção - Contexto de thread - Menu de contexto - Log - DevTools - Memória - Um processo vs vários processos
- 60. Pontos de atenção - Contexto de thread - Menu de contexto - Log - DevTools - Memória - Um processo vs vários processos
- 61. Pontos de atenção - Contexto de thread - Menu de contexto - Log - DevTools - Memória - Um processo vs vários processos
- 62. 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
- 63. Obrigado!