Modular Test-driven SPAs with Spring and AngularJS

3,140 views

Published on

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.

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,140
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
74
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Modular Test-driven SPAs with Spring and AngularJS

  1. 1. CREATING MODULAR TEST DRIVEN SPAS WITH SPRING AND ANGULAR JS Created by Gunnar Hillert / @ghillert
  2. 2. GOALS AngularJS Overview Build and Deployment Integration with Spring Testing Modularization UI Considerations
  3. 3. ME (Java) Web developer since 2005 Struts 1+2, Spring MVC, GWT, Flex Spring Integration + XD committer AngularJS since Jan 2014
  4. 4. AUDIENCE - WHAT DO YOU USE? AngularJS? 50% Backbone? 20% JQuery? 90% Are you using any other SPA Framework? ExtJS Spring MVC? 60% Spring Boot? 10%
  5. 5. WHAT ARE SPAS? 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
  6. 6. WHAT ARE SPAS?
  7. 7. JAVASCRIPT WTF 1/2 http://wtfjs.com/ parseInt('crap'); // NaN parseInt('crap', 16); // 12 NaN 12
  8. 8. JAVASCRIPT WTF 2/2 http://wtfjs.com/ (2 + "3"); // 23 (2 + +"3"); // 5 (+""); // 0 23 5 0
  9. 9. FROM BACKBONE TO ANGULAR Too many moving parts, choices Boilerplate Code Marionette, Backbone.ModelBinder, Backbone.Relational
  10. 10. ALTERNATIVES
  11. 11. ANGULAR JS BASICS Model View (Templates) Controller Expressions Directives Modules See also: AngularJS Concepts
  12. 12. ¡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
  13. 13. MODEL 1/2 Angular 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
  14. 14. MODEL 2/2 Killer Feature: Data-Binding Model === single-source-of-truth View reflects model changes automatically
  15. 15. VIEW HTML is your templating Engine Minimize logic as much as possible Consider Custom Directives
  16. 16. CONTROLLER Used to "setup" your $scope Add behavior to your $scope Don't do UI work using controllers!! Use directives and filters instead
  17. 17. ¡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
  18. 18. ¡HOLA! V2.0 - CONTROLLER <script> (function(){ var app = angular.module('hola', []); app.controller('NameController', function($scope){ $scope.firstName='Angular'; $scope.lastName='rocks'; }); })(); </script> Demo
  19. 19. DEPENDENCY INJECTION Consider using array notation app.controller('NameCtrl', function($scope){ ... }); app.controller('NameCtrl', ['$scope', function($scope){ ... }]); Or use ngmin grunt-ngmin, gulp-ngmin
  20. 20. EXPRESSIONS {{ expression }} No Control Flow Statements Can use filters inside expressions: {{ 'abcd' | uppercase }}
  21. 21. DIRECTIVES Are markers on a DOM element Attach behavior/transform DOM elements ng-controller, ng-app ...
  22. 22. TYPES OF DIRECTIVES Attribute (default) Element Class See: https://gist.github.com/CMCDragonkai/6282750
  23. 23. MODULES Bear with me ...
  24. 24. BUILD AND DEPLOYMENT
  25. 25. STRATEGIES - JAVA TOOLING Wro4j Jawr Spring 4.1 (SPR-10310, SPR-10933) See Blog Post WebJars
  26. 26. STRATEGIES - JAVASCRIPT TOOLING Node (Npm) Grunt (Gulp) Bower Yeoman (angular-seed)
  27. 27. 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
  28. 28. INTEGRATION WITH SPRING (BOOT)
  29. 29. HELLO WORLD FITS INTO TWEET @Controller class ThisWillActuallyRun { @RequestMapping("/") @ResponseBody String home() { "Hello World!" } }
  30. 30. RAPID PROTOTYPING Spring Scripts ( Samples ) Starter POMs Über-Jars support (can create WARs also) Maven + Gradle Plugins AutoConfiguration support
  31. 31. MAIN IS BACK @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() { ... } ... }
  32. 32. SERVING STATIC CONTENT /META-INF/resources/ /resources/ /static/ /public/ Also supports WebJars
  33. 33. MAKE BOOT MODULES (UI) PLUGGABLE
  34. 34. DEMO BACKEND
  35. 35. MODULARIZATION
  36. 36. MODULARIZATION NOW AngularJS Modules RequireJS
  37. 37. ANGULARJS MODULES https://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 });
  38. 38. REQUIREJS RequireJS JavaScript file and module loader RequireJS Optimizer
  39. 39. MODULARIZATION FUTURE ECMAScript 6 modules is being AngularJS 2 written in ES6 Web Components
  40. 40. MORE COOLNESS
  41. 41. FILTERS ... <tr ng-repeat= "item in jobDefinitions | filter:filterQuery | orderBy:'name'"> ...
  42. 42. FILE UPLOAD angular-file-upload (nervgh) angular-file-upload (danialfarid) File Reader Traditional Post
  43. 43. ROUTING ngRoute (built-in) Routing on steroids using ui-router
  44. 44. ROUTING USING UI-ROUTER state machine nested views Spring XD's routes.js
  45. 45. TESTING E2E testing with Protractor Unit Testing using Karma and Jasmine
  46. 46. UI CONSIDERATIONS Bootstrap Keep your CSS maintainable with Less and Sass
  47. 47. RESOURCES
  48. 48. THANK YOU!! Source Code + Preso: https://github.com/ghillert/botanic-ng

×