{"id":21018,"date":"2016-04-19T08:22:55","date_gmt":"2016-04-19T07:22:55","guid":{"rendered":"https:\/\/www.inovex.de\/\/?p=1608"},"modified":"2026-03-17T08:00:06","modified_gmt":"2026-03-17T07:00:06","slug":"polymer-flux-dom","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/","title":{"rendered":"Polymer: Flux-Architektur im DOM"},"content":{"rendered":"<p>Mit Polymer und Web Components kann durch hierarchische Unterteilung und Komposition eine aufger\u00e4umte, gut erweiterbare Struktur einer Web App aufrechterhalten werden. W\u00e4chst die Anwendung jedoch konstant\u00a0weiter, m\u00fcssen zus\u00e4tzliche Strukturen gefunden werden, um den Datenfluss durch die Anwendung vorhersagbar und wartbar zu machen. Wer mit seiner Anwendung an diese Stelle im Entwicklungsverlauf kommt, hat die M\u00f6glichkeit, eine ma\u00dfgeschneiderte, f\u00fcr die Anwendung genau passende Architektur selbst zu entwerfen und umzusetzen. Diese Vorgehensweise f\u00fchrt jedoch oft nicht zum gew\u00fcnschten Ergebnis, da in dieser Phase leicht subtile Fehler gemacht werden k\u00f6nnen, die sich im sp\u00e4teren Projektverlauf st\u00e4rker und st\u00e4rker auswirken und schwer zu beheben sind, da die Fehler schon im grundlegenden\u00a0Aufbau liegen.<\/p>\n<p>Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur, die als \u00fcber die Jahre entwickelte Best-Practice-L\u00f6sung von Facebooks eigener Web App zu verstehen ist, steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert und daher gut getestet und validiert wurde.<\/p>\n<p><!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Was-ist-Flux\" >Was ist Flux?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Implementierung\" >Implementierung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Polymer-und-Flux\" >Polymer und Flux<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Flux-DOM-ified\" >Flux DOM-ified<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Vergleich-ReactPolymer-Version\" >Vergleich React\/Polymer Version<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Serverseitiges-Flux\" >Serverseitiges Flux<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Fazit\" >Fazit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Were-hiring\" >We&#8217;re hiring!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#Weiterlesen\" >Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Was-ist-Flux\"><\/span>Was ist Flux?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die grundlegende Idee hinter Flux ist es, den Datenfluss durch die Webanwendung vorhersagbar und einheitlich zu gestalten, indem dieser unidirektional dieselben Komponenten in derselben Reihenfolge durchwandert. Das ist ein grundlegender Unterschied zu MVC-Architekturen, in denen Nachrichten von <code>View<\/code> zu <code>Controller<\/code> und <code>Model<\/code> unabh\u00e4ngig voneinander ausgetauscht werden k\u00f6nnen und Kaskaden von Zustands\u00e4nderungen schwer nachzuvollziehen sind.<\/p>\n<p>In Flux ist der gesamte Zustand oder <code>State<\/code> der Anwendung in <code>Stores<\/code> gespeichert, die \u00e4hnlich dem Model in MVC-Anwendungen auch die Business-Logik enthalten, die im Gegensatz zu Models jedoch nicht nur ein einzelnes Objekt, sondern alle Instanzen eines Typs verwalten. Der Zustand aus den Stores wird an die <code>Views<\/code> weitergegeben, die \u00fcblicherweise in hierarchisch geschachtelten Komponenten modelliert sind. Die View-Komponenten ganz oben in der Hierarchie sind die sogenannten <code>Controller Views<\/code>, die auf State-\u00c4nderungen in den Stores horchen und diesen an ihre direkten Kind-Komponenten weitergeben. Auf diese Weise ergibt sich ein Baum aus View-Komponenten, der vom aktuellen Zustand der Stores abh\u00e4ngig ist.<\/p>\n<p>Interagiert nun der\/die Nutzer:in mit der Anwendung und l\u00f6st Funktionen aus oder es werden Push-Benachrichtigungen \u00fcber Schnittstellen wie Websockets \u00fcbermittelt, wird eine <code>Action<\/code> erzeugt, die aus einem Typ und einer individuellen Payload besteht (z.B. <code>clickedButton<\/code> und als Payload <code>id=\u2019startVideo\u2019<\/code>). Diese Action&lt; wird nun \u00fcber einen zentralen <code>Dispatcher<\/code>, der als Singleton implementiert ist, an alle vorhandenen Stores weitergegeben. Die Stores empfangen die Action und k\u00f6nnen darauf mit State-\u00c4nderungen reagieren, die anschlie\u00dfend wieder an die Controller Views weitergegeben werden.<\/p>\n<p>F\u00fcr jede Aktion des\/der Nutzers\/Nutzerin, die eine Reaktion der Anwendung hervorruft, wird dieser Weg des Datenflusses ausgef\u00fchrt, was die Abh\u00e4ngigkeiten von Zustands\u00e4nderungen auch in gro\u00dfen Anwendungen klar ersichtlich macht.<\/p>\n<p>Eine Besonderheit des Dispatchers, die erst in gr\u00f6\u00dferen Anwendungen zum Tragen kommt, ist die M\u00f6glichkeit, die Reihenfolge, in der die Stores auf eine Action reagieren, zu beeinflussen. Das ist dann relevant, wenn Stores aufeinander aufbauen und ein Store zum Ver\u00e4ndern des eigenen Zustands den ge\u00e4nderten Zustand eines anderen Stores ben\u00f6tigt.<\/p>\n<p>Durch die Konsolidierung aller State-relevanten Aktionen des\/der Nutzers\/Nutzerin als Actions, die \u00fcber den Dispatcher ausgeliefert werden, ist es au\u00dferdem m\u00f6glich, die Stores nur als Aggregation der Actions und damit des echten Anwendungs-States zu sehen, der \u00fcber die Sequenz der Actions definiert wird. Werden die Actions persistiert, kann auch nachtr\u00e4glich durch einen neuen Store eine neue Aggregation des Zustands generiert werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Implementierung\"><\/span>Implementierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Flux wird von Facebook explizit als Architektur und nicht als Framework oder Technologie-Stack beschrieben, in Beispiel-Implementierungen werden allerdings meistens die selben Bibliotheken zur Umsetzung verwendet, die auch auf facebook.com zur Implementierung einer Flux-Architektur verwendet werden, da diese speziell f\u00fcr die Verwendung in dieser Konstellation entwickelt wurden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1614\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-1024x640.png\" alt=\"flux-architektur\" width=\"800\" height=\"500\" \/><\/p>\n<p>Als View-Layer wird dabei die ebenfalls von Facebook entwickelte React-Bibliothek eingesetzt, mit der es m\u00f6glich ist, eigene Komponenten zu definieren, die ausgehend von einer Wurzelkomponente hierarchisch aufeinander aufbauen. Um \u00c4nderungen effizient im DOM-Abzubilden, setzt React auf eine eigene <code>Virtual DOM<\/code>-Implementierung, die ein Abbild des DOM im Javascript-Heap pflegt, das bei jeder \u00c4nderung komplett neu berechnet wird. Anschlie\u00dfend wird ein minimales Set von DOM-Operationen ermittelt, mit dem der echte DOM wieder mit dem virtuellen DOM synchronisiert werden kann. Diese Herangehensweise basiert auf der \u00dcberlegung, dass die Javascript-Ausf\u00fchrung in modernen Browsern sehr effizient, Interaktion mit dem DOM aber teuer und aufw\u00e4ndig ist. React f\u00fcgt sich gut in die Flux-Architektur ein, da es durch die st\u00e4ndige Neuevaluierung des Komponentenbaums ohne Aufwand des Entwicklers synchron mit dem aus den Stores \u00fcbermittelten State bleibt.<\/p>\n<p>F\u00fcr den Dispatcher, der Aktionen an Stores weitergibt, kann die Implementierung, die auch Facebook in seinen Web Apps nutzt, aus dem npm-Package <code>flux<\/code> genutzt werden. Aktionen k\u00f6nnen dann mit der <code>dispatch<\/code>-Methode des Dispatchers erzeugt werden.<\/p>\n<p>Damit die Stores Zustands\u00e4nderungen an die Controller Views weitergeben k\u00f6nnen, kann eine beliebige Implementierung des Observer Patterns genutzt werden, f\u00fcr mehr Flexibilit\u00e4t bspw. die Klasse <code>EventEmitter<\/code> aus dem npm-Package <code>events<\/code>.<\/p>\n<p>Au\u00dferdem existieren <a href=\"https:\/\/medium.com\/social-tables-tech\/we-compared-13-top-flux-implementations-you-won-t-believe-who-came-out-on-top-1063db32fe73#.2vqww4z2g\" target=\"_blank\" rel=\"noopener\">verschiedenste Flux-Implementierungen<\/a>, die das Erstellen von Stores, Actions und die Anbindung an Views vereinfachen und oft noch zus\u00e4tzliche Features wie Server-side Rendering anbieten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Polymer-und-Flux\"><\/span>Polymer und Flux<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Obwohl die Flux-Architektur oft mit React als View-Implementierung genutzt wird, ist dies keinesfalls notwendig. <a href=\"https:\/\/www.inovex.de\/\/webcomponents-tutorial\/\" target=\"_blank\" rel=\"noopener\">Web Components<\/a> eignen sich hervorragend als Ersatz f\u00fcr React \u2013 sie basieren auf dem gleichen Prinzip der hierarchischen Unterteilung und Komposition und ben\u00f6tigen keine Drittbibliothek, um im Browser ausgef\u00fchrt zu werden. Die Anbindung an die Daten aus den Stores kann genauso erfolgen wie f\u00fcr React-Komponenten. Um das Erstellen der Komponenten zu vereinfachen, kann <a href=\"https:\/\/www.inovex.de\/\/polymer-1-0-das-experiment-ist-vorueber\/\" target=\"_blank\" rel=\"noopener\">Polymer<\/a> als Hilfsbibliothek eingesetzt werden.<\/p>\n<p>Wenn Polymer eingesetzt wird, muss, um die Unidirektionalit\u00e4t von Flux nicht zu verletzen, darauf geachtet werden, dass Eigenschaften im Komponentenbaum nur von oben nach unten weitergegeben werden und kein Two Way Databinding besteht \u2013 dies k\u00f6nnte unkontrollierte und schwer ersichtliche Abh\u00e4ngigkeiten zwischen den Komponenten schaffen, die durch die Action Loop \u00fcber die Stores als einzige Quelle des Anwendungszustands vermieden werden sollen. Das Binding von Kind-Elementen zu ihren Eltern-Elementen kann explizit deaktiviert werden, indem f\u00fcr alle Properties <code>notify: false<\/code> gesetzt wird.<\/p>\n<p>Bei der Verwendung von Polymer bietet es sich an, eine Bibliothek wie <a href=\"https:\/\/immutable-js.com\/\" target=\"_blank\" rel=\"noopener\">ImmutableJS<\/a> einzusetzen, die f\u00fcr jeden ver\u00e4nderten Zustand auch ein neues Objekt zur\u00fcckgibt, das aggressive Caching von Polymer-Templates verhindert sonst die Propagierung von ge\u00e4nderten Properties an Kind-Elemente.<\/p>\n<pre class=\"lang:js decode:true \">var data = [\u201aone\u2019, \u201atwo\u2019];\r\n\r\nthis.set(\u201adataList\u2019, data);\r\n\r\ndata.push(\u201athree\u2019);\r\n\r\nthis.set(\u201adataList\u2019, data);<\/pre>\n<p>So wird im obenstehenden Beispiel das Element <code>three<\/code> nicht im Template angezeigt, da <code>data<\/code> bei beiden Zuweisungen eine Referenz auf dieselbe Array-Instanz ist, was Polymer Templates <a href=\"https:\/\/github.com\/Polymer\/polymer\/issues\/3173\" target=\"_blank\" rel=\"noopener\">nicht zu einem Re-rendering veranlasst<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Flux-DOM-ified\"><\/span>Flux DOM-ified<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Idee hinter Polymer ist es, nicht \u00fcber Frameworks zus\u00e4tzliche Strukturen zu generieren, sondern den DOM als bereits etablierte und ohne Abh\u00e4ngigkeiten und Overhead in allen Browsern verf\u00fcgbare Plattform f\u00fcr Anwendungen zu nutzen. Diese Idee kann auf die Flux-Architektur \u00fcbertragen werden \u2013 statt des von Facebook erstellten Dispatchers und der <code>EventEmitter<\/code>-Klasse k\u00f6nnen auch standardisierte Funktionalit\u00e4ten genutzt werden, die der Browser selbst mitbringt \u2013 in diesem Falle DOM-Events.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1615\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-1024x640.png\" alt=\"flux-architektur-domified\" width=\"800\" height=\"500\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-1024x640.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-300x188.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-768x480.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-1536x960.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-400x250.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified-360x225.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/flux-architektur-domified.png 1920w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Wenn eine View eine Action an die Stores weitergeben will, kann sie ein DOM-Event erzeugen, das durch Event Bubbling bis zum <code>document<\/code> hochgereicht wird \u2013 dort kann der Store mittels <code>addEventListener<\/code> ein Callback registrieren, das im Falle eines Events aufgerufen wird. Die View kann das Event entweder \u00fcber die Browser-API <code>new CustomEvent()<\/code> oder im Falle von Polymer einfach per <code>this.fire(eventName, eventPayload)<\/code> ausl\u00f6sen. L\u00f6sen verschiedene Komponenten dieselben Actions aus, k\u00f6nnen diese an einer zentralen Stelle deklariert werden und als <code>Behaviors<\/code> in den verschiedenen Komponenten verf\u00fcgbar gemacht werden:<\/p>\n<pre class=\"lang:js decode:true \" title=\"actions.js\">var TodoActions = {\r\n\r\n    \/**\r\n\r\n    * Toggle whether a single ToDo is complete\r\n\r\n    * @param {object} todo\r\n\r\n    *\/\r\n\r\n    toggleComplete: function(todo) {\r\n\r\n        var id = todo.id;\r\n\r\n        var actionType = todo.complete ?\r\n\r\n        TodoConstants.TODO_UNDO_COMPLETE :\r\n\r\n        TodoConstants.TODO_COMPLETE;\r\n\r\n        this.fire(actionType, {\r\n\r\n            id: id,\r\n\r\n        });\r\n\r\n    },\r\n\r\n    \/\/....\r\n\r\n};<\/pre>\n<pre class=\"lang:default decode:true \" title=\"component.js\">behaviors: [TodoActions],\r\n\r\n    _onToggleComplete: function() {\r\n\r\n        this.toggleComplete(this.todo);\r\n\r\n    },<\/pre>\n<pre class=\"lang:js decode:true \" title=\"store.js\">document.addEventListener(TodoConstants.TODO_UNDO_COMPLETE, function(ev) {\r\n\r\n    update(ev.detail.id, {complete: false});\r\n\r\n    TodoStore.emitChange();\r\n\r\n});\r\n\r\ndocument.addEventListener(TodoConstants.TODO_COMPLETE, function(ev) {\r\n\r\n    update(ev.detail.id, {complete: true});\r\n\r\n    TodoStore.emitChange();\r\n\r\n});<\/pre>\n<p>Im oben stehenden Beispiel ist die Logik zum Erzeugen von Actions in <code>actions.js<\/code> ausgelagert, wird in <code>component.js<\/code> eingebunden und ausgef\u00fchrt und in <code>store.js<\/code> wieder empfangen. Die Stores k\u00f6nnen die gleiche Technik nutzen, um \u00c4nderungen bei den Controller Views bekannt zu machen \u2013 dies ist in der Methode <code>TodoStore.emitChange()<\/code> gekapselt:<\/p>\n<pre class=\"lang:js decode:true\" title=\"store.js\">emitChange: function() {\r\n\r\n    document.dispatchEvent(new CustomEvent(TodoConstants.TODO_STORE_CHANGE));\r\n\r\n}<\/pre>\n<pre class=\"lang:default decode:true \" title=\"controller-component.js\">attached: function() {\r\n\r\n    document.addEventListener(TodoConstants.TODO_STORE_CHANGE, this._onChange.bind(this));\r\n\r\n},\r\n\r\n_onChange: function() {\r\n\r\n    \/\/get and use data from store\r\n\r\n}<\/pre>\n<p>Hier wird bei Zustands\u00e4nderungen <code>document<\/code> als Event-Bus genutzt \u2013 der Store emittiert ein Event, das von der Controller View per <code>addEventListener<\/code> empfangen wird.<\/p>\n<p>Damit ist der unidirektionale Datenfluss von Flux ohne Hilfsbibliotheken wie AppDispatcher umgesetzt und folgt so der Philosophie von Polymer, die vorhandenen Strukturen des DOM gegen\u00fcber k\u00fcnstlichen Javascript-Versionen zu bevorzugen. Auf diese Weise haben die verschiedenen Komponenten einer Web App, die von verschiedenen Entwicklern stammen, eine einheitliche Kommunikationsschnittstelle, die per Standard \u00fcberall verf\u00fcgbar ist.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vergleich-ReactPolymer-Version\"><\/span>Vergleich React\/Polymer Version<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im Rahmen dieses Artikels wurde das <a href=\"https:\/\/github.com\/facebook\/flux\/tree\/master\/examples\/flux-todomvc\" target=\"_blank\" rel=\"noopener\">von Facebook bereitgestellte Flux-Beispiel<\/a>, eine exemplarische Todo-App, schrittweise zur <a href=\"https:\/\/github.com\/flash1293\/polymer-flux\" target=\"_blank\" rel=\"noopener\">oben beschriebenen Polymer\/DOM-Version<\/a> umgebaut. Beim Umbau musste die Struktur des Projektes leicht ver\u00e4ndert werden; dabei ging es haupts\u00e4chlich um die CSS-Dateien, die auf die jeweiligen Komponenten aufgeteilt wurden, da jede Polymer-Komponente einen eigenen CSS-Scope besitzt.<\/p>\n<p>Das resultierende Projekt hat ann\u00e4hernd die selbe Anzahl an Code-Zeilen, da sich die APIs von React und Polymer stark \u00e4hneln und HTML und CSS-Code soweit m\u00f6glich identisch \u00fcbernommen wurden. Konkateniert und minifiziert ist die mit Polymer erstellte Version um 10% kleiner, was sich durch die Gr\u00f6\u00dfe der Polymer- bzw. React-Abh\u00e4ngigkeit erkl\u00e4rt \u2013 die anderen Abh\u00e4ngigkeiten und die Anwendung selbst sind f\u00fcr die Dateigr\u00f6\u00dfe vernachl\u00e4ssigbar.<\/p>\n<p><a href=\"https:\/\/aerotwist.com\/blog\/the-cost-of-frameworks\/\" target=\"_blank\" rel=\"noopener\">Performance-Tests<\/a> legen nahe, dass die Startup-Time der Bibliotheken (Parsen und Evaluieren des Javascripts) bei den neuesten Versionen nahezu identisch ist.<\/p>\n<p>W\u00e4hrend die f\u00fcr den Endnutzer relevanten Kennzahlen sich kaum ver\u00e4ndern, ergeben sich f\u00fcr den Entwickler nur subjektive Unterschiede in der Ergonomie der Bibliothek sowie eine zukunftsorientierte Ausrichtung auf wiederverwendbare Web Components im Falle von Polymer.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Serverseitiges-Flux\"><\/span>Serverseitiges Flux<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Idee eines unidirektionalen Datenflusses kann auch als Server-Architektur angewendet werden \u2013 die <code>Views<\/code> w\u00e4ren in diesem Fall z.B. zum Client gesendete JSON-Dokumente und Actions w\u00fcrden durch HTTP-Anfragen ausgel\u00f6st werden. Die zus\u00e4tzliche Herausforderung, die hier gel\u00f6st werden m\u00fcsste, ist das Handling von verteilten Systemen. Dies kann durch eine verteilte Message-Queue wie z.B. <a href=\"https:\/\/www.rabbitmq.com\/\" target=\"_blank\" rel=\"noopener\">RabbitMQ<\/a> angegangen werden, die als Dispatcher fungiert und die Daten zu auf verschiedenen physikalischen Systemen laufenden Stores transportiert. Hier ist die Betrachtungsweise, die Sequenz der Actions als den g\u00fcltigen State zu verstehen, besonders hilfreich \u2013 die Migration von Daten (z.B. durch ein Store-Update) stellt dadurch nur eine neue Aggregation dar, die durch Abspielen der gesamten Sequenz f\u00fcr den neuen Store erreicht werden kann. Da Stores durch diese Methode jederzeit wieder auf den neuesten Stand gebracht werden k\u00f6nnen, m\u00fcssen sie keine Daten persistieren und sind damit \u201estateless\u201c, was das Deployment deutlich vereinfacht und stark verteilte Systeme m\u00f6glich macht.<\/p>\n<p>Wie effizient dieser Ansatz allerdings ist, muss noch \u00fcberpr\u00fcft werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Abschlie\u00dfend l\u00e4sst sich sagen, dass Flux eine interessante und vielversprechende Methode ist, Webanwendungen zu strukturieren. Web Components in Verbindung mit Polymer bzw. DOM-Events passen gut zu diesem Ansatz und versprechen eine performante, abh\u00e4ngigkeitsarme, moderne Anwendungsarchitektur, die trotzdem alle M\u00f6glichkeiten offen und Feature-Skalierung zul\u00e4sst.<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-embed _brlbs-video-youtube\"> <img class=\"_brlbs-thumbnail\" src=\"https:\/\/www.inovex.de\/wp-content\/plugins\/borlabs-cookie\/images\/cb-no-thumbnail.png\" alt=\"YouTube\"> <div class=\"_brlbs-caption\"> <p>By loading the video, you agree to YouTube's privacy policy.<br><a href=\"https:\/\/policies.google.com\/privacy?hl=en&amp;gl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Learn more<\/a><\/p> <p><a class=\"_brlbs-btn _brlbs-icon-play-white\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Load video<\/a><\/p> <p><label><input type=\"checkbox\" name=\"unblockAll\" value=\"1\" checked> <small>Always unblock YouTube<\/small><\/label><\/p> <\/div> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"youtube\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LdG1qa0N1Vi1FVSIgZnJhbWVib3JkZXI9IjAiIGdlc3R1cmU9Im1lZGlhIiBhbGxvdz0iZW5jcnlwdGVkLW1lZGlhIiBhbGxvd2Z1bGxzY3JlZW49ImFsbG93ZnVsbHNjcmVlbiI+PC9pZnJhbWU+PC9wPg==<\/div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Were-hiring\"><\/span>We&#8217;re hiring!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tapetenwechsel gef\u00e4llig? Wir sind auf der Suche nach begeisterten Frontend-Entwicklern, die unsere Projektteams im Umfeld von JavaScript, HTML und CSS unterst\u00fctzen und auch vor innovativen Themen wie AngularJS und Progressive Web Apps nicht zur\u00fcckschrecken. <strong>Jetzt Bewerben!<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weiterlesen\"><\/span>Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mehr Informationen zu unseren Dienstleistungen rund um die Web-Entwicklung gibt es <a href=\"https:\/\/www.inovex.de\/de\/leistungen\/mobile\/mobile-web\/\" target=\"_blank\" rel=\"noopener\">auf unserer Website<\/a>. Unser Portfolio umfasst au\u00dferdem die <a href=\"https:\/\/www.inovex.de\/de\/leistungen\/mobile\/app-entwicklung\/\" target=\"_blank\" rel=\"noopener\">Anwendungsentwicklung f\u00fcr Android &amp; iOS<\/a> mit speziellem Fokus auf <a href=\"https:\/\/www.inovex.de\/de\/leistungen\/mobile\/mobile-enterprise\/\" target=\"_blank\" rel=\"noopener\">Enterprise-Apps<\/a>. F\u00fcr direkten Kontakt schreibt an <a href=\"mailto:info@inovex.de\" target=\"_blank\" rel=\"noopener\">info@inovex.de<\/a> oder ruft an unter <a href=\"tel:+497216190210\" target=\"_blank\" rel=\"noopener\">+49 721 619 021-0<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit Polymer und Web Components kann durch hierarchische Unterteilung und Komposition eine aufger\u00e4umte, gut erweiterbare Struktur einer Web App aufrechterhalten werden. W\u00e4chst die Anwendung jedoch konstant\u00a0weiter, m\u00fcssen zus\u00e4tzliche Strukturen gefunden werden, um den Datenfluss durch die Anwendung vorhersagbar und wartbar zu machen. Wer mit seiner Anwendung an diese Stelle im Entwicklungsverlauf kommt, hat die M\u00f6glichkeit, [&hellip;]<\/p>\n","protected":false},"author":38,"featured_media":1618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[420,444],"coauthors":[{"id":38,"display_name":"Johannes Reuter","user_nicename":"jreuter"}],"class_list":["post-21018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-apps","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Polymer: Flux-Architektur im DOM - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Polymer: Flux-Architektur im DOM - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-19T07:22:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-17T07:00:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2300\" \/>\n\t<meta property=\"og:image:height\" content=\"678\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Johannes Reuter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild-1024x302.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johannes Reuter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Johannes Reuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/\"},\"author\":{\"name\":\"Johannes Reuter\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/2e7c8f474580d46832a7666b61f8c1ec\"},\"headline\":\"Polymer: Flux-Architektur im DOM\",\"datePublished\":\"2016-04-19T07:22:55+00:00\",\"dateModified\":\"2026-03-17T07:00:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/\"},\"wordCount\":1845,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/polymer-flux-artikelbild.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"General\",\"Infrastructure\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/\",\"name\":\"Polymer: Flux-Architektur im DOM - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/polymer-flux-artikelbild.png\",\"datePublished\":\"2016-04-19T07:22:55+00:00\",\"dateModified\":\"2026-03-17T07:00:06+00:00\",\"description\":\"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/polymer-flux-artikelbild.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/polymer-flux-artikelbild.png\",\"width\":2300,\"height\":678,\"caption\":\"Polymer Flux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/polymer-flux-dom\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Polymer: Flux-Architektur im DOM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/2e7c8f474580d46832a7666b61f8c1ec\",\"name\":\"Johannes Reuter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g6e76acaf394b88ba3914670bfc4db231\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g\",\"caption\":\"Johannes Reuter\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/jreuter\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Polymer: Flux-Architektur im DOM - inovex GmbH","description":"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/","og_locale":"de_DE","og_type":"article","og_title":"Polymer: Flux-Architektur im DOM - inovex GmbH","og_description":"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.","og_url":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2016-04-19T07:22:55+00:00","article_modified_time":"2026-03-17T07:00:06+00:00","og_image":[{"width":2300,"height":678,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png","type":"image\/png"}],"author":"Johannes Reuter","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild-1024x302.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Johannes Reuter","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten","Written by":"Johannes Reuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/"},"author":{"name":"Johannes Reuter","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/2e7c8f474580d46832a7666b61f8c1ec"},"headline":"Polymer: Flux-Architektur im DOM","datePublished":"2016-04-19T07:22:55+00:00","dateModified":"2026-03-17T07:00:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/"},"wordCount":1845,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png","keywords":["Web"],"articleSection":["Applications","General","Infrastructure"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/","url":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/","name":"Polymer: Flux-Architektur im DOM - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png","datePublished":"2016-04-19T07:22:55+00:00","dateModified":"2026-03-17T07:00:06+00:00","description":"Mit der von Facebook ver\u00f6ffentlichten Flux-Architektur steht ein Entwurf bereit, der von vielen kleineren und gr\u00f6\u00dferen Anwendungen adaptiert wurde.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2016\/04\/polymer-flux-artikelbild.png","width":2300,"height":678,"caption":"Polymer Flux"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/polymer-flux-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Polymer: Flux-Architektur im DOM"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/2e7c8f474580d46832a7666b61f8c1ec","name":"Johannes Reuter","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g6e76acaf394b88ba3914670bfc4db231","url":"https:\/\/secure.gravatar.com\/avatar\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cd215069ed19f8429692365d40f5a8e94a674eea57579c97b182c853c9cd0d0?s=96&d=retro&r=g","caption":"Johannes Reuter"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/jreuter\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=21018"}],"version-history":[{"count":4,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21018\/revisions"}],"predecessor-version":[{"id":66541,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21018\/revisions\/66541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/1618"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=21018"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=21018"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=21018"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=21018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}