Rapid Application Development
mit Grails und AngularJS
Stefan Glase
Stefan Scheidt
Ihre Sprecher
Stefan.Glase@opitz-consulting.com
twitter/stefanglase
github/codescape

Stefan.Scheidt@opitz-consulting.com
...
Mission

Märkte

Wir entwickeln gemeinsam mit allen
Branchen Lösungen, die dazu führen, dass
sich diese Organisationen bes...
Frontend-Architekturen
"Multi-Page Web Apps"
Browser

HTML-Page
HTML

Server

Request

UI Values
Response

Model
View
Controller

Data

Backend
"AJAX Web Apps"
Browser

Server

Events
AJAXEngine

Fragments

Model
View
Controller

Data

Backend
"Single Page Web Apps"
Browser

Model
View
Controller

Server

Data

Backend
Laufzeit-Sicht "Single Page"
Browser
HTML
+ CSS
+ JavaScript

Initiales
Laden

JavaScript
aktualisiert DOM
Response:
JSON,...
Multi-Page-Apps

sind bereits
länger im Einsatz

ermöglichen SEO

erleichtern
Bookmarking

Single-Page-Apps
erleichtern
in...
Grails
"Grails is an Open Source, full stack, web application
framework for the JVM. It takes advantage of the
Groovy programming...
Technologie-Unterbau
Spring

Groovy

Grails
Hibernate

SiteMesh
Einheitliche Verzeichnisstruktur
grails-app
- conf
- controllers
- domain
- i18n
- services
- taglib
- utils
- views
lib
s...
Konfiguration

