http://www.opitz-consulting.com/go/3-4-894 Mit Seiten-basierten Webanwendungen lassen sich heutzutage keine Blumentöpfe mehr gewinnen. Nutzer erwarten und benötigen interaktive Inhalte, hohen Bedienkomfort und Flexibilität im Hinblick auf das verwendete Darstellungsmedium. Sowohl clientseitig als auch im Backend müssen uns solche Anforderungen jedoch dank moderner Architekturparadigmen und Frameworks nicht mehr ins Schwitzen bringen. In ihrem Vortrag bei der Jax 2014 in Mainz zeigten unsere Solution Architects Stefan Scheidt und Stefan Glase am konkreten Beispiel, wie sich durch Kombination von Server- und Client-seitigen Application Development Frameworks eine höchst produktive Plattform für die Entwicklung individueller Rich Client Web Apps zusammenstellen lässt. Info: http://jax.de/2014/sessions/rapid-application-development-mit-grails-und-angular-js -- Über uns: Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen. Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10 Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874 Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

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

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

3. © OPITZ CONSULTING GmbH 2011 Seite 3<Präsentationstitel – bitte im Folienmaster ändern>
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
Business IT Alignment
Business Information Management
Business Process Management
Anwendungsentwicklung
SOA und System-Integration
IT-Infrastruktur-Management
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

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
BackendData

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. erleichtern
interaktives UI
unterstützen
"Thin Server Architecture"
bedeuten
Client-Server-Entwicklung
ermöglichen
Offline-Betrieb
sind bereits
länger im Einsatz
ermöglichen SEO
erleichtern
Bookmarking
Multi-Page-Apps Single-Page-Apps

9. Grails

10. "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

11. Spring Groovy
Hibernate SiteMesh
Grails
Technologie-Unterbau

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

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

14. 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)"
}
}

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

16. Plugins

17. Demo: Grails
http://www.flickr.com/photos/dissolved/2514697398/

18. AngularJS

19. "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

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

21. Demo: AngularJS

22. Grails
&
AngularJS

23. Aufgabenverteilung
Web Server
REST
Endpoints
Browser
HTML
+ CSS
+ JavaScript
Request Response: JSON
AngularJS
Grails

24. Optionen für die Integration bei der
Entwicklung:
Separate Projekte
AngularJS-App eingebettet als Asset

25. Demo

26. Bewertung und Fazit

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

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

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

30. 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/

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