Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Migrating a Spring MVC application to AngularJS

Migrating a Spring MVC application to AngularJS

Presented used at the Tokyo Java Spring User Group

Michael Isvy

June 22, 2015

More Decks by Michael Isvy

Other Decks in Technology


  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. 4 Should you use JSP? Ÿ  (-) Nearly did not

    evolve for the past 10 years Ÿ  (-) No Javascript support Ÿ  (+) easy to use
  4. 6 Should you use jQuery? Ÿ  Great AJAX support – 

    Partial submit, auto-complete, components… Ÿ  Was the de-facto choice 2 years ago
  5. 8 Questions Ÿ  Is there a replacement for JSPs? Ÿ 

    Why is jQuery’s popularity now decreasing?
  6. 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)  
  7. 10 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP

    application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
  8. 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
  9. 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
  10. 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
  11. 14 Single-page application (1/2) Ÿ  What is a single-page application?

    index.html index.html Owners list Owner detail Menu bar Menu bar
  12. 15 Single-page application (2/2) Ÿ  Do I have the same

    URL for the whole application? –  No, URLs can be updated –  Bookmarks friendly
  13. 16 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP

    application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
  14. 17 Spring Petclinic Ÿ  Sample application being used: Spring Petclinic

    –  https://github.com/spring-projects/spring-petclinic
  15. 18 Before/After architecture JSP AngularJS @Controller JSP @Repository @Service @RestController

    Angular Controller HTML view @Repository @Service Browser Server side JavaScript
  16. 19 Controller in Spring MVC Ÿ  @Controller –  Usually not

    for REST services –  Often used with JSP Ÿ  @RestController –  For REST services
  17. 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
  18. 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
  19. 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    
  20. 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
  21. 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
  22. 25 REST resources Ÿ  Setting up REST in Spring MVC

    is easy –  Include JSon lib in the classpath –  Controllers should be annotated with @RestController
  23. 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
  24. 27 Spring MVC Controllers/Resources Ÿ  Rename Controllers into Resources Ÿ 

    Make sure that all methods return objects –  Not ModelAndView
  25. 28 AngularJS side Ÿ  Prepare all dependencies on Bower Ÿ 

    Bower is similar to Maven but for web/static dependencies –  JavaScript (jQuery, AngularJS…) –  HTML (bootstrap)
  26. 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
  27. 30 Generic files: index.html Ÿ  Contains the template for the

    single page application index.html Owners list Menu bar
  28. 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
  29. 32 Generic files: app.js Ÿ  Contains navigation rules when('/vets', {

    templateUrl: 'scripts/app/vet/vetList.html', controller: 'vetController’ }). otherwise({ redirectTo: '/’ }); }]); app.js
  30. 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
  31. 35 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP

    application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
  32. 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
  33. 37 Angular JS will require more time if… Ÿ  You

    have little experience with JavaScript and jQuery Ÿ  You have never used REST on Java side
  34. 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
  35. 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
  36. 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
  37. 42 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP

    application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster
  38. 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/
  39. 45 What can JHipster do for you? Ÿ  Security Ÿ 

    Internationalization Ÿ  Form validation Ÿ  Development/Production optimizations Ÿ  …
  40. 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