![Page 1: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/1.jpg)
- Björn Wilmsmann -
ZenQuery - Enterprise Backend as a Service
Single Page Applications mit AngularJS und Spring MVC
![Page 2: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/2.jpg)
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 …
![Page 3: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/3.jpg)
Technologien
• AngularJS
• Spring Web MVC
• REST
• JSON
• JdbcTemplate
• PostgreSQL (und H2, Oracle, MySQL …)
![Page 4: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/4.jpg)
Warum Spring Web MVC?
![Page 5: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/5.jpg)
Warum AngularJS?
![Page 6: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/6.jpg)
"I’ll use Go, Rust and MongoDB for the
back end and Dart or CoffeeScript for the
front end"
![Page 7: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/7.jpg)
WTF?!
![Page 8: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/8.jpg)
![Page 9: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/9.jpg)
Problemlösungenstatt Technologieals Selbstzweck
![Page 10: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/10.jpg)
AngularJS
• Single Page Applications
• MVVM: Model View ViewModel
• MVW: Model View Whatever
• Two-Way Data Binding
• Directives
![Page 11: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/11.jpg)
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
![Page 12: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/12.jpg)
Model
• Services
• Factories
• Providers
![Page 13: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/13.jpg)
View
• Directives
• wieder verwendbare HTML View Komponenten
• eigene HTML Tags
• {{ interpolated_variables }}
![Page 14: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/14.jpg)
ViewModel• Controllers
• nicht mit Controller aus MVC zu verwechseln
• eher: Scope
• Modules
• fassen Features und wiederverwendbare Komponenten logisch zusammen
![Page 15: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/15.jpg)
Dependency Injection
• Von Spring "abgeguckt"
• Abhängigkeiten können wo benötigt eingebunden werden
• Controller
• Service
• …
![Page 16: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/16.jpg)
Routing
• Erlaubt Zuordnung von Controllern und Views zu URLs und Parametern
• Erlaubt Deep Links in Single Page Applications
• /ui/index.html#/databaseConnections
![Page 17: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/17.jpg)
Services
• Einbindung externer Ressourcen
• z.B. REST APIs
• Shared Functionality
• Entsprechen dem Model
![Page 18: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/18.jpg)
Kommunikation
• $scope
• Dient dem Austausch von Daten
• Two-Way Data Binding
• völlig automatisch … meistens
• $scope.$apply
![Page 19: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/19.jpg)
Exkurs: Promises
• JavaScript ist single-threaded
• Nebenläufigkeit über Events
• Callbacks und Callback Hell
• Promises: Einfache Syntax auch für komplexe Callback Szenarios
![Page 20: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/20.jpg)
Exkurs: Promises
![Page 21: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/21.jpg)
Exkurs: Promises
![Page 22: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/22.jpg)
Testbarkeit
• AngularJS: Testbarkeit als Design Kriterium
• Jasmine: BDD Framework
• BDD: Behaviour Driven Development
• e2e Testing: Protractor
![Page 23: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/23.jpg)
Spring Web MVC
• Eigenes Spring Web Framework
• "Antwort" auf Probleme mit Struts
• Request-basiert
• Eng mit Servlet API gekoppelt
• Aber: Hohes Abstraktionsniveau
![Page 24: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/24.jpg)
AbstractInterruptibleBatch PreparedStatementSetter
and AbstractSingleton ProxyFactoryBean
no more!
![Page 25: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/25.jpg)
Subjektiv: Spring 4 geht deutlich leichter von der Hand als frühere Spring Versionen.
Subjektiv:
![Page 26: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/26.jpg)
Spring Web MVC• URL Mapping
• Controllers
• Views
• Forms
• Form Tags
• Model: Key-Value Map
• Annotations
![Page 27: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/27.jpg)
Annotations• @Controller
• @RequestMapping
• @ResponseBody
• @PathVariable
• @MatrixVariable
• @RequestMethod
• @RequestParam
![Page 28: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/28.jpg)
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
![Page 29: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/29.jpg)
Ein paar gängige Probleme …
![Page 30: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/30.jpg)
"There are only two hard things in Computer Science: Cache invalidation, naming
things, and off-by-one errors."
![Page 31: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/31.jpg)
Caching
• Wann sollte man REST Anfragen cachen?
• Wann sollte man den Cache leeren?
• It depends …
• SELECT, INSERT, UPDATE, DELETE
• @Cacheable, @CacheEvict
![Page 32: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/32.jpg)
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
![Page 33: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/33.jpg)
XML Conversion
• XML Konvertierung von Java Objekten funktioniert nicht out-of-the-box
• Jackson
• XStream
• MapEntryConverter
![Page 34: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/34.jpg)
CSV Ausgabe
• Muss manuell programmiert werden
• Eigener CSV Builder
• StringBuilder
![Page 35: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/35.jpg)
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
![Page 36: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/36.jpg)
Build Prozess
![Page 37: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/37.jpg)
![Page 38: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/38.jpg)
![Page 39: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/39.jpg)
![Page 40: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/40.jpg)
![Page 41: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/41.jpg)
ZenQuery
![Page 42: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/42.jpg)
![Page 43: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/43.jpg)
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/
![Page 44: ZenQuery - Enterprise Backend as a Service - Enterprise Backend as a... · ZenQuery • Enterprise Backend as a Service • Unternehmen horten Daten in Silos • ZenQuery macht diese](https://reader030.vdocuments.mx/reader030/viewer/2022040122/5f06f4cb7e708231d41a936a/html5/thumbnails/44.jpg)
Björn WilmsmannStefan-George-Str. 15a 46117 Oberhausen !
Website: http://wilmsmann.de eMail: [email protected] Tel.: +49-151-25209060