migrating from JSP to AngularJS

Transcript

1. 1 Please complete this survey http://tinyurl.com/singasug2015
2. 2 2 © Copyright 2013 Pivotal. All rights reserved. From JSPs to AngularJS Michael Isvy
3. 3 Michael  Isvy Ÿ  Joined SpringSource in 2008 (now part of Pivotal) Ÿ  Trainer and Consultant Ÿ  Blog: https://spring.io/team/misvy/ twitter: @michaelisvy
4. 4 February 12th 2015 Ÿ  Had a great talk from Han, Tony, Andrew Improved Design of an app Discussed Angular Collaborative Tools
5. 5 July 6th Ÿ  Step by step migration to AngularJS
6. 6 Should you use JSP? Ÿ  (-) Nearly did not evolve for the past 10 years Ÿ  (-) No Javascript support Ÿ  (+) easy to use
7. 7 JSP: interest over time (Google trend)
8. 8 Should you use jQuery? Ÿ  Great AJAX support –  Partial submit, auto-complete, components… Ÿ  Was the de-facto choice 2 years ago
9. 9 jQuery: interest over time (Google trend) Maximum in 2013
10. 10 Questions Ÿ  Is there a replacement for JSPs? Ÿ  Why is jQuery’s popularity now decreasing?
11. 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. 12 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery
13. 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. 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. 15 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
16. 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. 17 Single-page application (2/2) Ÿ  Do I have the same URL for the whole application? –  No, URLs can be updated –  Bookmarks friendly
18. 18 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery
19. 19 Spring Petclinic Ÿ  Sample application being used: Spring Petclinic –  https://github.com/spring-projects/spring-petclinic
20. 20 Before/After architecture JSP AngularJS @Controller JSP @Repository @Service @RestController Angular Controller HTML view @Repository @Service Browser Server side JavaScript
21. 21 Controller in Spring MVC Ÿ  @Controller –  Usually not for REST services –  Often used with JSP Ÿ  @RestController –  For REST services
22. 22 @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
23. 23 @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
24. 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. 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. 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. 27 REST resources Ÿ  Setting up REST in Spring MVC is easy –  Include JSon lib in the classpath –  Controllers should be annotated with @RestController
28. 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. 29 Spring MVC Controllers/Resources Ÿ  Rename Controllers into Resources Ÿ  Make sure that all methods return objects –  Not ModelAndView
30. 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. 31 AngularJS side Ÿ  Prepare all dependencies on Bower Ÿ  Bower is similar to Maven but for web/static dependencies –  JavaScript (jQuery, AngularJS…) –  HTML (bootstrap)
32. 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. 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. 34 Generic files: index.html Ÿ  Contains the template for the single page application index.html Owners list Menu bar
35. 35 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
36. 36 app.js (navigation rules) state('app.ownerdetail', { url: 'owner/:id', views: { 'content@': { controller: 'ownerDetailController', templateUrl: 'app/owner/ownerDetail.html’ }}}) app.js <a ui-sref="app.ownerdetail({id: owner.id})"> {{owner.firstName}} {{owner.lastName}} </a> ownerList.html Request on: http://localhost:8080/petclinic/#owner/12
37. 37 Demo
38. 38 Outline Ÿ  What is AngularJS? Ÿ  Migrating a JSP application to AngularJS Ÿ  Choosing between AngularJS and JSP/jQuery
39. 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. 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. 41 AngularJS Pros and Cons
42. 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. 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. 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. 45 Survey results
46. 46 Thanks!!! Ÿ  https://github.com/spring-projects/spring-petclinic/tree/ angularjs