Escolar Documentos
Profissional Documentos
Cultura Documentos
Gujavasc Angularjsjavaee 160425122810
Gujavasc Angularjsjavaee 160425122810
• Client-side
• Complexo e dinâmico
• Mais stateless
• Maior escalabilidade
Ascenção do Javascript
• O debate cliente ‘leve' vs cliente ‘pesado' é antigo…
• Frameworks web server-side mandaram por um tempo
(Struts, Spring, MVC, JSF)
• Ajax foi uma mudança suave para o client-side (GWT,
Vaadin)
• Rich clients estão voltando voltaram, graças ao JavaScript/
HTML5
• Motores Javascript melhoraram muito
• Melhores ferramentas desenvolvimento
• Melhores padrões (CSS3, HTML5, Websocket)
Arquitetura Rich Client
Arquitetura Rich Client
• Similar a arquiteturas cliente/servidor
• Client responsável pela UI, input, validação, lógica e
estado
• Server responsável pela lógica de negócio, modelo de
domínio, persistência
• Web/HTTP é a cola que conecta client e server
• Protocolos de comunicação comuns
• REST na maioria dos casos
• WebSocket quando precisa de comunicação full-duplex
• Ferramentas Javascript suportam REST muito bem, mas
ainda não WebSocket
• O formato comum (talvez ideal?) de troca de dados é JSON
Arquitetura REST
Arquitetura REST
• Características:
• ︎Protocolo cliente/servidor sem estado (HTTP)
• ︎Operações bem definidas (GET, POST, PUT)
• ︎Sintaxe universal para identificação de recursos
(URL)
• ︎Transferência de informações em formato padrão
(XML, HTML, JSON)
Bean Validation
Servlet
EJB 3 CDI
@POST
@Path("/criar")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
public void criarFilme(
@NotNull @FormParam("titulo") String titulo,
@NotNull @FormParam("diretor") String diretor,
@Min(1900) @FormParam("ano") int ano) { ... }
@Pattern(regexp="tt[0-9]{5-7}")
private String imdbCode;
Conversão de Dados
• ParamConverterProvider pode ser utilizado para gerenciar a
conversão de objetos customizados Object para String e vice-versa
• Por exemplo, pode ser utilizado para produzir um objeto java.util.Date a partir de
uma String formatada.
@Provider
public class MyBeanConverterProvider implements ParamConverterProvider {
@Override
public <T> ParamConverter<T> getConverter(
Class<T> clazz, Type type, Annotation[] annotations) {
if (clazz.getName().equals(MyBean.class.getName())) {
return new ParamConverter<T>() {
@Override
public T fromString(String value) {...}
@Override
public String toString(T bean) {...}
};
}
return null;
}
}
Tratamento de Exceções
• Geração e lançamento da exceção customizada
@Path("items/{itemid}/")
public Item getItem(@PathParam("itemid") String itemid) {
Item i = getItems().get(itemid);
if (i == null) {
throw new CustomNotFoundException("Item, " +
itemid + ", is not found");
}
return i;
}
@Path("helloworld")
public class HelloWorldResource {
@GET @Path("too-much-data")
@Compress
public String getVeryLongString() {...}
}
@Compress
public class GZIPWriterInterceptor implements WriterInterceptor {
@Override
public void aroundWriteTo(WriterInterceptorContext context)
throws IOException, WebApplicationException {...}
}
@Context
• @Context pode ser utilizado para injetar diversos objetos
contextuais disponíveis em uma requisição ou resposta HTTP
• Objetos da Servlet API
@Context
• ServletConfig Request request;
@Context
• ServletContext UriInfo uriInfo;
• HttpServletRequest
@PUT
• HttpServletResponse public metodo(@Context HttpHeaders headers) {
String m = request.getMethod();
• Objetos da JAX-RS API URI ap = uriInfo.getAbsolutePath();
Map<String, Cookie> c = headers.getCookies();
• Application }
• UriInfo
@GET @Path("auth")
• Request public login(@Context SecurityContext sc) {
String userid =
• HttpHeaders sc.getUserPrincipal().getName();
• SecurityContext if (sc.isUserInRole("admin")) { ... }
}
• Providers
Hypermedia Support
• JAX-RS oferece um modelo para suportar HATEOAS por meio
de suporte à hypermedia
• Em cada mensagem de resposta, deve ser incluído os links
para a próxima mensagem
• Utilizando este suporte, a aplicação consegue definir todo o
modelo de navegação via HTTP
@POST
@Consumes({"application/json", "application/xml"})
@Produces({"application/json", "application/xml"})
public Response create(Article article) {
Article created = articleDao.create(article);
return Response.ok(created)
.link("link-URI", "link-rel")
.links(produceLinks(created))
.build();
}
@GET
@Produces("text/plain")
public String getIt() {
return bean.getIt();
}
}
Integração com EJB
• Exemplo de integração com EJB
@Local
public interface LocalEjb {
@GET
@Produces("text/plain")
public String getIt();
}
@Stateless
@Path("/stateless")
public class StatelessEjbResource implements LocalEjb {
@Override
public String getIt() {
return "Hi Stateless!";
}
}
Cache Control
• JAX-RS suporta configurações para controle de caching de responses
HTTP por meio da classe CacheControl
@GET
@Path("{id}")
public Response read(@PathParam("id") int id) {
Article article = articleDao.findById(id);
CacheControl cacheControl = new CacheControl();
cacheControl.setMaxAge(60);
return Response.ok(article)
.cacheControl(cacheControl)
.build();
}
Chamadas Assíncronas
• Possibilita o processamento multithread no servidor,
aumentando o seu throughput
• Libera a thread do servidor para executar outras tarefas
• @Suspended indica que o método será executado de
maneira assíncrona
• Possível configurar timeout
@Path(“Async") @RequestScope
public class AsyncResource {
@GET
public void asyncGet(@Suspended final AsyncResponse asyncResponse) {
new Thread(new Runnable() {...}).start();
}
}
WebSocket
• Oferece comunicação bi-direcional (full-duplex) através de
uma simples conexão TCP
• Inicia através de um hand-shake através do protocolo
HTTP, mas as conversações utilizam o protocolo
WebSockets.
• Suporte requisições assíncronas
• Perfeito para aplicações como chat e jogos
• Utiliza as tecnologias web existentes
WebSocket
Connected !
open open
message
message
error
message
Client Server
message
close
Disconnected
WebSocket
Message
Handler
Remote
Endpoint
Client Session
WebSocket
Message
Endpoint
Handler
Remote
Client
Endpoint
Internet Session
Message
Handler
Remote
Endpoint Session
Client
REST vs. WebSocket
Java API for WebSocket
• Programação declarativa com anotações
• Client and server-side
• Powerful API
• @ServerEndpoint, @OnOpen, @OnClose, @OnMessage,
@OnError, Session, Remote
• Plugável e extensível
• Encoders, decoders, sub-protocols
• Lifecycle callback handlers
• Permite empacotá-los em aplicações Java EE
Java API for WebSocket
• Define o endpoint do servidor WebSocket para conexão
pelos clientes
@ServerEndpoint(”/chat”)
public class ChatServer {
@OnOpen
public void onOpen(Session peer) {...}
@OnClose
public void onClose(Session peer) { ... }
@OnMessage
public void message(String message, Session client)
throws IOException {...}
@OnError
public void error(Session session, Throwable t) { ... }
}
Java API for WebSocket
• Exemplo de cliente em JavaScript
JsonArray value =
Json.createArrayBuilder() [
.add(Json.createObjectBuilder() {
.add("type", "home") "type": "home ,
.add("number", "212 555-1234") "number": "212 555-1234"
) },
.add(Json.createObjectBuilder() {
.add("type", "fax") "type": "fax ,
.add("number", "646 555-4567") "number": "646 555-4567"
) }
.build(); ]
Java API for JSON
• JSON Streaming
{
"firstName": "John", "lastName": "Smith", "age": 25,
"phoneNumber": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
]
}
@XmlRootElement
public class MyJaxbBean {
public String name;
public int age;
...
}
@GET
@Produces("application/json")
public MyJaxbBean getMyBean() {
return new MyJaxbBean("Agamemnon", 32);
}
{"name":"Agamemnon", "age":"32"}
AngularJS é uma ótima alternativa para
implementação Web rich client
AngularJS
• Framework JavaScript MVW* client-side para desenvolver
aplicações web modernas e dinâmicas
• A primeira versão open-source foi liberada em 2010 e
desde então ele é mantido pela Google e pela comunidade
• Aproximadamente 2 releases mensais, projeto altamente
ativo
• O que faz o AngularJS ser especial?
AngularJS
• Google Trends
AngularJS
• Jobs Trends
indeed.com
dice.com
AngularJS
• Diferenciais
• Organização da bagunça no client-side
• Views, modules, controllers, services, providers, etc
• Reutilização de código e modularidade (DRY)
• Killer Features
• Two-way data binding
• Dependency Injection
• Controllers, Services
• Directives, Filters, Templates, etc
• Integração natural com REST, SOA, SOFEA
• Ótima testabilidade
AngularJS
• Two-way data binding
AngularJS
• Dependency Injection
myApp.controller('GreetingController', ['$scope',
function($scope) {
• Controllers $scope.greeting = "Hola!";
}]);
<div ng-controller="GreetingController">
{{ greeting }}
</div>
AngularJS
• Services
?
Referências
• http://docs.oracle.com/javaee/7/tutorial/
• https://en.wikipedia.org/wiki/Representational_state_transfer
• https://jax-rs-spec.java.net
• http://www.radcortez.com/java-ee-7-with-angular-js-part-1/
• https://docs.angularjs.org/guide/
• http://www.slideshare.net/reza_rahman/javaee-javascript
• http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/HomeWebsocket/
WebsocketHome.html
• http://jhipster.github.io/
• http://yeoman.io/
• http://gruntjs.com/
• http://bower.io/
• http://requirejs.org/
• http://karma-runner.github.io/0.13/index.html
• http://jshint.com/
• https://www.npmjs.com/
• https://jquery.com/
• http://gulpjs.com/
Muito obrigado!
@rcandidosilva
rodrigocandido.me