Reactive
Programming
mit
WHO AM I?
• Sebastian Springer
• aus München
• arbeite bei Mayflower
• https://github.com/sspringer82
• @basti_springer
• C...
Bei der Datenverarbeitung ist Reaktive Programmierung ein
Programmierparadigma, das sich an Datenflüssen orientiert. In den...
Was wollen wir?
w.r.wagner / pixelio.de
Interaktive, robuste und skalierbare Applikationen in
JavaScript.
Und weil sich das nicht so gut verkauft, machen wir Reactive
Programming.
Es gibt eine Gruppe von Leuten, die sich zu diesem Thema
schon viele Gedanken gemacht hat:
http://www.reactivemanifesto.or...
JavaScript ist grundsätzlich wenig reaktiv, bringt aber
Sprachelemente mit, die einen Entwickler sehr gut
unterstützen.
var a, b = 1, c = 1;



a = b + c; // a == 2
b = 2;
// a == 2
Glücklicherweise gibt es Bibliotheken, Frameworks und
Technologien, die uns bei der Umsetzung reaktiver
Applikationen unte...
Ausgangssituation
• Client
• AngularJS
• Server
• Node.js
• ExpressJS
• MySQL
Two-way Data Binding
klaas hartz / pixelio.de
https://docs.angularjs.org/guide/databinding
Dieses System hat den Nachteil, dass es ab ca. 2.000
Watchern langsam wird.
angular.module('myApp', [])

.controller('MyCtrl', function MyCtrl() {

this.a = 1;

});
<body ng-app="myApp" ng-controlle...
Mit Angular lassen sich die Datenflüsse im Frontend
modellieren. Mit dem Two-way Data Binding werden die
Änderungen automat...
Client/Server-
Kommunikation
Lupo / pixelio.de
Anforderungen
Es gibt mehr als einen Client. Jeder verbundene Client darf
Informationen lesen, erstellen, ändern und lösch...
Websocket
Bidirektionales Kommunikationsprotokoll parallel zu HTTP.
Wird mittlerweile recht gut unterstützt.
Falls das nic...
Backend
$ npm install —save websocket
Backend
var WebSocketServer = require('websocket').server;



