SlideShare a Scribd company logo

Creating Modular Test-Driven SPAs with Spring and AngularJS

Gunnar Hillert
Gunnar Hillert
Gunnar HillertSoftware Developer at Hillert, Inc.

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.

Creating Modular Test-Driven SPAs with Spring and AngularJS

1 of 58
Download to read offline
Creating Modular Test Driven SPAs with 
Spring And AngularJS 
By Gunnar Hillert - @ghillert 
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Goals 
• AngularJS Introduction 
• Build and Deployment 
• Integration with Spring 
• Modularization 
• Testing 
• UI Considerations 
2
Me 
• (Java) Web developer since 2005 
• Struts 1+2, Spring MVC, GWT, Flex 
• Spring Integration + XD committer 
• AngularJS since Jan 2014 
• Co-organize 
3
Non-screen activities 
4
AngularJS Introduction 
© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
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

Recommended

Ajug - The Spring Update
Ajug - The Spring UpdateAjug - The Spring Update
Ajug - The Spring UpdateGunnar Hillert
 
Spring Projects Infrastructure
Spring Projects InfrastructureSpring Projects Infrastructure
Spring Projects InfrastructureGunnar Hillert
 
S2GX 2012 - Spring Projects Infrastructure
S2GX 2012 - Spring Projects InfrastructureS2GX 2012 - Spring Projects Infrastructure
S2GX 2012 - Spring Projects InfrastructureGunnar Hillert
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
 
Spring Batch Performance Tuning
Spring Batch Performance TuningSpring Batch Performance Tuning
Spring Batch Performance TuningGunnar Hillert
 
04 integrate entityframework
04 integrate entityframework04 integrate entityframework
04 integrate entityframeworkErhwen Kuo
 

More Related Content

What's hot

01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjsErhwen Kuo
 
Powershell For Developers
Powershell For DevelopersPowershell For Developers
Powershell For DevelopersIdo Flatow
 
03 integrate webapisignalr
03 integrate webapisignalr03 integrate webapisignalr
03 integrate webapisignalrErhwen Kuo
 
06 integrate elasticsearch
06 integrate elasticsearch06 integrate elasticsearch
06 integrate elasticsearchErhwen Kuo
 
Don't Wait! Develop Responsive Applications with Java EE7 Instead
Don't Wait! Develop Responsive Applications with Java EE7 InsteadDon't Wait! Develop Responsive Applications with Java EE7 Instead
Don't Wait! Develop Responsive Applications with Java EE7 InsteadWASdev Community
 
Using ActiveObjects in Atlassian Plugins
Using ActiveObjects in Atlassian PluginsUsing ActiveObjects in Atlassian Plugins
Using ActiveObjects in Atlassian PluginsAtlassian
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot IntroductionJeevesh Pandey
 
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphere
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphereAAI 2236-Using the New Java Concurrency Utilities with IBM WebSphere
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphereKevin Sutter
 
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootPUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootJosué Neis
 
Java springboot microservice - Accenture Technology Meetup
Java springboot microservice - Accenture Technology MeetupJava springboot microservice - Accenture Technology Meetup
Java springboot microservice - Accenture Technology MeetupAccenture Hungary
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norrismfrancis
 
All your data belong to us - The Active Objects Plugin
All your data belong to us - The Active Objects PluginAll your data belong to us - The Active Objects Plugin
All your data belong to us - The Active Objects PluginSamuel Le Berrigaud
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO DevsWO Community
 
Inside Azure Diagnostics
Inside Azure DiagnosticsInside Azure Diagnostics
Inside Azure DiagnosticsMichael Collier
 
Introduction in the play framework
Introduction in the play frameworkIntroduction in the play framework
Introduction in the play frameworkAlexander Reelsen
 
Deployment of WebObjects applications on FreeBSD
Deployment of WebObjects applications on FreeBSDDeployment of WebObjects applications on FreeBSD
Deployment of WebObjects applications on FreeBSDWO Community
 
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe Sencha
 

What's hot (20)

01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjs
 
Powershell For Developers
Powershell For DevelopersPowershell For Developers
Powershell For Developers
 
03 integrate webapisignalr
03 integrate webapisignalr03 integrate webapisignalr
03 integrate webapisignalr
 
06 integrate elasticsearch
06 integrate elasticsearch06 integrate elasticsearch
06 integrate elasticsearch
 
Don't Wait! Develop Responsive Applications with Java EE7 Instead
Don't Wait! Develop Responsive Applications with Java EE7 InsteadDon't Wait! Develop Responsive Applications with Java EE7 Instead
Don't Wait! Develop Responsive Applications with Java EE7 Instead
 
