{"id":1101,"date":"2021-10-16T16:02:58","date_gmt":"2021-10-16T16:02:58","guid":{"rendered":"https:\/\/flexitcs.net\/?p=1101"},"modified":"2022-07-17T21:15:47","modified_gmt":"2022-07-17T21:15:47","slug":"digitalisierung-kompakt-moderne-webanwendungen","status":"publish","type":"post","link":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/","title":{"rendered":"Digitalisierung kompakt: Moderne Webanwendungen"},"content":{"rendered":"\n<p>Die <a aria-label=\"erste Webseite der Welt (opens in a new tab)\" href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">erste Webseite der Welt<\/a>, die am 20. Dezember 1990 am Kernforschungszentrum CERN Genf online ging, war eine einfache statische HTML-Seite mit wenigen Zeilen Code, 165 W\u00f6rter Text und einigen Hyperlinks. <\/p>\n\n\n\n<p>Heute stehen die wichtigsten Seiten im Web f\u00fcr hochdynamische und interaktive Client-Server-Anwendungen mit tausenden Zeilen Code, basierend auf komplexen Frameworks. <strong>Was <\/strong>macht eine moderne Webanwendung aus? <strong>Warum&nbsp;<\/strong>sind moderne Webanwendungen wichtig und&nbsp;<strong>Wie&nbsp;<\/strong>werden sie erstellt? &#8211; Eine Einordnung der wichtigsten Begriffe, Fakten und aktuellen Trends.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"130\" src=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\" alt=\"Was: Moderne Webanwendungen ?\" class=\"wp-image-1168\" srcset=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png 1024w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1-300x38.png 300w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1-768x98.png 768w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1-720x91.png 720w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-f72e5084-083f-401d-b7bb-7502e3411aff\">Was: Moderne Webanwendungen?<\/h3>\n\n\n\n<p>Moderne Webanwendungen pr\u00e4sentieren sich als ausgekl\u00fcgelte, oft personalisierte <strong>Single-Page-Webseiten. <\/strong>Der Benutzer ruft sie unkompliziert im Webbrowser seines Ger\u00e4tes (PC, Smartphone, Tablet) auf. Aus technischer Sicht sind moderne Webanwendungen datenzentrierte Client-Server Systeme auf Basis von Standard-Webprotokollen. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Single-Page-Webseiten: Daten im Hintergrund unterwegs<\/h4>\n\n\n\n<p>Eine im Webbrowser ablaufende <strong>Single-Page-Webseite<\/strong> (<em>single-page application<\/em>, <strong><em>SPA<\/em><\/strong>) wird von vielen Benutzern irrt\u00fcmlicherweise bereits als die &#8222;Anwendung&#8220; verstanden. <\/p>\n\n\n\n<p>Tats\u00e4chlich stellen Webseiten selbst aber nur einen kleinen und &#8211; f\u00fcr sich allein betrachtet &#8211; kaum nutzbaren Teil moderner Webanwendungen dar, da sie keine Daten speichern. Die &#8222;fehlenden&#8220; Daten holen sich die Webseiten anlass- und nutzerbezogen von einem zentralen, f\u00fcr den Benutzer unsichtbaren Backend-Server ab. Die  Webseiten erfassen w\u00e4hrend der Nutzung neue Daten vom Benutzer und spielen die erfassten Datens\u00e4tze laufend an den zugeh\u00f6rigen Server zur\u00fcck. Erst mit dem <strong>dynamischen Datenaustausch<\/strong> zwischen der Single-Page-Webseite &#8211; dem  &#8222;Frontend&#8220; im Browser des Benutzers &#8211; und dem Backend-Server wird die auf der Webseite implementierte Darstellungslogik mit Inhalten gef\u00fcllt, und es ergibt sich der Nutzen der Gesamtanwendung. <\/p>\n\n\n\n<p>Anders als bei statischen Webseiten findet der Datentransfer<strong> <\/strong>zwischen Webseite und Server bei einer modernen Webanwendung immer <strong>im Hintergrund<\/strong> statt. Hierf\u00fcr muss vom Benutzer kein Aktualisierungsbutton gedr\u00fcckt werden, kein Reload einer Seite angesto\u00dfen werden und auch kein Seitenwechsel ausgel\u00f6st werden, wie dies noch bei herk\u00f6mmlichen Webanwendungen der Fall ist. Der Datenfluss erfolgt vielmehr fortlaufend automatisch in beide Richtungen und w\u00e4hrend der gesamten Dauer der Nutzung der Webseite, flexibel angepasst an die Notwendigkeiten der jeweiligen Anwendung. Nachteil dabei: F\u00fcr den Benutzer bleibt weitgehend intransparent, wann und welche Informationen bei der Nutzung erfasst und an den Server zur\u00fcckgesendet werden.<\/p>\n\n\n\n<p>Die <strong>schnelle, zuverl\u00e4ssige und <a href=\"https:\/\/flexitcs.net\/index.php\/it-sicherheit-eine-ubersicht\/\" class=\"ek-link\">sichere <\/a>Datenkommunikation <\/strong>zwischen Frontend und Backend ist jedenfalls eine unabdingbare technische Voraussetzung f\u00fcr das Funktionieren einer modernen Webanwendung. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Leistungsf\u00e4hige und intelligente Backends mit Konfliktpotenzial zur DSGVO <\/h4>\n\n\n\n<p>F\u00fcr moderne Webanwendungen mit einer gro\u00dfen Anzahl an Benutzern und einem umfangreichen Datenaustausch werden <strong>leistungsf\u00e4hige und skalierbare Backend-L\u00f6sungen <\/strong>ben\u00f6tigt. <\/p>\n\n\n\n<p>Sie zeichnen sich gegen\u00fcber herk\u00f6mmlichen Webservern dadurch aus, dass sie Inhalte (Daten) anlassbezogen generieren und bereitstellen, wo bei einfachen Webanwendungen noch lediglich fertige HTML-Seiten ausgeliefert wurden.<\/p>\n\n\n\n<p>Insbesondere k\u00f6nnen die Backends moderner Webanwendungen Daten auch <strong>benutzerspezifisch <\/strong>aufbereitet zur Verf\u00fcgung stellen und eingehende Informationen benutzerspezifisch verarbeiten. <\/p>\n\n\n\n<p>Hieraus ergibt sich zwangsl\u00e4ufig, dass in den Backends mehr oder weniger umfangreiche Informationen zu den einzelnen Benutzern aufgezeichnet werden resp. detaillierte personenbezogene Benutzerprofile vorliegen (m\u00fcssen).  Damit stehen die Bedarfe der Ersteller und Betreiber moderner Webanwendungen potenziell in Konflikt mit der EU-Datenschutz-Grundverordnung (<strong>DSGVO<\/strong>), die die Sammlung, Speicherung und Verarbeitung personenbezogener Daten bewusst einschr\u00e4nkt. Die Vorgaben der DSGVO sind jedenfalls bereits beim Design dieser Anwendungen zu beachten: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>jede Erhebung personenbezogener Daten hat zweckbestimmt zu erfolgen. Sie ist generell nur dann erlaubt, wenn ein berechtigtes Interesse f\u00fcr die Erhebung vorliegt, und sie muss sich auf das f\u00fcr den konkreten Zweck notwendige Ma\u00df beschr\u00e4nken.<\/li><li>die Speicherung der Daten ist auf den f\u00fcr den konkreten Zweck notwendigen Zeitraum zu beschr\u00e4nken, anschlie\u00dfend m\u00fcssen die Daten gel\u00f6scht werden. Dar\u00fcber hinaus hat jede betroffene Person jederzeit das Recht, das L\u00f6schen der eigenen Daten explizit zu veranlassen (Recht auf Vergessen)<\/li><li>Datenspeicherung und -verarbeitung m\u00fcssen unter Ber\u00fccksichtigung der Gew\u00e4hrleistung der Privatsph\u00e4re resp. des Datenschutzes nach aktuellen Standards erfolgen. Datenspeicherung und -verarbeitung m\u00fcssen transparent und nachvollziehbar sein.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Frontend und Backend als funktionale Einheit, aber nur lose gekoppelt<\/h4>\n\n\n\n<p>Clients und Server &#8211; also: Frontend und Backend &#8211; stellen bei einer modernen Webanwendung eine funktionelle Einheit mit klarer Rollenverteilung dar. Das Frontend bietet eine moderne, dem jeweiligen Zielger\u00e4t und der jeweiligen Anwendungsdom\u00e4ne angepasste Benutzeroberfl\u00e4che. Der zentrale &#8222;Backend&#8220;-Server implementiert die Gesch\u00e4ftslogik und Datenpersistenz. \u00dcber eine Datenschnittstelle sind beide, Frontend und Backend, lose miteinander gekoppelt. <\/p>\n\n\n\n<p>Diese Frontend-Backend-Beziehung ist jedoch keinesfalls immer eine einfache 1:1 Beziehung. <\/p>\n\n\n\n<p>So kann ein einziges Backend gleichzeitig unterschiedliche Frontend-Anwendungen (Webseiten, mobile Apps, Desktop-Apps, <a href=\"https:\/\/flexitcs.net\/index.php\/internet-of-things-eine-ubersicht\/\" class=\"ek-link\">IoT-Ger\u00e4te<\/a>) mit Daten versorgen resp. von diesen Daten empfangen. <\/p>\n\n\n\n<p>Ein bestimmtes Frontend wiederum kann Daten von mehreren Backend-Servern empfangen oder Daten an unterschiedliche Backend-Server \u00fcbermitteln. Die Kommunikation mit dritten Backends (externe Dienste) dient dabei insbesondere der Implementierung allgemeiner Funktionen, wie Benutzerauthentifizierung, Rate Limiting, Fakturierung sowie Analyse und \u00dcberwachung. <\/p>\n\n\n\n<p>Dass der (bequeme) Zugriff von Frontends auf externe Backends unter Umst\u00e4nden aber nicht unkritisch ist, zeigt das Urteil des Landgerichts M\u00fcnchen vom 20.01.2022, wonach die dynamische Einbindung der (beliebten) Google Fonts auf Webseiten ohne vorherige Einwilligung des Benutzers bereits einen Versto\u00df gegen\u00fcber der europ\u00e4ischen DSGVO darstellt und auch als solcher geahndet werden kann, da im Zuge der dynamischen Einbindung die IP-Adresse des Nutzers an Google (und damit in einen &#8222;unsicheren Drittstaat&#8220;) \u00fcbermittelt wird.     <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"130\" src=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web2.png\" alt=\"Warum: Moderne Webanwendungen ?\" class=\"wp-image-1169\" srcset=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web2.png 1024w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web2-300x38.png 300w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web2-768x98.png 768w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web2-720x91.png 720w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-b1cb0cd3-0d2e-4948-8615-e338e823eee3\">Warum: Moderne Webanwendungen?<\/h3>\n\n\n\n<p>Moderne Webanwendungen kombinieren die allgemeinen Vorteile herk\u00f6mmlicher Webanwendungen mit Vorteilen, die sich spezifisch aus dem flexiblen und schnellen Datenaustausch zwischen Frontend und Backend und der Personalisierung von Webseiten ergeben.<\/p>\n\n\n\n<p>Ein allgemeiner Vorteil aller Webanwendungen ist, dass sie keine lokale Software-Installation auf den Benutzerger\u00e4ten erfordern, da die Backendfunktionalit\u00e4t auf einen zentralen Server ausgelagert wird und das Frontend im ohnehin auf dem Ger\u00e4t bereits installierten Webbrowsers abl\u00e4uft &#8211; idealerweise bei allen aktuellen Web-Browsern mit gleichen Funktionsumfang und (fast) identischer Darstellung. Dadurch, dass es keine lokalen Softwareinstallationen gibt, entf\u00e4llt zudem die Notwendigkeit von etwaigen Software-Updates. In Summe ist die Bereitstellung der Anwendung deutlich einfacher als bei Desktop-Anwendungen, insbesondere bei einer gro\u00dfen Anzahl von (potenziellen) Nutzern. <\/p>\n\n\n\n<p>Lange Zeit wurde dieser Vorteil mit dem Nachteil eines eingeschr\u00e4nkten Funktionsumfanges im Vergleich zu Desktop-Anwendungen erkauft. Heutige Browser resp. heutige moderne Webanwendungen bieten dem Benutzer dagegen mit <strong>HTML5<\/strong> komfortable Bedienschnittstellen, die kaum noch W\u00fcnsche offenlassen. Hierzu tr\u00e4gt auch wesentlich der Umstand bei, dass der umfangreiche Datentransfer zwischen Frontend und Backend bei einer modernen Webanwendung im Hintergrund erfolgt, so dass das Nutzererlebnis nicht durch Seiten-Reloads oder Seitenwechsel beeintr\u00e4chtigt wird. <\/p>\n\n\n\n<p>Ein zweiter allgemeiner Vorteil aller Webanwendungen ist, dass sie <em>per se<\/em> f\u00fcr einen Mehrbenutzerbetrieb ausgelegt sind &#8211; wiederum ein signifikanter Vorteil gegen\u00fcber Desktop-Anwendungen. Die Mehrbenutzerf\u00e4higkeit einer Webanwendung wird prinzipiell nur durch die Leistungsf\u00e4higkeit des zugeh\u00f6rigen Backends und dessen Internetanbindung eingeschr\u00e4nkt &#8211; beides l\u00e4sst sich skalieren. <\/p>\n\n\n\n<p>Der eigentliche spezifische Vorteil moderner Webanwendungen aber ist der dynamische und flexible Datenfluss zwischen Frontend und Backend, der jederzeit in beide Richtungen m\u00f6glich ist. <\/p>\n\n\n\n<p>Basierend auf diesem Mechanismus k\u00f6nnen aktuelle Informationen ereignisgesteuert &#8222;in Echtzeit&#8220; vom Backend an das Frontend \u00fcbermittelt und dort dem Benutzer dargestellt werden. Beispiele solcher &#8222;Echtzeitinformationen&#8220; sind die sich fortlaufend \u00e4ndernden Positionen von fahrenden Fahrzeugen, Statusinformationen von Ger\u00e4ten und\/oder anderen Benutzern, Nachrichten und Kommentaren anderer Benutzer (Chatfunktion\/Umfragefunktionen), Warnungen und St\u00f6rmeldungen, Spielz\u00fcge von Mitspielern usw.  H\u00e4ufig stammen die \u00fcbermittelten Informationen von anderen Clients derselben Webanwendung, so dass aus Sicht der Benutzer eine direkte Client-Client-Kommunikation gegeben scheint.  Umgekehrt sind durch die unmittelbare \u00dcbertragung eingegebener Daten \/ Aktivit\u00e4ten des Benutzers an den Backendserver diese Informationen in k\u00fcrzester Zeit f\u00fcr andere Benutzer verf\u00fcgbar.<\/p>\n\n\n\n<p>Mit dieser &#8222;Echtzeitkommunikation&#8220; in beide Richtungen lassen sich komplexe Anwendungen wie Messenger, Leitsysteme, IoT-Dashboards,  Mehrbenutzer-Editoren (mit kontinuierlicher automatischer Speicherung des jeweiligen Arbeitstandes) und Mehrbenutzer-Onlinespiele effizient als Webanwendungen implementieren, die zuvor h\u00f6chstens als native Anwendungen denkbar gewesen w\u00e4ren. Zu den modernen Webanwendungen geh\u00f6ren nicht zuletzt aber auch Anwendungen, die es in dieser Form zuvor noch gar nicht gegeben hat, wie Echtzeitumfrage-Tools f\u00fcr Konferenzen\/Schulungen.  <\/p>\n\n\n\n<p>Bildhaft gesprochen, werden mit modernen Webanwendungen Werkzeuge zur Verf\u00fcgung gestellt, mit denen Benutzer etwas &#8222;tun&#8220; k\u00f6nnen, w\u00e4hrend statische Webseiten im Wesentlichen daf\u00fcr geeignet waren, Dinge &#8222;anzuschauen&#8220;.    <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"130\" src=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web3.png\" alt=\"Wie: Moderne Webanwendungen ?\" class=\"wp-image-1170\" srcset=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web3.png 1024w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web3-300x38.png 300w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web3-768x98.png 768w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web3-720x91.png 720w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-69ef3fe6-3057-4f8e-9e26-060c9eb5173c\">Wie: Moderne Webanwendungen?<\/h3>\n\n\n\n<p>Moderne Webanwendungen bestehen aus Frontend- und Backend-Softwarekomponenten, die \u00fcber eine leistungsf\u00e4hige Datenschnittstelle auf Basis von Standard-Webprotokollen lose gekoppelt sind. <\/p>\n\n\n\n<p>Die Front- und Backend-Softwarekomponenten k\u00f6nnen unabh\u00e4ngig voneinander entwickelt und in unterschiedlichen Sprachen resp. mit unterschiedlichen Frameworks implementiert als auch unabh\u00e4ngig voneinander  getestet werden &#8211; ggf. auch in unterschiedlichen Teams, r\u00e4umlich und zeitlich voneinander getrennt. Voraussetzung hierf\u00fcr ist das Vorliegen eines ausreichend detaillierten und schl\u00fcssigen Gesamtkonzepts, basierend auf klaren Gesamtsystem-Anforderungen.<\/p>\n\n\n\n<p>Mitunter wird umgekehrt jedoch bewusst eine enge Verschr\u00e4nkung von Front- und Backendentwicklung angestrebt. Die Notwendigkeit ergibt sich z.B. dann, wenn serverseitiges HTML-Rendering (traditionelles Verfahren) und clientseitiges HTML-Rendering (modernes Verfahren) gemischt werden &#8211; ein Ansatz, der aus mehrschichtigen Gr\u00fcnden (Performance, Security, Verf\u00fcgbarkeit) wieder en vogue ist. Technisch wird die  Verschr\u00e4nkung von Front- und Backendentwicklung z.B. durch den Einsatz eines <a aria-label=\"Nx-Monorepos (opens in a new tab)\" href=\"https:\/\/nx.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>Nx-Monorepos<\/strong><\/a> unterst\u00fctzt.     <\/p>\n\n\n\n<p>Der Prozess der Erstellung moderner Webanwendungen wird allgemein als <strong>Webentwicklung<\/strong> bezeichnet. Liegt die Verantwortung f\u00fcr die Implementierung und den Betrieb der Anwendung (resp. einer bestimmten Komponente der Anwendung) gemeinsam in einem Team, wird von einem <strong>DevOps<\/strong>-Ansatz gesprochen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Backend-Entwicklung und Backend-Architektur <\/h4>\n\n\n\n<p>Backends f\u00fcr Webanwendungen wurden urspr\u00fcnglich in <strong>Java <\/strong>oder <strong>.Net<\/strong>, z.T. auch in <strong>PHP<\/strong> entwickelt. Das erste moderne Web2.0-Application-Framework war <strong><a href=\"https:\/\/rubyonrails.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Ruby on Rails<\/a><\/strong> <em>(ab 2005)<\/em>, welches die Webentwicklung nachhaltig ver\u00e4ndert hat. <\/p>\n\n\n\n<p>Heute findet das schnelle und leistungsf\u00e4hige <strong><a aria-label=\"Node.js (opens in a new tab)\" href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Node.js<\/a><\/strong> <em>(ab 2009)<\/em> eine immer gr\u00f6\u00dfere Verbreitung bei der Implementierung von Backend-Servern. F\u00fcr Node.js sind zahlreiche <a href=\"https:\/\/flexitcs.net\/index.php\/frameworks-und-bibliotheken-fuer-node-js\/\" class=\"ek-link\">Frameworks und Bibliotheken<\/a> verf\u00fcgbar. Als zentraler Vorteil von Node.js gilt, dass Backend und Frontend in der gleichen Programmiersprache entwickelt werden (<strong>JavaScript\/TypeScript<\/strong>) und dass Node.js Anwendungen in der Regel ohne einen zus\u00e4tzlichen Webserver auskommen.<\/p>\n\n\n\n<p>Eine bei Entwicklern beliebte, jedoch weit weniger verbreitete Alterative zu Node.js ist das in <a aria-label=\"Elixier (opens in a new tab)\" href=\"https:\/\/elixir-lang.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Elixier<\/a> (<em>ab 2014, <\/em>Erlang-VM) geschriebene, an Ruby on Rails orientierte <a aria-label=\"Phoenix (opens in a new tab)\" href=\"https:\/\/www.phoenixframework.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Phoenix<\/a>\/<a href=\"https:\/\/hexdocs.pm\/phoenix_live_view\/Phoenix.LiveView.html\" target=\"_blank\" rel=\"noreferrer noopener\">LiveView<\/a> Framework (<em>ab 2015<\/em>), welches ein serverseitiges MVC-Muster implementiert.&nbsp;Phoenix Anwendungen werden im Erlang-Webserver <a aria-label=\"Cowboy (opens in a new tab)\" href=\"https:\/\/github.com\/ninenines\/cowboy\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Cowboy<\/a> bereitgestellt.  <\/p>\n\n\n\n<p><strong>Architektur<\/strong> <\/p>\n\n\n\n<p>Die Skalierbarkeit von Backends wird u.a. mit einer <strong>Microservice-Architektur<\/strong> erreicht. Hierbei wird das das Backend in Form von kleinen, monofunktionalen Modulen (den Microservices) implementiert, die &#8211; \u00e4hnlich dem SOA-Ansatz &#8211; unabh\u00e4ngig voneinander entwickelt und ausgeliefert werden k\u00f6nnen. Ein Mikroservice, der unter h\u00f6herer Last steht, kann unabh\u00e4ngig von den anderen Diensten skaliert werden, indem zus\u00e4tzliche Instanzen dieses Dienstes (tempor\u00e4r) in die Anwendung integriert werden. Dies funktioniert jedoch nur, wenn die einzelnen Services wirklich unabh\u00e4ngig voneinander konzipiert sind, inkl. voneinander unabh\u00e4ngiger Datenbankinstanzen. Den Vorteilen einer Microservice-Architektur steht der h\u00f6here Overhead  im Vergleich zu einer monolithischen L\u00f6sung gegen\u00fcber.<\/p>\n\n\n\n<p>F\u00fcr die Frontend-Clients sollen die Mikroservices des Backends in der Regel nur indirekt \u00fcber <strong>API-Gateways<\/strong> erreichbar sein. API-Gateways sind <strong>Reverse Proxys<\/strong>, die als zentraler Zugangspunkt alle API-Aufrufe der Clients entgegennehmen. Die Anfragen leiten sie an die erforderlichen (internen, ggf. auch externen) Services weiter, f\u00fchren die Ergebnisse zusammen und geben das Resultat an das Frontend zur\u00fcck. Die Motive f\u00fcr die Nutzung dieser Gateways sind der Schutz der einzelnen Mikroservices vor \u00dcberlastung und Missbrauch sowie eine stabilere API-Schnittstelle des Backends gegen\u00fcber dem Frontend\/den Frontends, da etwaige notwendige \u00c4nderungen der Mikroservices durch das API-Gateway verborgen werden k\u00f6nnen. <\/p>\n\n\n\n<p><strong>Load-Balancer<\/strong> sind eine Sonderform von API-Gateways auf dem Backend, die mehrere gleichwertige Endpunkte (mehrere Instanzen des gleichen Mikroservices) zusammenfassen. In der Praxis k\u00f6nnen die Funktionen eines klassischen Reverse Proxys und eines Load-Balancers in einer Komponente zusammengefasst sein. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Frontend-Entwicklung<\/h4>\n\n\n\n<p>Frontends f\u00fcr moderne Webanwendungen sind in der Regel Single-Page-Webseiten. Wie alle dynamischen Webseiten, werden sie mit <strong>HTML5, CSS und JavaScript<\/strong> <em>(ab 1996)<\/em><strong> <\/strong>resp. <strong>TypeScript<\/strong> <em>(ab 2012)<\/em> implementiert. <\/p>\n\n\n\n<p>F\u00fcr die Umsetzung werden <strong>JavaScript-UI-Frameworks<\/strong> eingebunden. Frameworks erh\u00f6hen die Effizienz in der Webentwicklung durch a) die Verf\u00fcgbarkeit vorgefertigter technischer L\u00f6sungen und b) die implizite Vorgabe von gemeinsamen Umsetzungsrichtlinien im Entwicklungsteam. Beide Vorteile erm\u00f6glichen erst die notwendige Skalierbarkeit und Wartbarkeit der immer komplexer werdenden Systeme. Nachteile (komplexer) Frameworks sind der resultierende Einarbeitungsaufwand, die Gefahr eines unn\u00f6tigen Overheads sowie die zus\u00e4tzlichen Abh\u00e4ngigkeiten.     <\/p>\n\n\n\n<p>Die heute am h\u00e4ufigsten verwendeten JavaScript-UI-Frameworks implementieren direkt oder indirekt einen <span style=\"font-size: revert; color: initial;\">komponenten-basierten Ansatz:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a aria-label=\"React (opens in a new tab)\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">React<\/a><\/strong>\/React DOM <em>(ab 2013)<\/em>: Frontend-Bibliothek entwickelt von Facebook. Weit verbreitet.<\/li><li><span style=\"color: initial;\"><strong><a aria-label=\"Angular (opens in a new tab)\" href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Angular<\/a><\/strong> <em>(ab 2010, vollst\u00e4ndige Neu-Implementierung 2016)<\/em>: komponenten-basiertes Framework von Google<\/span><\/li><li><a aria-label=\"Vue.js (opens in a new tab)\" href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>Vue<\/strong>.js<\/a> <em>(ab 2014)<\/em>: das j\u00fcngste der gro\u00dfen drei aktuellen <span style=\"color: initial;\">komponenten-basierte<\/span>n Frameworks<\/li><li><a href=\"https:\/\/svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>Svelte<\/strong><\/a> <em>(ab 2016)<\/em>: Anders als die o.g. Frameworks fungiert Svelte als Compiler, der Quellcode in imperativen JavaScript Code umwandelt. Svelte verzichtet auf das Konzept des Virtual DOM und weist eine hohe Effizienz zur Laufzeit auf.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/ionicframework.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Ionic<\/strong><\/a> <em>(ab 2013)<\/em>: Framework zur Entwicklung plattform\u00fcbergreifender Apps in Angular, React oder Vue (sowie f\u00fcr native iOS- und Android-Apps)<\/li><\/ul>\n\n\n\n<p>F\u00fcr Bestandsprojekte wichtige Frameworks sind:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a aria-label=\"Angular JS (opens in a new tab)\" href=\"https:\/\/angularjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Angular JS<\/a> <em>(ab 2010)<\/em>: Bezeichnung der fr\u00fcheren Versionen vom heutigen Angular, Angular ist nicht r\u00fcckw\u00e4rtskompatible zu Angular JS, Long Term Support f\u00fcr Angular JS bis 12\/2021 begrenzt     <\/li><li><a aria-label=\"Ember (opens in a new tab)\" href=\"https:\/\/emberjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Ember<\/a> <em>(ab 2011)<\/em>: eines der fr\u00fcheren, zeitweilig sehr bedeutsamen JavaScript-UI-Frameworks. F\u00fcr neue Projekte von geringer Bedeutung.<\/li><li><a aria-label=\"jQuery (opens in a new tab)\" href=\"https:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=2ahUKEwith4iZtq_0AhVPDOwKHU8OChgQFnoECAYQAQ&amp;url=https%3A%2F%2Fjquery.com%2F&amp;usg=AOvVaw1yb1TgbSxtZNKnsTynd_HN\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">jQuery<\/a><span style=\"color: initial;\">: Lange Jahre eine weit verbreitete und wichtige JavaScript-Bibliothek f\u00fcr die DOM-Manipulation von Webseiten  und f\u00fcr deren einheitliche Darstellung auf unterschiedlichen Browsern &#8211; durch die zwischenzeitlich erfolgten Browserentwicklungen\/Vereinheitlichungen (DOM, Renderengine Webkit) hat die Bibliothek allerdings ihre urspr\u00fcngliche Bedeutung  verloren.<\/span><\/li><\/ul>\n\n\n\n<p>Zuk\u00fcnftig m\u00f6glicherweise relevante Frameworks sind:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a aria-label=\"Qwik (opens in a new tab)\" href=\"https:\/\/github.com\/BuilderIO\/qwik\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Qwik<\/a>: Sehr junge Bibliothek mit dem Fokus auf schnelles Laden von Webseiten. Beim initialen Aufruf der Webseite werden (fast) nur HTML-Anteile \u00fcbertragen, die JavaScript-Anwendung wird nach Bedarf schrittweise nachgeladen. Die Interaktivit\u00e4t der Seite ist trotz des Nachladens der Anwendung von Anfang an gegeben.     <\/li><\/ul>\n\n\n\n<p>Anstelle von origin\u00e4ren CSS-Skripten werden u.U. <strong>CSS-Pr\u00e4prozessoren<\/strong> verwendet, wie <a aria-label=\"SASS (opens in a new tab)\" href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">SASS<\/a> <em>(ab 2007)<\/em>, <a aria-label=\"Less (opens in a new tab)\" href=\"https:\/\/lesscss.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Less<\/a> oder <a aria-label=\"Stylus (opens in a new tab)\" href=\"https:\/\/stylus-lang.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Stylus<\/a>, oder <em>(ab 2017)<\/em> das <a aria-label=\"PostCSS (opens in a new tab)\" href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">PostCSS<\/a> Framework, mit dem vorhandene CSS-Skripte mit Hilfe von w\u00e4hlbaren Plugins transformiert werden k\u00f6nnen. <\/p>\n\n\n\n<p>Ein <strong>Build-Prozess<\/strong> ist f\u00fcr Webseiten an sich nicht zwingend erforderlich, da ein &#8222;Kompilieren&#8220; von Quellcode im herk\u00f6mmlichen Sinne nicht notwendig ist und alle Bestandteile &#8211; HMTL, JS und CSS &#8211; prinzipiell unabh\u00e4ngig voneinander bereitgestellt und vom Browser geladen werden k\u00f6nnen. <\/p>\n\n\n\n<p>Trotzdem wird bei der Erstellung komplexer Webanwendungen ein separater Build-Schritt eingef\u00fcgt. Dieser deckt neben dem bereits erw\u00e4hnten CSS-Pr\u00e4prozessing auch eine etwaige (derzeit noch) notwendige Umwandlung von ES6-JavaScript-Syntax (ECMAScript 2015+) mit <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Babel<\/a> <em>(seit 2014)<\/em> in ES5-kompatiblen Code sowie eine etwaige notwendige Umwandlung von TypeScript in nativen JavaScript-Code ab, damit die Anwendung in allen aktuellen Browsern ausf\u00fchrbar ist. <\/p>\n\n\n\n<p>Insbesondere beinhaltet der Build-Schritt aber auch die Zusammenf\u00fchrung (B\u00fcndelung) von mehreren (JavaScript-) Dateien zu einer (oder mehreren) komprimierten Datei(en) mit dem Ziel, die Netzwerkanforderungen im produktiven Betrieb beim Laden einer Anwendung zu reduzieren. Hierbei kommt traditionell <a aria-label=\"webpack (opens in a new tab)\" href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">webpack<\/a> <em>(ab 2012)<\/em> oder das leichtgewichtigere, aber weniger aufwendig zu konfigurierende <a aria-label=\"Parcel (opens in a new tab)\" href=\"https:\/\/parceljs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Parcel<\/a> <em>(ab 2017)<\/em> oder das schelle <a aria-label=\"esbuild (opens in a new tab)\" href=\"https:\/\/esbuild.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">esbuild<\/a> (<em>Version 1.0 2021\/22<\/em>) zum Einsatz.<\/p>\n\n\n\n<p>Die B\u00fcndelung und Auslieferung einer einzigen gro\u00dfen, vollst\u00e4ndig optimierten Source-Datei an den Browser ist unter Entwicklern nicht unumstritten, weil es in Folge bei komplexeren Projekten zu signifikanten Einbu\u00dfen bei der Entwicklungsgeschwindigkeit kommen kann. So gehen neuere Build-Tools wie <a aria-label=\"Snowpack (opens in a new tab)\" href=\"https:\/\/www.snowpack.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Snowpack<\/a> <em>(ab 2019)<\/em>, <a aria-label=\"Vite (opens in a new tab)\" href=\"https:\/\/vitejs.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Vite<\/a> <em>(ab 2020)<\/em> und <a aria-label=\"wmr (opens in a new tab)\" href=\"https:\/\/wmr.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">wmr<\/a> <em>(ab 2020)<\/em> einen differenzierteren Weg: W\u00e4hrend f\u00fcr den produktiven Betrieb Bundles bereitgestellt werden, liefert der zugeh\u00f6rige Entwicklungsserver ungeb\u00fcndelte Dateien aus. Transformationen auf abh\u00e4ngige Module werden hier erst durchgef\u00fchrt, wenn diese vom Browser explizit angefragt werden. Dieses Vorgehen beschleunigt die Entwicklungsarbeit erheblich.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Daten-Schnittstelle<\/h4>\n\n\n\n<p>Im Allgemeinen erfolgt die Kommunikation zwischen Webseiten und Webservern \u00fcber das HTTP-Protokoll, welches im Internet unverschl\u00fcsselt im Klartext \u00fcbertragen wird. Bei modernen Webanwendungen kommt jedoch fast nur noch die verschl\u00fcsselte <strong>HTTPS<\/strong>-Variante (Transportverschl\u00fcsselung mit SSL-Zertifikaten) zum Einsatz. Die Notwendigkeit der Verschl\u00fcsselung ergibt sich jedenfalls dann, wenn sensible, personenbezogene Daten wie z.B. Usernamen, Passw\u00f6rter, Kontodaten usw. \u00fcbertragen werden.<\/p>\n\n\n\n<p>Wurden bei herk\u00f6mmlichen Webanwendungen vom Backend &#8222;fertige&#8220; HTML-Webseiten (statische Webseiten oder server-seitig gerenderte Templates) an das Frontend \u00fcbertragen, bei denen jedenfalls etwaige Daten immer bereits in der HTML-Struktur integriert waren, werden bei modernen Webanwendungen <strong>Webseitenstruktur und anzuzeigenden Daten getrennt voneinander \u00fcbermittelt<\/strong>.<\/p>\n\n\n\n<p>Die Daten werden dabei durch der Ablaufsteuerung der Webseite explizit mit Hilfe eines <strong>AJAX-Requests<\/strong> (XMLHttpRequest) beim Backend abgefragt. Die Abfrage erfolgt typischerweise \u00fcber zustandslose<strong> RESTful<\/strong>&#8211; oder <strong>GraphQL<\/strong>-Schnittstellen (Facebook, seit 2012\/2015), die seitens des Backends bereitgestellt werden m\u00fcssen. Die zur \u00dcbertragung der Daten verwendeten Datenformate sind <strong>JSON<\/strong> und (seltener) <strong>XML<\/strong>.<\/p>\n\n\n\n<p>Um Daten auch ereignisgesteuert vom Backend an die Frontend-Clients \u00fcbertagen zu k\u00f6nnen, wird (zus\u00e4tzlich) eine <strong>WebSocket-Verbindung<\/strong> aufgebaut, die f\u00fcr die gesamte Dauer der Nutzung der Anwendung aufrecht bleibt. Die Implementierung der Web-Socketverbindung erfolgt z.B. \u00fcber das <a aria-label=\"Socket.IO-Framework (opens in a new tab)\" href=\"https:\/\/socket.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Socket.IO-Framework<\/a>.<\/p>\n\n\n\n<p>Die etwaige<strong> Kommunikation eines Frontend mit mehreren Backends<\/strong> wird entweder vom Frontend direkt aus angesto\u00dfen oder indirekt wieder \u00fcber ein zentrales API-Gateway vermittelt. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bei <strong>Vermittlung \u00fcber eine zentrales API-Gateway<\/strong> auf dem Backend verteilt dieses die Anfragen nicht mehr (nur) an interne Mikroservices, sondern auch an externe Dienste innerhalb oder au\u00dferhalb der eigenen Firma.<\/li><li>Ein <strong>direkter Aufruf von Funktionen auf dritten Backends<\/strong> (ohne API-Gateway) setzt Kenntnisse \u00fcber diese Backends beim Frontend voraus. Er ist zudem immer mit einer faktischen \u00dcberschreitung der <strong>Same-Origin-Policy<\/strong> verbunden. <br>Ein Beispiel f\u00fcr einen direkten Aufruf eines weiteren Backends vom Frontend aus ist die Integration von Google Analytics Tracking Code im Quellcode der Webseite. Die genannte Same-Origin-Policy wird hier \u00fcber ein <em>single-pixel image request<\/em> umgangen, bei der die gesammelten Daten als Aufruf-Parameter \u00fcbergeben werden. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"203\" src=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/11\/web4.png\" alt=\"\" class=\"wp-image-1295\" srcset=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/11\/web4.png 896w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/11\/web4-300x68.png 300w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/11\/web4-768x174.png 768w, https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/11\/web4-720x163.png 720w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>siehe auch:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/flexitcs.net\/index.php\/frameworks-und-bibliotheken-fuer-node-js\/\" class=\"ek-link\">\u00dcbersicht zu wichtigen Frameworks und Bibliotheken f\u00fcr Node.js<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die erste Webseite der Welt, die am 20. Dezember 1990 am Kernforschungszentrum CERN [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":10,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[1],"tags":[12],"class_list":["post-1101","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-webentwicklung-webanwendungen-mobileanwendungen-digitaltransformation-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary<\/title>\n<meta name=\"description\" content=\"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary\" \/>\n<meta property=\"og:description\" content=\"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\" \/>\n<meta property=\"og:site_name\" content=\"Die Digitale Transformation gestalten\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-16T16:02:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-17T21:15:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\" \/>\n<meta name=\"author\" content=\"Matthias Bleyl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthias Bleyl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\"},\"author\":{\"name\":\"Matthias Bleyl\",\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7\"},\"headline\":\"Digitalisierung kompakt: Moderne Webanwendungen\",\"datePublished\":\"2021-10-16T16:02:58+00:00\",\"dateModified\":\"2022-07-17T21:15:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\"},\"wordCount\":2887,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7\"},\"image\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\",\"keywords\":[\"#WebEntwicklung #WebAnwendungen #MobileAnwendungen #digitaltransformation #technology\"],\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"de-AT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\",\"url\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\",\"name\":\"Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary\",\"isPartOf\":{\"@id\":\"https:\/\/flexitcs.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\",\"datePublished\":\"2021-10-16T16:02:58+00:00\",\"dateModified\":\"2022-07-17T21:15:47+00:00\",\"description\":\"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.\",\"breadcrumb\":{\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#breadcrumb\"},\"inLanguage\":\"de-AT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-AT\",\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage\",\"url\":\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\",\"contentUrl\":\"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png\",\"width\":1024,\"height\":130},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/flexitcs.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digitalisierung kompakt: Moderne Webanwendungen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flexitcs.net\/#website\",\"url\":\"https:\/\/flexitcs.net\/\",\"name\":\"Die Digitale Transformation gestalten\",\"description\":\"Matthias Bleyl\",\"publisher\":{\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flexitcs.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-AT\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7\",\"name\":\"Matthias Bleyl\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-AT\",\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a172617327e9b00cf870ce0cdc90766e0fbaa1b9d650feae84dea1de566cb33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a172617327e9b00cf870ce0cdc90766e0fbaa1b9d650feae84dea1de566cb33?s=96&d=mm&r=g\",\"caption\":\"Matthias Bleyl\"},\"logo\":{\"@id\":\"https:\/\/flexitcs.net\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary","description":"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.","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:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/","og_locale":"de_DE","og_type":"article","og_title":"Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary","og_description":"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.","og_url":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/","og_site_name":"Die Digitale Transformation gestalten","article_published_time":"2021-10-16T16:02:58+00:00","article_modified_time":"2022-07-17T21:15:47+00:00","og_image":[{"url":"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png","type":"","width":"","height":""}],"author":"Matthias Bleyl","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Matthias Bleyl","Gesch\u00e4tzte Lesezeit":"16 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#article","isPartOf":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/"},"author":{"name":"Matthias Bleyl","@id":"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7"},"headline":"Digitalisierung kompakt: Moderne Webanwendungen","datePublished":"2021-10-16T16:02:58+00:00","dateModified":"2022-07-17T21:15:47+00:00","mainEntityOfPage":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/"},"wordCount":2887,"commentCount":0,"publisher":{"@id":"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7"},"image":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage"},"thumbnailUrl":"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png","keywords":["#WebEntwicklung #WebAnwendungen #MobileAnwendungen #digitaltransformation #technology"],"articleSection":["Uncategorized"],"inLanguage":"de-AT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/","url":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/","name":"Digitalisierung kompakt: Moderne Webanwendungen - Executive Summary","isPartOf":{"@id":"https:\/\/flexitcs.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage"},"image":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage"},"thumbnailUrl":"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png","datePublished":"2021-10-16T16:02:58+00:00","dateModified":"2022-07-17T21:15:47+00:00","description":"Was sind moderne Webanwendungen, Warum sind sie wichtig und Wie werden sie erstellt? \u2013 Eine Einordnung der wichtigsten Begriffe, Fakten und Trends.","breadcrumb":{"@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#breadcrumb"},"inLanguage":"de-AT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/"]}]},{"@type":"ImageObject","inLanguage":"de-AT","@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#primaryimage","url":"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png","contentUrl":"https:\/\/flexitcs.net\/wp-content\/uploads\/2021\/10\/web1.png","width":1024,"height":130},{"@type":"BreadcrumbList","@id":"https:\/\/flexitcs.net\/index.php\/digitalisierung-kompakt-moderne-webanwendungen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flexitcs.net\/"},{"@type":"ListItem","position":2,"name":"Digitalisierung kompakt: Moderne Webanwendungen"}]},{"@type":"WebSite","@id":"https:\/\/flexitcs.net\/#website","url":"https:\/\/flexitcs.net\/","name":"Die Digitale Transformation gestalten","description":"Matthias Bleyl","publisher":{"@id":"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexitcs.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-AT"},{"@type":["Person","Organization"],"@id":"https:\/\/flexitcs.net\/#\/schema\/person\/bdc6fbae07797fec12d64f79bc4649a7","name":"Matthias Bleyl","image":{"@type":"ImageObject","inLanguage":"de-AT","@id":"https:\/\/flexitcs.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a172617327e9b00cf870ce0cdc90766e0fbaa1b9d650feae84dea1de566cb33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a172617327e9b00cf870ce0cdc90766e0fbaa1b9d650feae84dea1de566cb33?s=96&d=mm&r=g","caption":"Matthias Bleyl"},"logo":{"@id":"https:\/\/flexitcs.net\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/posts\/1101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/comments?post=1101"}],"version-history":[{"count":0,"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/posts\/1101\/revisions"}],"wp:attachment":[{"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/media?parent=1101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/categories?post=1101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flexitcs.net\/index.php\/wp-json\/wp\/v2\/tags?post=1101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}