var wsServer = new WebSocketServer({

httpServer: server,

a...
Frontend
$ bower install —save angular-websocket
Frontend
angular.module('myApp', ['ngWebSocket'])

.factory('data', function ($websocket) {

var dataStream = $websocket('...
Konflikte?
Robin Backes / pixelio.de
Konflikt
Greifen mehrere Benutzer auf einen Datensatz schreibend
zu (editieren oder löschen), kommt es zu einem Konflikt.
Di...
Konflikt
Eine weitere Lösung liegt im Sperren von Datensätzen.
Bearbeiten/Löschen-Funktionen werden per Websocket-
Nachrich...
Konflikt
Konflikte können auch automatisch aufgelöst werden. Git
macht es beispielsweise bei Merges so. Solche Operationen
s...
War das schon alles?
Jürgen Treiber / pixelio.de
Responsive
Andreas Hermsdorf / pixelio.de
Responsive
Schnelle und direkte Rückmeldung. Usability ist gegeben.
Der Benutzer weiß zu jedem Zeitpunkt, was die Applikat...
Wie man es nicht macht:
Auf was warte ich denn eigentlich?
Was tut das System in der Zwischenzeit?
und
Wie lang soll das denn noch dauern?
Zumindest keine Zeitanzeige, die dann eh nicht eingehalten
wird…
Responsive
Am besten sollte der Benutzer überhaupt nicht warten
müssen. Also prefetching, caching und ähnliches nutzen.
We...
Resilient
lichtkunst.73 / pixelio.de
Resilient
Das System muss robust sein. Ein Fehler darf nicht dazu
führen, dass das gesamte System nicht mehr funktionsfähi...
Resilient - Subsysteme
Das System besteht aus einer Vielzahl von möglichst
unabhängigen Subsystemen.
Funktioniert ein Subs...
Resilient - Fehlerbehandlung
Auf Error-Events reagieren. Fehlerobjekte in Callback-
Funktionen beachten. Try-Catch-Blöcke ...
Resilient - Backend
Prozesse im Fehlerfall neu starten. Aber Vorsicht vor
Endlosschleifen.
Logging von Fehlern, Nachrichte...
Elastic
*Clam* / pixelio.de
Elastic
Das System kann mit unterschiedlichen Lastverhältnissen
umgehen. Die Antwortzeiten werden auch durch viele
Zugriff...
Wie man es nicht macht:
Die Applikation kann zwischen 9:00 Uhr und 11:00 Uhr nicht
verwendet werden, weil zu viele Benutze...
Elastic - Node
Node ist Single-Threaded. Blockierende Routinen bringen
die komplette Applikation zum Stehen.
Das child_pro...
Elastic - System
Jede Komponente sollte mehrfach vorhanden sein.
Mehrere Backend-Knoten hinter einem Loadbalancer (z.B.
Ng...
Message Driven
Initiative Echte Soziale Marktwirtschaft (IESM) / pixelio.de
Message Driven
Entkopplung der Systemkomponenten. Senden von
Nachrichten und asynchrone Behandlung. Mehrere
Subsysteme kön...
Wie man es nicht macht:
var fs = require('fs');



var content = fs.readFileSync('./currencies.csv', 'utf-8');
Message Driven
Eigentlich basiert das komplette System schon auf dem Fluss
von Nachrichten. Sowohl das Frontend als auch d...
Reactive
Entkoppelt - Einzelne Subsysteme können ausgetauscht
werden.
Flexibel - Systeme können gut auf geänderte Anforder...
Fragen?
Rainer Sturm / pixelio.de
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti...
Reactive Programming
Reactive Programming
Reactive Programming
Nächste SlideShare
Wird geladen in …5
×

Reactive Programming

1.447 Aufrufe

Veröffentlicht am

Reactive Programming mit AngularJS und Node.js.
Wie erstelle ich interaktive, robuste und skalierbare Applikationen in JavaScript.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Reactive Programming

  1. 1. Reactive Programming mit
  2. 2. WHO AM I? • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
  3. 3. Bei der Datenverarbeitung ist Reaktive Programmierung ein Programmierparadigma, das sich an Datenflüssen orientiert. In den zugeordneten Programmiersprachen sind statische oder dynamische Datenflüsse leicht auszudrücken. Das zugrunde liegende Ausführungsmodell propagiert Änderungen in den Datenflüssen automatisch. Wikipedia meint:
  4. 4. Was wollen wir? w.r.wagner / pixelio.de
  5. 5. Interaktive, robuste und skalierbare Applikationen in JavaScript.
  6. 6. Und weil sich das nicht so gut verkauft, machen wir Reactive Programming.
  7. 7. Es gibt eine Gruppe von Leuten, die sich zu diesem Thema schon viele Gedanken gemacht hat: http://www.reactivemanifesto.org/
  8. 8. JavaScript ist grundsätzlich wenig reaktiv, bringt aber Sprachelemente mit, die einen Entwickler sehr gut unterstützen.
  9. 9. var a, b = 1, c = 1;
 
 a = b + c; // a == 2 b = 2; // a == 2
  10. 10. Glücklicherweise gibt es Bibliotheken, Frameworks und Technologien, die uns bei der Umsetzung reaktiver Applikationen unterstützen.
  11. 11. Ausgangssituation • Client • AngularJS • Server • Node.js • ExpressJS • MySQL
  12. 12. Two-way Data Binding klaas hartz / pixelio.de
  13. 13. https://docs.angularjs.org/guide/databinding Dieses System hat den Nachteil, dass es ab ca. 2.000 Watchern langsam wird.
  14. 14. angular.module('myApp', [])
 .controller('MyCtrl', function MyCtrl() {
 this.a = 1;
 }); <body ng-app="myApp" ng-controller="MyCtrl as vm">
 
 {{vm.a}}
 <input type="text" ng-model=“vm.a" />
 
 </body>
  15. 15. Mit Angular lassen sich die Datenflüsse im Frontend modellieren. Mit dem Two-way Data Binding werden die Änderungen automatisch propagiert. Aber nur auf Clientseite.
  16. 16. Client/Server- Kommunikation Lupo / pixelio.de
  17. 17. Anforderungen Es gibt mehr als einen Client. Jeder verbundene Client darf Informationen lesen, erstellen, ändern und löschen. Alle Clients müssen über Änderungen benachrichtigt werden bzw. die Änderungen müssen automatisch propagiert werden. HTTP ist unidirektional - also brauchen wir eine Alternative.
  18. 18. Websocket Bidirektionales Kommunikationsprotokoll parallel zu HTTP. Wird mittlerweile recht gut unterstützt. Falls das nicht reicht: Socket.io
  19. 19. Backend $ npm install —save websocket
  20. 20. Backend var WebSocketServer = require('websocket').server;
 
 var wsServer = new WebSocketServer({
 httpServer: server,
 autoAcceptConnections: false
 });
 
 wsServer.on('request', function (request) {
 var connection = request.accept('myApp', request.origin);
 
 connection.on('message', function (message) {
 
 });
 
 connection.sendUTF(data);
 });
  21. 21. Frontend $ bower install —save angular-websocket
  22. 22. Frontend angular.module('myApp', ['ngWebSocket'])
 .factory('data', function ($websocket) {
 var dataStream = $websocket('wss://localhost:8080/myApp');
 
 var collection = [];
 
 dataStream.onMessage(function(message) {
 collection.push(JSON.parse(message.data));
 });
 
 return {
 collection: collection,
 get: function () {
 dataStream.send(JSON.stringify({action: 'get'}));
 }
 }
 });
  23. 23. Konflikte? Robin Backes / pixelio.de
  24. 24. Konflikt Greifen mehrere Benutzer auf einen Datensatz schreibend zu (editieren oder löschen), kommt es zu einem Konflikt. Die einfachste Lösung lautet: Derjenige, der zuletzt schreibt, gewinnt.
  25. 25. Konflikt Eine weitere Lösung liegt im Sperren von Datensätzen. Bearbeiten/Löschen-Funktionen werden per Websocket- Nachricht deaktivert und erst aktiviert, wenn die Daten geändert sind.
  26. 26. Konflikt Konflikte können auch automatisch aufgelöst werden. Git macht es beispielsweise bei Merges so. Solche Operationen sind allerdings meistens sehr komplex.
  27. 27. War das schon alles? Jürgen Treiber / pixelio.de
  28. 28. Responsive Andreas Hermsdorf / pixelio.de
  29. 29. Responsive Schnelle und direkte Rückmeldung. Usability ist gegeben. Der Benutzer weiß zu jedem Zeitpunkt, was die Applikation tut. Fehler werden schnell bemerkt und der Benutzer darüber in Kenntnis gesetzt. Responsiveness hat nichts mit dem Responsive Layout zu tun!
  30. 30. Wie man es nicht macht:
  31. 31. Auf was warte ich denn eigentlich? Was tut das System in der Zwischenzeit? und Wie lang soll das denn noch dauern?
  32. 32. Zumindest keine Zeitanzeige, die dann eh nicht eingehalten wird…
  33. 33. Responsive Am besten sollte der Benutzer überhaupt nicht warten müssen. Also prefetching, caching und ähnliches nutzen. Wenn gespeichert wird, abschicken, Anfrage wird bearbeitet und weitermachen lassen. Bei Fehlern, Benutzer später informieren.
  34. 34. Resilient lichtkunst.73 / pixelio.de
  35. 35. Resilient Das System muss robust sein. Ein Fehler darf nicht dazu führen, dass das gesamte System nicht mehr funktionsfähig ist.
  36. 36. Resilient - Subsysteme Das System besteht aus einer Vielzahl von möglichst unabhängigen Subsystemen. Funktioniert ein Subsystem nicht, muss das übrige System trotzdem funktionsfähig sein.
  37. 37. Resilient - Fehlerbehandlung Auf Error-Events reagieren. Fehlerobjekte in Callback- Funktionen beachten. Try-Catch-Blöcke einbauen, hier auf asynchrone Funktionen achten. Den Benutzer über einen Fehler in Kenntnis setzen und die Situation möglichst korrigieren. Fehler möglichst protokollieren.
  38. 38. Resilient - Backend Prozesse im Fehlerfall neu starten. Aber Vorsicht vor Endlosschleifen. Logging von Fehlern, Nachrichten an Admins versenden (E- Mail, SMS, Jabber). Failover - der Loadbalancer schickt Benutzer bei einem Ausfall an andere Systeme.
  39. 39. Elastic *Clam* / pixelio.de
  40. 40. Elastic Das System kann mit unterschiedlichen Lastverhältnissen umgehen. Die Antwortzeiten werden auch durch viele Zugriffe nicht negativ beeinflusst.
  41. 41. Wie man es nicht macht: Die Applikation kann zwischen 9:00 Uhr und 11:00 Uhr nicht verwendet werden, weil zu viele Benutzer die Dienste nutzen. Der eine(!) Datenbankserver ist ausgefallen - nix geht mehr.
  42. 42. Elastic - Node Node ist Single-Threaded. Blockierende Routinen bringen die komplette Applikation zum Stehen. Das child_process- und cluster-Modul schaffen Abhilfe, indem sie Kindprozesse erzeugen und die Arbeit verteilen. Mehr Kindprozesse als Prozessorkerne bringen in den seltensten Fällen einen Mehrwert.
  43. 43. Elastic - System Jede Komponente sollte mehrfach vorhanden sein. Mehrere Backend-Knoten hinter einem Loadbalancer (z.B. Nginx). Auch Websocket-Verbindungen können durch den Loadbalancer verteilt werden. Datenbanksysteme durch Cluster ausfallsicher halten. Bei Bedarf können zusätzliche Systeme zugeschaltet werden.
  44. 44. Message Driven Initiative Echte Soziale Marktwirtschaft (IESM) / pixelio.de
  45. 45. Message Driven Entkopplung der Systemkomponenten. Senden von Nachrichten und asynchrone Behandlung. Mehrere Subsysteme können eine Nachricht unabhängig voneinander empfangen. Ziel ist eine nicht-blockierende Abarbeitung. Einsatz von Message Queues zur kontrollierten Abarbeitung von Nachrichten.
  46. 46. Wie man es nicht macht: var fs = require('fs');
 
 var content = fs.readFileSync('./currencies.csv', 'utf-8');
  47. 47. Message Driven Eigentlich basiert das komplette System schon auf dem Fluss von Nachrichten. Sowohl das Frontend als auch die Kommunikation über Websockets und das Backend in Node.js basieren auf Ereignissen und deren asynchroner Behandlung. Man muss es nur richtig einsetzen.
  48. 48. Reactive Entkoppelt - Einzelne Subsysteme können ausgetauscht werden. Flexibel - Systeme können gut auf geänderte Anforderungen reagieren. Skalierbar - Das System kann mit mehr Last umgehen. Interaktiv - Der Benutzer weiß zu jeder Zeit, wo er steht und was das System macht.
  49. 49. Fragen? Rainer Sturm / pixelio.de
  50. 50. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82

×