- 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

• REST APIs für Datenbanktabellen und SQL Queries

• SELECT * FROM … -> JSON, XML, CSV …

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ösungenstatt Technologieals Selbstzweck

AngularJS

• Single Page Applications

• MVVM: Model View ViewModel

• MVW: Model View Whatever

• Two-Way Data Binding

• Directives

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

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 wiederverwendbare Komponenten logisch zusammen

Dependency Injection

• Von Spring "abgeguckt"

• Abhängigkeiten können wo benötigt eingebunden werden

• Controller

• Service

• …

Routing

• Erlaubt Zuordnung von Controllern und Views zu URLs und Parametern

• Erlaubt Deep Links in Single Page Applications

• /ui/index.html#/databaseConnections

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.$apply

Exkurs: Promises

• JavaScript ist single-threaded

• Nebenläufigkeit über Events

• Callbacks und Callback Hell

• Promises: Einfache Syntax auch für komplexe Callback Szenarios

Exkurs: Promises

Exkurs: Promises

Testbarkeit

• AngularJS: Testbarkeit als Design Kriterium

• Jasmine: BDD Framework

• BDD: Behaviour Driven Development

• e2e Testing: Protractor

Spring Web MVC

• Eigenes Spring Web Framework

• "Antwort" auf Probleme mit Struts

• Request-basiert

• Eng mit Servlet API gekoppelt

• Aber: Hohes Abstraktionsniveau

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

• @RequestParam

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

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, UPDATE, DELETE

• @Cacheable, @CacheEvict

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

XML Conversion

• XML Konvertierung von Java Objekten funktioniert nicht out-of-the-box

• Jackson

• XStream

• MapEntryConverter

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, you name it …

• Keine Single Best Practice hinsichtlich Struktur und Komponenten

• IDEs wie Intellij IDEA bieten Templates als Abhilfe

Build Prozess

ZenQuery

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/

Björn WilmsmannStefan-George-Str. 15a 46117 Oberhausen !

Website: http://wilmsmann.de eMail: bjoern@wilmsmann.de Tel.: +49-151-25209060