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

1. Universidade Mackenzie
Faculdade de Computação e Informática
Arquitetura Web
Desacoplada
Gregory Peres Serrão

2. Gregory Peres Serrão
Arquiteto .NET
gregperes84@me.com
@gregperes84
http://github.com/gregperes

3. Começo Evolução SPA

4. O começo da internet
Páginas estáticas com
apenas textos e links.

6. Client-Side Scripting
Linguagens de programação rodando
no lado cliente proporcionando maior interação
com o usuário.

7. Dynamic HTML
HTML + Client-Side Scripting = DHTML

8. Linguagens de Client-Side
JavaScript, VBScript, Dart, Typescript

9. DHTML Demo
Play Source

10. 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.

11. Server-Side Scripting
Linguagens de programação rodando
no lado do servidor usada para acessar
banco de dados gerando
páginas dinamicamente.

12. Linguagens de Server-Side
ASP, PHP, C (Via CGI), Perl CGI, ColdFusion

13. Requisição HTTP

14. Exemplo Server-Side
Scripting
Source

15. Problemas?

16. Evolução!
It’s evolution baby!

17. Padrões Arquiteturais
Client-Server
Baseada em Componentes
N-Camadas
SOA
MVC

18. Model View Controller
Fat Model, Skinny Controller
vs
Fat Controller, Skinny Model

19. Server-Side Frameworks

20. Single Page Applications
What a hell?

21. 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.

22. Client desacoplado do Server

23. Requisição HTTP
em uma SPA

24. Como começar?
Backend e Frontend

25. Backend
Database e API REST

26. API REST
Recursos disponibilizados pelo servidor
através do protocolo HTTP.

27. Exemplo de API REST
Method 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

28. Frontend
Chunking, Data Binding, Routing, Ajax

29. Chunking
Carregamento parcial

30. Data Binding
Ligação dos dados

31. Routing
Histórico de navegação

32. Ajax
Requisições assíncronas

33. Frameworks MV*

34. Arquitetura de Frontend
Código legível, testável e de
fácil manutenção!

35. Muita teoria e pouco
prática!
Vamos ver um pouco de código :)

36. Stack utilizado
Backend + Frontend

37. Backend
Mongodb + NodeJS + NPM + Restify +
Mongoose

38. Frontend
AngularJS + Twitter Bootstrap

39. Dicas!

40. Qual framework
escolher?
http://todomvc.com

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

42. Dúvidas?

43. Estamos contratando!
rh@rgm.com.br
http://www.rgm.com.br

44. Obrigado!
gregperes84@me.com
@gregperes84
http://github.com/gregperes