creating modular test-driven spas with spring and angularjs
DESCRIPTION
Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.TRANSCRIPT
![Page 1: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/1.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Creating Modular Test Driven SPAs with Spring And AngularJS
By Gunnar Hillert - @ghillert
![Page 2: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/2.jpg)
Goals
• AngularJS Introduction • Build and Deployment • Integration with Spring • Modularization • Testing • UI Considerations
2
![Page 3: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/3.jpg)
Me
• (Java) Web developer since 2005 • Struts 1+2, Spring MVC, GWT, Flex • Spring Integration + XD committer • AngularJS since Jan 2014 • Co-organize
3
![Page 4: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/4.jpg)
Non-screen activities
4
![Page 5: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/5.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
AngularJS Introduction
![Page 6: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/6.jpg)
Audience - What do you use*?
• AngularJS • Backbone • JQuery • Are you using any other SPA Framework? Ember.js • Spring MVC • Spring Boot
6
60%20%
80%1 user
80%20%
* Recorded from memory
![Page 7: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/7.jpg)
What are SPAs?
7
A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more
fluid user experience akin to a desktop application.
Wikipedia
![Page 8: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/8.jpg)
What are SPAs?
8
![Page 9: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/9.jpg)
JavaScript WTF
• http://wtfjs.com/
9
parseInt('crap'); // NaN parseInt('crap', 16);// 12 !(2 + "3"); // 23 (2 + +"3"); // 5 (+""); // 0
![Page 10: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/10.jpg)
Read this
10
![Page 11: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/11.jpg)
From Backbone to Angular
• Too many moving parts, choices • Boilerplate Code • Marionette, Backbone.ModelBinder, Backbone.Relational
11
![Page 12: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/12.jpg)
Alternatives
12
![Page 13: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/13.jpg)
AngularJS Basics
• Model • View (Templates) • Controller • Dependency Injection • Expressions • Filters • Directives • Routing • Modules • See also: AngularJS Concepts
13
![Page 14: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/14.jpg)
Model
• Angular is very flexible about your model • Ultimately expressed via the $scope • $scope = Glue between Controller and View • $scope mimics DOM (Hierarchical, one $rootScope)
14
![Page 15: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/15.jpg)
Model
• Killer Feature: Data-Binding • Model === single-source-of-truth • View reflects model changes automatically • $watch, $apply
15
![Page 16: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/16.jpg)
View
• HTML is your templating Engine • Minimize logic as much as possible • Consider Custom Directives
16
![Page 17: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/17.jpg)
¡Hola!
• Demo
17
<div ng-app ng-init="firstName='Eric';lastName='Cartman'"> <div> First Name: <input type="text" ng-model="firstName"> </div> <div> Last Name: <input type="text" ng-model="lastName"> </div> <div> <b>Complete Name:</b> {{firstName + ' ' + lastName | uppercase}} </div> </div>
![Page 18: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/18.jpg)
Controller
• Used to "setup" your $scope (values) • Add behavior to your $scope (functions) • Don't do UI work using controllers!! • Use directives and filters instead
18
![Page 19: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/19.jpg)
¡Hola! v2.0 - View
• Demo
19
<div ng-app="hola" ng-controller="NameController"> <div> First Name: <input type="text" ng-model="firstName"> </div> <div> Last Name: <input type="text" ng-model="lastName"> </div> <div> <b>Complete Name:</b> {{firstName + ' ' + lastName | uppercase}} </div> </div>
![Page 20: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/20.jpg)
¡Hola! v2.0 - Controller
• Demo
20
<script> (function(){ var app = angular.module('hola', []); app.controller('NameController', function($scope){ $scope.firstName='Angular'; $scope.lastName='rocks'; }); })(); </script>
![Page 21: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/21.jpg)
Dependency Injection
• Consider using array notation:app.controller('NameCtrl', function($scope){ ... }); app.controller('NameCtrl', ['$scope', function($scope){ ... }]);
• Or use ngmin ng-annotate • grunt-ngmin, gulp-ngmin, grunt-ng-annotate, gulp-ng-annotate
21
![Page 22: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/22.jpg)
Expressions
• {{ expression }} • No Control Flow Statements • Can use filters inside expressions: • {{ 'abcd' | uppercase }}
22
![Page 23: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/23.jpg)
Filters
23
...!<tr ng-repeat=!! "item in jobDefinitions | filter:filterQuery | orderBy:'name'">!...
![Page 24: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/24.jpg)
Directives
• Are markers on a DOM element • Attach behavior/transform DOM elements • ng-controller, ng-app ...
24
![Page 25: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/25.jpg)
Types of Directives
• Attribute (default) • Element • Class • See: https://gist.github.com/CMCDragonkai/6282750
25
![Page 26: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/26.jpg)
Routing
• ngRoute (built-in) • Routing on steroids using ui-router
26
![Page 27: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/27.jpg)
Routing using UI-Router
• state machine • nested views • Spring XD's routes.js
27
![Page 28: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/28.jpg)
Modules
• Hang on tight…
28
![Page 29: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/29.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
botanic | NG
![Page 30: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/30.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Build and Deployment
![Page 31: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/31.jpg)
Build and Deployment
• Do everything via Maven and Gradle? • What about Non-Java Tooling? • Consider Web Resource Optimization
31
![Page 32: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/32.jpg)
Web Resources Optimization
• Minification • Merging • Compression • Caching (and Cache busting)
32
![Page 33: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/33.jpg)
Web Resources Optimization
33
![Page 34: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/34.jpg)
Strategies - Java Tooling
• Wro4j • Jawr • Spring 4.1
• Flexible resolution and transformation of static web resources
• See Blog Post • WebJars
34
![Page 35: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/35.jpg)
Strategies - JavaScript Tooling
• Node (Npm) • Grunt (Gulp) • Bower • Yeoman (angular-seed)
35
![Page 36: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/36.jpg)
Make Maven and Gradle Grunt
• Plugins exist for Gradle and Maven • Spring XD uses Gradle integration • botanic-ng uses Maven integration • Spring Boot plus Maven Frontend Plugin
36
![Page 37: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/37.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Integration with Spring (Boot)
![Page 38: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/38.jpg)
Hello World fits into Tweet
38
@Controller class ThisWillActuallyRun { @RequestMapping("/") @ResponseBody String home() { "Hello World!" } }
![Page 39: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/39.jpg)
Rapid Prototyping
• Spring Scripts (Samples) • Starter POMs • Über-Jars support (can create WARs also) • Maven + Gradle Plugins • AutoConfiguration support
39
![Page 40: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/40.jpg)
Main is BACK
40
@EnableAutoConfiguration @ComponentScan @EnableScheduling public class MainApp extends RepositoryRestMvcConfiguration { @Override protected void configureRepositoryRestConfiguration( RepositoryRestConfiguration config) { config.exposeIdsFor(Image.class, Garden.class, Plant.class); config.setBaseUri(URI.create("/api")); } public static void main(String[] args) { final ConfigurableApplicationContext context = SpringApplication.run(MainApp.class, args); ... } @Bean MultipartConfigElement multipartConfigElement() { ... } ... }
![Page 41: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/41.jpg)
Security
41
• Best strategy in regards to plugging in Spring Security? • Authentication and Authorization • How does it affect Testing • Consider Spring Session • org.springframework.session.web.http.HttpSessionStrategy
• HeaderHttpSessionStrategy (x-auth-token) • CookieHttpSessionStrategy
![Page 42: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/42.jpg)
Serving Static Content
• /META-INF/resources/ • /resources/ • /static/ • /public/ • Also supports WebJars • Make Boot modules (UI) Pluggable
42
![Page 43: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/43.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Demo Backend
![Page 44: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/44.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Modularization
![Page 46: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/46.jpg)
AngularJS Modules
• Compartmentalize sections of your application • Does not deal with script loading • https://docs.angularjs.org/guide/module
46
angular.module('myModule', []). config(function(injectables) { // provider-injector // This is an example of config block. }). run(function(injectables) { // instance-injector // Like a Main method });
![Page 47: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/47.jpg)
RequireJS
• RequireJS • JavaScript file
and module loader • RequireJS Optimizer
47
require.config({ paths: { angular: '../lib/angular/angular', jquery: '../lib/jquery/jquery', bootstrap: '../lib/bootstrap/bootstrap', … }, shim: { angular: { exports: 'angular' }, bootstrap: { deps: ['jquery'] } } });
![Page 48: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/48.jpg)
• ECMAScript 6 modules • AngularJS 2 is being written in ES6 • Web Components
Modularization Future
48
![Page 49: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/49.jpg)
Componentization using Directives
• angular-masonry • cgBusy • ngGrowl • angular-google-maps • angular-leaflet-directive • AngularUI
• Bootstrap directives
49
![Page 50: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/50.jpg)
File Upload
• angular-file-upload (nervgh) • angular-file-upload (danialfarid) • File Reader • Traditional Post
50
![Page 51: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/51.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Testing
![Page 52: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/52.jpg)
Testing
• E2E testing with Protractor • Unit Testing using Karma and Jasmine • Consider using SauceLabs
52
![Page 53: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/53.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
UI Considerations
![Page 54: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/54.jpg)
UI Consideration
• Bootstrap (It is the baseline) • Keep your CSS maintainable with Less and Sass • Check your production results with YSlow and PageSpeed • Load your site from different corners of the planet using
http://www.webpagetest.org/
54
![Page 55: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/55.jpg)
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Resources
![Page 56: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/56.jpg)
Books
56
![Page 57: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/57.jpg)
• Angular JS Website - Tutorial, Docs • Angular JS Youtube Channel • ng-conf has almost 30 session videos • Shaping up with Angular JS (Videos + Course) • Dan Wahlin - Videos and Bog
• AngularJS Fundamentals In 60-ish Minutes • https://egghead.io/ • Ben Nadel Blog • Year of Moo
Videos and More
57
![Page 58: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.vdocuments.site/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/58.jpg)
Thank You!
58
Source Code + Preso:
https://github.com/ghillert/botanic-ng
Related Talks Spring 4 Web Applications (R. Stoyanchev) Deep dive into Spring WebSockets (S. Almar) Spring Boot for the Web Tier (D. Syer/P. Webb)Resource Handling in Spring MVC 4.1 (B. Clozel/R. Stoyanchev) Introducing RaveJS (J. Hann) Great single page apps need great backends (Adib Saikali)