Aplicações Web,

Frameworks,

REST e SPA

E seja um

programador

mais feliz!

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

O que desenvolvo agora?

○ Novo sistema para a Divisão de Diplomas

usando AngularJS e WebServices Jersey

Agenda

Framework

WebApp

WebService/REST

AngularJS

Considerações FInais

Aplicações Web são complexas!

Aplicações Web são complexas!

Aplicações Web são complexas!

Aplicações Web são complexas!

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.

WebApps e Frameworks

Por isto usamos Frameworks!

Tipos de Framework para

WebApp

○ Action / Request Based

○ Component Based

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

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

Single Page Application

○ Antes

○ Depois

Single Page Applications

Como Implementar?

WebServices

○ Dividir aplicação em serviços distribuídos

○ SOA, ROA

○ WebService = Aplicações divididas em

serviços na web

WebServices

○ AlunoService

○ ObtémAluno

○ CadastrarNovoAluno

○ AtualizarAluno

○ RemoveAluno

○ FormarAluno

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

RESTVerbo

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

REST

○ Aluno

○ GET

○ POST

○ PUT

○ DELETE

○ Formação

○ POST

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)

JERSEY

○ Implementa a API JAX-WS

○ Usa anotações Java para mapear a interface do

WebService na interface de uma classe

JERSEY

JERSEY

JERSEY

JERSEY

Se falhar?

○ 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

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

Famework Web,

no cliente?!

○AngularJS segue o

modelo MVC e permite

criar uma aplicação

inteira em JS

Obs: Não tente fazer isto! Você não gostará -

nem seu chefe - de todas as regras de negócio

no cliente!

M) Services

C) Scopes

V) Html / Bind / Template /

Diretivas

M) Services/Entidades

C) Classe WebService (Jersey)

V) Formato Saida (JSON)

A rigor, duas aplicações MVC

○ Model: Usa o padrão Service para seu backend

○Só existe uma instância em toda aplicação

○ Model: Existe o módulo $resource que permite criar

services para comunicação com WebServices REST

○ Controller

○Populam o escopo ($scope) que permitirá preencher

a view através do bind

○ Controller

○Os controllers são hierárquicos e ligados a uma tag

html, facilitando a organização e comunicação

Me

nu

toolbar

Content

○ View

○bind

○ Outros Tópicos

○Templating/Route

○Directive

○Filter

○Animate

Considerações finais

○ Facilidades

○App cliente fica mais rica

○Servidor fica mais testável e simples

○Boa parte do trabalho vai para o cliente

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

Agradecimentos

○ Equipe STI

○ DACC pelo convite

Dúvidas

Obrigado!

marcoscortes@id.uff.br

http://www.sti.uff.br/

OUTROS SLIDES

Tipos de Sites Web

○ Orientados a conteúdo / CMS

○ Orientados a tarefa / WebApp

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

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

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