SlideShare ist ein Scribd-Unternehmen logo
Reactive
Programming
mit
WHO AM I?
• Sebastian Springer
• aus München
• arbeite bei Mayflower
• https://github.com/sspringer82
• @basti_springer
• Consultant,Trainer,Autor
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:
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.org/
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 unterstützen.
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-controller="MyCtrl as vm">



{{vm.a}}

<input type="text" ng-model=“vm.a" />



</body>
Reactive Programming
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.
Client/Server-
Kommunikation
Lupo / pixelio.de
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.
Websocket
Bidirektionales Kommunikationsprotokoll parallel zu HTTP.
Wird mittlerweile recht gut unterstützt.
Falls das nicht reicht: Socket.io
Backend
$ npm install —save websocket
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);

});
Frontend
$ bower install —save angular-websocket
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'}));

}

}

});
Konflikte?
Robin Backes / pixelio.de
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.
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.
Konflikt
Konflikte können auch automatisch aufgelöst werden. Git
macht es beispielsweise bei Merges so. Solche Operationen
sind allerdings meistens sehr komplex.
War das schon alles?
Jürgen Treiber / pixelio.de
Reactive Programming
Responsive
Andreas Hermsdorf / pixelio.de
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!
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.
Wenn gespeichert wird, abschicken, Anfrage wird bearbeitet
und weitermachen lassen. Bei Fehlern, Benutzer später
informieren.
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ähig
ist.
Reactive Programming
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.
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.
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.
Elastic
*Clam* / pixelio.de
Elastic
Das System kann mit unterschiedlichen Lastverhältnissen
umgehen. Die Antwortzeiten werden auch durch viele
Zugriffe nicht negativ beeinflusst.
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.
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.
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.
Message Driven
Initiative Echte Soziale Marktwirtschaft (IESM) / pixelio.de
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.
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 die
Kommunikation über Websockets und das Backend in
Node.js basieren auf Ereignissen und deren asynchroner
Behandlung.
Man muss es nur richtig einsetzen.
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.
Fragen?
Rainer Sturm / pixelio.de
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82

Weitere ähnliche Inhalte

Was ist angesagt?

dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
Sascha Dittmann
 
Celery eine asynchrone task queue (nicht nur) für django
Celery   eine asynchrone task queue (nicht nur) für djangoCelery   eine asynchrone task queue (nicht nur) für django
Celery eine asynchrone task queue (nicht nur) für django
Markus Zapke-Gründemann
 
MicroProfile 2.x: Der alternative Standard
MicroProfile 2.x: Der alternative StandardMicroProfile 2.x: Der alternative Standard
MicroProfile 2.x: Der alternative Standard
OPEN KNOWLEDGE GmbH
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Gregor Biswanger
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Gregor Biswanger
 
WPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagWPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF Rundumschlag
Hendrik Lösch
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
Frank Müller
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
Gregor Biswanger
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Gregor Biswanger
 
Cloud Provisioning mit Juju
Cloud Provisioning mit JujuCloud Provisioning mit Juju
Cloud Provisioning mit Juju
Frank Müller
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 

Was ist angesagt? (12)

dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
 
Celery eine asynchrone task queue (nicht nur) für django
Celery   eine asynchrone task queue (nicht nur) für djangoCelery   eine asynchrone task queue (nicht nur) für django
Celery eine asynchrone task queue (nicht nur) für django
 
MicroProfile 2.x: Der alternative Standard
MicroProfile 2.x: Der alternative StandardMicroProfile 2.x: Der alternative Standard
MicroProfile 2.x: Der alternative Standard
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
 
WPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagWPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF Rundumschlag
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
 
Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1Einführung in Clean Code mit .NET - Teil 1
Einführung in Clean Code mit .NET - Teil 1
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
 
Mvc public
Mvc publicMvc public
Mvc public
 
Cloud Provisioning mit Juju
Cloud Provisioning mit JujuCloud Provisioning mit Juju
Cloud Provisioning mit Juju
 
Testing tools
Testing toolsTesting tools
Testing tools
 

Ähnlich wie Reactive Programming

Node.js
Node.jsNode.js
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
Ulrich Krause
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performance
glembotzky
 
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
QAware GmbH
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
Andreas Schulte
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
AOE
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
🙌 Christoph Häckel
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Johannes Hohenbichler
 
Einführung in nosql // ArangoDB mit Symfony 2
Einführung in nosql // ArangoDB mit Symfony 2Einführung in nosql // ArangoDB mit Symfony 2
Einführung in nosql // ArangoDB mit Symfony 2
ArangoDB Database
 
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo LatschnerNagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
NETWAYS
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
Matthias Jauernig
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
BCC - Solutions for IBM Collaboration Software
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as Code
DevOps Meetup Bern
 
Tutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrungTutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrung
tutorialsruby
 
Tutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrungTutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrung
tutorialsruby
 
Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)
triagens
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
s0enke
 
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
hwilming
 

Ähnlich wie Reactive Programming (20)

Node.js
Node.jsNode.js
Node.js
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performance
 
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Java Magazin - Lift
Java Magazin - LiftJava Magazin - Lift
Java Magazin - Lift
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
Einführung in nosql // ArangoDB mit Symfony 2
Einführung in nosql // ArangoDB mit Symfony 2Einführung in nosql // ArangoDB mit Symfony 2
Einführung in nosql // ArangoDB mit Symfony 2
 
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo LatschnerNagios Conference 2007 | Vmware Monitoring by Ingo Latschner
Nagios Conference 2007 | Vmware Monitoring by Ingo Latschner
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
 
Config as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as CodeConfig as Code: Der Weg zu Configuration as Code
Config as Code: Der Weg zu Configuration as Code
 
Tutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrungTutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrung
 
Tutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrungTutorial-XML-FastInfoset-einfuehrung
Tutorial-XML-FastInfoset-einfuehrung
 
Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
JavaAktuell - Skalierbare Cluster-Topologien mit dem JBoss AS 7
 

Mehr von Sebastian Springer

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
Sebastian Springer
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
Sebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
Sebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
Sebastian Springer
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
Sebastian Springer
 
Angular2
Angular2Angular2
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
Sebastian Springer
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
Sebastian Springer
 
Typescript
TypescriptTypescript
Typescript
Sebastian Springer
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
Sebastian Springer
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Sebastian Springer
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
Sebastian Springer
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
Sebastian Springer
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
Angular translate
Angular translateAngular translate
Angular translate
Sebastian Springer
 

Mehr von Sebastian Springer (20)

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typescript
TypescriptTypescript
Typescript
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Angular translate
Angular translateAngular translate
Angular translate
 

Reactive Programming

  • 2. WHO AM I? • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
  • 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:
  • 5. Interaktive, robuste und skalierbare Applikationen in JavaScript.
  • 6. Und weil sich das nicht so gut verkauft, machen wir Reactive Programming.
  • 7. Es gibt eine Gruppe von Leuten, die sich zu diesem Thema schon viele Gedanken gemacht hat: http://www.reactivemanifesto.org/
  • 8. JavaScript ist grundsätzlich wenig reaktiv, bringt aber Sprachelemente mit, die einen Entwickler sehr gut unterstützen.
  • 9. var a, b = 1, c = 1;
 
 a = b + c; // a == 2 b = 2; // a == 2
  • 10. Glücklicherweise gibt es Bibliotheken, Frameworks und Technologien, die uns bei der Umsetzung reaktiver Applikationen unterstützen.
  • 11. Ausgangssituation • Client • AngularJS • Server • Node.js • ExpressJS • MySQL
  • 12. Two-way Data Binding klaas hartz / pixelio.de
  • 13. https://docs.angularjs.org/guide/databinding Dieses System hat den Nachteil, dass es ab ca. 2.000 Watchern langsam wird.
  • 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>
  • 16. 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.
  • 18. 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.
  • 19. Websocket Bidirektionales Kommunikationsprotokoll parallel zu HTTP. Wird mittlerweile recht gut unterstützt. Falls das nicht reicht: Socket.io
  • 20. Backend $ npm install —save websocket
  • 21. 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);
 });
  • 22. Frontend $ bower install —save angular-websocket
  • 23. 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'}));
 }
 }
 });
  • 25. 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.
  • 26. 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.
  • 27. Konflikt Konflikte können auch automatisch aufgelöst werden. Git macht es beispielsweise bei Merges so. Solche Operationen sind allerdings meistens sehr komplex.
  • 28. War das schon alles? Jürgen Treiber / pixelio.de
  • 31. 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!
  • 32. Wie man es nicht macht:
  • 33. Auf was warte ich denn eigentlich? Was tut das System in der Zwischenzeit? und Wie lang soll das denn noch dauern?
  • 34. Zumindest keine Zeitanzeige, die dann eh nicht eingehalten wird…
  • 35. 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.
  • 37. Resilient Das System muss robust sein. Ein Fehler darf nicht dazu führen, dass das gesamte System nicht mehr funktionsfähig ist.
  • 39. 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.
  • 40. 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.
  • 41. 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.
  • 43. Elastic Das System kann mit unterschiedlichen Lastverhältnissen umgehen. Die Antwortzeiten werden auch durch viele Zugriffe nicht negativ beeinflusst.
  • 44. 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.
  • 45. 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.
  • 46. 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.
  • 47. Message Driven Initiative Echte Soziale Marktwirtschaft (IESM) / pixelio.de
  • 48. 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.
  • 49. Wie man es nicht macht: var fs = require('fs');
 
 var content = fs.readFileSync('./currencies.csv', 'utf-8');
  • 50. 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.
  • 51. 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.
  • 53. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82