O documento discute as aplicações web, frameworks, REST e Single Page Applications (SPA). Ele apresenta os desafios de desenvolvimento de aplicações web e como frameworks ajudam a resolver esses desafios, incluindo frameworks baseados em componentes e ações. O documento também discute o padrão REST e como ele pode ser implementado usando Jersey para criar web services.

1. Aplicações Web,
Frameworks,
REST e SPA
E seja um
programador
mais feliz!

2. Quem sou eu?
○ Graduação / Mestrado Computação UFF
○ Líder Técnico Java STI-UFF
○ Tópicos de Interesse
○ Arquitetura de Software
○Or. Agentes
Web
○Simuladores / Jogos
○User eXperience

3. O que desenvolvo agora?
○ Novo sistema para a Divisão de Diplomas
usando AngularJS e WebServices Jersey

4. Agenda
Framework
WebApp
WebService/REST
AngularJS
Considerações FInais

5. Aplicações Web são complexas!

6. Aplicações Web são complexas!

7. Aplicações Web são complexas!

8. Aplicações Web são complexas!

9. Aplicações Web são complexas!
WebApps são complexas!
○ Distribuídas (cliente <-> servidor),
○ Várias linguagens (html, javascript e a
linguagem do servidor);
○ Segurança;
○ Concorrência;
○ Armazenamento de dados;
○ Protocolo de rede (http);
○ UX.

10. WebApps e Frameworks
Por isto usamos Frameworks!

11. Tipos de Framework para
WebApp
○ Action / Request Based
○ Component Based

12. Action Based
○ Prós
○ Arquitetura Simples
○ Pode aproveitar arquitetura HTTP /Rest
○ Maior poder de customização no lado do
cliente
○ Leve para o servidor
○ Contras
○ Necessário saber programação WEB (JS,
HTML)
○ Quanto mais rica a aplicação web, mais
complexo a interface cliente <-> servidor

13. Component Based
○ Prós
○ Rapidez em desenvolver interfaces por
componentes
○ Não precisa saber programação WEB (JS, HTML)
○ Contras
○ Pesado para o servidor gerenciar os
componentes
○ Difícil customização
○ Grande curva de aprendizagem (JSF)
○ Não aproveita o HTTP / Rest

14. Single Page Application
○ Antes
○ Depois

15. Single Page Applications
Como Implementar?

16. WebServices
○ Dividir aplicação em serviços distribuídos
○ SOA, ROA
○ WebService = Aplicações divididas em
serviços na web

17. WebServices
○ AlunoService
○ ObtémAluno
○ CadastrarNovoAluno
○ AtualizarAluno
○ RemoveAluno
○ FormarAluno

18. REST
○ É um padrão de arquitetura que procura
representar o domínio da aplicação somente
como recursos (entidades) e a usar um
conjunto de verbos (ações) fechado
○ Voltado a WebServices, aproveita os verbos
HTTP para representar o conjunto de ações
fechado

19. REST
Verbo
HTTP
Verbo
CRUD
Objetivo Convenção
GET READ Obtém recurso Obtém recurso(s)
POST CREATE Envia recurso para o
servidor (alterando
sempre o estado do
servidor)
Cria um novo recurso
PUT UPDATE Envia recurso para o
servidor (alterando uma
única vez o estado do
servidor)
Altera um recurso
DELETE DELETE Deleta um recurso Deleta um recurso

20. REST
○ Aluno
○ GET
○ POST
○ PUT
○ DELETE
○ Formação
○ POST

21. REST
○ (POST) www.uff.br/aluno
○ Cria um aluno com os dados passados
○ (GET) www.uff.br/aluno/1
○ Obtém o aluno 1
○ (PUT) www.uff.br/aluno/1
○ Atualiza o aluno 1 com os dados passados
○ (DELETE) www.uff.br/aluno/1
○ Deleta o aluno 1
○ (POST) ww.uff.br/aluno/1/formacao
○ cria uma formação para o aluno 1 (forma o aluno)

22. JERSEY
○ Implementa a API JAX-WS
○ Usa anotações Java para mapear a interface do
WebService na interface de uma classe

23. JERSEY

24. JERSEY

25. JERSEY

26. JERSEY
Se falhar?

27. ○ JavaScript lida com html orientado a evento
○ on-click, on-change, on-*
○Pode ser difícil de lidar com os eventos e o html fica
dependente do JS

28. Biblioteca que quebra dependência
entre html e js e cria uma camada de
abstração entre navegadores
Framework MVVM para html/JS
Framework Web para Html/JS

29. Famework Web,
no cliente?!

30. ○AngularJS segue o
modelo MVC e permite
criar uma aplicação
inteira em JS

31. Obs: Não tente fazer isto! Você não gostará -
nem seu chefe - de todas as regras de negócio
no cliente!

32. A rigor, duas aplicações MVC
M) Services
C) Scopes
V) Html / Bind / Template /
Diretivas
M) Services/Entidades
C) Classe WebService (Jersey)
V) Formato Saida (JSON)

33. ○ Model: Usa o padrão Service para seu backend
○ Só existe uma instância em toda aplicação

34. ○ Model: Existe o módulo $resource que permite criar
services para comunicação com WebServices REST

35. ○ Controller
○ Populam o escopo ($scope) que permitirá preencher
a view através do bind

37. ○ Controller
○Os controllers são hierárquicos e ligados a uma tag
html, facilitando a organização e comunicação
Menu
toolbar
Content

38. ○ View
○ bind

39. ○ Outros Tópicos
○ Templating/Route
○ Directive
○ Filter
○Animate

40. Considerações finais
○ Facilidades
○ App cliente fica mais rica
○ Servidor fica mais testável e simples
○ Boa parte do trabalho vai para o cliente

41. Considerações finais
○ Nem tudo são flores
○ Exige domínio de JavaScript
○Duplicação de funcionalidades
○ Jersey não é tão simples quanto parece

42. Agradecimentos
○ Equipe STI
○ DACC pelo convite

43. Dúvidas

44. Obrigado!
marcoscortes@id.uff.br
http://www.sti.uff.br/

45. OUTROS SLIDES

46. Tipos de Sites Web
○ Orientados a conteúdo / CMS
○ Orientados a tarefa / WebApp

47. Orientados a Conteúdo / CMS
○ www.globo.com
○ www.ic.uff.br
○ www.pacoquita.com.br
○ O usuário obtém informações e não realiza
tarefas com o auxílio do site

48. Orientados a Tarefas / WebApp
○ www.bb.com.br
○ sistemas.uff.br/iduff
○ drive.google.com
○ O usuário realiza tarefas com suporta do site
web. A maioria dos sites atualmente ora são
orientados a conteúdo, ora a tarefas

49. WebApps x CMS/Or. Conteúdo
○ WebApps
○ Quem faz?
○ Programadores
○ Engenheiros de
Software
○ Objetivo
○ Auxiliar tarefas
○ CMS / Or. Conteúdo
○ Quem Faz?
○ Web
Designers
○ Designers de
Informação
○ Objetivo
○ Acesso a
informação