1 Please complete this survey http://tinyurl.com/singasug2015

2 2 © Copyright 2013 Pivotal. All rights reserved. From JSPs to AngularJS Michael Isvy

3 Michael  Isvy Ÿ  Joined SpringSource in 2008 (now part of Pivotal) Ÿ  Trainer and Consultant Ÿ  Blog: https://spring.io/team/misvy/ twitter: @michaelisvy

4 February 12th 2015 Ÿ  Had a great talk from Han, Tony, Andrew Improved Design of an app Discussed Angular Collaborative Tools

5 July 6th Ÿ  Step by step migration to AngularJS

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

7 JSP: interest over time (Google trend)

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

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

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

11 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)  

12 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery

13 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

14 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

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

16 Single-page application (1/2) Ÿ  What is a single-page application? index.html index.html Owners list Owner detail Menu bar Menu bar

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

18 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery

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

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

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

22 @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

23 @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

24 @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    

25 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

26 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

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

28 Preparing Data Transfer Objects Ÿ  Make sure minimum data will be serialised –  Create DTOs if needed –  @JSonIgnore Ÿ  Bidirectionnal relationships: choose one side Owner Pet @JSonIgnore

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

30 The Maven of JavaScript Dependencies Maven Compile Run JUnit tests Create war file … Bower Dependencies Grunt or Gulp Run JS tests Concatenation Minification …

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

32 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

33 Grunt sample grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> 
 <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); GruntFile.js

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

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

36 app.js (navigation rules) state('app.ownerdetail', { url: 'owner/:id', views: { 'content@': { controller: 'ownerDetailController', templateUrl: 'app/owner/ownerDetail.html’ }}}) app.js {{owner.firstName}} {{owner.lastName}} ownerList.html Request on: http://localhost:8080/petclinic/#owner/12

37 Demo

38 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery

39 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

40 Angular JS will require more time if… Ÿ  You have little experience with JavaScript and jQuery Ÿ  You have never used REST on Java side

41 AngularJS Pros and Cons

42 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

43 Cons for AngularJS Ÿ  (-) many ways to do the same thing –  8 ways to write a controller! Ÿ  (-) Error messages sometimes not clear Ÿ  (-) Limited IDE support

44 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

45 Survey results

46 Thanks!!! Ÿ  https://github.com/spring-projects/spring-petclinic/tree/ angularjs