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

More Related Content

What's hot

Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework Yakov Fain
 
Spring Boot and Microservices
Spring Boot and MicroservicesSpring Boot and Microservices
Spring Boot and Microservicesseges
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3 ArezooKmn
 
Web sockets in Angular
Web sockets in AngularWeb sockets in Angular
Web sockets in AngularYakov Fain
 
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSManaging JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSDen Odell
 
Zend Framework 1.8 Features Webinar
Zend Framework 1.8 Features WebinarZend Framework 1.8 Features Webinar
Zend Framework 1.8 Features WebinarRalph Schindler
 
Spring MVC framework
Spring MVC frameworkSpring MVC framework
Spring MVC frameworkMohit Gupta
 
Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Matt Raible
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
Java EE vs Spring Framework
Java  EE vs Spring Framework Java  EE vs Spring Framework
Java EE vs Spring Framework Rohit Kelapure
 
Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook reactKeyup
 
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)Hendrik Ebbers
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0Takuya Tejima
 

What's hot (20)

Angular beans
Angular beansAngular beans
Angular beans
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
Spring Boot and Microservices
Spring Boot and MicroservicesSpring Boot and Microservices
Spring Boot and Microservices
 
Spring boot
Spring bootSpring boot
Spring boot
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Web sockets in Angular
Web sockets in AngularWeb sockets in Angular
Web sockets in Angular
 
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSManaging JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJS
 
Zend Framework 1.8 Features Webinar
Zend Framework 1.8 Features WebinarZend Framework 1.8 Features Webinar
Zend Framework 1.8 Features Webinar
 
Spring MVC framework
Spring MVC frameworkSpring MVC framework
Spring MVC framework
 
Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021
 
Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
 
Spring boot jpa
Spring boot jpaSpring boot jpa
Spring boot jpa
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Spring Mvc Rest
Spring Mvc RestSpring Mvc Rest
Spring Mvc Rest
 
Java EE vs Spring Framework
Java  EE vs Spring Framework Java  EE vs Spring Framework
Java EE vs Spring Framework
 
Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
 
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
 
Spring MVC 3.0 Framework
Spring MVC 3.0 FrameworkSpring MVC 3.0 Framework
Spring MVC 3.0 Framework
 
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 

Similar to Creating Modular Test Driven SPAs with Spring and Angular JS

Andy Bosch - JavaServer Faces in the cloud
Andy Bosch -  JavaServer Faces in the cloudAndy Bosch -  JavaServer Faces in the cloud
Andy Bosch - JavaServer Faces in the cloudAndy Bosch
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitIMC Institute
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
AEM Sightly Deep Dive
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep DiveGabriel Walt
 
Zend Framework 1.9 Setup & Using Zend_Tool
Zend Framework 1.9 Setup & Using Zend_ToolZend Framework 1.9 Setup & Using Zend_Tool
Zend Framework 1.9 Setup & Using Zend_ToolGordon Forsythe
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's CodeWildan Maulana
 
Working with AngularJS
Working with AngularJSWorking with AngularJS
Working with AngularJSAndré Vala
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineAlexander Zamkovyi
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
The Google App Engine Oil Framework
The Google App Engine Oil FrameworkThe Google App Engine Oil Framework
The Google App Engine Oil FrameworkEric ShangKuan
 
Rediscovering Spring with Spring Boot(1)
Rediscovering Spring with Spring Boot(1)Rediscovering Spring with Spring Boot(1)
Rediscovering Spring with Spring Boot(1)Gunith Devasurendra
 
Java 6 [Mustang] - Features and Enchantments
Java 6 [Mustang] - Features and Enchantments Java 6 [Mustang] - Features and Enchantments
Java 6 [Mustang] - Features and Enchantments Pavel Kaminsky
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerNic Raboy
 

Similar to Creating Modular Test Driven SPAs with Spring and Angular JS (20)

WebGUI Developers Workshop
WebGUI Developers WorkshopWebGUI Developers Workshop
WebGUI Developers Workshop
 
Andy Bosch - JavaServer Faces in the cloud
Andy Bosch -  JavaServer Faces in the cloudAndy Bosch -  JavaServer Faces in the cloud
Andy Bosch - JavaServer Faces in the cloud
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
AEM Sightly Deep Dive
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep Dive
 
Zend Framework 1.9 Setup & Using Zend_Tool
Zend Framework 1.9 Setup & Using Zend_ToolZend Framework 1.9 Setup & Using Zend_Tool
Zend Framework 1.9 Setup & Using Zend_Tool
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's Code
 
