Embed Size (px)
DESCRIPTION
Palestra apresentada na XLVII Jornada de Desenvolvimento Tecnológico promovida pela Faculdade de Computação e Informática da Universidade Presbiteriana Mackenzie em 13.10.2014
Citation preview
Arquitetura Web Desacoplada
Gregory Peres Serrão
Universidade Mackenzie Faculdade de Computação e Informática
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
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!
Dúvidas?
