1.
Rapid Application Development
mit Grails und AngularJS
Stefan Glase
Stefan Scheidt

2.
Eure Sprecher
Stefan.Glase@opitz-consulting.com
twitter/stefanglase
github/codescape
Stefan.Scheidt@opitz-consulting.com
twitter/stefanscheidt
github/stefanscheidt

3.
Mission
Wir entwickeln gemeinsam mit allen
Branchen Lösungen, die dazu führen, dass
sich diese Organisationen besser entwickeln
als ihr Wettbewerb.
Unsere Dienstleistung erfolgt
partnerschaftlich und ist auf eine langjährige
Zusammenarbeit angelegt.
Leistungsangebot
 Application Lifecycle Management
 IT-Beratung
Business-Lösungen
Managed Services
Training und Coaching
 IT-Trends
Märkte
 Branchenübergreifend
 Über 600 Kunden
29%
Industrie / Versorger /
Telekommunikation
29%
Handel / Logistik /
Dienstleistungen
42%
Öffentliche Auftraggeber / Banken und
Versicherungen / Vereine und Verbände
Eckdaten
Gründung 1990
 400 Mitarbeiter
 9 Standorte
© OPITZ CONSULTING <Präsentationstitel – bitte im Folienmaster ändern> GmbH 2011 Seite 3

4.
Frontend-Architekturen

5.
"Multi-Page Web Apps"
Browser Server
Model
View
Controller
Backend
HTML-Page
UI Values
Data
Request
Response
HTML

6.
"Single Page Web Apps"
Browser Server
Model
View
Controller
Data Backend

7.
Laufzeit-Sicht "Single Page"
Web Server
REST
Endpoints
Browser
HTML
+ CSS
+ JavaScript
HTML
+ CSS
+ JavaScript
Request
Response:
JSON, HTML
Initiales
Laden
JavaScript
aktualisiert DOM

8.
AngularJS

9.
"AngularJS is a structural framework for dynamic web
apps. [...] It attempts to minimize the impedance
mismatch between document centric HTML and what
an application needs by creating new HTML
constructs."
http://docs.angularjs.org/guide/introduction

10.
AngularJS im Überblick
Framework
Declarative
UI Templates
Two-Way
Data Binding
MVC with
Dependency Injection

11.
Demo: AngularJS
http://www.flickr.com/photos/dissolved/2514697398/

12.
Grails

13.
"Grails is an Open Source, full stack, web application
framework for the JVM. It takes advantage of the
Groovy programming language and convention over
configuration to provide a productive and stream-lined
development experience."
http://grails.org

14.
Technologie-Unterbau
Spring Groovy
Grails
Hibernate SiteMesh

15.
Einheitliche Verzeichnisstruktur
grails-app
- conf
- controllers
- domain
- i18n
- services
- taglib
- utils
- views
lib
scripts
src
- groovy
- java
test
- integration
- unit
web-app

16.
Konfiguration
grails-app/conf/
hibernate/
spring/
resources
ApplicationResources
BootStrap
BuildConfig
Config
DataSource
UrlMappings

17.
Fachklassenmodellierung
class Person {
String firstname
String lastname
String email
static constraints = {
firstname(blank: false)
lastname(blank: false)
email(unique: true, email: true)
}
String toString() {
"$firstname $lastname ($email)"
}
}

18.
„Groovyness“
new File('beispiel.txt').eachLine {
line -> println line
}
new Person(
firstname: 'Max', lastname: 'Mustermann'
).save()
100.times {
println 'Hello World'
}

19.
Plugins

20.
Grails
&
AngularJS

21.
Aufgabenverteilung
Web Server
REST
Endpoints
Browser
HTML
+ CSS
+ JavaScript
AngularJS
Request Response: JSON
Grails
Same Origin Policy

22.
Same Origin Policy
Reverse Proxy
Cross-origin resource sharing (CORS)
JSON with padding (JSONP)

23.
Same Origin Policy
Reverse Proxy
Cross-origin resource sharing (CORS)
JSON with padding (JSONP)

24.
Integration bei Entwicklung
Separate Projekte
AngularJS-App eingebettet als Asset

25.
Integration bei Entwicklung
Separate Projekte
AngularJS-App eingebettet als Asset

26.
Demo: Grails & AngularJS

27.
Integration bei Entwicklung
Separate Projekte
AngularJS-App eingebettet als Asset

28.
Asset Pipeline Plugin
The Asset-Pipeline is a plugin used for
managing and processing static assets
in Grails applications.
http://bertramdev.github.io/asset-pipeline/

29.
Demo: AngularJS-App als Asset

30.
Bewertung und Fazit

31.
Fazit (1)
AngularJS ermöglicht eine produktive Entwicklung von
Single-Page-Apps als Konsument eines REST-Backends.
Grails ermöglicht die produktive Entwicklung von Multi-
Page-Apps und des Backends für Single-Page-Apps.

32.
Fazit (2)
Eine Trennung in separate Projekte erlaubt die
Entkopplung von Frontend und Backend bei
Entwicklung und im Betrieb.
Da AngularJS optional nur Teile einer Page
"kontrollieren" kann, ist auch eine Mischung von Multi-
Page- und Single-Page-Architektur möglich.

33.
Beispiel-Code
https://github.com/opitzconsulting/tasklist-grails-angular

34.
Links
http://grails.org
http://angularjs.org
Grails in Action, 2nd Ed., Ch. 14
http://angular-tips.com/blog/2013/08/
my-workflow-with-lineman/

35.
Herzlichen Dank für
Ihre Aufmerksamkeit!
youtube.com/opitzconsulting
twitter.com/OC_WIRE
slideshare.net/opitzconsulting
xing.com/net/opitzconsulting