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: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/1.jpg)
CREATING MODULAR TEST DRIVEN SPAS WITH SPRING ANDANGULAR JS
Created by / Gunnar Hillert @ghillert
![Page 2: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/2.jpg)
GOALSAngularJS OverviewBuild and DeploymentIntegration with SpringTestingModularizationUI Considerations
![Page 3: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/3.jpg)
ME(Java) Web developer since 2005Struts 1+2, Spring MVC, GWT, FlexSpring Integration + XD committerAngularJS since Jan 2014
![Page 4: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/4.jpg)
AUDIENCE - WHAT DO YOU USE?AngularJS? 50%Backbone? 20%JQuery? 90%Are you using any other SPA Framework? ExtJSSpring MVC? 60%Spring Boot? 10%
![Page 5: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/5.jpg)
WHAT ARE SPAS?A single-page application (SPA), also known assingle-page interface (SPI), is a web application
or web site that fits on a single web page with thegoal of providing a more fluid user experience
akin to a desktop application.
Wikipedia
![Page 6: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/6.jpg)
WHAT ARE SPAS?
![Page 7: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/7.jpg)
JAVASCRIPT WTF 1/2http://wtfjs.com/
parseInt('crap'); // NaNparseInt('crap', 16); // 12
NaN
12
![Page 8: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/8.jpg)
JAVASCRIPT WTF 2/2http://wtfjs.com/
(2 + "3"); // 23(2 + +"3"); // 5(+""); // 0
23
5
0
![Page 9: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/9.jpg)
![Page 10: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/10.jpg)
FROM BACKBONE TO ANGULARToo many moving parts, choices
Boilerplate Code
Marionette, Backbone.ModelBinder, Backbone.Relational
![Page 12: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/12.jpg)
ANGULAR JS BASICSModel
View (Templates)
Controller
Expressions
Directives
Modules
See also: AngularJS Concepts
![Page 13: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/13.jpg)
¡HOLA!<div ng-app ng-init="firstName='Angular';lastName='rocks'"> <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>
Demo
![Page 14: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/14.jpg)
MODEL 1/2Angular is very flexible about your model
Ultimately expressed via the $scope
$scope = Glue between Controller and View
$scope mimics DOM (Hierarchical, one $rootScope)
$watch, $apply
![Page 15: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/15.jpg)
MODEL 2/2Killer Feature: Data-Binding
Model === single-source-of-truth
View reflects model changes automatically
![Page 16: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/16.jpg)
VIEWHTML is your templating Engine
Minimize logic as much as possible
Consider Custom Directives
![Page 17: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/17.jpg)
CONTROLLERUsed to "setup" your $scope
Add behavior to your $scope
Don't do UI work using controllers!!
Use directives and filters instead
![Page 18: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/18.jpg)
¡HOLA! V2.0 - VIEW<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>
Demo
![Page 19: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/19.jpg)
¡HOLA! V2.0 - CONTROLLER<script>
</script>
(function(){ var app = angular.module('hola', []); app.controller('NameController', function($scope){ $scope.firstName='Angular'; $scope.lastName='rocks'; }); })();
Demo
![Page 20: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/20.jpg)
app.controller('NameCtrl', function($scope){ ... });app.controller('NameCtrl', ['$scope', function($scope){ ... }]);
DEPENDENCY INJECTIONConsider using array notation
Or use ngmin
grunt-ngmin, gulp-ngmin
![Page 21: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/21.jpg)
EXPRESSIONS{{ expression }}
No Control Flow Statements
Can use filters inside expressions:
{{ 'abcd' | uppercase }}
![Page 22: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/22.jpg)
DIRECTIVESAre markers on a DOM element
Attach behavior/transform DOM elements
ng-controller, ng-app ...
![Page 23: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/23.jpg)
TYPES OF DIRECTIVESAttribute (default)
Element
Class
See: https://gist.github.com/CMCDragonkai/6282750
![Page 24: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/24.jpg)
MODULESBear with me ...
![Page 25: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/25.jpg)
BUILD AND DEPLOYMENT
![Page 26: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/26.jpg)
STRATEGIES - JAVA TOOLING
Spring 4.1 (SPR-10310, SPR-10933)See
Wro4jJawr
Blog PostWebJars
![Page 27: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/27.jpg)
STRATEGIES - JAVASCRIPT TOOLINGNode (Npm)Grunt (Gulp)BowerYeoman (angular-seed)
![Page 28: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/28.jpg)
MAKE MAVEN AND GRADLE GRUNTPlugins exist for Gradle and MavenSpring XD uses Gradle integrationbotanic-ng uses Maven integrationSpring Boot plus Maven Frontend Plugin
![Page 29: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/29.jpg)
INTEGRATION WITHSPRING (BOOT)
![Page 30: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/30.jpg)
HELLO WORLD FITS INTO TWEET@Controllerclass ThisWillActuallyRun { @RequestMapping("/") @ResponseBody String home() { "Hello World!" }}
![Page 31: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/31.jpg)
RAPID PROTOTYPINGSpring Scripts ( )Starter POMsÜber-Jars support (can create WARs also)Maven + Gradle PluginsAutoConfiguration support
Samples
![Page 32: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/32.jpg)
MAIN IS BACK@EnableAutoConfiguration @ComponentScan @EnableSchedulingpublic 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 33: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/33.jpg)
SERVING STATIC CONTENT/META-INF/resources/
/resources/
/static/
/public/
Also supports WebJars
![Page 34: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/34.jpg)
MAKE BOOT MODULES (UI) PLUGGABLE
![Page 35: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/35.jpg)
DEMO BACKEND
![Page 36: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/36.jpg)
MODULARIZATION
![Page 38: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/38.jpg)
ANGULARJS MODULEShttps://docs.angularjs.org/guide/module
Compartmentalize sections of your application
Does not deal with script loading
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 40: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/40.jpg)
MODULARIZATION FUTUREECMAScript 6 modules
is being written in ES6AngularJS 2
Web Components
![Page 41: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/41.jpg)
MORE COOLNESS
![Page 42: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/42.jpg)
FILTERS...<tr ng-repeat= "item in jobDefinitions | filter:filterQuery | orderBy:'name'">...
![Page 43: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/43.jpg)
FILE UPLOADangular-file-upload (nervgh)
angular-file-upload (danialfarid)
File Reader
Traditional Post
![Page 44: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/44.jpg)
ROUTINGngRoute (built-in)
Routing on steroids using ui-router
![Page 45: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/45.jpg)
ROUTING USING UI-ROUTERstate machine
nested views
Spring XD's routes.js
![Page 46: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/46.jpg)
TESTINGE2E testing with Protractor
Unit Testing using and Karma Jasmine
![Page 47: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/47.jpg)
UI CONSIDERATIONSBootstrap
Keep your CSS maintainable with and Less Sass
![Page 48: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/48.jpg)
RESOURCES
![Page 49: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/49.jpg)
![Page 50: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/50.jpg)
![Page 51: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/51.jpg)
THANK YOU!!Source Code + Preso:
https://github.com/ghillert/botanic-ng