Aplicações Web, Frameworks, REST e SPA
- 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
- 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! [email protected] 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