SlideShare uma empresa Scribd logo
1 de 25
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)
Anos 90
Páginas HTML Estáticas
CGI Servlets
Frameworks 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
• 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ÁFICAS
http://martinfowler.com/eaaDev/ModelViewPresenter.html
http://www.infoq.com/articles/ieee-software-engineeering-services-cloud-
computing,
http://jubyzacharias.blogspot.com.br/p/sofea.html
http://www.smart-soft.com/downloads/articles/Life-above-the-Service-Tier-
v1_1.pdf
http://mvalente.eu/2007/11/03/a-future-web-development-framework-ui-controller/
http://www.smart-soft.com/downloads/articles/sofea.html
http://www.sei.cmu.edu/library/assets/presentations/nelson-saturn2013.pdf
http://martinfowler.com/eaaDev/uiArchs.html
http://www.wildcrest.com/Potel/Portfolio/mvp.pdf
http://martinfowler.com/eaaDev/PresentationModel.html
http://knockoutjs.com/documentation/observables.html

Mais conteúdo relacionado

Mais procurados

Campus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NETCampus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NETEduardo Pires
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Rodrigo Kono
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOLeonardo Sousa
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Portal GSTI
 
Anatomia do JSF, JavaServer Faces
Anatomia do JSF, JavaServer FacesAnatomia do JSF, JavaServer Faces
Anatomia do JSF, JavaServer FacesRafael Ponte
 
Tornando o Xamarin.Forms ainda melhor com Prism
Tornando o Xamarin.Forms ainda melhor com PrismTornando o Xamarin.Forms ainda melhor com Prism
Tornando o Xamarin.Forms ainda melhor com Prismakamud
 
JavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividadeJavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividadeRafael Ponte
 
JSF com Primefaces
JSF com PrimefacesJSF com Primefaces
JSF com PrimefacesFabio Noth
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Apresentação jsf 2.0
Apresentação jsf 2.0Apresentação jsf 2.0
Apresentação jsf 2.0Paulo Neto
 
Vantagens e desvantagens de uma arquitetura microservices
Vantagens e desvantagens de uma arquitetura microservicesVantagens e desvantagens de uma arquitetura microservices
Vantagens e desvantagens de uma arquitetura microservicesFábio Rosato
 
Desenvolvimento Web com ASP.NET 4
Desenvolvimento Web com ASP.NET 4Desenvolvimento Web com ASP.NET 4
Desenvolvimento Web com ASP.NET 4Rodrigo Kono
 

Mais procurados (19)

Curso jsf
Curso jsfCurso jsf
Curso jsf
 
Campus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NETCampus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NET
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAO
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório
 
Angular js
Angular jsAngular js
Angular js
 
Anatomia do JSF, JavaServer Faces
Anatomia do JSF, JavaServer FacesAnatomia do JSF, JavaServer Faces
Anatomia do JSF, JavaServer Faces
 
Tornando o Xamarin.Forms ainda melhor com Prism
Tornando o Xamarin.Forms ainda melhor com PrismTornando o Xamarin.Forms ainda melhor com Prism
Tornando o Xamarin.Forms ainda melhor com Prism
 
JavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividadeJavaServer Faces - Desenvolvendo aplicações web com produtividade
JavaServer Faces - Desenvolvendo aplicações web com produtividade
 
JSF com Primefaces
JSF com PrimefacesJSF com Primefaces
JSF com Primefaces
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Apresentação jsf 2.0
Apresentação jsf 2.0Apresentação jsf 2.0
Apresentação jsf 2.0
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Apresentação JSF
Apresentação JSFApresentação JSF
Apresentação JSF
 
Vantagens e desvantagens de uma arquitetura microservices
Vantagens e desvantagens de uma arquitetura microservicesVantagens e desvantagens de uma arquitetura microservices
Vantagens e desvantagens de uma arquitetura microservices
 
Estudo de caso ASP.NET MVC e Silverlight
Estudo de caso ASP.NET MVC e SilverlightEstudo de caso ASP.NET MVC e Silverlight
Estudo de caso ASP.NET MVC e Silverlight
 
Desenvolvimento Web com ASP.NET 4
Desenvolvimento Web com ASP.NET 4Desenvolvimento Web com ASP.NET 4
Desenvolvimento Web com ASP.NET 4
 
Introdução a jsf
Introdução a jsfIntrodução a jsf
Introdução a jsf
 

