Creating Modular Test-Driven SPAs with Spring and AngularJS
-
Upload
gunnar-hillert -
Category
Technology
-
view
3.163 -
download
3
description
Transcript of Creating Modular Test-Driven SPAs with Spring and AngularJS
![Page 1: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/10.jpg)
Read this
10
![Page 11: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/12.jpg)
Alternatives
12
![Page 13: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022051411/546d24ceb4af9f752c8b5251/html5/thumbnails/56.jpg)
Books
56
![Page 57: Creating Modular Test-Driven SPAs with Spring and AngularJS](https://reader034.fdocuments.net/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.fdocuments.net/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)