SlideShare a Scribd company logo
Álvaro Sánchez-Mariscal
Developing SPI applications using Grails and
AngularJS
@alvaro_sanchez - Odobo
About me
• Passionate software developer.
• Founded Salenda in 2005.
• Co-founded Escuela de Groovy in 2009.
• Groovy/Grails lover since 2007.
• Working now at Odobo.
• HTML5 games platform for:
• Game developers.
• Casinos.
Typical Grails
Architecture

This is about architecture.
Grails is essentially MVC.
This can be fine for some projects, but may have drawbacks in large projects
Monolithic!

Although the individual Grails artifacts can be developed in a modular way, it still has the
views and the business logic on the same artifact.
Slow GSP rendering!
Slow startup time!
Memory consumption,
reloading issues...
Sitemesh and the GSP rendering engine it’s not the fastest thing in the world...
Large projects may suffer slow startup times, intensive resource usage, ....
Other problems
• It’s tricky to decouple the view layer to
render views for different devices.

• It’s difficult to do frequent deployments.
• It’s hard to scale development.
Although there are plugins to solve this, it’s not that agile to have different renderings for
different devices.
Changes on the UI will require to redeploy the whole thing.
The development efforts must be synchronized.
Grails 3.0 will have
application profiles

The Grails roadmap is already embracing the change, and 3.0 will offer different profiles:
- Classic MVC.
- Netty.
- Vert.x.
- Etc.
So... WTF is a Single
Page Application?

SPI or SPA.
Developing SPI applications using Grails and AngularJS
• A webapp where you can navigate
without any page refresh.

• Ajax/REST is used to communicate with
the server.

• The MVC is in the browser, written in
Javascript.
Seriously??

WTF!?!?
Did you say
Javascript??
Oh yeah me
too!
I like
Javascript!
Developing SPI applications using Grails and AngularJS
I’m fine with Grails.
Why should I care
about SPI?
• It’s faster.
• It has better user
experience.

• It may be easier for
the developer.

• How to gracefully
degrade?
• How to deal with
communication
failures?

• Can I use the
application offline?
need
• Do IMVC? to duplicate
the

The applications are usually faster and more responsive, so the user experience is better.
It may be easier for developers, as they don’t need to deal with callbacks, the views are
updated automatically.
---What if there is no Javascript enabled?
How to handle network issues?
Are we going to have duplicated efforts?
Other benefits
• You get ready to expose a public API.
• It allows you to update the UI frequently.
• It’s easier to create mobile apps.
• You can organize/scale your teams
better.

Separating the view you get ready for exposing an API.
The UI can be redeployed frequently, without affecting the platform.
It’s easier to create different views, for different devices.
The dev teams can be reorganized and some development can be done in parallel.
You got me!! How can I
do that with Grails!!
• Use Grails 2.3 REST capabilities.
• Define your backend: GORM? Other web
services?

• Make it a robust, powerful black box for
the front end.

Grails 2.3 comes with significant improvements to build REST API’s.
You can still use all Groovy ecosystem to consume any backend.
Then, you can concentrate on building a robust, tested, black boxed Grails layer.
•

Focus on:

• Transactions.
• Efficient data manipulation.
• Security.
• Scalability.
What are the
alternatives for the
client side?
AngularJS, Ember, Backbone...
todomvc.com
• Todo app implemented in lot of
frameworks
Similar features
Grails

AngularJS

Domain class

Model

GSP’s and templates

Views and templates

${}

{{ }}

Controllers

Controllers

URL Mappings

Routing
Grails & Angular
• Angular will issue an OPTIONS request
as per CORS:

• Use cors plugin.
• Manually configure URL mappings to
avoid 405 responses.
Demo
Álvaro Sánchez-Mariscal
Developing SPI applications using Grails and
AngularJS
@alvaro_sanchez - Odobo

More Related Content

PPTX
Single-page applications and Grails
PPT
GROOVY ON GRAILS
PPTX
Web Based Development Introduction
PPTX
Latest Javascript MVC & Front End Frameworks 2017
PPT
Top java script frameworks ppt
PPTX
Introduction to mean stack
PPTX
PPTX
Microsoft Azure Cloud Services
Single-page applications and Grails
GROOVY ON GRAILS
Web Based Development Introduction
Latest Javascript MVC & Front End Frameworks 2017
Top java script frameworks ppt
Introduction to mean stack
Microsoft Azure Cloud Services

What's hot (20)

