Rapid Application Development 
mit Grails und AngularJS 
Stefan Glase 
Stefan Scheidt
Eure Sprecher 
Stefan.Glase@opitz-consulting.com 
twitter/stefanglase 
github/codescape 
Stefan.Scheidt@opitz-consulting.c...
Mission 
Wir entwickeln gemeinsam mit allen 
Branchen Lösungen, die dazu führen, dass 
sich diese Organisationen besser en...
Frontend-Architekturen
"Multi-Page Web Apps" 
Browser Server 
Model 
View 
Controller 
Backend 
HTML-Page 
UI Values 
Data 
Request 
Response 
HT...
"Single Page Web Apps" 
Browser Server 
Model 
View 
Controller 
Data Backend
Laufzeit-Sicht "Single Page" 
Web Server 
REST 
Endpoints 
Browser 
HTML 
+ CSS 
+ JavaScript 
HTML 
+ CSS 
+ JavaScript 
...
AngularJS
"AngularJS is a structural framework for dynamic web 
apps. [...] It attempts to minimize the impedance 
mismatch between ...
AngularJS im Überblick 
Framework 
Declarative 
UI Templates 
Two-Way 
Data Binding 
MVC with 
Dependency Injection
Demo: AngularJS 
http://www.flickr.com/photos/dissolved/2514697398/
Grails
"Grails is an Open Source, full stack, web application 
framework for the JVM. It takes advantage of the 
Groovy programmi...
Technologie-Unterbau 
Spring Groovy 
Grails 
Hibernate SiteMesh
Einheitliche Verzeichnisstruktur 
grails-app 
- conf 
- controllers 
- domain 
- i18n 
- services 
- taglib 
- utils 
- vi...
Konfiguration 
grails-app/conf/ 
hibernate/ 
spring/ 
resources 
ApplicationResources 
BootStrap 
BuildConfig 
Config 
Dat...
Fachklassenmodellierung 
class Person { 
String firstname 
String lastname 
String email 
static constraints = { 
firstnam...
„Groovyness“ 
new File('beispiel.txt').eachLine { 
line -> println line 
} 
new Person( 
firstname: 'Max', lastname: 'Must...
Plugins
Grails 
& 
AngularJS
Aufgabenverteilung 
Web Server 
REST 
Endpoints 
Browser 
HTML 
+ CSS 
+ JavaScript 
AngularJS 
Request Response: JSON 
Gr...
Same Origin Policy 
Reverse Proxy 
Cross-origin resource sharing (CORS) 
JSON with padding (JSONP)
Same Origin Policy 
Reverse Proxy 
Cross-origin resource sharing (CORS) 
JSON with padding (JSONP)
Integration bei Entwicklung 
Separate Projekte 
AngularJS-App eingebettet als Asset
Integration bei Entwicklung 
Separate Projekte 
AngularJS-App eingebettet als Asset
Demo: Grails & AngularJS
Integration bei Entwicklung 
Separate Projekte 
AngularJS-App eingebettet als Asset
Asset Pipeline Plugin 
The Asset-Pipeline is a plugin used for 
managing and processing static assets 
in Grails applicati...
Demo: AngularJS-App als Asset
Bewertung und Fazit
Fazit (1) 
AngularJS ermöglicht eine produktive Entwicklung von 
Single-Page-Apps als Konsument eines REST-Backends. 
Grai...
Fazit (2) 
Eine Trennung in separate Projekte erlaubt die 
Entkopplung von Frontend und Backend bei 
Entwicklung und im Be...
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/ 
...
Herzlichen Dank für 
Ihre Aufmerksamkeit! 
youtube.com/opitzconsulting 
twitter.com/OC_WIRE 
slideshare.net/opitzconsultin...
Nächste SlideShare
Wird geladen in …5
×

Rapid Application Development mit Grails und AngularJS2

1.891 Aufrufe

Veröffentlicht am

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

Die ruhrjug traf sich sich am 27.11.2014 am Essener Standort unserer IT-Beratung für einen Vortrag zur schnellen Entwicklung von Web-Applikationen mit Grails und AngularJS. Die Session hielten unsere Java-Experten Stefan Glase und Stefan Scheidt.

Weitere Infos: http://www.ruhrjug.de/
--
Ü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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.891
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
32
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Same-Origin-Policy erklären!
  • Single Page Apps ...
    - erlauben interaktive Web-Applikationen ("Rich Internet Applications")
    - "entlasten" den Server und erlauben "Thin Server Architectures"/(nahezu) zustandslose Server-Apps
    - werden wie Client-Server-Applikationen entwickelt
    - können prinzipiell offline betrieben werden

    Nachteile bei ...
    - Search Engine Optimization - mögliche Lösung: SPA für Menschen, Seiten für Crawler
    - Bookmarking - mögliche Lösung: "URL hash fragments", HTML 5 History API
    - Page visit counters

    Fazit sollte sein: Hybride Lösungen sind wünschenswert

    Links:
    - http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

  • Angular ist – genau wie Grails – "opinionated"
    ... Ist das gut oder schlecht?
  • Grails ist – genau wie Angular – "opinionated"
    ... Ist das gut oder schlecht?
  • Same-Origin-Policy erklären!
  • siehe auch http://addyosmani.com/blog/making-maven-grunt/

    Gegebenenfalls zusätzliche Schritte beim Build einer SPA unter anderem:
    - Linting der JavaScript/CSS/HTML Sourcen
    - Konkatinieren und Minifizieren von JavaScript/CSS/HTML Sourcen
  • siehe auch http://addyosmani.com/blog/making-maven-grunt/

    Gegebenenfalls zusätzliche Schritte beim Build einer SPA unter anderem:
    - Linting der JavaScript/CSS/HTML Sourcen
    - Konkatinieren und Minifizieren von JavaScript/CSS/HTML Sourcen
  • siehe auch http://addyosmani.com/blog/making-maven-grunt/

    Gegebenenfalls zusätzliche Schritte beim Build einer SPA unter anderem:
    - Linting der JavaScript/CSS/HTML Sourcen
    - Konkatinieren und Minifizieren von JavaScript/CSS/HTML Sourcen
  • Rapid Application Development mit Grails und AngularJS2

    1. 1. Rapid Application Development mit Grails und AngularJS Stefan Glase Stefan Scheidt
    2. 2. Eure Sprecher Stefan.Glase@opitz-consulting.com twitter/stefanglase github/codescape Stefan.Scheidt@opitz-consulting.com twitter/stefanscheidt github/stefanscheidt
    3. 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. 4. Frontend-Architekturen
    5. 5. "Multi-Page Web Apps" Browser Server Model View Controller Backend HTML-Page UI Values Data Request Response HTML
    6. 6. "Single Page Web Apps" Browser Server Model View Controller Data Backend
    7. 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. 8. AngularJS
    9. 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. 10. AngularJS im Überblick Framework Declarative UI Templates Two-Way Data Binding MVC with Dependency Injection
    11. 11. Demo: AngularJS http://www.flickr.com/photos/dissolved/2514697398/
    12. 12. Grails
    13. 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. 14. Technologie-Unterbau Spring Groovy Grails Hibernate SiteMesh
    15. 15. Einheitliche Verzeichnisstruktur grails-app - conf - controllers - domain - i18n - services - taglib - utils - views lib scripts src - groovy - java test - integration - unit web-app
    16. 16. Konfiguration grails-app/conf/ hibernate/ spring/ resources ApplicationResources BootStrap BuildConfig Config DataSource UrlMappings
    17. 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. 18. „Groovyness“ new File('beispiel.txt').eachLine { line -> println line } new Person( firstname: 'Max', lastname: 'Mustermann' ).save() 100.times { println 'Hello World' }
    19. 19. Plugins
    20. 20. Grails & AngularJS
    21. 21. Aufgabenverteilung Web Server REST Endpoints Browser HTML + CSS + JavaScript AngularJS Request Response: JSON Grails Same Origin Policy
    22. 22. Same Origin Policy Reverse Proxy Cross-origin resource sharing (CORS) JSON with padding (JSONP)
    23. 23. Same Origin Policy Reverse Proxy Cross-origin resource sharing (CORS) JSON with padding (JSONP)
    24. 24. Integration bei Entwicklung Separate Projekte AngularJS-App eingebettet als Asset
    25. 25. Integration bei Entwicklung Separate Projekte AngularJS-App eingebettet als Asset
    26. 26. Demo: Grails & AngularJS
    27. 27. Integration bei Entwicklung Separate Projekte AngularJS-App eingebettet als Asset
    28. 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. 29. Demo: AngularJS-App als Asset
    30. 30. Bewertung und Fazit
    31. 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. 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. 33. Beispiel-Code https://github.com/opitzconsulting/tasklist-grails-angular
    34. 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. 35. Herzlichen Dank für Ihre Aufmerksamkeit! youtube.com/opitzconsulting twitter.com/OC_WIRE slideshare.net/opitzconsulting xing.com/net/opitzconsulting

    ×