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.

1. - Björn Wilmsmann -
ZenQuery - Enterprise
Backend as a Service
Single Page Applications
mit AngularJS und Spring MVC

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. Technologien
• AngularJS
• Spring Web MVC
• REST
• JSON
• JdbcTemplate
• PostgreSQL (und H2, Oracle, MySQL …)

4. Warum Spring Web
MVC?

5. Warum AngularJS?

6. "I’ll use Go, Rust and
MongoDB for the
back end and Dart or
CoffeeScript for the
front end"

7. WTF?!

9. Problemlösungen
statt Technologie
als Selbstzweck

10. AngularJS
• Single Page Applications
• MVVM: Model View ViewModel
• MVW: Model View Whatever
• Two-Way Data Binding
• Directives

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

12. Model
• Services
• Factories
• Providers

13. View
• Directives
• wieder verwendbare HTML View
Komponenten
• eigene HTML Tags
• {{ interpolated_variables }}

14. ViewModel
• Controllers
• nicht mit Controller aus MVC zu
verwechseln
• eher: Scope
• Modules
• fassen Features und wiederverwendbare
Komponenten logisch zusammen

15. Dependency Injection
• Von Spring "abgeguckt"
• Abhängigkeiten können wo benötigt
eingebunden werden
• Controller
• Service
• …

16. Routing
• Erlaubt Zuordnung von Controllern und
Views zu URLs und Parametern
• Erlaubt Deep Links in Single Page
Applications
• /ui/index.html#/databaseConnections

17. Services
• Einbindung externer Ressourcen
• z.B. REST APIs
• Shared Functionality
• Entsprechen dem Model

18. Kommunikation
• $scope
• Dient dem Austausch von Daten
• Two-Way Data Binding
• völlig automatisch … meistens
• $scope.$apply

19. Exkurs: Promises
• JavaScript ist single-threaded
• Nebenläufigkeit über Events
• Callbacks und Callback Hell
• Promises: Einfache Syntax auch für
komplexe Callback Szenarios

20. Exkurs: Promises

21. Exkurs: Promises

22. Testbarkeit
• AngularJS: Testbarkeit als Design Kriterium
• Jasmine: BDD Framework
• BDD: Behaviour Driven Development
• e2e Testing: Protractor

23. Spring Web MVC
• Eigenes Spring Web Framework
• "Antwort" auf Probleme mit Struts
• Request-basiert
• Eng mit Servlet API gekoppelt
• Aber: Hohes Abstraktionsniveau

24. AbstractInterruptibleBatch
PreparedStatementSetter
and
AbstractSingleton
ProxyFactoryBean
no more!

25. Subjektiv: Spring 4 geht
deutlich leichter von der
Hand als frühere Spring
Versionen.
Subjektiv:

26. Spring Web MVC
• URL Mapping
• Controllers
• Views
• Forms
• Form Tags
• Model: Key-Value Map
• Annotations

27. Annotations
• @Controller
• @RequestMapping
• @ResponseBody
• @PathVariable
• @MatrixVariable
• @RequestMethod
• @RequestParam

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

29. Ein paar gängige
Probleme …

30. "There are only two hard
things in Computer Science:
Cache invalidation, naming
things, and off-by-one
errors."

31. Caching
• Wann sollte man REST Anfragen cachen?
• Wann sollte man den Cache leeren?
• It depends …
• SELECT, INSERT, UPDATE, DELETE
• @Cacheable, @CacheEvict

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

33. XML Conversion
• XML Konvertierung von Java Objekten
funktioniert nicht out-of-the-box
• Jackson
• XStream
• MapEntryConverter

34. CSV Ausgabe
• Muss manuell programmiert werden
• Eigener CSV Builder
• StringBuilder

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

36. Build Prozess

41. ZenQuery

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

44. Björn Wilmsmann
Stefan-George-Str. 15a
46117 Oberhausen
!
Website: http://wilmsmann.de
eMail: bjoern@wilmsmann.de
Tel.: +49-151-25209060