Working with AngularJS
Working with AngularJSWorking with AngularJS
Working with AngularJS
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Resthub lyonjug
Resthub lyonjugResthub lyonjug
Resthub lyonjug
 
The Google App Engine Oil Framework
The Google App Engine Oil FrameworkThe Google App Engine Oil Framework
The Google App Engine Oil Framework
 
EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development
EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component DevelopmentEVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development
EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 
Rediscovering Spring with Spring Boot(1)
Rediscovering Spring with Spring Boot(1)Rediscovering Spring with Spring Boot(1)
Rediscovering Spring with Spring Boot(1)
 
Java 6 [Mustang] - Features and Enchantments
Java 6 [Mustang] - Features and Enchantments Java 6 [Mustang] - Features and Enchantments
Java 6 [Mustang] - Features and Enchantments
 
Os Haase
Os HaaseOs Haase
Os Haase
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase Server
 

More from Gunnar Hillert

High Precision GPS Positioning for Spring Developers
High Precision GPS Positioning for Spring DevelopersHigh Precision GPS Positioning for Spring Developers
High Precision GPS Positioning for Spring DevelopersGunnar Hillert
 
Migrating to Angular 5 for Spring Developers
Migrating to Angular 5 for Spring DevelopersMigrating to Angular 5 for Spring Developers
Migrating to Angular 5 for Spring DevelopersGunnar Hillert
 
s2gx2015 who needs batch
s2gx2015 who needs batchs2gx2015 who needs batch
s2gx2015 who needs batchGunnar Hillert
 
Spring Batch Performance Tuning
Spring Batch Performance TuningSpring Batch Performance Tuning
Spring Batch Performance TuningGunnar Hillert
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationGunnar Hillert
 
DevNexus 2013 - Introduction to WebSockets
DevNexus 2013 - Introduction to WebSocketsDevNexus 2013 - Introduction to WebSockets
DevNexus 2013 - Introduction to WebSocketsGunnar Hillert
 
Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSocketsGunnar Hillert
 
S2GX 2012 - What's New in Spring Integration
S2GX 2012 - What's New in Spring IntegrationS2GX 2012 - What's New in Spring Integration
S2GX 2012 - What's New in Spring IntegrationGunnar Hillert
 
S2GX 2012 - Introduction to Spring Integration and Spring Batch
S2GX 2012 - Introduction to Spring Integration and Spring BatchS2GX 2012 - Introduction to Spring Integration and Spring Batch
S2GX 2012 - Introduction to Spring Integration and Spring BatchGunnar Hillert
 
Cloud Foundry for Spring Developers
Cloud Foundry for Spring DevelopersCloud Foundry for Spring Developers
Cloud Foundry for Spring DevelopersGunnar Hillert
 
jRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServicejRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServiceGunnar Hillert
 

More from Gunnar Hillert (12)

High Precision GPS Positioning for Spring Developers
High Precision GPS Positioning for Spring DevelopersHigh Precision GPS Positioning for Spring Developers
High Precision GPS Positioning for Spring Developers
 
Migrating to Angular 5 for Spring Developers
Migrating to Angular 5 for Spring DevelopersMigrating to Angular 5 for Spring Developers
Migrating to Angular 5 for Spring Developers
 
s2gx2015 who needs batch
s2gx2015 who needs batchs2gx2015 who needs batch
s2gx2015 who needs batch
 
Spring Batch Performance Tuning
Spring Batch Performance TuningSpring Batch Performance Tuning
Spring Batch Performance Tuning
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring Integration
 
DevNexus 2013 - Introduction to WebSockets
DevNexus 2013 - Introduction to WebSocketsDevNexus 2013 - Introduction to WebSockets
DevNexus 2013 - Introduction to WebSockets
 
Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSockets
 
S2GX 2012 - What's New in Spring Integration
S2GX 2012 - What's New in Spring IntegrationS2GX 2012 - What's New in Spring Integration
S2GX 2012 - What's New in Spring Integration
 
S2GX 2012 - Introduction to Spring Integration and Spring Batch
S2GX 2012 - Introduction to Spring Integration and Spring BatchS2GX 2012 - Introduction to Spring Integration and Spring Batch
S2GX 2012 - Introduction to Spring Integration and Spring Batch
 
Cloud Foundry for Spring Developers
Cloud Foundry for Spring DevelopersCloud Foundry for Spring Developers
Cloud Foundry for Spring Developers
 
jRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServicejRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting Service
 

Recently uploaded

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 

Recently uploaded (20)

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 

Creating Modular Test Driven SPAs with Spring and Angular JS

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