Migrating a Spring MVC application to AngularJS

Presented used at the Tokyo Java Spring User Group

1. 1 1 © Copyright 2013 Pivotal. All rights reserved. Spring MVC, Angular JS and JHipster Michael Isvy
2. 2 Michael  Isvy Ÿ  Training Manager (Asia-Pacific region) –  Joined SpringSource in 2008 (now part of Pivotal) –  Taught Spring in over 20 countries ▪  Core-Spring, Spring MVC, Spring with JPA/Hibernate –  Based in Singapore Ÿ  Blog: https://spring.io/team/misvy/ twitter: @michaelisvy
3. 3 Please complete this survey http://tinyurl.com/pivotaltokyo
4. 4 Should you use JSP? Ÿ  (-) Nearly did not evolve for the past 10 years Ÿ  (-) No Javascript support Ÿ  (+) easy to use
5. 5 JSP: interest over time (Google trend)
6. 6 Should you use jQuery? Ÿ  Great AJAX support –  Partial submit, auto-complete, components… Ÿ  Was the de-facto choice 2 years ago
7. 7 jQuery: interest over time (Google trend) Maximum in 2013
8. 8 Questions Ÿ  Is there a replacement for JSPs? Ÿ  Why is jQuery’s popularity now decreasing?
9. 9 Side by side comparison     JSP  +  jQuery   AngularJS   Page  templa4ng   Yes,  using  Tiles  or  JSP  custom  tags  Yes  (na;ve  to  Angular)   Form  pos4ng  JSon  request   Yes,  using  jQuery   Yes  (na;ve  to  Angular)   Client-­‐side  form  valida4on   Yes,  using  jQuery   Yes  (na;ve  to  Angular)   Par4al  refresh   Yes,  using  jQuery   Yes  (na;ve  to  Angular)   Bootstrap  integra4on   Yes,  manual  integra;on   Yes  (plugin  Angular-­‐UI)  
10. 10 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
11. 11 AngularJS Ÿ  Created by Google in 2009 Ÿ  Controller layer written in JavaScript Ÿ  View files are HTML files –  HTML tags have special attributes called ‘Directives’ Ÿ  Browser compatibility: –  Angular 1.4.x supports IE9 and above
12. 12 Sample controller angular.module('controllers').controller('vetController', ['$scope', '$resource', function($scope, $resource) { var vetResource = $resource('vets'); $scope.vetList = vetResource.query(); }]); Points to resource at http://localhost:8080/petclinic/vets GET query Result in JSon format VetController.js
13. 13 Sample view <div data-ng-controller="vetController"> <table> … <tr ng-repeat="vet in vetList"> <td>{{vet.firstName}} {{vet.lastName}}</td> </tr> </table> </div> Binding to controller ‘Repeat’ loop “Moustache” syntax vetList.html
14. 14 Single-page application (1/2) Ÿ  What is a single-page application? index.html index.html Owners list Owner detail Menu bar Menu bar
15. 15 Single-page application (2/2) Ÿ  Do I have the same URL for the whole application? –  No, URLs can be updated –  Bookmarks friendly
16. 16 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
17. 17 Spring Petclinic Ÿ  Sample application being used: Spring Petclinic –  https://github.com/spring-projects/spring-petclinic
18. 18 Before/After architecture JSP AngularJS @Controller JSP @Repository @Service @RestController Angular Controller HTML view @Repository @Service Browser Server side JavaScript
19. 19 Controller in Spring MVC Ÿ  @Controller –  Usually not for REST services –  Often used with JSP Ÿ  @RestController –  For REST services
20. 20 @Controller (for JSP, no REST) @Controller public class VetController { @RequestMapping("/vets.html") public String showVetList(Map<String, Object> model) { Vets vets = this.clinicService.findVets(); model.put("vets", vets); return "vets/vetList"; } } Name: xController return view name Using model in request scope to communicate with JSP VetController.java
21. 21 @RestController (for AngularJS) @RestController public class VetResource { @RequestMapping(value="/vets", method = RequestMethod.GET) public Collection<Vet> showResourcesVetList() { return this.clinicService.findVets(); } } Name: xResource (because Controller is on JavaScript side) VetResource.java
22. 22 @Controller vs @RestController     @Controller     @RestController      Class  name    ends  with  'Controller'   VetController    ends  with  'Resource'   VetResource    Returns    model  and  view    Model  Object  (Vet,  Owner…)    (view  name  informa;on  on  Java  Script  side)   Communica4on  with  View  Layer    Uses  request/session  scope    JSon  data  parsed  on  JavaScript  side    
23. 23 IDE support Ÿ  Support in Eclipse is limited –  Angular-Eclipse plugin being developed –  Not stable enough at this stage Ÿ  Just work with HTML files and use ‘data’ prefix
24. 24 Step by step migration Ÿ  Migrate Spring MVC controllers to REST resources –  Also using Spring MVC Ÿ  Create AngularJS controllers Ÿ  Migrate JSP files to HTML files –  Using AngularJS directives
25. 25 REST resources Ÿ  Setting up REST in Spring MVC is easy –  Include JSon lib in the classpath –  Controllers should be annotated with @RestController
26. 26 Preparing Data Transfer Objects Ÿ  Make sure minimum data will be serialised –  Create DTOs if needed –  @JSonIgnore Ÿ  Bidirectionnal relationships: choose one side Owner Pet @JSonIgnore
27. 27 Spring MVC Controllers/Resources Ÿ  Rename Controllers into Resources Ÿ  Make sure that all methods return objects –  Not ModelAndView
28. 28 AngularJS side Ÿ  Prepare all dependencies on Bower Ÿ  Bower is similar to Maven but for web/static dependencies –  JavaScript (jQuery, AngularJS…) –  HTML (bootstrap)
29. 29 Bower samples { "name": "petclinic-angular", "version": "0.0.0", "appPath": "src/main/webapp", "dependencies": { "bootstrap": "2.3.0", "jquery": "2.1.3", "json3": "3.3.2", "angular": "1.3.11", "angular-route": "1.3.11", "angular-resource": "1.3.11" } } ‘bower update’ //updates all dependencies bower.json
30. 30 Generic files: index.html Ÿ  Contains the template for the single page application index.html Owners list Menu bar
31. 31 index.html <html ng-app="petClinicApp"> <head> <title>PetClinic</title <script src="bower_components/angular/angular.js"></script> <!-- import for all scripts and CSS --> </head> <body class="container"> <div ng-include="'app/fragments/bodyHeader.html'"></div> <div ng-view></div> </body> </html> index.html Main PetClinic module Value inside app.js
32. 32 Generic files: app.js Ÿ  Contains navigation rules when('/vets', { templateUrl: 'scripts/app/vet/vetList.html', controller: 'vetController’ }). otherwise({ redirectTo: '/’ }); }]); app.js
33. 33 app.js when('/vets', { templateUrl: 'scripts/app/vet/vetList.html', controller: 'vetController’ }). otherwise({ redirectTo: '/’ }); }]); Request on: http://localhost:8080/petclinic/#/vets <body> <div ng-view></div> </body> index.html app.js
34. 34 Demo Ÿ  Show breakpoint
35. 35 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
36. 36 AngularJS will be easy for you if… Ÿ  You are experienced with JavaScript Ÿ  You are experienced with jQuery Ÿ  You are experienced with REST in Spring MVC –  Or with JAX-RS as an alternative to Spring MVC
37. 37 Angular JS will require more time if… Ÿ  You have little experience with JavaScript and jQuery Ÿ  You have never used REST on Java side
38. 38 AngularJS Pros and Cons
39. 39 Pros for AngularJS Ÿ  (+) Hot redeploy –  no need to restart Tomcat –  Unless you have changed Java side Ÿ  (+) HTML pages are very clean Ÿ  (+) AJAX is built in Ÿ  (+) Many plugins available Ÿ  (+) Web Designer can run JavaScript side with Mock Data
40. 40 Cons for AngularJS Ÿ  (-) many ways to do the same thing –  8 ways to write a controller! Ÿ  (-) Error messages sometimes not clear Ÿ  (-) Limited IDE support
41. 41 Should you use AngularJS? –  Do you need partial refresh? –  Do you need auto-complete? –  Do you need validation on the client side? –  Are you thinking to create a mobile application for your site? Ÿ  If yes, AngularJS is likely to be simpler than using JSP Ÿ  If not, just use JSP and use jQuery when needed
42. 42 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
43. 43 What is JHipster? Ÿ  Spring MVC and AngularJS code generator –  With all the best practices Ÿ  Created in 2014 and fast growing! Ÿ  http://jhipster.github.io/
44. 44 JHipster Demo
45. 45 What can JHipster do for you? Ÿ  Security Ÿ  Internationalization Ÿ  Form validation Ÿ  Development/Production optimizations Ÿ  …
46. 46 Security Ÿ  When working with REST, all URLs need to be secured –  Best framework for that is Spring Security Ÿ  Tedious: all URLs need to be secured