grails-app/conf/
hibernate/
spring/
resources.groovy
ApplicationResources.groovy
BootStrap.groovy
BuildConf...
Fachklassenmodellierung
class Person {
String firstname
String lastname
String email

static constraints = {
firstname(bla...
„Groovyness“
new File('beispiel.txt').eachLine {
line -> println line
}

new Person(
firstname: 'Max', lastname: 'Musterma...
Demo: Grails

http://www.flickr.com/photos/dissolved/2514697398/
AngularJS
Erinnerung: "Single Page Web Apps"

Browser

Model
View
Controller

Server

Data

Backend
"AngularJS is a structural framework for dynamic web
apps. [...] It attempts to minimize the impedance
mismatch between do...
AngularJS im Überblick
Framework

Two-Way
Data Binding

Declarative
UI Templates

MVC with
Dependency Injection
Demo: AngularJS
Grails
&
AngularJS
Aufgabenverteilung
Browser
HTML
+ CSS
+ JavaScript
Request

Response: JSON

REST
Endpoints

Web Server

AngularJS

Grails
Optionen für die Integration bei der
Entwicklung:
Separate Projekte
AngularJS-App eingebettet als Asset
Optionen für die Integration bei der
Entwicklung:
Separate Projekte
AngularJS-App eingebettet als Asset
Optionen für die Integration bei der
Entwicklung:
Separate Projekte
AngularJS-App eingebettet als Asset
Demo
Bewertung und Fazit
Fazit (1)

Grails ermöglicht die produktive Entwicklung von MultiPage-Apps und des Backends für Single-Page-Apps.
AngularJ...
Fazit (2)
Eine Trennung in separate Projekte erlaubt die
Entkopplung von Frontend und Backend bei
Entwicklung und im Betri...
Beispiel-Code

https://github.com/opitzconsulting/tasklist-grails-angular
Links
http://grails.org
http://angularjs.org
Grails in Action, 2nd Ed., Ch. 14
http://angular-tips.com/blog/2013/08/

my-w...
Herzlichen Dank für
Ihre Aufmerksamkeit!
youtube.com/opitzconsulting
twitter.com/OC_WIRE
slideshare.net/opitzconsulting
xi...
Upcoming SlideShare
Loading in...5
×

Rapid Application Development mit Grails und AngularJS

965

Published on

http://www.opitz-consulting.com/go/3-4-894

In ihrem Vortrag bei der OOP2014 in München 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.

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
965
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Rapid Application Development mit Grails und AngularJS

  1. 1. Rapid Application Development mit Grails und AngularJS Stefan Glase Stefan Scheidt
  2. 2. Ihre Sprecher Stefan.Glase@opitz-consulting.com twitter/stefanglase github/codescape Stefan.Scheidt@opitz-consulting.com twitter/stefanscheidt github/stefanscheidt
  3. 3. Mission Märkte Wir entwickeln gemeinsam mit allen Branchen Lösungen, die dazu führen, dass sich diese Organisationen besser entwickeln als ihr Wettbewerb.  Branchenübergreifend  Über 600 Kunden Unsere Dienstleistung erfolgt partnerschaftlich und ist auf eine langjährige Zusammenarbeit angelegt. 29% Handel / Logistik / Dienstleistungen 29% Industrie / Versorger / Telekommunikation 42% Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und Verbände Leistungsangebot Eckdaten  Business IT Alignment  Business Information Management  Business Process Management  Anwendungsentwicklung  SOA und System-Integration  IT-Infrastruktur-Management  Gründung 1990  400 Mitarbeiter  9 Standorte <Präsentationstitel – bitte im Folienmaster ändern> © OPITZ CONSULTING GmbH 2011 Seite 3
  4. 4. Frontend-Architekturen
  5. 5. "Multi-Page Web Apps" Browser HTML-Page HTML Server Request UI Values Response Model View Controller Data Backend
  6. 6. "AJAX Web Apps" Browser Server Events AJAXEngine Fragments Model View Controller Data Backend
  7. 7. "Single Page Web Apps" Browser Model View Controller Server Data Backend
  8. 8. Laufzeit-Sicht "Single Page" Browser HTML + CSS + JavaScript Initiales Laden JavaScript aktualisiert DOM Response: JSON, HTML Request HTML + CSS + JavaScript Web Server REST Endpoints
  9. 9. Multi-Page-Apps sind bereits länger im Einsatz ermöglichen SEO erleichtern Bookmarking Single-Page-Apps erleichtern interaktives UI unterstützen "Thin Server Architecture" ermöglichen Offline-Betrieb bedeuten Client-Server-Entwicklung
  10. 10. Grails
  11. 11. "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 streamlined development experience." http://grails.org
  12. 12. Technologie-Unterbau Spring Groovy Grails Hibernate SiteMesh
  13. 13. Einheitliche Verzeichnisstruktur grails-app - conf - controllers - domain - i18n - services - taglib - utils - views lib scripts src - groovy - java test - integration - unit web-app
  14. 14. Konfiguration grails-app/conf/ hibernate/ spring/ resources.groovy ApplicationResources.groovy BootStrap.groovy BuildConfig.groovy Config.groovy DataSource.groovy UrlMappings.groovy
  15. 15. 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)" } }
  16. 16. „Groovyness“ new File('beispiel.txt').eachLine { line -> println line } new Person( firstname: 'Max', lastname: 'Mustermann' ).save() 100.times { println 'Hello World' }
  17. 17. Demo: Grails http://www.flickr.com/photos/dissolved/2514697398/
  18. 18. AngularJS
  19. 19. Erinnerung: "Single Page Web Apps" Browser Model View Controller Server Data Backend
  20. 20. "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
  21. 21. AngularJS im Überblick Framework Two-Way Data Binding Declarative UI Templates MVC with Dependency Injection
  22. 22. Demo: AngularJS
  23. 23. Grails & AngularJS
  24. 24. Aufgabenverteilung Browser HTML + CSS + JavaScript Request Response: JSON REST Endpoints Web Server AngularJS Grails
  25. 25. Optionen für die Integration bei der Entwicklung: Separate Projekte AngularJS-App eingebettet als Asset
  26. 26. Optionen für die Integration bei der Entwicklung: Separate Projekte AngularJS-App eingebettet als Asset
  27. 27. Optionen für die Integration bei der Entwicklung: Separate Projekte AngularJS-App eingebettet als Asset
  28. 28. Demo
  29. 29. Bewertung und Fazit
  30. 30. Fazit (1) Grails ermöglicht die produktive Entwicklung von MultiPage-Apps und des Backends für Single-Page-Apps. AngularJS ermöglicht eine produktive Entwicklung von Single-Page-Apps als Konsument eines REST Backends.
  31. 31. 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 MultiPage- und Single-Page-Architektur möglich.
  32. 32. Beispiel-Code https://github.com/opitzconsulting/tasklist-grails-angular
  33. 33. 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/
  34. 34. Herzlichen Dank für Ihre Aufmerksamkeit! youtube.com/opitzconsulting twitter.com/OC_WIRE slideshare.net/opitzconsulting xing.com/net/opitzconsulting

×