A NOVA GERAÇÃO DA

ARQUITETU

RA WEB PA

RA A ERA

DA NUVEM

P O R : CL O V E S M

O R E I RA J U

N I OR

QUAL PÚBLICO É INDICADO ESTA PALESTRA?• Qualquer pessoa interessada em tecnologia web que tenha uma

compreensão básica de aplicações web e Arquitetura Orientada a Serviço (SOA)

HISTÓRIA DA

ARQUITETU

RA DE

APLICAÇÕES W

EB

Anos 90

Páginas HTML Estáticas

CGI ServletsFrameworks MVC

Motores de Templates Web

AJAX

SOFEA

Web 1.0

Web 2.0

Mobile

Hoje

MOTORES DE TEMPLATES WEB• Código incorporado dentro de elementos HTML estáticos• Mistura de HTML estático e dinâmico• Arquitetura de primeira geração• Exemplos:• Java Server Pages (JSP)• PHP• Active Server Pages (ASP)

FRAMEWORKS MVC• Padrão Model View Controller• Frameworks no lado servidor (Server- Side)• Arquitetura de Segunda Geração• Exemplos:• ASP.NET MVC Framework (.Net)• Struts, Spring MVC (Java)• Ruby on Rails (Ruby)• Django (Phyton)• Grails (Groovy)

AJAX• Asynchronous JavaScript And XML• Alterações de conteúdo dinâmico sem recarregar a página

inteira• Aplicativos interativos e dinâmicos da web se aproximando da

experiência de interação rica na parte client-side (Instrumentação para o RIA – Rich Internet Application)

• HTML/CSS + DOM + XmlHttpRequest Object + JavaScript + JSON/XML

PROCESSOS DE APLICAÇÕES WEB• Download da Aplicação• Código (JavaScript, HTML, Applets, Flash) a ser baixado no cliente

(web browser)

• Fluxo de Apresentação• Processamento visual dinâmico da UI (mudança de telas, novas

telas, etc) em resposta à entrada do usuário e alterações de estado de dados

• Interação de Dados• A troca de dados entre dois componentes de software ou camadas.

(busca, atualizações, recuperação, etc)

PROCESSO DE ALOCAÇÃO PARA FRAMEWORKS DE MOTORES DE TEMPLATES WEB

HOJE EM DIA• Motores de Template Web + Frameworks MVC + uma pitada

de Ajax

SOA & NUVEM

SOFEA

U M E S T I L O A R Q U I T E T U R A L P A R A A P L I C A Ç Õ E S W

E B E M

A MB I E N T E S P A R A S E R V I Ç O

SOFEA• Service Oriented Front End Architecture• Como construir aplicações Front-End em um mundo orientado à

serviços.• Quem definiu isso aí?• Ganesh Prasad, Rajat Taneja, Vikrant Todankar

• Estilo Arquitetural• Não uma implementação

• Prasad propôs que a revolução SOA será estar atrás em aplicações front-end/UI’s.

Viável porque...• Maturidade do

paradigma SOA em teoria e prática.

• Avanços em tecnologias de cliente com base em navegador, especialmente mecanismos de navegadores com suporte à JavaScript e AJAX toolkits

Necessários porque...

• SOA é o mecanismo de entrega de fato para serviços baseados em nuvem (Cloud e SOA são tecnologias complementares)

• Diversidade de plataformas de cliente• Dominação crescente de

clientes móveis

SOFEA É AGORA...

ARQUITETURA EMPRESARIAL WEB LEGADA

Arquitetura típica de aplicações empresariais web

Navegador Web

Lógica de Negócios e Persistência

Construção Lógica da

Página Web (JSP, PHP, ASP, etc.)

Cliente Servidor

ARQUITETURA SOFEA

Navegador Web

Lógica de Negócios e Persistência

Construção Lógica da

Página Web (JSP, PHP, ASP, etc.)

Cliente Servidor

Navegador Web

