Downloaden Sie, um offline zu lesen
![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>](https://image.slidesharecdn.com/reactiveprogramming-150609064220-lva1-app6891/75/Reactive-Programming-14-2048.jpg)
![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'}));
}
}
});](https://image.slidesharecdn.com/reactiveprogramming-150609064220-lva1-app6891/75/Reactive-Programming-23-2048.jpg)
Hochgeladen vonSebastian Springer
Reactive Programming
Das Dokument erklärt das Konzept der reaktiven Programmierung, die sich um Datenflüsse kümmert und automatisch Änderungen propagiert. Es beschreibt die Verwendung von Technologien wie AngularJS und WebSockets zur Erstellung interaktiver, robuster und skalierbarer Anwendungen sowie die Handhabung von Konflikten und Fehlern. Der Text betont die Wichtigkeit von Responsiveness, Resilienz und elastischen Systemen in der modernen Softwareentwicklung.
Reactive Programming
- 1.
- 2. WHO AM I? •Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant,Trainer,Autor
- 3. Bei der Datenverarbeitungist 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. Was wollen wir? w.r.wagner/ pixelio.de
- 5. Interaktive, robuste undskalierbare Applikationen in JavaScript.
- 6. Und weil sichdas nicht so gut verkauft, machen wir Reactive Programming.
- 7. Es gibt eineGruppe von Leuten, die sich zu diesem Thema schon viele Gedanken gemacht hat: http://www.reactivemanifesto.org/
- 8. JavaScript ist grundsätzlichwenig 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 esBibliotheken, 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 klaashartz / pixelio.de
- 13. https://docs.angularjs.org/guide/databinding Dieses System hatden Nachteil, dass es ab ca. 2.000 Watchern langsam wird.
- 14. angular.module('myApp', []) .controller('MyCtrl', functionMyCtrl() { 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 lassensich die Datenflüsse im Frontend modellieren. Mit dem Two-way Data Binding werden die Änderungen automatisch propagiert. Aber nur auf Clientseite.
- 17.
- 18. Anforderungen Es gibt mehrals 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 parallelzu 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'})); } } });
- 24. Konflikte? Robin Backes /pixelio.de
- 25. Konflikt Greifen mehrere Benutzerauf 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ösungliegt 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 auchautomatisch aufgelöst werden. Git macht es beispielsweise bei Merges so. Solche Operationen sind allerdings meistens sehr komplex.
- 28. War das schonalles? Jürgen Treiber / pixelio.de
- 30. Responsive Andreas Hermsdorf /pixelio.de
- 31. Responsive Schnelle und direkteRü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 esnicht macht:
- 33. Auf was warteich 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 sollteder 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.
- 36.
- 37. Resilient Das System mussrobust sein. Ein Fehler darf nicht dazu führen, dass das gesamte System nicht mehr funktionsfähig ist.
- 39. Resilient - Subsysteme DasSystem 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 AufError-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 Prozesseim 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.
- 42.
- 43. Elastic Das System kannmit unterschiedlichen Lastverhältnissen umgehen. Die Antwortzeiten werden auch durch viele Zugriffe nicht negativ beeinflusst.
- 44. Wie man esnicht 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 Nodeist 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 JedeKomponente 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 EchteSoziale Marktwirtschaft (IESM) / pixelio.de
- 48. Message Driven Entkopplung derSystemkomponenten. 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 esnicht macht: var fs = require('fs'); var content = fs.readFileSync('./currencies.csv', 'utf-8');
- 50. Message Driven Eigentlich basiertdas 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 - EinzelneSubsysteme 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.
- 52. Fragen? Rainer Sturm /pixelio.de
- 53. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr.6 80538 München Deutschland @basti_springer https://github.com/sspringer82