Arquitetura Web Desacoplada - FCI/Mackenzie

Arquitetura Web Desacoplada

Gregory Peres Serrão

Universidade Mackenzie Faculdade de Computação e Informática

Gregory Peres SerrãoArquiteto .NET

gregperes84@me.com

@gregperes84

http://github.com/gregperes

Começo Evolução SPA

O começo da internetPáginas estáticas com apenas textos e links.

Client-Side ScriptingLinguagens de programação rodando

no lado cliente proporcionando maior interação com o usuário.

Dynamic HTMLHTML + Client-Side Scripting = DHTML

Linguagens de Client-SideJavaScript, VBScript, Dart, Typescript

DHTML DemoPlay Source

Como manter um site grande?

Dar manutenção em muitas páginas é muito trabalhoso e demorado.

As páginas precisavam de mais dinamismo e prover acesso as informações armazenadas

em banco de dados.

Server-Side ScriptingLinguagens de programação rodando

no lado do servidor usada para acessar banco de dados gerando páginas dinamicamente.

Linguagens de Server-SideASP, PHP, C (Via CGI), Perl CGI, ColdFusion

Requisição HTTP

Exemplo Server-Side Scripting

Source

Problemas?

Evolução!

It’s evolution baby!

Padrões ArquiteturaisClient-Server

Baseada em Componentes N-Camadas

SOA MVC

Model View ControllerFat Model, Skinny Controller

vs Fat Controller, Skinny Model

Server-Side Frameworks

Single Page ApplicationsWhat a hell?

Aplicação web que encaixa em uma única página com objetivo

de proporcionar uma experiência de usuário mais fluida, semelhante a um aplicativo desktop.

Client desacoplado do Server

Requisição HTTP em uma SPA

Como começar?Backend e Frontend

BackendDatabase e API REST

API RESTRecursos disponibilizados pelo servidor

através do protocolo HTTP.

Exemplo de API RESTMethod URL Action

GET /users Consulta todos os usuários

POST /users Incluir um novo usuário

PUT /users/1 Edita o usuário com Id = 1

DELETE /users/1 Deleta o usuário com Id = 1

FrontendChunking, Data Binding, Routing, Ajax

ChunkingCarregamento parcial

Data BindingLigação dos dados

RoutingHistórico de navegação

AjaxRequisições assíncronas

Frameworks MV*

Arquitetura de FrontendCódigo legível, testável e de

fácil manutenção!

Muita teoria e pouco prática!

Vamos ver um pouco de código :)

Stack utilizadoBackend + Frontend

BackendMongodb + NodeJS + NPM + Restify +

Mongoose

FrontendAngularJS + Twitter Bootstrap

Dicas!

Qual framework escolher?

http://todomvc.com

Teste seu código!http://jasmine.github.io

Dúvidas?

Estamos contratando!rh@rgm.com.br

http://www.rgm.com.br

Obrigado!

gregperes84@me.com

@gregperes84

http://github.com/gregperes