Using ActiveObjects in Atlassian Plugins
Using ActiveObjects in Atlassian PluginsUsing ActiveObjects in Atlassian Plugins
Using ActiveObjects in Atlassian Plugins
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
 
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphere
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphereAAI 2236-Using the New Java Concurrency Utilities with IBM WebSphere
AAI 2236-Using the New Java Concurrency Utilities with IBM WebSphere
 
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootPUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
 
Mule 2.2.1-users-guide
Mule 2.2.1-users-guideMule 2.2.1-users-guide
Mule 2.2.1-users-guide
 
Java springboot microservice - Accenture Technology Meetup
Java springboot microservice - Accenture Technology MeetupJava springboot microservice - Accenture Technology Meetup
Java springboot microservice - Accenture Technology Meetup
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
 
All your data belong to us - The Active Objects Plugin
All your data belong to us - The Active Objects PluginAll your data belong to us - The Active Objects Plugin
All your data belong to us - The Active Objects Plugin
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
 
Inside Azure Diagnostics
Inside Azure DiagnosticsInside Azure Diagnostics
Inside Azure Diagnostics
 
COScheduler
COSchedulerCOScheduler
COScheduler
 
Introduction in the play framework
Introduction in the play frameworkIntroduction in the play framework
Introduction in the play framework
 
Deployment of WebObjects applications on FreeBSD
Deployment of WebObjects applications on FreeBSDDeployment of WebObjects applications on FreeBSD
Deployment of WebObjects applications on FreeBSD
 
Next stop: Spring 4
Next stop: Spring 4Next stop: Spring 4
Next stop: Spring 4
 
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
SenchaCon 2016: Develop, Test & Deploy with Docker - Jonas Schwabe
 

Viewers also liked

2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬Channy Yun
 
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐Terry Cho
 
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴Terry Cho
 
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐Terry Cho
 
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. restTerry Cho
 
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론Terry Cho
 

Viewers also liked (7)

2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
2013 빅데이터 및 API 기술 현황과 전망- 윤석찬
 
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐
대용량 분산 아키텍쳐 설계 #4. soa 아키텍쳐
 
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
대용량 분산 아키텍쳐 설계 #2 대용량 분산 시스템 아키텍쳐 디자인 패턴
 
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐
대용량 분산 아키텍쳐 설계 #3 대용량 분산 시스템 아키텍쳐
 
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest
 
RESTful API Design, Second Edition
RESTful API Design, Second EditionRESTful API Design, Second Edition
RESTful API Design, Second Edition
 
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
대용량 분산 아키텍쳐 설계 #1 아키텍쳐 설계 방법론
 

Similar to Creating Modular Test-Driven SPAs with Spring and AngularJS

Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to ProtractorFlorian Fesseler
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Adam Mokan
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End TestsSriram Angajala
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
 
End to End Testing with nightwatchjs
End to End  Testing with nightwatchjsEnd to End  Testing with nightwatchjs
End to End Testing with nightwatchjsSrikanth Madduri
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day WorkshopShyam Seshadri
 

Similar to Creating Modular Test-Driven SPAs with Spring and AngularJS (20)

Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
Quick Start to AngularJS
Quick Start to AngularJSQuick Start to AngularJS
Quick Start to AngularJS
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
Protractor survival guide
Protractor survival guideProtractor survival guide
Protractor survival guide
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
 
Angular js
Angular jsAngular js
Angular js
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
 
End to End Testing with nightwatchjs
End to End  Testing with nightwatchjsEnd to End  Testing with nightwatchjs
End to End Testing with nightwatchjs
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
 
Angular js
Angular jsAngular js
Angular js
 

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
 
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 (10)

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
 
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

Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfIsidro Navarro
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveDomotica daVinci
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfOTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfPaige Cruz
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfMarielaL5
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education pptsafnarafeek2002
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxBrandon Minnick, MBA
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersOnePlan Solutions
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersThousandEyes
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptxssuser796efb
 
Semiconductor Review Magazine Feature.pdf
Semiconductor Review Magazine Feature.pdfSemiconductor Review Magazine Feature.pdf
Semiconductor Review Magazine Feature.pdfkeyaramicrochipusa
 

Recently uploaded (20)

5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdf
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Manual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-WaveManual Eurotronic Thermostatic Valve Comry Z-Wave
Manual Eurotronic Thermostatic Valve Comry Z-Wave
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdfOTel Orientation_ How to Train Teams (OTel in Practice).pdf
OTel Orientation_ How to Train Teams (OTel in Practice).pdf
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdf
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education ppt
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptx
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio Leaders
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for Partners
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
 
Semiconductor Review Magazine Feature.pdf
Semiconductor Review Magazine Feature.pdfSemiconductor Review Magazine Feature.pdf
Semiconductor Review Magazine Feature.pdf
 

