Combinando AngularJS com Java EE. Rodrigo Cândido da

Transcrição

1 Combinando AngularJS com Java EE Rodrigo Cândido da

2 About Me Software Architect JUG Leader do GUJavaSC Contatos

3 Agenda Arquitetura Rich Client RESTful Web Services Java EE 7 JAX-RS WebSocket JSON-P AngularJS Demo

4 Client-side vs. Server-side Server-side Tudo é processado no servidor Mais stateful Fraca escalabilidade Client-side Complexo e dinâmico Mais stateless Maior escalabilidade

5 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)

6 Arquitetura Rich Client

7 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

8 Arquitetura REST

9 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) Web Services que seguem a arquitetura REST são denominados RESTful

10 RESTful Web Services

11 HATEOAS Hypermedia As The Engine of Application State Clientes somente precisam saber a URI root da aplicação e os media types utilizados Descrevem o estado atual da aplicação e como navegar para o próximo estado

12 Java EE é uma ótima plataforma server-side para esta arquitetura

13 Java EE History J2EE 1.3 CMP, Connector Architecture J2EE 1.4 Web Services Mgmt, Deployment, Async Connector Java EE 5 Ease of Development, EJB 3, JPA, JSF, JAXB, JAX-WS, StAX, SAAJ Java EE 6 Pruning, Extensibility Ease of Dev, CDI, JAX-RS Web$Profile$ $ Servlet 3, EJB 3.1 Lite! Java EE 7! JMS 2, Batch, TX, Concurrency, Interceptor, WebSocket, JSON! JAX-RPC, CMP/ BMP, JSR 88 Web$Profile$ $ JAX-RS 2!

14 Java EE 7

15 Java EE + JavaScript JavaScript/HTML5 JAX-RS Java API for WebSocket Java API for JSON JAXB EJB 3 Servlet CDI Bean Validation JPA JMS JTA JCA

16 JAX-RS Suporte a RESTful em Java API padronizada Programação declarativa Abstrações para implementação no server e client Serviços implementados via POJO Configuração @Consumes, etc Plugável e extensível Providers, filters, interceptors, validators Suporte a processamento assíncrono Integrado com as tecnologias do Java EE

17 @ApplicationPath Define a URI para ser utilizada pelo endpoint Determina acesso ao serviço via HTTP GET Determina acesso ao serviço via HTTP POST Determina acesso ao serviço via HTTP PUT Determina acesso ao serviço via HTTP DELETE Determina acesso ao serviço via HTTP HEAD Define o mapeamento do valor informado na URI para um determinado parâmetro de método Define o mapeamento do valor informado na query string para um determinado parâmetro de método Define um determinado MIME type para recebimento de dados pelo serviço Define um determinado MIME type para envio de dados pelo serviço Define um determinado componente para auxiliar no JAX- RS runtime. Determina o root path de uma aplicação JAX-RS

18 Manipulação de Parâmetros Além há outras cinco anotações que permitem extrair informação de um Extraem dados de um query string Extrai dados de um formulário Extrai dados de cookies (pares Extrai dados de cabeçalhos Extrai dados de segmentos de URL

19 Validação de Dados Os dados enviados para métodos em classes de resource podem ser validados através da API Bean Validation, que é configurada @Consumes(MediaType.APPLICATION_FORM_URLENCODED) public int ano) private String imdbcode;