PPT
GROOVY ON GRAILS
PPTX
MEAN Stack
PDF
The MEAN Stack
PDF
JS Framework Comparison - An infographic
PDF
Vue3: nuove funzionalità, differenze e come migrare
PDF
Pre-render Blazor WebAssembly on static web hosting at publishing time
PPTX
Single Page Application (SPA) using AngularJS
PPTX
Angular js introduction
PDF
Blazor introduction
PDF
Angular js - 10 reasons to choose angularjs
PPTX
Architecture & Workflow of Modern Web Apps
PDF
NodeSummit - MEAN Stack
PPT
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
PDF
Node PDX: Intro to Sails.js
PDF
Introduce Angular2 & render & firebase flow
PPTX
A Minimalist’s Attempt at Building a Distributed Application
PDF
The Future Of Web Frameworks
PPTX
Prototyping app using JS and HTML5 (Ciklum Kharkiv)
GROOVY ON GRAILS
MEAN Stack
The MEAN Stack
JS Framework Comparison - An infographic
Vue3: nuove funzionalità, differenze e come migrare
Pre-render Blazor WebAssembly on static web hosting at publishing time
Single Page Application (SPA) using AngularJS
Angular js introduction
Blazor introduction
Angular js - 10 reasons to choose angularjs
Architecture & Workflow of Modern Web Apps
NodeSummit - MEAN Stack
A First Look at Windows Presentation Foundation Everywhere (WPF/E): a Cross …
Node PDX: Intro to Sails.js
Introduce Angular2 & render & firebase flow
A Minimalist’s Attempt at Building a Distributed Application
The Future Of Web Frameworks
Prototyping app using JS and HTML5 (Ciklum Kharkiv)
Ad

Similar to Developing SPI applications using Grails and AngularJS (20)

PDF
Quo vadis, JavaScript? Devday.pl keynote
PPTX
Seattle bestpractices2010
PDF
Service worker API
PDF
Curious Coders Java Web Frameworks Comparison
PDF
Introduction To Groovy And Grails - SpringPeople
PPTX
Web frameworks
PDF
RealDay: Angular.js
PPTX
Web benefits
PDF
KEY
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
KEY
Why Do Mobile Projects Fail?
PDF
Innovation vs. Impatience - keynote at JSOpenDay London 2015
PDF
Webview: The fifth element
PDF
Embrace the frontend revolution
PDF
Embrace the front-end revolution - Sánchez-Mariscal
PPTX
Top 4 Cross Platform tools for Mobile App Development
PDF
GGX 2014 Lari Hotari Modular Monoliths with Spring Boot and Grails 3
PDF
"WebView, the fifth element" por @fernando_cejas
PPTX
Eureko frameworks
PDF
Transitioning Groupon to Node.js - EmpireJS 2014
Quo vadis, JavaScript? Devday.pl keynote
Seattle bestpractices2010
Service worker API
Curious Coders Java Web Frameworks Comparison
Introduction To Groovy And Grails - SpringPeople
Web frameworks
RealDay: Angular.js
Web benefits
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
Why Do Mobile Projects Fail?
Innovation vs. Impatience - keynote at JSOpenDay London 2015
Webview: The fifth element
Embrace the frontend revolution
Embrace the front-end revolution - Sánchez-Mariscal
Top 4 Cross Platform tools for Mobile App Development
GGX 2014 Lari Hotari Modular Monoliths with Spring Boot and Grails 3
"WebView, the fifth element" por @fernando_cejas
Eureko frameworks
Transitioning Groupon to Node.js - EmpireJS 2014
Ad

More from Alvaro Sanchez-Mariscal (20)

PDF
Serverless functions with Micronaut
PDF
Asynchronous and event-driven Grails applications
PDF
6 things you need to know about GORM 6
PDF
Reactive microservices with Micronaut - GR8Conf EU 2018
PDF
Reactive microservices with Micronaut - Greach 2018
PDF
Practical Spring Cloud
PDF
Creating applications with Grails, Angular JS and Spring Security - G3 Summit...
PDF
Mastering Grails 3 Plugins - G3 Summit 2016
PDF
Desarrollo de aplicaciones con Grails 3, Angular JS y Spring Security
PDF
Creating applications with Grails, Angular JS and Spring Security - GR8Conf U...
PDF
Mastering Grails 3 Plugins - GR8Conf US 2016
PDF
Mastering Grails 3 Plugins - GR8Conf EU 2016
PDF
Creating applications with Grails, Angular JS and Spring Security - GR8Conf E...
PDF
Mastering Grails 3 Plugins - Greach 2016
PDF
Creating applications with Grails, Angular JS and Spring Security
PDF
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
PDF
Efficient HTTP applications on the JVM with Ratpack - JDD 2015
PDF
Stateless authentication with OAuth 2 and JWT - JavaZone 2015
PDF
Stateless authentication for microservices - GR8Conf 2015
PDF
Ratpack 101 - GR8Conf 2015
Serverless functions with Micronaut
Asynchronous and event-driven Grails applications
6 things you need to know about GORM 6
Reactive microservices with Micronaut - GR8Conf EU 2018
Reactive microservices with Micronaut - Greach 2018
Practical Spring Cloud
Creating applications with Grails, Angular JS and Spring Security - G3 Summit...
Mastering Grails 3 Plugins - G3 Summit 2016
Desarrollo de aplicaciones con Grails 3, Angular JS y Spring Security
Creating applications with Grails, Angular JS and Spring Security - GR8Conf U...
Mastering Grails 3 Plugins - GR8Conf US 2016
Mastering Grails 3 Plugins - GR8Conf EU 2016
Creating applications with Grails, Angular JS and Spring Security - GR8Conf E...
Mastering Grails 3 Plugins - Greach 2016
Creating applications with Grails, Angular JS and Spring Security
Efficient HTTP applications on the JVM with Ratpack - Voxxed Days Berlin 2016
Efficient HTTP applications on the JVM with Ratpack - JDD 2015
Stateless authentication with OAuth 2 and JWT - JavaZone 2015
Stateless authentication for microservices - GR8Conf 2015
Ratpack 101 - GR8Conf 2015

