TDC2016 SP - Revitalizando aplicações WIndows usando CEF, MessageBus e React.js

Slides de palestra realizada no TDC 2016 de São Paulo sobre o processo de revitalização de uma aplicação WindowsForms com mais de 12 anos utilizando CEF, MessageBus e React.js.

Transcript

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
12. Problema: Não escala!
13. 2007 Contexto: O famoso três camadas Operador Windows Chat WEB MSSQL 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
20. Respostas de arquitetura
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 MODEL VIEW *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
33. Problema: Não escala!
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
46. React.Js Componentização PAGE LIST HEADER SEARCH LIST ITEM
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!