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

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 Please complete this survey http://tinyurl.com/pivotaltokyo

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

5 JSP: interest over time (Google trend)

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

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

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

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 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster

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 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 Sample view Binding to controller ‘Repeat’ loop “Moustache” syntax vetList.html

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 Single-page application (2/2) Ÿ  Do I have the same URL for the whole application? –  No, URLs can be updated –  Bookmarks friendly

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

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

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

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

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

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

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 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 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 REST resources Ÿ  Setting up REST in Spring MVC is easy –  Include JSon lib in the classpath –  Controllers should be annotated with @RestController

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 Spring MVC Controllers/Resources Ÿ  Rename Controllers into Resources Ÿ  Make sure that all methods return objects –  Not ModelAndView

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

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 Generic files: index.html Ÿ  Contains the template for the single page application index.html Owners list Menu bar

31 index.html PetClinic index.html Main PetClinic module Value inside app.js

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

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

34 Demo Ÿ  Show breakpoint

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

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 Angular JS will require more time if… Ÿ  You have little experience with JavaScript and jQuery Ÿ  You have never used REST on Java side

38 AngularJS Pros and Cons

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 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 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 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery Ÿ  Develop faster with JHipster

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 JHipster Demo

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

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