Recently uploaded (20)

PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
PPTX
A Presentation on Artificial Intelligence
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
August Patch Tuesday
PPTX
1. Introduction to Computer Programming.pptx
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PPT
Teaching material agriculture food technology
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
TLE Review Electricity (Electricity).pptx
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
Tartificialntelligence_presentation.pptx
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
A Presentation on Artificial Intelligence
Advanced methodologies resolving dimensionality complications for autism neur...
August Patch Tuesday
1. Introduction to Computer Programming.pptx
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOPHOS-XG Firewall Administrator PPT.pptx
Teaching material agriculture food technology
Group 1 Presentation -Planning and Decision Making .pptx
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
TLE Review Electricity (Electricity).pptx
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Programs and apps: productivity, graphics, security and other tools
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Building Integrated photovoltaic BIPV_UPV.pdf
Unlocking AI with Model Context Protocol (MCP)
Tartificialntelligence_presentation.pptx

Developing SPI applications using Grails and AngularJS

  • 1. Álvaro Sánchez-Mariscal Developing SPI applications using Grails and AngularJS @alvaro_sanchez - Odobo
  • 2. About me • Passionate software developer. • Founded Salenda in 2005. • Co-founded Escuela de Groovy in 2009. • Groovy/Grails lover since 2007. • Working now at Odobo.
  • 3. • HTML5 games platform for: • Game developers. • Casinos.
  • 4. Typical Grails Architecture This is about architecture. Grails is essentially MVC. This can be fine for some projects, but may have drawbacks in large projects
  • 5. Monolithic! Although the individual Grails artifacts can be developed in a modular way, it still has the views and the business logic on the same artifact.
  • 6. Slow GSP rendering! Slow startup time! Memory consumption, reloading issues... Sitemesh and the GSP rendering engine it’s not the fastest thing in the world... Large projects may suffer slow startup times, intensive resource usage, ....
  • 7. Other problems • It’s tricky to decouple the view layer to render views for different devices. • It’s difficult to do frequent deployments. • It’s hard to scale development. Although there are plugins to solve this, it’s not that agile to have different renderings for different devices. Changes on the UI will require to redeploy the whole thing. The development efforts must be synchronized.
  • 8. Grails 3.0 will have application profiles The Grails roadmap is already embracing the change, and 3.0 will offer different profiles: - Classic MVC. - Netty. - Vert.x. - Etc.
  • 9. So... WTF is a Single Page Application? SPI or SPA.
  • 11. • A webapp where you can navigate without any page refresh. • Ajax/REST is used to communicate with the server. • The MVC is in the browser, written in Javascript.
  • 13. Oh yeah me too! I like Javascript!
  • 15. I’m fine with Grails. Why should I care about SPI?
  • 16. • It’s faster. • It has better user experience. • It may be easier for the developer. • How to gracefully degrade? • How to deal with communication failures? • Can I use the application offline? need • Do IMVC? to duplicate the The applications are usually faster and more responsive, so the user experience is better. It may be easier for developers, as they don’t need to deal with callbacks, the views are updated automatically. ---What if there is no Javascript enabled? How to handle network issues? Are we going to have duplicated efforts?
  • 17. Other benefits • You get ready to expose a public API. • It allows you to update the UI frequently. • It’s easier to create mobile apps. • You can organize/scale your teams better. Separating the view you get ready for exposing an API. The UI can be redeployed frequently, without affecting the platform. It’s easier to create different views, for different devices. The dev teams can be reorganized and some development can be done in parallel.
  • 18. You got me!! How can I do that with Grails!!
  • 19. • Use Grails 2.3 REST capabilities. • Define your backend: GORM? Other web services? • Make it a robust, powerful black box for the front end. Grails 2.3 comes with significant improvements to build REST API’s. You can still use all Groovy ecosystem to consume any backend. Then, you can concentrate on building a robust, tested, black boxed Grails layer.
  • 20. • Focus on: • Transactions. • Efficient data manipulation. • Security. • Scalability.
  • 21. What are the alternatives for the client side?
  • 23. todomvc.com • Todo app implemented in lot of frameworks
  • 24. Similar features Grails AngularJS Domain class Model GSP’s and templates Views and templates ${} {{ }} Controllers Controllers URL Mappings Routing
  • 25. Grails & Angular • Angular will issue an OPTIONS request as per CORS: • Use cors plugin. • Manually configure URL mappings to avoid 405 responses.
  • 26. Demo
  • 27. Álvaro Sánchez-Mariscal Developing SPI applications using Grails and AngularJS @alvaro_sanchez - Odobo