Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaOne LATAM 2016 - Combinando AngularJS com Java EE

678 views

Published on

AngularJS tem atraído muita atenção ultimamente e a maioria das aplicações utilizando Angular necessitam comunicar-se por meio de uma API REST. A plataforma Java EE com sua robustez e o seu avançado suporte a REST é uma das melhoras soluções atuais para suportar todos os requisitos de uma API REST backend para aplicações baseadas em HTML5 e AngularJS. Esta palestra abordará como construir uma aplicação em Angular utilizando tecnologias backend Java EE, como JAX-RS, WebSockets, JSON-P e CDI. Ao final desta sessão, você vai entender os benefícios no uso destas tecnologias, bem como padrões e boas práticas aplicadas neste modelo de desenvolvimento. Os tópicos abordados incluem: Javascript, HTML5, AngularJS, algumas API's Java EE (JAX-RS, WebSockets, JSON-P, CDI).

Published in: Technology

JavaOne LATAM 2016 - Combinando AngularJS com Java EE

  1. 1. Combinando AngularJS com Java EE Rodrigo Cândido da Silva @rcandidosilva
  2. 2. About Me • Software Architect • http://integritastech.com • JUG Leader do GUJavaSC • http://gujavasc.org • Twitter • @rcandidosilva • Contatos • http://rodrigocandido.me
  3. 3. Agenda • Arquitetura Rich Client • RESTful Web Services • Java EE 7 • JAX-RS • WebSocket • JSON-P • AngularJS • Demo
  4. 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. 5. Arquitetura Rich Client
  6. 6. Arquitetura REST
  7. 7. Arquitetura REST • ︎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
  8. 8. Java EE é uma ótima plataforma server-side para esta arquitetura
  9. 9. 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! Web$Profile$ $ JAX-RS 2 ! JAX-RPC, CMP/ BMP, JSR 88
  10. 10. Java EE + JavaScript EJB 3 Servlet CDI JPA JAX-RS BeanValidation Java API for WebSocket Java API for JSON JMS JTA JavaScript/HTML5 JAXB JCA
  11. 11. 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 via anotações • Plugável e extensível • Providers, filters, interceptors, validators • Suporte a processamento assíncrono • Integrado com as tecnologias do Java EE
  12. 12. Manipulação de Parâmetros • Além do @PathParam há outras cinco anotações que permitem extrair informação de um request • @QueryParam e @DefaultValue • Extraem dados de um query string (?nome=valor&nome=valor) • @FormParam • Extrai dados de um formulário (applicaton/x-www-form-urlencoded) • @CookieParam • Extrai dados de cookies (pares nome=valor) • @HeaderParam • Extrai dados de cabeçalhos HTTP • @MatrixParam • Extrai dados de segmentos de URL
  13. 13. 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 via anotações @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;
  14. 14. Conversão de Dados • ParamConverterProvider pode ser utilizado para gerenciar a conversão de objetos customizados Object para String e vice-versa @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; } }
  15. 15. Tratamento de Exceções • Geração e lançamento da exceção customizada • Exemplo de definição de exceção customizada public class CustomNotFoundException extends WebApplicationException { public CustomNotFoundException() { super(Responses.notFound().build()); } } @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; }
  16. 16. Filtros e Interceptadores
  17. 17. Filtros • Filtros podem ser server side e/ou client side • ContainerRequestFilter, ContainerResponseFilter • ClientRequestFilter, ClientResponseFilter public class AuthorizationRequestFilter implements ContainerRequestFilter { @Override 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()); } } }
  18. 18. Interceptadores • Existem dois tipos de interceptors (Reader e Writer) // @Compress annotation is the name binding annotation @NameBinding @Retention(RetentionPolicy.RUNTIME) public @interface Compress {} @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 {...} }
  19. 19. @Context • @Context 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 • Providers @Context Request request; @Context UriInfo uriInfo; @PUT public metodo(@Context HttpHeaders headers) { String m = request.getMethod(); URI ap = uriInfo.getAbsolutePath(); Map<String, Cookie> c = headers.getCookies(); } @GET @Path("auth") public login(@Context SecurityContext sc) { String userid = sc.getUserPrincipal().getName(); if (sc.isUserInRole("admin")) { ... } }
  20. 20. 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(); } private Link[] produceLinks(Article article) {...}
  21. 21. 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 singleton ou @ApplicationScoped @Path("/cdibean") public class CdiBeanResource { @Inject MyOtherCdiBean bean; // CDI injected bean @GET @Produces("text/plain") public String getIt() { return bean.getIt(); } }
  22. 22. 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!"; } }
  23. 23. 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(); }
  24. 24. 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(); } }
  25. 25. 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
  26. 26. WebSocket ServerClient Connected ! open open close message message error message message Disconnected
  27. 27. WebSocket WebSocket Endpoint Client Client Client Remote Endpoint Remote Endpoint Remote Endpoint Session Message Handler Session Message Handler Session Message Handler Internet
  28. 28. REST vs. WebSocket
  29. 29. 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 • Lifecycle callback handlers • Permite empacotá-los em aplicações Java EE
  30. 30. 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) { ... } }
  31. 31. 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) };
  32. 32. JSON • JavaScript Object Notation • 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. {id:123, cidade:”Paris”, voos:[“M344”,”J919”]}
  33. 33. Java API for JSON • JSON Object Model API [ { "type": "home , "number": "212 555-1234" }, { "type": "fax , "number": "646 555-4567" } ] JsonArray value = Json.createArrayBuilder() .add(Json.createObjectBuilder() .add("type", "home") .add("number", "212 555-1234") ) .add(Json.createObjectBuilder() .add("type", "fax") .add("number", "646 555-4567") ) .build();
  34. 34. 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" } ] } Event event = parser.next(); // START_OBJECT event = parser.next(); // KEY_NAME event = parser.next(); // VALUE_STRING String name = parser.getString(); // "John
  35. 35. JAXB • JAXB beans permitem reutilizar o mesmo JavaBean para gerar representações JSON e XML no response @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"}
  36. 36. AngularJS é uma ótima alternativa para implementação Web rich client
  37. 37. 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?
  38. 38. AngularJS • Google Trends
  39. 39. AngularJS • Jobs Trends dice.com indeed.com
  40. 40. AngularJS • Organização da bagunça no client-side • Views, modules, controllers, services, 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
  41. 41. AngularJS • Two-way data binding
  42. 42. 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("/"); }); }; })
  43. 43. AngularJS • Controllers var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = "Hola!"; }]); <div ng-controller="GreetingController"> {{ greeting }} </div>
  44. 44. AngularJS 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"}} } ); }); • Services
  45. 45. JavaScript Tools
  46. 46. Demo • Java EE + AngularJS • https://github.com/rcandidosilva/javaee-javascript
  47. 47. +Alternativas
  48. 48. 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 ;)
  49. 49. Perguntas ?
  50. 50. 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/
  51. 51. Muito obrigado! @rcandidosilva rodrigocandido.me

×