Lógica de Negócios e Persistência

SERVIÇOS

PROCESSOS WEB E SOFEA

PRINCÍPIOS DE SOFEA• Donwload da Aplicação, Comunicação de dados (Data

Interchange) e Fluxo de Apresentação deve ser desacoplado.• Nenhuma parte do cliente deve ser chamado, gerado ou modelado

a partir do lado do servidor.• O Fluxo de Apresentação é apenas uma preocupação do lado

cliente.• Toda a comunicação do aplicativo com o servidor deverá

estar usando serviços (REST, SOAP, etc).• O padrão MVC pertence ao cliente, não ao servidor.

• Escalabilidade• O servidor tem menos trabalho a fazer;

não realiza mais a geração da camada de apresentação, basta fornecer um serviço.

• Melhor resposta do usuário• Baixa Latência – Usuários finais felizes :D• Após o download do aplicativo, nenhuma

apresentação é transportado sobre a rede, apenas os dados de negócios

• Alto ROI• Expandido o espaço de oportunidades,

devido à natureza reutilizável inerente de SOA

• Ajuste natural em abmientes SOA e para a Nuvem

• Modelo de programação organizada• Desenvolvedores Client-side se

concentram na UI.• Desenvolvedores Server-side se

concentram nos serviços.

• Aplicações Offline• Quando houver falhas de rede, o cliente

é desacoplado e pode mudar dinamicamente sua escolha sobre os objetos de modelo, podendo usar uma base local ou quando a rede voltar poderá comunicar com os serviços.

• Interoperabilidade• Integração mais fácil com menor

sobrecarga de múltiplas plataformas.• Os clientes não se importam se os

serviços são Java, C #, Python, Cobol ou uma mistura heterogênea

BENEFÍCIOS DE SOFEA

IMPLEMENTAÇÃO DE ARQUETIPO DE CLIENTE PARA SOFEA

PONTOS À SEREM OBSERVADOS• O App Cliente é a Prioridade número um na definição da arquitetura,

não deve ser pensado nisto depois.• Usar ferramendas maduras no desenvolvimento client-side.• Ex: AngularJS, KnockoutJS, jQuery, etc...

• O RESTful é o modelo natural para comunicação em sistemas SOFEA• Arquitetos e Desenvolvedores devem definir uma comunicação de

forma assíncrona entre o servidor e a camada de cliente.• Aproveitar ao máximo as tecnologias mais recentes se for apropriado• HTML5, Webh Workers e WebSockets.

• Comece os testes de compatibilidade cross-browser no início do ciclo de desenvolvimento

• SOFEA é uma excelente escolha para ambientes que tenham largura de banda restrita ou consumo limitado de banda.

CONTATO• Git: clovesmjunior• E-mail: squaresystemsbr@gmail.com• Sites :• www.squaresystems.com.br• www.squaress.com.br• www.squaress.com

• Agradecimentos: Ao Designer José Mário pela nova identidade visual da SquareSystems. Link: http://josemarioramos.com.br/

REFERÊNCIAS BIBLIOGRÁFICAShttp://martinfowler.com/eaaDev/ModelViewPresenter.htmlhttp://

www.infoq.com/articles/ieee-software-engineeering-services-cloud-computing,http://jubyzacharias.blogspot.com.br/p/sofea.htmlhttp://www.smart-soft.com/downloads/articles/Life-above-the-Service-Tier-v1_1.pdfhttp://mvalente.eu/2007/11/03/a-future-web-development-framework-ui-controller/http://www.smart-soft.com/downloads/articles/sofea.htmlhttp://www.sei.cmu.edu/library/assets/presentations/nelson-saturn2013.pdfhttp://martinfowler.com/eaaDev/uiArchs.htmlhttp://www.wildcrest.com/Potel/Portfolio/mvp.pdfhttp://martinfowler.com/eaaDev/PresentationModel.htmlhttp://knockoutjs.com/documentation/observables.html