- Björn Wilmsmann -
ZenQuery - Enterprise
Backend as a Service
Single Page Applications
mit AngularJS und Spring MVC
ZenQuery
• Enterprise Backend as a Service
• Unternehmen horten Daten in Silos
• ZenQuery macht diese Daten verfügbar
• RE...
Technologien
• AngularJS
• Spring Web MVC
• REST
• JSON
• JdbcTemplate
• PostgreSQL (und H2, Oracle, MySQL …)
Warum Spring Web
MVC?
Warum AngularJS?
"I’ll use Go, Rust and
MongoDB for the
back end and Dart or
CoffeeScript for the
front end"
WTF?!
Problemlösungen
statt Technologie
als Selbstzweck
AngularJS
• Single Page Applications
• MVVM: Model View ViewModel
• MVW: Model View Whatever
• Two-Way Data Binding
• Dire...
Single Page Apps
• UX ähnlich Desktop Anwendungen
• Sämtlicher Code - HTML, CSS, JS - wird
beim ersten Aufruf vollständig ...
Model
• Services
• Factories
• Providers
View
• Directives
• wieder verwendbare HTML View
Komponenten
• eigene HTML Tags
• {{ interpolated_variables }}
ViewModel
• Controllers
• nicht mit Controller aus MVC zu
verwechseln
• eher: Scope
• Modules
• fassen Features und wieder...
Dependency Injection
• Von Spring "abgeguckt"
• Abhängigkeiten können wo benötigt
eingebunden werden
• Controller
• Servic...
Routing
• Erlaubt Zuordnung von Controllern und
Views zu URLs und Parametern
• Erlaubt Deep Links in Single Page
Applicati...
Services
• Einbindung externer Ressourcen
• z.B. REST APIs
• Shared Functionality
• Entsprechen dem Model
Kommunikation
• $scope
• Dient dem Austausch von Daten
• Two-Way Data Binding
• völlig automatisch … meistens
• $scope.$ap...
Exkurs: Promises
• JavaScript ist single-threaded
• Nebenläufigkeit über Events
• Callbacks und Callback Hell
• Promises: ...
Exkurs: Promises
Exkurs: Promises
Testbarkeit
• AngularJS: Testbarkeit als Design Kriterium
• Jasmine: BDD Framework
• BDD: Behaviour Driven Development
• e...
Spring Web MVC
• Eigenes Spring Web Framework
• "Antwort" auf Probleme mit Struts
• Request-basiert
• Eng mit Servlet API ...
AbstractInterruptibleBatch
PreparedStatementSetter
and
AbstractSingleton
ProxyFactoryBean
no more!
Subjektiv: Spring 4 geht
deutlich leichter von der
Hand als frühere Spring
Versionen.
Subjektiv:
Spring Web MVC
• URL Mapping
• Controllers
• Views
• Forms
• Form Tags
• Model: Key-Value Map
• Annotations
Annotations
• @Controller
• @RequestMapping
• @ResponseBody
• @PathVariable
• @MatrixVariable
• @RequestMethod
• @RequestP...
Spring als REST
Backend
• Controller dienen als REST API Endpoints
• Views sind JSON, XML, CSV Ausgaben
• POJOs automatisc...
Ein paar gängige
Probleme …
"There are only two hard
things in Computer Science:
Cache invalidation, naming
things, and off-by-one
errors."
Caching
• Wann sollte man REST Anfragen cachen?
• Wann sollte man den Cache leeren?
• It depends …
• SELECT, INSERT, UPDAT...
CORS
• Cross-Origin Resource Sharing
• JavaScript Beschränkung
• Request nur innerhalb des gleichen Hosts
• Problem währen...
XML Conversion
• XML Konvertierung von Java Objekten
funktioniert nicht out-of-the-box
• Jackson
• XStream
• MapEntryConve...
CSV Ausgabe
• Muss manuell programmiert werden
• Eigener CSV Builder
• StringBuilder
Bootstrapping
• Initialaufwand ist bei Java immer noch
sehr hoch (im Vergleich zu Rails und Co.)
• Maven, Jetty, Spring, y...
Build Prozess
ZenQuery
Links
• http://www.zenqry.com/
• https://angularjs.org/
• http://docs.spring.io/spring/docs/current/
spring-framework-refe...
Björn Wilmsmann