Destaque

Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONICDan Jesus
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
Life above the_service_tier_v1.1
Life above the_service_tier_v1.1Life above the_service_tier_v1.1
Life above the_service_tier_v1.1Ganesh Prasad
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkEmerson Thompson
 
Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Ganesh Prasad
 
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...Kunal Ashar
 
ECMAScript 6 / ECMAScript 2015 no Node.js
ECMAScript 6 / ECMAScript 2015 no Node.jsECMAScript 6 / ECMAScript 2015 no Node.js
ECMAScript 6 / ECMAScript 2015 no Node.jsWaldyr Felix
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
Performance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.jsPerformance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.jsWaldyr Felix
 

Destaque (12)

Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONIC
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Aceleracao+conteudo+dinamico
Aceleracao+conteudo+dinamicoAceleracao+conteudo+dinamico
Aceleracao+conteudo+dinamico
 
Life above the_service_tier_v1.1
Life above the_service_tier_v1.1Life above the_service_tier_v1.1
Life above the_service_tier_v1.1
 
Usando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic FrameworkUsando PushWoosh com Ionic Framework
Usando PushWoosh com Ionic Framework
 
Arquitetura de sistemas web
Arquitetura de sistemas webArquitetura de sistemas web
Arquitetura de sistemas web
 
Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4
 
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
 
ECMAScript 6 / ECMAScript 2015 no Node.js
ECMAScript 6 / ECMAScript 2015 no Node.jsECMAScript 6 / ECMAScript 2015 no Node.js
ECMAScript 6 / ECMAScript 2015 no Node.js
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Performance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.jsPerformance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.js
 

Semelhante a A nova geração da arquitetura web para a era da nuvem

Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edtedbrunoaalves
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsRenato Groff
 
Introdução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIntrodução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIgor Takenami
 
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...Renato Groff
 
SAP - Automação de Força de Vendas
SAP - Automação de Força de VendasSAP - Automação de Força de Vendas
SAP - Automação de Força de VendasRenilton Oliveira
 
Introdução a Arquitetura Orientada a Serviços
Introdução a Arquitetura Orientada a ServiçosIntrodução a Arquitetura Orientada a Serviços
Introdução a Arquitetura Orientada a ServiçosIgor Takenami
 
TDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software EnterpriseTDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software EnterpriseDr. Spock
 
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019Renato Groff
 
Um método para o desenvolvimento de software baseado em microsserviços
Um método para o desenvolvimento de software baseado em microsserviçosUm método para o desenvolvimento de software baseado em microsserviços
Um método para o desenvolvimento de software baseado em microsserviçosThiago Pereira
 
Introdução a Web Services
Introdução a Web ServicesIntrodução a Web Services
Introdução a Web ServicesFabio Leal
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End ArchitectureCristiano Gomes
 

Semelhante a A nova geração da arquitetura web para a era da nuvem (20)

Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
 
Monitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application InsightsMonitorando APIs REST com o Application Insights
Monitorando APIs REST com o Application Insights
 
Palestra ASP.NET MVC
Palestra ASP.NET MVCPalestra ASP.NET MVC
Palestra ASP.NET MVC
 
Introdução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIntrodução a Arquitetura de Sistemas
Introdução a Arquitetura de Sistemas
 
(A18) LabMM3 - Ajax
(A18) LabMM3 - Ajax(A18) LabMM3 - Ajax
(A18) LabMM3 - Ajax
 
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...
APIs na nuvem: implementando soluções RESTful com o Microsoft Azure - Azure T...
 
SAP - Automação de Força de Vendas
SAP - Automação de Força de VendasSAP - Automação de Força de Vendas
SAP - Automação de Força de Vendas
 
Introdução a Arquitetura Orientada a Serviços
Introdução a Arquitetura Orientada a ServiçosIntrodução a Arquitetura Orientada a Serviços
Introdução a Arquitetura Orientada a Serviços
 
IBM WebSphere Portal
IBM WebSphere PortalIBM WebSphere Portal
IBM WebSphere Portal
 
Software gratuito
Software gratuitoSoftware gratuito
Software gratuito
 
TDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software EnterpriseTDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software Enterprise
 
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019
Nuvens com Ênfase em Azure - Locatech + Locaneers - Abril-2019
 
Ria
RiaRia
Ria
 
ASP .NET Core MVC
ASP .NET Core MVCASP .NET Core MVC
ASP .NET Core MVC
 
