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
Tweet

More Decks by Michael Isvy

Other Decks in Technology

Transcript

  1. 1
    1
    © Copyright 2013 Pivotal. All rights reserved.
    Spring MVC, Angular JS
    and JHipster
    Michael Isvy

    View full-size slide

  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

    View full-size slide

  3. 3
    Please complete this survey
    http://tinyurl.com/pivotaltokyo

    View full-size slide

  4. 4
    Should you use JSP?
    Ÿ  (-) Nearly did not evolve for the past 10 years
    Ÿ  (-) No Javascript support
    Ÿ  (+) easy to use

    View full-size slide

  5. 5
    JSP: interest over time (Google trend)

    View full-size slide

  6. 6
    Should you use jQuery?
    Ÿ  Great AJAX support
    –  Partial submit, auto-complete, components…
    Ÿ  Was the de-facto choice 2 years ago

    View full-size slide

  7. 7
    jQuery: interest over time (Google trend)
    Maximum in 2013

    View full-size slide

  8. 8
    Questions
    Ÿ  Is there a replacement for JSPs?
    Ÿ  Why is jQuery’s popularity now decreasing?

    View full-size slide

  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)  

    View full-size slide

  10. 10
    Outline
    Ÿ  What is AngularJS?
    Ÿ  Migrating a JSP application to AngularJS
    Ÿ  Choosing between AngularJS and JSP/jQuery
    Ÿ  Develop faster with JHipster

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  13. 13
    Sample view




    {{vet.firstName}} {{vet.lastName}}



    Binding to controller
    ‘Repeat’ loop
    “Moustache” syntax
    vetList.html

    View full-size slide

  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

    View full-size slide

  15. 15
    Single-page application (2/2)
    Ÿ  Do I have the same URL for the whole application?
    –  No, URLs can be updated
    –  Bookmarks friendly

    View full-size slide

  16. 16
    Outline
    Ÿ  What is AngularJS?
    Ÿ  Migrating a JSP application to AngularJS
    Ÿ  Choosing between AngularJS and JSP/jQuery
    Ÿ  Develop faster with JHipster

    View full-size slide

  17. 17
    Spring Petclinic
    Ÿ  Sample application being used: Spring Petclinic
    –  https://github.com/spring-projects/spring-petclinic

    View full-size slide

  18. 18
    Before/After architecture
    JSP AngularJS
    @Controller
    JSP
    @Repository
    @Service
    @RestController
    Angular Controller
    HTML view
    @Repository
    @Service
    Browser
    Server
    side
    JavaScript

    View full-size slide

  19. 19
    Controller in Spring MVC
    Ÿ  @Controller
    –  Usually not for REST services
    –  Often used with JSP
    Ÿ  @RestController
    –  For REST services

    View full-size slide

  20. 20
    @Controller (for JSP, no REST)
    @Controller
    public class VetController {
    @RequestMapping("/vets.html")
    public String showVetList(Map 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

    View full-size slide

  21. 21
    @RestController (for AngularJS)
    @RestController
    public class VetResource {
    @RequestMapping(value="/vets", method = RequestMethod.GET)
    public Collection showResourcesVetList() {
    return this.clinicService.findVets();
    }
    }
    Name: xResource
    (because Controller is on JavaScript side)
    VetResource.java

    View full-size slide

  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    

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  25. 25
    REST resources
    Ÿ  Setting up REST in Spring MVC is easy
    –  Include JSon lib in the classpath
    –  Controllers should be annotated with @RestController

    View full-size slide

  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

    View full-size slide

  27. 27
    Spring MVC Controllers/Resources
    Ÿ  Rename Controllers into Resources
    Ÿ  Make sure that all methods return objects
    –  Not ModelAndView

    View full-size slide

  28. 28
    AngularJS side
    Ÿ  Prepare all dependencies on Bower
    Ÿ  Bower is similar to Maven but for web/static dependencies
    –  JavaScript (jQuery, AngularJS…)
    –  HTML (bootstrap)

    View full-size slide

  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

    View full-size slide

  30. 30
    Generic files: index.html
    Ÿ  Contains the template for the single page application
    index.html
    Owners list
    Menu bar

    View full-size slide

  31. 31
    index.html


    PetClinic







    index.html
    Main PetClinic module
    Value inside app.js

    View full-size slide

  32. 32
    Generic files: app.js
    Ÿ  Contains navigation rules
    when('/vets', {
    templateUrl: 'scripts/app/vet/vetList.html',
    controller: 'vetController’
    }).
    otherwise({
    redirectTo: '/’
    }); }]);
    app.js

    View full-size slide

  33. 33
    app.js
    when('/vets', {
    templateUrl: 'scripts/app/vet/vetList.html',
    controller: 'vetController’
    }).
    otherwise({
    redirectTo: '/’
    }); }]);
    Request on:
    http://localhost:8080/petclinic/#/vets



    index.html
    app.js

    View full-size slide

  34. 34
    Demo
    Ÿ  Show breakpoint

    View full-size slide

  35. 35
    Outline
    Ÿ  What is AngularJS?
    Ÿ  Migrating a JSP application to AngularJS
    Ÿ  Choosing between AngularJS and JSP/jQuery
    Ÿ  Develop faster with JHipster

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  38. 38
    AngularJS Pros and Cons

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  42. 42
    Outline
    Ÿ  What is AngularJS?
    Ÿ  Migrating a JSP application to AngularJS
    Ÿ  Choosing between AngularJS and JSP/jQuery
    Ÿ  Develop faster with JHipster

    View full-size slide

  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/

    View full-size slide

  44. 44
    JHipster Demo

    View full-size slide

  45. 45
    What can JHipster do for you?
    Ÿ  Security
    Ÿ  Internationalization
    Ÿ  Form validation
    Ÿ  Development/Production optimizations
    Ÿ  …

    View full-size slide

  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

    View full-size slide