Reactive Programming
•
3 gostaram•1,982 visualizações
Reactive Programming mit AngularJS und Node.js. Wie erstelle ich interaktive, robuste und skalierbare Applikationen in JavaScript.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (12)
Semelhante a Reactive Programming
Semelhante a Reactive Programming (20)
Mais de Sebastian Springer
Mais de Sebastian Springer (20)
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:
- 4. Was wollen wir? w.r.wagner / pixelio.de
- 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'})); } } });
- 24. Konflikte? Robin Backes / pixelio.de
- 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
- 30. Responsive Andreas Hermsdorf / 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.
- 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