Um método para o desenvolvimento de software baseado em microsserviços
Um método para o desenvolvimento de software baseado em microsserviçosUm método para o desenvolvimento de software baseado em microsserviços
Um método para o desenvolvimento de software baseado em microsserviços
 
Aula 1 apresentação
Aula 1   apresentaçãoAula 1   apresentação
Aula 1 apresentação
 
Introdução a Web Services
Introdução a Web ServicesIntrodução a Web Services
Introdução a Web Services
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Woa
WoaWoa
Woa
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End Architecture
 

A nova geração da arquitetura web para a era da nuvem

  • 1.
  • 2. 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)
  • 3.
  • 4. Anos 90 Páginas HTML Estáticas CGI Servlets Frameworks MVC Motores de Templates Web AJAX SOFEA Web 1.0 Web 2.0 Mobile Hoje
  • 5. 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)
  • 6.
  • 7. 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)
  • 8.
  • 9. 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
  • 10. 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)
  • 11. PROCESSO DE ALOCAÇÃO PARA FRAMEWORKS DE MOTORES DE TEMPLATES WEB
  • 12. HOJE EM DIA • Motores de Template Web + Frameworks MVC + uma pitada de Ajax
  • 14.
  • 15. 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.
  • 16. 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...
  • 17. 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
  • 18. 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
  • 20. 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.
  • 21. • 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
  • 22. IMPLEMENTAÇÃO DE ARQUETIPO DE CLIENTE PARA SOFEA
  • 23. 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.
  • 24. 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/

Notas do Editor

  1. IaaS – Infrastructure as a Service (Infraestrutura como Serviço): De maneira análoga a anterior, neste modelo você contrata sua infraestrutura como serviço, com uma vantagem muito interessante ao modelo tradicional, que é a contratação de servidores virtuais (e outros dispositivos de infraestrutura) ao invés de comprar servidores, roteadores, racks e outras “caixas” de hardware. Aqui você é tarifado por alguns fatores, como o número de servidores virtuais, quantidade de dados trafegados, dados armazenados e outros itens, dependendo de como e com quem (fornecedor IaaS) você trabalha. Neste caso, creio que Amazon EC2 e a IBM sejam bons exemplos para quem queira pesquisar mais sobre o assunto. No IaaS, obviamente também é utilizado o modelo pay-per-use, onde a cobrança é baseada no serviço e não em produto, ou seja, se você precisa de 10 servidores para o próximo mês, você contrata a utilização destes servidores por este período determinado e depois, simplesmente cancela a utilização, exatamente como a compra de um serviço de TV a cabo ou um plano de serviço de dados para seu celular. PaaS – Platform as a Service (Plataforma como Serviço): Aqui temos um modelo que fica entre o SaaS e IaaS, proporcionando uma plataforma mais robusta e flexível para a utilização de muitos recursos de tecnologia, onde é possível a utilização de softwares de maneira mais flexível, sendo possível desenvolver suas próprias aplicações baseadas em alguma tecnologia (framework, linguagem etc.) e utilizar a infraestrutura necessária, e o mais importante, adequada a aplicação desenvolvida. Pense em uma solução onde você necessite de um software, porém, por alguma limitação de um fornecedor do modelo SaaS, você não conseguirá implementar um determinado recurso personalizado que é fundamental para seu negócio. É aqui que o modelo PaaS é interessante, pois, você pode utilizar a mesma estrutura que você teria “em casa”, porém, utilizando o modelo “as a service”, livrando-se da aquisição de hardware, licenças de software etc. e utilizando esta mesma estrutura como serviço. Para entender este modelo é muito interessante pesquisar sobre o Microsoft Azure. Aliás, o Azure é bem flexível e lhe permite utilizar, além do PaaS, também os modelos SaaS e IaaS.
  2. ROI -> ROI é a sigla em inglês para Return on Investment, que em português significa “Retorno sobre Investimento”. ROI é a relação entre o dinheiro ganho ou perdido através de um investimento, e o montante de dinheiro investido, Este é um termo muito usado em publicidade online.
  3. A especificação Web Workers (link em inglês) define uma API para geração de scripts de segundo plano no seu aplicativo da web. O Web Workers permite executar tarefas como disparar scripts de longa duração para executar tarefas muito dispendiosas, mas sem bloquear a interface de usuário ou outros scripts para manipular interações com o usuário. Isso poderá ser o fim daquele diálogo de "script não responde“.