20 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 public class MyBeanConverterProvider implements ParamConverterProvider public <T> ParamConverter<T> getconverter( Class<T> clazz, Type type, Annotation[] annotations) { if (clazz.getname().equals(mybean.class.getname())) { return new ParamConverter<T>() public T fromstring(string value) public String tostring(t bean) {... ; return null;

21 Tratamento de Exceções Geração e lançamento da exceção 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; Exemplo de definição de exceção customizada public class CustomNotFoundException extends WebApplicationException { public CustomNotFoundException() { super(responses.notfound().build());

22 Filtros e Interceptadores

23 Filtros Filtros podem ser server side e/ou client side ContainerRequestFilter, ContainerResponseFilter ClientRequestFilter, ClientResponseFilter public class AuthorizationRequestFilter implements ContainerRequestFilter public void filter(containerrequestcontext requestcontext) throws IOException { final SecurityContext securitycontext = requestcontext.getsecuritycontext(); if (securitycontext == null!securitycontext.isuserinrole("privileged")) { requestcontext.abortwith(response.status( Response.Status.UNAUTHORIZED).entity("User cannot access the resource.").build());

24 Interceptadores Existem dois tipos de interceptors (Reader e Writer) annotation is the name Compress public class @Compress public String getverylongstring() public class GZIPWriterInterceptor implements WriterInterceptor public void aroundwriteto(writerinterceptorcontext context) throws IOException, WebApplicationException {...

25 pode ser utilizado para injetar diversos objetos contextuais disponíveis em uma requisição ou resposta HTTP Objetos da Servlet API ServletConfig ServletContext HttpServletRequest HttpServletResponse Objetos da JAX-RS API Application UriInfo Request HttpHeaders SecurityContext Request UriInfo public HttpHeaders headers) { String m = request.getmethod(); URI ap = uriinfo.getabsolutepath(); Map<String, Cookie> c public login(@context SecurityContext sc) { String userid = sc.getuserprincipal().getname(); if (sc.isuserinrole("admin")) {...

26 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 "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(); private Link[] producelinks(article article) {...

27 Integração com CDI JAX-RS integra-se muito bem com as tecnologias da plataforma Java Enterprise, especialmente com os componentes EJBs e CDI. CDI beans podem ser injetados diretamente nos resources. Providers e Application terão comportamento public class CdiBeanResource MyOtherCdiBean bean; // CDI public String getit() { return bean.getit();

28 Integração com EJB Exemplo de integração com public interface public public class StatelessEjbResource implements LocalEjb public String getit() { return "Hi Stateless!";

29 Cache Control JAX-RS suporta configurações para controle de caching de responses HTTP por meio da public Response int id) { Article article = articledao.findbyid(id); CacheControl cachecontrol = new CacheControl(); cachecontrol.setmaxage(60); return Response.ok(article).cacheControl(cacheControl).build();

30 Chamadas Assíncronas Possibilita o processamento multithread no servidor, aumentando o seu throughput Libera a thread do servidor para executar outras indica que o método será executado de maneira assíncrona Possível configurar public class AsyncResource public void asyncget(@suspended final AsyncResponse asyncresponse) { new Thread(new Runnable() {...).start();

31 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

32 WebSocket Connected! open open Client message error message message message Server close Disconnected

33 WebSocket Client Remote Endpoint Session Message Handler Client Remote Endpoint Internet Session Message Handler WebSocket Endpoint Client Remote Endpoint Session Message Handler

34 REST vs. WebSocket

35 Java API for WebSocket Programação declarativa com anotações Client and server-side @OnError, Session, Remote Plugável e extensível Encoders, decoders, sub-protocols Lifecycle callback handlers Permite empacotá-los em aplicações Java EE

36 Java API for WebSocket Define o endpoint do servidor WebSocket para conexão pelos /chat ) public class ChatServer public void onopen(session peer) public void onclose(session peer) public void message(string message, Session client) throws IOException public void error(session session, Throwable t) {...

37 Java API for WebSocket Exemplo de cliente em JavaScript var wsuri = "ws://" + document.location.hostname + ":" + document.location.port + document.location.pathname + "chat"; var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onopen(evt) ; websocket.onmessage = function(evt) { onmessage(evt) ; websocket.onerror = function(evt) { onerror(evt) ;

38 JSON JavaScript Object Notation {id:123, cidade: Paris, voos:[ M344, J919 ] Pode ser codificado diretamente em String e processado com métodos como split(), substring(), indexof() dentre outros Java EE 7 disponibiliza um API para construir objetos JSON e para converter strings JSON em mapas É um par de APIs de baixo nível (não é mapeamento objeto- JSON) Existem várias implementações que fazem mapeamento (binding) objeto-json automático (não são parte do Java EE) MOXy, Jettison, Jersey, Jackson, etc.

39 Java API for JSON API para parser e geração de objetos JSON definida pelo Java EE Object Model API - javax.json Análogo a DOM: estrutura em árvore; I/O streaming via decorators JsonObject: representa um objeto JSON JsonArray: representa um array JSON Leitura e gravação usando JsonReader e JsonWriter JSON Streaming API - javax.json.stream Análogo a SAX: leitura sequencial (baixo nível) JsonParser: permite ler um stream JSON e capturar eventos JsonGenerator: métodos para criar uma estrutura JSON

40 Java API for JSON JSON Object Model API JsonArray value = Json.createArrayBuilder().add(Json.createObjectBuilder().add("type", "home").add("number", " ") ).add(json.createobjectbuilder().add("type", "fax").add("number", " ") ).build(); [ ] { "type": "home, "number": " ", { "type": "fax, "number": " "

41 Java API for JSON JSON Streaming { "firstname": "John", "lastname": "Smith", "age": 25, "phonenumber": [ { "type": "home", "number": " ", { "type": "fax", "number": " " ] Event event = parser.next(); event = parser.next(); event = parser.next(); String name = parser.getstring(); // START_OBJECT // KEY_NAME // VALUE_STRING // "John

42 JAXB JAXB beans permitem reutilizar o mesmo JavaBean para gerar representações JSON e XML no public class MyJaxbBean { public String name; public public MyJaxbBean getmybean() { return new MyJaxbBean("Agamemnon", 32); {"name":"agamemnon", "age":"32"

43 AngularJS é uma ótima alternativa para implementação Web rich client

44 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?

45 AngularJS Google Trends

46 AngularJS Jobs Trends indeed.com dice.com

47 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

48 AngularJS Two-way data binding

49 AngularJS Dependency Injection.controller('LoginController', function($scope, $rootscope, $location, $http, $cookiestore, LoginService) { $scope.login = function () { LoginService.authenticate($.param({username: $scope.username, password: $scope.password), function (user) { $rootscope.user = user; $http.defaults.headers.common[xauth] = user.token; $cookiestore.put('user', user); $location.path("/"); ); ; )

50 AngularJS Controllers var myapp = angular.module('myapp',[]); myapp.controller('greetingcontroller', ['$scope', function($scope) { $scope.greeting = "Hola!"; ]); <div ng-controller="greetingcontroller"> {{ greeting </div>

51 AngularJS Services var services = angular.module( "myapp.services", ["ngresource"]); services.factory("loginservice", function($resource) { return $resource(":action", {, { authenticate: { method: "POST", params: {"action": "authenticate", headers: { Content-Type": "application/json" ); );

52 JavaScript Tools

53 Demo Java EE + AngularJS

54 Conclusões Clientes Javascript/HTML5 estão conquistando desenvolvedores Comunicação entre cliente e servidor em JSON via REST ou WebSocket Java EE funciona muito bem como backend para clientes ricos em Javascript, especialmente JAX-RS, Java API para WebSockets, e JSON-P Enjoy it ;)

55 Perguntas?

56 Muito rodrigocandido.me