Creating Modular Test-Driven SPAs with Spring and AngularJS

  • 1. Creating Modular Test Driven SPAs with Spring And AngularJS By Gunnar Hillert - @ghillert © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 2. Goals • AngularJS Introduction • Build and Deployment • Integration with Spring • Modularization • Testing • UI Considerations 2
  • 3. Me • (Java) Web developer since 2005 • Struts 1+2, Spring MVC, GWT, Flex • Spring Integration + XD committer • AngularJS since Jan 2014 • Co-organize 3
  • 5. AngularJS Introduction © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 6. 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
  • 7. 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
  • 9. JavaScript WTF • http://wtfjs.com/ 9 parseInt('crap'); // NaN parseInt('crap', 16);// 12 ! (2 + "3"); // 23 (2 + +"3"); // 5 (+""); // 0
  • 11. From Backbone to Angular • Too many moving parts, choices • Boilerplate Code • Marionette, Backbone.ModelBinder, Backbone.Relational 11
  • 13. AngularJS Basics • Model • View (Templates) • Controller • Dependency Injection • Expressions • Filters • Directives • Routing • Modules • See also: AngularJS Concepts 13
  • 14. 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
  • 15. Model • Killer Feature: Data-Binding • Model === single-source-of-truth • View reflects model changes automatically • $watch, $apply 15
  • 16. View • HTML is your templating Engine • Minimize logic as much as possible • Consider Custom Directives 16
  • 17. ¡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>
  • 18. 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
  • 19. ¡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>
  • 20. ¡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>
  • 21. 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
  • 22. Expressions • {{ expression }} • No Control Flow Statements • Can use filters inside expressions: • {{ 'abcd' | uppercase }} 22
  • 23. Filters 23 ...! <tr ng-repeat=! ! "item in jobDefinitions | filter:filterQuery | orderBy:'name'">! ...
  • 24. Directives • Are markers on a DOM element • Attach behavior/transform DOM elements • ng-controller, ng-app ... 24
  • 25. Types of Directives • Attribute (default) • Element • Class • See: https://gist.github.com/CMCDragonkai/6282750 25
  • 26. Routing • ngRoute (built-in) • Routing on steroids using ui-router 26
  • 27. Routing using UI-Router • state machine • nested views • Spring XD's routes.js 27
  • 28. Modules • Hang on tight… 28
  • 29. © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission. botanic | NG
  • 30. Build and Deployment © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 31. Build and Deployment • Do everything via Maven and Gradle? • What about Non-Java Tooling? • Consider Web Resource Optimization 31
  • 32. Web Resources Optimization • Minification • Merging • Compression • Caching (and Cache busting) 32
  • 34. Strategies - Java Tooling • Wro4j • Jawr • Spring 4.1 • Flexible resolution and transformation of static web resources • See Blog Post • WebJars 34
  • 35. Strategies - JavaScript Tooling • Node (Npm) • Grunt (Gulp) • Bower • Yeoman (angular-seed) 35
  • 36. 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
  • 37. Integration with Spring (Boot) © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 38. Hello World fits into Tweet 38 @Controller class ThisWillActuallyRun { @RequestMapping("/") @ResponseBody String home() { "Hello World!" } }
  • 39. Rapid Prototyping • Spring Scripts (Samples) • Starter POMs • Über-Jars support (can create WARs also) • Maven + Gradle Plugins • AutoConfiguration support 39
  • 40. 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() { ... } ... }
  • 41. 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
  • 42. Serving Static Content • /META-INF/resources/ • /resources/ • /static/ • /public/ • Also supports WebJars • Make Boot modules (UI) Pluggable 42
  • 43. © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission. Demo Backend
  • 44. © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission. Modularization
  • 45. Modularization Now • AngularJS Modules • RequireJS 45
  • 46. 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 });
  • 47. 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'] } } });
  • 48. Modularization Future • ECMAScript 6 modules • AngularJS 2 is being written in ES6 • Web Components 48
  • 49. Componentization using Directives • angular-masonry • cgBusy • ngGrowl • angular-google-maps • angular-leaflet-directive • AngularUI • Bootstrap directives 49
  • 50. File Upload • angular-file-upload (nervgh) • angular-file-upload (danialfarid) • File Reader • Traditional Post 50
  • 51. © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission. Testing
  • 52. Testing • E2E testing with Protractor • Unit Testing using Karma and Jasmine • Consider using SauceLabs 52
  • 53. UI Considerations © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 54. 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
  • 55. © 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission. Resources
  • 57. Videos and More • 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 57
  • 58. 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)