Arquitetura Web Desacoplada - FCI/Mackenzie
-
Upload
vivaldo-jose-breternitz -
Category
Technology
-
view
132 -
download
1
description
Transcript of Arquitetura Web Desacoplada - FCI/Mackenzie
![Page 1: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/1.jpg)
Arquitetura Web Desacoplada
Gregory Peres Serrão
Universidade Mackenzie Faculdade de Computação e Informática
![Page 3: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/3.jpg)
Começo Evolução SPA
![Page 4: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/4.jpg)
O começo da internetPáginas estáticas com apenas textos e links.
![Page 5: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/5.jpg)
![Page 6: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/6.jpg)
Client-Side ScriptingLinguagens de programação rodando
no lado cliente proporcionando maior interação com o usuário.
![Page 7: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/7.jpg)
Dynamic HTMLHTML + Client-Side Scripting = DHTML
![Page 8: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/8.jpg)
Linguagens de Client-SideJavaScript, VBScript, Dart, Typescript
![Page 9: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/9.jpg)
DHTML DemoPlay Source
![Page 10: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/10.jpg)
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.
![Page 11: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/11.jpg)
Server-Side ScriptingLinguagens de programação rodando
no lado do servidor usada para acessar banco de dados gerando páginas dinamicamente.
![Page 12: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/12.jpg)
Linguagens de Server-SideASP, PHP, C (Via CGI), Perl CGI, ColdFusion
![Page 13: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/13.jpg)
Requisição HTTP
![Page 15: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/15.jpg)
Problemas?
![Page 16: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/16.jpg)
Evolução!
It’s evolution baby!
![Page 17: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/17.jpg)
Padrões ArquiteturaisClient-Server
Baseada em Componentes N-Camadas
SOA MVC
![Page 18: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/18.jpg)
Model View ControllerFat Model, Skinny Controller
vs Fat Controller, Skinny Model
![Page 19: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/19.jpg)
Server-Side Frameworks
![Page 20: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/20.jpg)
Single Page ApplicationsWhat a hell?
![Page 21: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/21.jpg)
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.
![Page 22: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/22.jpg)
Client desacoplado do Server
![Page 23: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/23.jpg)
Requisição HTTP em uma SPA
![Page 24: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/24.jpg)
Como começar?Backend e Frontend
![Page 25: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/25.jpg)
BackendDatabase e API REST
![Page 26: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/26.jpg)
API RESTRecursos disponibilizados pelo servidor
através do protocolo HTTP.
![Page 27: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/27.jpg)
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
![Page 28: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/28.jpg)
FrontendChunking, Data Binding, Routing, Ajax
![Page 29: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/29.jpg)
ChunkingCarregamento parcial
![Page 30: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/30.jpg)
Data BindingLigação dos dados
![Page 31: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/31.jpg)
RoutingHistórico de navegação
![Page 32: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/32.jpg)
AjaxRequisições assíncronas
![Page 33: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/33.jpg)
Frameworks MV*
![Page 34: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/34.jpg)
Arquitetura de FrontendCódigo legível, testável e de
fácil manutenção!
![Page 35: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/35.jpg)
Muita teoria e pouco prática!
Vamos ver um pouco de código :)
![Page 36: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/36.jpg)
Stack utilizadoBackend + Frontend
![Page 37: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/37.jpg)
BackendMongodb + NodeJS + NPM + Restify +
Mongoose
![Page 38: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/38.jpg)
FrontendAngularJS + Twitter Bootstrap
![Page 39: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/39.jpg)
Dicas!
![Page 42: Arquitetura Web Desacoplada - FCI/Mackenzie](https://reader033.fdocument.pub/reader033/viewer/2022060201/559aca731a28ab44628b461f/html5/thumbnails/42.jpg)
Dúvidas?