Revitalizando aplicações WindowsUsando Cef/CefGlue, Message Bus e React.JS

Marcelo Palladinopublic class MarceloPalladino: SerHumano,

IDesenvolvedor, IArquitetoDeSoftware@mfpalladino

Henrique SosaFront-End Developer

@henriquesosa

Comunidades!- Inovação em SaaS- ReactSP

Disclaimer

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).

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.

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

Tomadas de decisões de arquitetura de software

Um pouco de contextualização

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

Problema: Não escala!

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)

O problema de escalabilidade ainda persiste!

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

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

Respostas de arquitetura

Não fazer nada e pedir para sair

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"

"Dar um jeito" de entregar valor continuamente e resolver o problema

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

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

- O formato da mensagem define um contrato entre a aplicação Windows e as partes WEB

1

2

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

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!

Desejos:

- Uma aplicação Web totalmente passiva

- Componentização- Facilidade para manipulação

de diversos estados- Transparência

CONTROLLER

MODELVIEW

*desenho simplificado da arquitetura do Front 1.0

CONTROLLER

MODEL

VIEW

*desenho simplificado da arquitetura do Front 2.0

VIEW

CONTROLLER

CONTROLLER

CONTROLLER

MODEL

MODEL

Problema: Não escala!

VIEW ACTION REDUCER STORE

*desenho de exemplo de recebimento de dados da aplicação Windows

MESSAGE HANDLER

Men

sage

m

Front-end

APLICAÇÃOWINDOWS

Redux- Redux is a predictable state container for JavaScript apps.- Wrote by @dan_abramov- http://redux.js.org

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

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

Mensagem

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

Então por que React.js?

React.Js- A Javascript library for building user interfaces- Wrote by Instagram- Maintained by Facebook- Brand new- https://facebook.github.io/react

React.Js

Componentização

PAGE

LIST HEADERSEARCH

LIST ITEM

React.Js

VelocidadePAGE

LIST

HEADER

SEARCH

LIST ITEM

LIST LIST ITEM

LIST ITEM

State

Só mais uma peça do quebra-cabeças

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

1

2

CEF: Por quê?- Tentamos usar o IE…- Mais casos de uso conhecidos com CEF

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 e trabalhar com base em métricas- Transitar bem entre diferentes times- Lidar com conflitos técnicos

Obrigado!