Stefan-George-Str. 15a

46117 Oberhausen
!
Website: http://wilmsmann.de 

eMail: bjoern@wilmsmann.de

Tel...
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC
Nächste SlideShare
Wird geladen in …5
×

"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC

714 Aufrufe

Veröffentlicht am


Single Page Applications haben in letzter Zeit deutlich an Bedeutung gewonnen. Single Page Applications kombinieren die Vorteile von herkömmlichen Web Anwendungen - dynamisches Verhalten, Vernetzung und einfachen Zugriff über den Browser - mit denen von klassischen Desktop Client Anwendungen: Offline Verfügbarkeit, schnelle Antwortzeiten und Geschwindigkeit.

Bei Single Page Applications wird ein Großteil der Anwendungslogik, insbesondere User Interface Verhalten in den Client verlegt. Üblicherweise dient dabei eine schlanke Serverschicht weiterhin als Back End. Single Page Applications funktionieren so auch offline und können sich bei Bedarf und Verfügbarkeit einer Internetverbindung jederzeit wieder mit dem Back End synchronisieren.

Mittels AngularJS lassen sich Single Page Applications schnell und strukturiert entwickeln. Spring Web MVC ist wiederum gut geeignet, um als Back End für eine solche Anwendung zu fungieren.

Am konkreten Beispiel von ZenQuery wird vorgestellt, wie man eine Single Page Application mit AngularJS und Spring Web MVC entwickelt.

ZenQuery ist ein 'Enterprise Backend as a Service'. Viele Unternehmen verfügen über große, in zahlreichen Datenbanken gespeicherte Informationsmengen. Der Zugriff auf diese Datensilos ist oft aufwendig und erfordert erheblichen individuellen Entwicklungsaufwand. ZenQuery löst dieses Problem durch Bereitstellung einer REST API für Datenbanktabellen und SQL-Abfragen. ZenQuery ermöglicht es so, auf einfache Weise auf beliebige Datenbankinhalte in verschiedenen Formaten (u.a. JSON, XML, CSV und HTML) zuzugreifen.

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
714
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
23
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC

  1. 1. - Björn Wilmsmann - ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC
  2. 2. ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese Daten verfügbar • REST APIs für Datenbanktabellen und SQL Queries • SELECT * FROM … -> JSON, XML, CSV …
  3. 3. Technologien • AngularJS • Spring Web MVC • REST • JSON • JdbcTemplate • PostgreSQL (und H2, Oracle, MySQL …)
  4. 4. Warum Spring Web MVC?
  5. 5. Warum AngularJS?
  6. 6. "I’ll use Go, Rust and MongoDB for the back end and Dart or CoffeeScript for the front end"
  7. 7. WTF?!
  8. 8. Problemlösungen statt Technologie als Selbstzweck
  9. 9. AngularJS • Single Page Applications • MVVM: Model View ViewModel • MVW: Model View Whatever • Two-Way Data Binding • Directives
  10. 10. Single Page Apps • UX ähnlich Desktop Anwendungen • Sämtlicher Code - HTML, CSS, JS - wird beim ersten Aufruf vollständig geladen • Keine vollständigen Reloads • Statt dessen: Partielle DOM Aktualisierung
  11. 11. Model • Services • Factories • Providers
  12. 12. View • Directives • wieder verwendbare HTML View Komponenten • eigene HTML Tags • {{ interpolated_variables }}
  13. 13. ViewModel • Controllers • nicht mit Controller aus MVC zu verwechseln • eher: Scope • Modules • fassen Features und wiederverwendbare Komponenten logisch zusammen
  14. 14. Dependency Injection • Von Spring "abgeguckt" • Abhängigkeiten können wo benötigt eingebunden werden • Controller • Service • …
  15. 15. Routing • Erlaubt Zuordnung von Controllern und Views zu URLs und Parametern • Erlaubt Deep Links in Single Page Applications • /ui/index.html#/databaseConnections
  16. 16. Services • Einbindung externer Ressourcen • z.B. REST APIs • Shared Functionality • Entsprechen dem Model
  17. 17. Kommunikation • $scope • Dient dem Austausch von Daten • Two-Way Data Binding • völlig automatisch … meistens • $scope.$apply
  18. 18. Exkurs: Promises • JavaScript ist single-threaded • Nebenläufigkeit über Events • Callbacks und Callback Hell • Promises: Einfache Syntax auch für komplexe Callback Szenarios
  19. 19. Exkurs: Promises
  20. 20. Exkurs: Promises
  21. 21. Testbarkeit • AngularJS: Testbarkeit als Design Kriterium • Jasmine: BDD Framework • BDD: Behaviour Driven Development • e2e Testing: Protractor
  22. 22. Spring Web MVC • Eigenes Spring Web Framework • "Antwort" auf Probleme mit Struts • Request-basiert • Eng mit Servlet API gekoppelt • Aber: Hohes Abstraktionsniveau
  23. 23. AbstractInterruptibleBatch PreparedStatementSetter and AbstractSingleton ProxyFactoryBean no more!
  24. 24. Subjektiv: Spring 4 geht deutlich leichter von der Hand als frühere Spring Versionen. Subjektiv:
  25. 25. Spring Web MVC • URL Mapping • Controllers • Views • Forms • Form Tags • Model: Key-Value Map • Annotations
  26. 26. Annotations • @Controller • @RequestMapping • @ResponseBody • @PathVariable • @MatrixVariable • @RequestMethod • @RequestParam
  27. 27. Spring als REST Backend • Controller dienen als REST API Endpoints • Views sind JSON, XML, CSV Ausgaben • POJOs automatisch in JSON konvertiert • Werden vom Front End weiter verarbeitet
  28. 28. Ein paar gängige Probleme …
  29. 29. "There are only two hard things in Computer Science: Cache invalidation, naming things, and off-by-one errors."
  30. 30. Caching • Wann sollte man REST Anfragen cachen? • Wann sollte man den Cache leeren? • It depends … • SELECT, INSERT, UPDATE, DELETE • @Cacheable, @CacheEvict
  31. 31. CORS • Cross-Origin Resource Sharing • JavaScript Beschränkung • Request nur innerhalb des gleichen Hosts • Problem während der Entwicklung • Eigener Response Header nötig: CORSFilter
  32. 32. XML Conversion • XML Konvertierung von Java Objekten funktioniert nicht out-of-the-box • Jackson • XStream • MapEntryConverter
  33. 33. CSV Ausgabe • Muss manuell programmiert werden • Eigener CSV Builder • StringBuilder
  34. 34. Bootstrapping • Initialaufwand ist bei Java immer noch sehr hoch (im Vergleich zu Rails und Co.) • Maven, Jetty, Spring, you name it … • Keine Single Best Practice hinsichtlich Struktur und Komponenten • IDEs wie Intellij IDEA bieten Templates als Abhilfe
  35. 35. Build Prozess
  36. 36. ZenQuery
  37. 37. Links • http://www.zenqry.com/ • https://angularjs.org/ • http://docs.spring.io/spring/docs/current/ spring-framework-reference/html/mvc.html • https://circleci.com/ • https://heroku.com/ • http://www.divshot.com/
  38. 38. Björn Wilmsmann
 Stefan-George-Str. 15a
 46117 Oberhausen ! Website: http://wilmsmann.de 
 eMail: bjoern@wilmsmann.de
 Tel.: +49-151-25209060

×