Wenn Stricken und Programmieren im selben Satz erwähnt werden, dann meist zur Verbildlichung von Gegensätzen: Tradition trifft auf Moderne, analog trifft auf digital, belächelnswertes DIY-Hobby trifft auf zukunftsorientierten Skill. Es mag widersprüchlich erscheinen, doch die Jahrhunderte alte Handarbeitstechnik und Programmiersprachen haben mehr gemein, als es auf den ersten Blick vermuten lässt. Jemand sitzt stundenlang vor unzähligen Zeilen mit kryptisch anmutenden Kürzeln, oft bis tief in die Nacht hinein und an einem bestimmten Punkt stellt sich das Gefühl ein, die Arbeit einfach nur noch in die Ecke pfeffern zu wollen. Dieses Gefühl kennen sowohl Programmierer:innen als auch Strickende.
Die binäre Basis
So groß wie die Vielfalt an Programmiersprachen ist, so groß ist auch die Vielfalt an Stricktechniken und Mustern – wahrscheinlich sogar größer. Beiden ist jedoch gemein, dass sie sich jeweils auf zwei Grundbausteine zurückführen lassen: Einsen und Nullen bzw. rechte und linke Maschen. An dieser Stelle soll kein Stricktutorial folgen, doch die grundlegenden Strickbegriffe sollten für ein besseres Verständnis bekannt sein.
Eine Strickschrift ist die grafische Repräsentation eines Strickmusters mit Hilfe eines Kästchenrasters und Symbolen für die verschiedenen Maschenarten. Der binäre „Übersetzung“ ist im Vergleich komplexer.
Strickarbeiten können in Reihen oder Runden angefertigt werden. Die Strickrichtung verläuft dabei von rechts nach links. Eine Reihe oder Runde besteht aus Maschen, die während der Arbeit auf der Stricknadel liegen. Rechte Maschen bilden oft die Vorderseite des Gestricks und sehen aus wie „V“s. Sie bilden eine glatte Oberfläche. Linke Maschen erzeugen dagegen kleine Knötchen, wenn sie einzeln auftauchen, bzw. eine Wellenstruktur in der Fläche.
Rechte und linke Maschen sind die Einsen und Nullen des Strickens: Auf ihnen bauen alle weiteren Techniken auf.
Außer rechten und linken Maschen gibt es noch viele weitere Techniken, etwa Ab- und Zunahmen, um das Gestrick zu formen oder dekorative Elemente wie Zöpfe, Umschläge oder tiefer gestochene Maschen. Sie alle beruhen jedoch auf den rechten und linken Maschen, mit denen sich komplette Strickstücke inklusive komplexer Strukturmuster stricken lassen.
Genau dieses Strukturmuster mit binärer Basis sind es, die das Stricken zum perfekten Nachrichtenmedium gemacht haben, lange bevor es ausgefeilte digitale Chiffrier- und Dechriffiertechnologien gab. Selbstverständlich war der Wollpullover mit Noppenmuster nicht der Vorläufer der E-Mail. Besonders in Kriegszeiten hat das Stricken jedoch eine wichtige Rolle beim verschlüsselten Sammeln und Weitergeben von Informationen gespielt.
Steganografie: gestrickte Geheimbotschaften
Eine ältere Dame sitzt am Fenster und strickt. Von ihrem Platz hat sie einen guten Blick auf die Züge, die nicht weit von ihrem Haus entfernt vorbeifahren. Eigentlich eine idyllische Vorstellung, wenn es sich dabei nicht um Kriegsgerät der deutschen Besatzer und eine französische Spionin während des Ersten Weltkrieges handeln würde. Als Spion gilt es unauffällig zu sein, keine Aufmerksamkeit zu erregen. Doch das Stricken ist nicht nur Teil der Tarnung. Die Strickware selbst kann zur geheimen Botschaft werden, indem ein Code in die Maschen eingebaut wird. Diese Form der Steganografie, die verborgene Übermittlung von Informationen, kam sowohl im Ersten als auch im Zweiten Weltkrieg zum Einsatz.
„Drop one for a troup train, purl one for an artillery train“ – so lautet es in der BBC-Dokumentation MI6: A Century in the Shadows, also eine Masche fallen lassen für einen Truppenzug, eine linke Masche stricken für einen Artilleriezug. Man kann davon ausgehen, dass statt „drop one“ hier eher ein Umschlag gemeint ist, der zwar ein Loch erzeugt, aber das Gestrick nicht weiter auflöst. Den Militärhistorikern sei an dieser Stelle ihre Strickunkenntnis verziehen. Wie gut, dass die richtige Spionagearbeit den älteren Damen überlassen wurde …
Eine noch naheliegendere Form der Informationsübermittlung mittels Gestrick ist der Einbau von Morsebotschaften. Die erhabene Struktur der linken Maschen ist ideal, um mit ihnen Strich- und Punktkombinationen nachzubilden. Für das ungeübte Auge wirken sie dabei lediglich wie ein Strukturmuster, besonders, wenn der eigentliche Code durch andere Musterelemente kaschiert wird.
Es ist jedoch nicht nur das Gestrick an sich, das als steganografisches Medium genutzt werden kann. Der Mix aus Kürzeln und Ziffern bietet sich gerade dafür an, verschlüsselte Informationen darin zu verstecken. Aus diesem Grund haben sowohl die USA (im Zweiten Weltkrieg) als auch Großbritannien (im Ersten Weltkrieg) den Auslandsversand von Strickanleitungen verboten. Die durch Abkürzungen bestimmte Form von Strickanleitungen lassen sie für Außenstehende nahezu unverständlich wirken – ganz so wie Programmcode …
Bibliotheken haben den Auftrag, Medien und Informationen für Nutzerinnen und Nutzer aufzuarbeiten und bereitzustellen. Doch jedes Jahr werden mehrere Millionen Publikationen veröffentlicht. Die DNB allein verzeichnete den Zugang 2.352.693 neuer Einheiten im Jahre 2020[1]. Wer soll da den Überblick behalten? Text und Data Mining kann hier Abhilfe schaffen.
Text Mining, Data Mining, Text Data Mining, Textual Data Mining, Text Knowledge Engineering, Web Mining, Web Content Mining, Web Structure Mining, Web Usage Mining, Content Mining, Literature Mining und sogar Bibliomining[2] – viele Begriffe, die alle das selbe Konzept – teilweise mit unterschiedlichen Schwerpunkten – bezeichnen, welches im Folgenden Text und Data Mining, kurz TDM, genannt werden soll. Grob gesagt ist damit die algorithmusbasierte automatische Analyse digitaler Daten jeglicher Form gemeint.
TDM beinhaltet dabei explizit sowohl die Verarbeitung natürlichsprachiger Texte, sogenannter unstrukturierter Daten, als auch beispielsweise Tabellen und anderer strukturierter Daten, welche unterschiedliche Anwendungsfälle und Herausforderungen mit sich bringen. Dabei gibt es zwei große Aspekte: das Auffinden bereits bekannter Informationen und die Schaffung neuen Wissens durch die Verknüpfung oder Neuinterpretation von Bekanntem.[3]
Ganz allgemein lassen sich Verfahren des TDM in drei große Bereiche aufteilen:
Musterextraktion (Programm analysiert, welche Daten oft gemeinsam auftreten)
Es lässt sich natürlich noch feiner unterteilen in Regressionsanalysen, Abhängigkeits- oder Abweichungsanalyse, Beschreibung, Zusammenfassung, Prognose, Assoziation etc., was die große Bandbreite an Nutzungsmöglichkeiten des TDM aufzeigt[4], für uns aber gerade zu weit geht, da wir nur den Bereich der Bibliotheken betrachten wollen.
Anwendungsmöglichkeiten für Bibliotheken
Empfehlungssysteme
Eine Möglichkeit der Kataloganreicherung ist die Implementierung eines Empfehlungsdienstes. Dieser analysiert Recherche- und/oder Ausleihdaten, um Nutzenden während ihrer Recherche weitere Medien vorzuschlagen, die relevant für sie sein könnten[5]. Ein solcher Dienst ist BibTip, welcher an der Universität Karlsruhe entwickelt wurde und mittlerweile von vielen wissenschaftlichen und öffentlichen Bibliotheken in Deutschland verwendet wird.
Maschinelle Indexierung
Die inhaltliche Erschließung bietet einen großen Mehrwert bei der Recherche, ist jedoch ein zeit- und personalaufwendiger Aspekt der bibliothekarischen Arbeit. Schon 2009 begann die Deutsche Nationalbibliothek, diese Arbeit mit maschineller Unterstützung durchzuführen. Dabei wurden die in der GND hinterlegten Schlagwörter als Grundlage für die automatische Verschlagwortung mithilfe des Averbis-Programms verwendet.[6]
Herausforderungen
Urheberrecht
TDM war viele Jahre eine rechtliche Grauzone. Unklarheiten bezogen sich unter anderem darauf, ob maschinelle Verarbeitung durch die bestehenden Lizenzverträge abgedeckt war, ob temporäre für die Auswertung erstellte Kopien unerlaubte Vervielfältigung bedeuteten, inwieweit die Ergebnisse Dritten zugänglich gemacht werden durften und vieles mehr.[7] Die Urheberrechtsnovelle 2018 sorgte für mehr Klarheit, indem durch § 60d UrhG explizit die Nutzung von TDM für die wissenschaftliche Forschung erlaubt wurde.
Datenschutz
Datenschutz ist vor allem bei der Verarbeitung personenbezogener Daten wie der Analyse von Ausleih- oder Recherchevorgängen relevant. Im Sinne der Datensparsamkeit dürfen nur so viele Daten erhoben werden, wie erforderlich sind und diese auch nur so lange wie nötig gespeichert werden. Aus Datenschutzgründen werden die Daten deshalb anonymisiert gespeichert und verarbeitet. Dies schränkt beispielsweise die Empfehlungsdienste ein, da so nur die aufgerufenen oder ausgeliehenen Medien während eines einzelnen Vorgangs analysiert werden, diese jedoch nicht mit früheren Vorgängen der selben Person verknüpft werden können.
Formatvielfalt
TDM kann nur funktionieren, wenn die auszuwertenden Daten in geeigneter Form vorliegen. Dabei kann es verschiedene Hürden geben, sowohl rechtlicher Natur, wenn Daten im Besitz von Personen oder Institutionen sind, sowie technischer Natur, wenn Daten nicht in maschinenlesbarer Form vorliegen, oder zu viele verschiedene (inkompatible) Dateiformate genutzt werden.[8]
Ausblick
Schon heute profitieren Bibliotheken von TDM-Anwendungen, besonders Empfehlungsdienste sind verbreitet. Maschinelle Indexierung wird zumindest vereinzelt eingesetzt, bleibt in der Qualität aber noch weit hinter der intellektuellen Erschließung durch Menschen zurück.[9] Aufgrund des technischen Fortschritts und dem immer zuverlässiger werdenden natural language processing darf man hier jedoch hoffnungsvoll in die Zukunft blicken.
Doch Bibliotheken sind nicht nur Anwenderinnen, sondern können und sollten ebenfalls Sorge dafür tragen, dass ihre eigenen Bestände für TDM nutzbar sind. Dies wird erleichtert durch § 60d UrhG, aber sollte auch bei der Aushandlung von Lizenzverträgen, bei der Auswahl der anzubietenden Formate von elektronischen Medien wie auch bei der Retrodigitalisierung beachtet werden.
Quellen
[1] Deutsche Nationalbibliothek (2021): Jahresbericht 2020. S.45. Online unter urn:nbn:de:101-2021051859
[2] Mehler, Alexander; Wolff, Christian (2005): Einleitung: Perspektiven und Positionen des Text Mining. In: LDV-Forum, Jg. 20, Nr. 1, S. 1–18. Online unter urn:nbn:de:0070-bipr-1688
[3] Saffer, Jeffrey; Burnett, Vicki. (2014). Introduction to Biomedical Literature Text Mining: Context and Objectives. In Kumar, Vinod; & Tipney, Hannah (Hg.): Biomedical Literature Mining. New York: HumanaPress, Springer. S. 1–7. Online unter doi.org/10.1007/978-1-4939-0709-0_1
[4] Drees, Bastian (2016): Text und Data Mining: Herausforderungen und Möglichkeiten für Bibliotheken. In: Perspektive Bibliothek, Jg. 5, Nr. 1, S. 49-73. Online unter doi.org/10.11588/pb.2016.1.33691
[5] Mönnich, Michael; Spiering, Marcus (2008): Erschließung. Einsatz von BibTip als Recommendersystem im Bibliothekskatalog. In: Bibliotheksdienst, Jg. 42, Nr. 1, 54–59. Online unter doi.org/10.1515/bd.2008.42.1.54
[6] Uhlmann, Sandro (2013): Automatische Beschlagwortung von deutschsprachigen Netzpublikationen mit dem Vokabular der Gemeinsamen Normdatei (GND). In: Dialog mit Bibliotheken, Jg. 25, Nr. 2, S.26-36. Online unter urn:nbn:de:101-20161103148
[7] Okerson, Ann (2013): Text & Data Mining – A Librarian Overview [Konferenzbeitrag]. Herausgegeben von IFLA. Online unter http://library.ifla.org/252/1/165-okerson-en.pdf (Abruf am 29.01.2022)
[8] Brettschneider, Peter (2021): Text und Data-Mining – juristische Fallstricke und bibliotheksarische Handlungsfelder. In: Bibliotheksdienst, Jg. 55, Nr. 2, S. 104-126. Online unter doi.org/10.1515/bd-2021-0020
[9] Wiesenmüller, Heidrun (2018): Maschinelle Indexierung am Beispiel der DNB. Analyse und Entwicklungmöglichkeiten. In: O-Bib, Jg. 5, Nr. 4, S. 141-153. Online unter doi.org/10.5282/o-bib/2018H4S141-153
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2021/22, Dr. Stefanie Elbeshausen) entstanden.
Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Das Thema im Rat der Europäischen Union Ende 2020 war „Verschlüsselung von online Kommunikation“. Der Rat der EU diskutiert, wie z. B. E-Mails, WhatsApp Nachrichten oder Snaps von einem internetfähigen Gerät zum anderen gelangen. Eine Geschichte über die Crypto Wars.
„Da gibts doch nichts großes zu diskutieren“, würde jetzt manch einer sagen. „Ja, irgendwie werden diese Bilder und Texte in Einsen und Nullen umgewandelt und dann äähm… einfach zum Empfänger geschickt“. Meist schließt die Person den Satz mit einem selbstsicheren Gesichtsausdruck. Dieser Gesichtsausdruck geht dann zu einem Altklugen über, sobald die Leute drum herum murmelnd ihre Zustimmung bekunden.
Bei dieser schwammigen Aussage wurde auch nichts Falsches behauptet. Nur ein falsches Bild von online Kommunikation und deren Komplexität wird vermittelt.
Das falsche Bild ensteht bei den Worten „einfach zum Empfänger geschickt“. Darunter kann man sich vorstellen, dass Nachrichten auf einer direkten Linie zwischen den zwei Smartphones gesendet werden. So ist es dann auch selbstverständlich, dass der Rest der Welt nichts von der Kommunikation mitbekommt.
Dieses Bild ist aber komplett irreführend. Die Nachricht, die dann auf dem Gerät des Empfängers aufploppt, ist nur die Ziellinie einer langen Strecke die in Sekunden zurück gelegt wird.
Wenn wir Alice zum Beispiel eine WhatsApp Nachricht an Bob verschicken lassen, könnte es sein, dass die Nachricht zu einem Server in Grönland oder in den USA weitergeleitet wird. Und das alles in Sekunden. Auf all den Zwichenstationen, die auf dem Weg liegen (z.B. Routern und Switches) kann die Nachricht abgegriffen werden. (vgl. Snowden 2019)
Eine Modell einer online Kommunikation am Beispiel WhatsApp.
Das ist dann so als ob der private WhatsApp Chat von Alice und Bob noch einen weiteres Mitglied hätte namens Eve. Und dabei wissen Alice und Bob nichts von Eve. Gegen das Abgreifen von Daten kann man sich bei so einem komplexen Sytem nur schwer wehren. Aber man kann dafür sorgen, dass die Informationen in den falschen Händen wie Kauderwelsch aussehen. Mithilfe von Verschlüsselung.
Um unrechtmäßigen Zugriff auf private Kommunikation zu verhindern, gibt es Kryptographie. Kryptographie kommt aus dem Altgriechischen und bedeutet so viel wie „Geheimschrift“ bzw. „Verschlüsselung“. Obwohl sie in der modernen IT-Welt nicht mehr weg zu denken ist, sind Geheimschriften nichts Neues. Selbst Leonardo da Vinci dokumentierte mithilfe einer Geheimschrift (Spiegelschrift) seine Forschungen. (vgl. Wikipedia 2020)
Eine Doppelseite aus Leonardo da Vinci’s Büchern. Geschrieben in Spiegelschrift (vgl. Wikipedia 2020)
Nach dem römischen Schriftsteller Sueton nutzte der Feldherr Gaius Julius Cäser eine Geheimschrift für militärische Korrespondenzen. Diese Geheimschrift ist heute als Cäsar Chiffre bekannt. Aus dem Namen „Gaius“ wird dann „Hbjvt“. Der Algorithmus dahinter ist einfach, wenn man ihn kennt. Jeder Buchstabe wird um eine Stelle verschoben. Aus „a“ wird „b“ aus „b“ wird „c“, … aus „z“ wird wieder „a“. Somit konnte kein Aussenstehender, der den Brief abfing, etwas damit anfangen. (vgl. Wikipedia 2021) Mit der Außnahme, er kennt den Algorythmus und den Schlüssel. Der Algorythmus ist bei der Cäsar Chiffre die Verschiebung von den Buchstaben. Und der Schlüssel ist im obigen Beispiel, mit dem Namen „Gaius“ -> 1.
#https://gist.github.com/nchitalov/2f2b03e5cf1e19da1525
def caesar_encrypt(klartext, schluessel):
outText = []
cryptText = []
lowercase = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
#Durch jeden Buchstaben durchlooben und um n Schritte Verschieben
for eachLetter in klartext:
index = lowercase.index(eachLetter)
crypting = (index + schluessel) % 26
cryptText.append(crypting)
newLetter = lowercase[crypting]
outText.append(newLetter)
return outText
#Vordefinierte Funktion ausführen
#Mit dem Klartext 'Gaius' und dem Schlüssel 2
geheimtext = caesar_encrypt('Gaius', 2)
#Ergebnis der Funktion ausgeben
print(geheimtext)
Vielleicht erscheint einem der Algorythmus anspruchsvoller als der Schlüssel. Der Schlüssel ist aber viel wichtiger und entscheidet darüber, wie sicher eine Verschlüsselung ist.
Bei der Cäsar Chiffre werden die Buchstaben um je x Stellen verschoben. Das deutsche Alphabet besteht ohne Umlaute und Sonderzeichen (z. B. ß) aus 26 Buchstaben. So kann der Schlüssel 26 verschiedene Werte annehmen. All diese 26 Möglichkeiten kann ein Computer in Sekunden ausprobieren. Und so die Verschlüsselung in Sekunden knacken. Das nennt man dann „Brute Force“. (vgl. heise online 2021)
Wenn wir einen „Brute Force“ bei aktuellen Verschlüsselungs-Algorythmen anwenden, z.B. RSA mit einem 512-Bit Schlüssel, dann müsste der Computer dann 2512 Möglichkeiten durchprobieren.
Schon bei einer 256-bit Verschlüsselung gibt es 115,792,089,237,316,195,423,570,985,008,687,907,853,269,984,665,640,564,039,457,584,007,913,129,639,935 bzw. 2256 mögliche Schlüssel
Wenn wir davon ausgehen, dass jedes Atom im Universum ein Computer ist und jeder in einer Millisekunde einen möglichen Schlüssel ausprobiert, dann benötigt man mit der „Brute Force“ Methode mehr als 10211 Jahre. Das ensptricht ein vielfaches der Lebenszeit des Universums (13,75*109 Jahre). (vgl. Stack Exchange Inc. 2015)
Das Entschlüsseln entwickelt sich aber auch stetig weiter. Das kryptographische Verfahren RSA verwendet teilweise noch 1024-bit Schlüssellängen. Aber solche Schlüssel sind mittlerweile mit spezieller Software zu knacken. Dafür benutzt die Software statistische Verfahren und muss nicht wie beim „Brute Force“ 21024 Möglichkeiten ausprobieren. Deswegen gelten momentan 2048-Bit Schlüssel und 4096-Bit Schlüssel als sicher. Diese Schlüssel werden zum Beispiel bei vielen Webseiten, die https (Hyper Text Transfer Protocol Secure) benutzen, verwendet. (vgl. PC-Welt 2014)
Das sind die Basics zum Thema Verschlüsselung. Bei modernen Verschlüsselungverfahren werden weitere Hürden aufgestellt um das Entschlüsseln zu erschweren.
Eine Entschließung vom Rat der EU ist eine Art Stellungnahme von den aktuellen Regierungen der EU-Mitgliedsstaaten. Der Titel des vierseitigen Dokuments lautet „Sicherheit durch Verschlüsselung und Sicherheit trotz Verschlüsselung“. Diese Gegensätzlichkeit im Titel zieht sich mehr oder weniger im ganzen Dokument durch. In sieben Kapiteln fordert der Rat der EU einen „Regelungsrahmen zu entwickeln“. Der einerseits den Behörden ermöglichen soll „ihre operativen Aufgaben wirksam zu erfüllen und andererseits die Privatsphäre, die Grundrechte und die Sicherheit der Kommunikation zu schützen“. Der Rat pocht auf Innovation mithilfe der Technologiebranche, Forschung und Wissenschaft. (vgl. Rat der EU 2020)
Diese Debatte zieht sich jetzt schon seit Jahren hin. Crypto War 1.0, Crypto War 2.0 u.s.w. Der sogenannte „Crypto War“ begann in den 1990er-Jahren. In dieser Zeit wurde nach Möglichkeiten gesucht, den Zugang zu verschlüsselter Kommunikation für Strafverfolgungsbehörden zu vereinfachen. (vgl. heise Online 2020a)
Begonnen hat der „War“ in den USA. Dort wurde dem Senat ein Gesetzesentwurf vorgelegt, um den Strafverfolgungsbehörden Zugriff auf die verschlüsselte Kommuikation von Nutzern zu verschaffen. Zusätzlich machte die NSA (National Security Agency) den Vorschlag, dass alle Hersteller von Telefonanlagen den von der NSA selbst entwickelten Clipper Chip zur Verschlüsselung einsetzen müssen. (vgl. Tresorit Team 2016)
Bei diesem Chip handelt es sich um ein im Jahre 1993 entwickeltes symmetrisches Verschlüsselungssystem. Der sogenannte Escrowed Encryption Standard (EES) ermöglicht den Zugriff auf verschlüsselte Kommunikation mithilfe von zwei Schlüsseln. Einer ist bei den Behörden hinterlegt. Und der Andere wird nur auf richterliche Anordnung freigegeben. Nach nur drei Jahren wurde das Projekt aufgrund von zahlreichen Protesten eingestellt. (vgl. Tresorit Team 2016)
Als Backdoor wird eine absichtlich eingebaute Verschlüsselungs-Hintertür bezeichnet. Praktisch wäre es dann ein Schlüssel, mit dem man eine bestimmte Verschlüsselung immer knacken kann. Momentan sind diese Backdoors eine Möglichkeit das Ziel „Sicherheit durch Verschlüsselung und Sicherheit trotz Verschlüsselung“ zu erreichen. Diese Methode sorgt aber für heftige Kritik. Die Bitkom, der Digitalverband Deutschlands, kritisiert die Hintertüren. Backdoors seien nicht dauerhaft kontrollierbar und eine Einladung für Kriminelle und ausländische Nachrichtendienste. (vgl. bitkom 2020)
Juniper bietet Internetinfrastruktur für Unternehmen an. Von Produkten wie WiFi-Router bis hin zu Cloud Diensten. (vgl. Juniper Networks Inc. 2021) Ende 2015 began der Skandal rund um den US-Konzern Juniper. Der Netzausrüster hatte auf Verlangen der NSA eine Hintertür in seinem Betriebssystem ScreenOS eingebaut. Ende Oktober 2020 gab Juniper dann gegenüber dem US-Kongress zu, dass die Hintertür von einem anderen Staat übernommen wurde und so die NSA ausperrte. Ermittler gehen davon aus, dass es sich um China handelt. Das ist ein perfektes Beispiel dafür, wie Hintertüren nach hinten los gehen können. 😀 (vgl. heise Online 2020b)
Am 11. Januar 2021 antwortete die EU-Innenkommissarin Ylvy Johansson auf einen Brief von drei liberalen EU-Abgeordneten. Thema des Briefes waren Backdoors. In der Antwort der EU-Innenkommissarin schließt sie Hintertüren, um Zugriff auf verschlüsselte Daten zu erlangen, aus. (vgl. STANDARD Verlagsgesellschaft m.b.H. 2021)
Sinnbildliche Darstellung einer Backdoor, dessen Zugang geheim ist.
Bis jetzt existieren noch keine ausgeglichenen Technologien, um online Kommunikation für Dritte zu verschlüsseln, aber für Strafverfolgungsbehörden doch wieder zu entschlüsseln. Bei diesem Diskurs, der nun schon über 20 Jahre andauert, werden nur langsam Meilensteine erreicht.
Die EU-Mitgliedsstaaten haben sich dafür entschieden, dass Verschlüsselung wieder mehr Aufmerksamkeit gewidmet werden soll. Der richtige Weg dafür soll Innovation sein. Eine Innovation, die auf dem Wissen und den Interessen von Wirtschaft, Wissenschaft und Politik entsteht.
Am Ende betrifft eine solche Innovation aber jeden Einzelnen und jede WhatsApp Nachricht eines jeden Einzelnen. Und auch wenn es „Nerds“ sind, die diese Algorythmen entwickeln, sollte jedem bewusst sein wieprivat seine online Kommunikation sein soll und ist.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden. Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Flask ist ein WSGI Micro-Framework für Webapplikationen. Ursprünglich wurde Flask als Aprilscherz von Armin Ronacher im Jahr 2010 entwickelt. Auf Grund steigender Beliebtheit unter den Usern, gründete Armin Ronacher die „The Pallets Project“-Sammlung von Open Source Code Bibliotheken. Diese Sammlung dient nun als Organisation hinter Flask und weiteren Bibliotheken wie Werkzeug und Jinja, um die Flask aufgebaut ist. Dabei stützt sich Flask nur auf die nötigsten Komponenten die für die Webentwicklung benötigt werden ( routing, request handling, session). Alle anderen Komponenten müssen dementsprechende entweder selbst entwickelt oder über zusätzliche Pakete hinzugefügt werden.[1]
Was Flask so außergewöhnlich macht ist der simple Einstieg und die Effizienz im Zusammenspiel mit anderen Python Bibliotheken. Was dem Entwickler erlaubt Web-Applikationen mit Flask im größeren Stil zu entwickeln und auszubauen, ohne dem Entwickler etwas aufzuzwingen. Da die „The Pallets Project“-Sammlung sich einer großen Unterstützer Community erfreut, gibt es viele Erweiterungsmöglichkeiten welche die Funktionalität erhöhen und Flask äußerst flexibel werden lässt.[2]
Wie das Micro-Framwork Flask funktioniert soll in den folgenden Teilen dieses Beitrags deutlich werden. Sei es die simple installation, oder die einfach Handhabung.
Installation
Wie einfach es ist mit Flask eine Web-Applikation mit Flask zu erstellen soll in den folgenden Abschnitten deutlich werden.
Des Weiteren bietet es sich an beim Entwickeln einer Flask Web-Applikation eine virtuelle Entwicklungsumgebung wie Pythons hauseigene virtualenv zu verwenden um Projektabhängigkeiten und Bibliotheken für jedes Projekt entsprechend zu verwalten. Außerdem ermöglicht die virtualenv eine schnelle und einfach Portierung bzw. ein schnelles unkompliziertes Deployment einer Applikation.
Wie Pythons virtuelle Entwicklungsumgebung funktioniert ist hier näher beschrieben „virtualenv“.
Um Flask zu installieren kann man einfach „pip“ benutzen. Dies ist der Package Installer für Python:
$ pip install Flask
So einfach lässt sich Flask installieren mit seinen benötigten Paketen installieren.[3]
Hello World!
Wie einfach das erstellen einer Web Applikation mit Python und Flask ist soll an einem simplen „Hello World“ Beispiel verdeutlicht werden. Dazu wird die Datei „app.py“ angelegt. Diese lässt sich einfach mit einem Texteditor öffnen und bearbeiten (z.B. PyCharm oder VS Code).
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "Hello World!"
if __name__ == '__main___':
app.run()
Zur Erklärung: In Zeile 1 importieren wir Flask und in initieren in Zeile 3 eine neue Instanz der Flask-Klasse und weisen sie der Variable „app“ zu. In Zeile 5 wird ein „Decorator“ benutzt um die Route/View „/“ der View-Funktion „index()“ zuzuweisen. Also einfach gesagt: Wird die Seite „/“ des Servers im Browser angefragt, so führt dieser die View-Funktion aus die den Content „Hello World!“ bereitstellt.[4]
Der letzt Abschnitt des Codes startet den Server sobald die Datei für den Interpreter aufgerufen wird. Wenn alles richtig installiert ist sollte nun folgender output zu sehen sein:
(webapp) $ py app.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Die im Code erstellte Seite „/“ mit der „index()“-Funktion lässt sich einfach über den Webbrowser öffnen. Dazu lediglich in der Adresszeile des Browser auf „http://localhost:5000/“ oder „http://127.0.0.1:5000/“ aufrufen. Die aufgerufene Seite sollte nun „Hello World!“ in der linken oberen Ecke zeigen.
Routing and Views
Routing bezeichnet das auflösen und händeln von URLs. Dabei soll beim aufrufen einer URL der korrekte Inhalt im Browser dargestellt werden. Bei Flask wird dies mit dem Route- „Decorator“ eine Funktion an eine URL gebunden um ihren Content nach dem Aufrufen der URL bereitzustellen. Das folgende Bild soll den Ablauf der URL Auflösung und dem damit verbunden bereitstellen von Content verdeutlichen.[5]
Im vorangegangenen Hello World Beispiel wird dies in Zeile 5 und 6 gemacht. Nach dem aufrufen der URL „http://localhost:5000/“ sollte in der Konsole/der Shell folgendes zu sehen sein:
(webapp) $ py app.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [29/Jan/2021 11:56:33] "GET / HTTP/1.1" 200 –
Es ist zu sehen das der Browser eine Anfrage für die „/“-Route an den Server stellt. Dieser verarbeitet die Anfrage entsprechend der mit der Route verbundenen View-Funktion „index()“. Im Anschluss sendet der Server http-status: 200 (OK) und rendert „Hello World!“.
In der Konsole stehen sämtliche Anfragen und http-status codes die vom Flask-Server verarbeitet werden.
Routen und http-Methoden:
Der „Decorator“ kann ein weiteres Argument annehmen. Dieses Argument ist eine Liste mit den für den „Decorator“ erlaubten http-Methoden.
Somit lassen sich Routen in der Nutzung bestimmter http-Methoden einschränken. Ist jedoch keine Liste angegeben so ist die „GET“-Methode als Standard festgelegt.
Mithilfe der „Decorator“ lassen sich auch dynamische und variable Regeln für Routen festlegen, da statische Routen eine Website stark einschränken können. So lässt sich im folgenden Beispiel eine Profilseite für registrierte User anlegen oder gepostete Artikel/Beiträge bekommen eine eigene URL basierend auf dem Datum an dem sie Online gestellt worden und ihrem Titel.
Dabei geben die „<>“ an ob es sich um eine Variable handelt. So lassen sich Routen dynamisch generieren. Zusätzlich lässt sich der Variablen-Typ angeben der verarbeitet werden soll „<datatype:variablename>“. Folgende Variablentypen sind für Routen vorgesehen und möglich:
string: Akzeptiert Text ohne „/“.
int: Akzeptiert ganze Zahlen (integers).
float: akzeptiert numerische Werte die einen Dezimalpunkt enthalten.
path: Akzeptiert Text mit „/“ (Pfadangaben)
Dynamische Routen können dementsprechend im Gegensatz zu statischen Routen Parameter entgegennehmen und verarbeiten. Somit ließe sich auch eine API mit Flask umsetzen um Daten für User zugänglicher und nutzbarer zu machen oder einen erhöhten Automatisierungsgrad für Datenabfragen zu ermöglichen. Um dies deutlich zu machen dienen die folgenden Beispiele:[6]
So einfach diese Beispiele sind, so geben sie doch einen deutlichen Ausblick auf die Möglichkeiten, welche sich mit Flask bieten. Welche Unternehmen Flask in ihrer Entwicklung benutzen kann hier eingesehen werden.
Die Template Engine
Wie werden jetzt aus statischen HTML-Dateien dynamische Websiten mit Flask? Ganz einfach, mit Hilfe der eingebauten Template Engine Jinja. Jinja ist eine vielseitige und einfache Templete Engine mit der sich unter anderem auch dynamische HTML-Inhalte erstellen lassen. Sie basiert dabei auf der „Django“ Template Engine bietet jedoch viel mehr Möglichkeiten wie volle „unicode“ Unterstützung und „automatic escaping“ für mehr Sicherheit in Webanwendungen. Zusätzlich lassen sich die gängisten verwendeten Codeblöcke der html-templates immer wieder verwenden und vielseitig einsetzen. Dabei verwendet die Template Engine Variablen, Ablauflogiken und Anweisungen um im Template verwendete Ausdrücke mit Inhalt zu füllen.[7]
Funktionsweise Template Engine Jinja
Um das ganze noch mehr zu veranschaulichen dient der folgende Beispiel Code mit der angegeben Projektstruktur:
from flask import Flask, escape, render_template
app = Flask(__name__)
# Routes and Views:
@app.route("/")
def home():
return render_template('index.html')
@app.route("/about/")
def about():
return render_template('about.html')
@app.route("/page1/")
def page1():
return render_template('page1.html')
# run flask server:
if __name__ == '__main__':
app.run()
Wird der Server nun gestartet und im Browser die einzelnen Seiten der Applikation aufgerufen werden die html-templates für die entsprechende Seite gerendert.
Die Möglichkeiten zum nutzen von Templates sind schier endlos für Flask und bieten viel Raum für eigene Ideen und Umsetzungsmöglichkeiten in der Webentwicklung.
Fazit
Flask ist eine tolle Möglichkeit zum Einstieg in die Webentwicklung und bietet vielseitige Umsetzungsmöglichkeiten für Applikation, Websites oder APIs. Zudem ist es einfach zu lernen. Die dahinter stehende Community, die Umfangreiche Dokumentation, die Möglichkeit jedes Python Package miteinzubeziehen und die Masse an Tutorials bieten viel Raum um sich, Flask und die eigene App zu entwickeln/weiterzuentwickeln. Ohne das Flask dabei den Entwickelnden Rahmenbedingungen aufzwingt. Zusätzlich ist Lernkurve recht klein und der Entwickler wächst schnell in die Anforderungen und Möglichkeiten hinein.
Stender, Daniel (2017): Tropfen um Tropfen. In: Entwickler Magazin, Jg. 2017, H. 6. Online unter: https://kiosk.entwickler.de/entwickler-magazin/entwickler-magazin-6-2017/tropfen-um-tropfen/ [Abruf am 10.01.2021]
Stender, Daniel (2017): Tropfen um Tropfen. In: Entwickler Magazin, Jg. 2017, H. 6. Online unter: https://kiosk.entwickler.de/entwickler-magazin/entwickler-magazin-6-2017/tropfen-um-tropfen/ [Abruf am 10.01.2021]
The Pallets Project (2020): Installation. Online unter https://flask.palletsprojects.com/en/1.1.x/installation/ [Abruf am 04.01.2021]
The Pallets Project (2020): A minimal application. Online unter https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application [Abruf am 04.01.2021]
The Pallets Project (2020): Routing. Online unter https://flask.palletsprojects.com/en/1.1.x/quickstart/#routing [Abruf am 04.01.2021]
The Pallets Project (2020): Variable Rules. Online unter: https://flask.palletsprojects.com/en/1.1.x/quickstart/#variable-rules [Abruf am 04.01.2021]
The Pallets Project (2020): Templating. Online unter: https://flask.palletsprojects.com/en/1.1.x/templating/ [Abruf am 04.01.2021]
Alle Codebeispiele sind selbst erarbeitet und getestet.
Cloudbasierte Bibliothekssysteme gelten als die neue Generation von Bibliotheksverwaltungssystemen. Sie bieten eine innovative Möglichkeit, wie Bibliotheken ihre zahlreichen Daten verwalten und täglichen Geschäftsgänge möglichst einfach abwickeln können. Mittlerweile werden sie auch in Deutschland immer häufiger eingesetzt. So arbeiten die Berliner Universitätsbibliotheken bereits seit 2015 mit einer solchen Software.1 Auch in Nordrhein-Westfalen läuft aktuell ein Projekt mit dem Ziel, alle Hochschulbibliotheken auf ein cloudbasiertes Bibliothekssystem umzustellen.2 Aber sind sie tatsächlich besser als bereits existierende Bibliotheksverwaltungsprogramme? Dieser Beitrag versucht der Frage nachzugehen, indem einige Vor- und Nachteile cloudbasierter Systeme erläutert und gegenübergestellt werden.
Traditionell ist die Arbeit mit einem Computer auf Hardware, wie zum Beispiel Monitor und Tastatur, angewiesen. Dazu gehören auch Festplatten und Speicherkarten, auf denen Software gespeichert und ausgeführt wird. Das bedeutet, dass sowohl Hard- als auch Software für den Betrieb der herkömmlichen Bibliothekssysteme vor Ort benötigt werden. Um die Daten für alle zugänglich zu machen, werden außerdem lokale Server als Speicherort benötigt. 3
Eine Cloud ist mehr als nur ein Speicherort für Daten
Bislang ist eine Cloud meist in ihrer Funktion als Speicherort für Medien, wie beispielsweise Fotos, bekannt. Doch eine cloudbasierte Software bietet noch mehr: nicht nur die Speicherung der Daten, sondern alle Arbeiten finden darüber statt. Ein Anbieter stellt einen Server, und die Software zur Verfügung. Der Zugriff erfolgt über einen Webbrowser. Somit reicht im Grunde ein Smartphone mit Internetzugang, um eine ganze Bibliothek zu verwalten. Damit wird viel Hardware überflüssig, vor allem lokale Server können eingespart werden. Dieses Konzept wird auch als „Software-as-a-service“ bezeichnet.4
Computer waren früher ernsthafte Geräte für ernsthafte Arbeit und demnach auch nicht sehr einfach zu bedienen oder zugänglich.6 Der 1981 erschienen IBM 5150 startete bei einem umgerechneten Preis von ca. 4.400$ und kam dabei nicht mal mit einem Diskettenlaufwerk. Laden und Speichern von Programmen und Daten war so nur über Audiokassetten möglich. Eine sehr langsame und schmerzhafte Erfahrung. Warum man also als Privatperson einen Computer kaufen sollte war fragwürdig. Die rein Textbasierte Interaktion mit dem Gerät schreckte ebenfalls ab und nur technisch versierte Menschen könnten mit einem solchen Gerät etwas anfangen.11
Was ist also mit dem Rest der Menschen?
Ein neuer Weg
1984 kam eine andere Idee des Computers auf dem Markt. Es sollte ein freundliches Haushaltsgerät sein. Leicht zu bedienen und günstig. Dabei aber leistungsfähiger als andere Rechner. Ein Computer der Informationen ausspuckt wie ein Toaster geröstetes Brot.4 Die Rede ist von dem Macintosh von Apple. Der erste erschwingliche Heimcomputer mit grafischer Benutzeroberfläche und einem Zeigegerät namens Maus.
Anstatt Textbefehle einzugeben, konnte man nun einfach auf Ordner und Dateien zeigen, um sie zu öffnen oder zu verschieben. Textdokumente sahen auf dem Bildschirm so aus wie aus dem Ausdruck. Jalousie-Menüs machten die Arbeit einfacher.12 Alles Dinge die man heute von allen Computern kennt. Sie wurden auf dem PC allerdings erst ein Jahrzehnt später zum Standard.7 Der erste Mac war allerdings kein Erfolg. Schlicht zu teuer war er und nicht genug Software war auf dem Markt. 499$ war der Preis den Steve Jobs angedacht hatte. Daraus wurden dann aber 2.495$.12
Besser als ein Notebook, besser als ein Smartphone?
Was ist also aus der Idee des Informationstoasters geworden? Die Welt brauchte wohl noch ein bisschen. Apple probierte es 2010 nochmal mit einer ähnlichen Idee und diesmal mit einem Preis von 499$. Die Rede ist vom iPad. Ein Gerät, das bei seiner Vorstellung im Publikum für Verwirrung gesorgt hat. Die doch sehr zurückhalten Reaktion sind den Zuschauern deutlich anzuhören.2
Von der Presse wird die Daseinsberechtigung eines solchen Gerätes in Frage gestellt. Es sei doch nur ein großes iPhone ohne Telefon und ohne Computer kann man das Ding ja auch nicht einrichten.8 Für wen soll das also gut sein? Das iPad entspricht den ursprünglichen Ambitionen des Macintoshs besser als dieser es jemals konnte. „If you know how to point, you already know how to use it. “, so hieß es in einem Werbespot für den Mac von damals.5 Beim iPad kann man jetzt direkt auf den Bildschirm zeigen und braucht keine Maus mehr.
Das iPad von vornUnd einmal von hinten. Ganz schön wuchtig aus heutiger Sicht.
Die Idee Tablet Computer existierten schon lange als Idee in den Köpfen von Sci-Fi Autoren. Eines der ersten Auftritte im Kino hatte das Tablet in Stanly Kubriks 2001: Odyssee im Weltraum aus dem Jahr 1968. Hier wurde ein Tablet verwendet, um einen Videoanruf vom Raumschiff Odyssee zur Erde herzustellen.14 Das iPad hat den Tablet PC nicht erfunden und es gab eine mannigfaltige Auswahl solcher gerate in den 90ern und 2000ern. So auch den Dauphin DTR-1 von 1993. DTR steht hierbei für Desktop-Replacement. Ausgestattet mit Windows 3.1 for Pen Computing und einem Intel 386 Prozessor im inneren stand der Arbeit nichts im Wege. Bis auch das häufig schmelzende Netzteil vielleicht. Das hat mich jedenfalls bisher abgehalten.13 Desktop Arbeitsumgebungen in Tablet Form zu pressen ist wohl ein anderer Grund. Es bedarf einer grundlegen neuen Bedienung, um eine Vernünftige Nutzererfahrung zu schaffen. Und das Internet fehlte damals auch noch.
Meine Erfahrung
Mein Vater kaufte das iPad direkt als es in Deutschland auf den Markt kam. Es übte eine eigenartige Faszination auf mich aus. Das iPad träumte großer als der Macintosh es sich jemals vorstellen konnte. Alles wollte alles sein und das zeigte sich auch. Ein Webbrowser, eine E-Mail-Maschine und Unterhaltungsgerät, aber auch so einige etwas absurdere Einsatzwecke waren angedacht. So kann man vom Sperrbildschirm aus eine Diashow starten und das Gerät zusammen mit dem Dock als digitalen Bilderrahmen verwenden. Mit dem eingebauten Line-Out im Dock kann man sein iPad mit der Stereoanlage verbinden und es so als Musikspieler verwenden. Mit dem AV-Kabel lässt sich das iPad auch an den Fernseher anschließen, um seine Verwandten mit Urlaubsfotos zu langweilen. Importieren kann man die Fotos mithilfe des 30-Pin-Dockconnenctor auf USB oder SD-Karten Adapters. Und wer längere Texte schreiben will, kann einfach eine Bluetooth Tastatur koppeln.
Der Digitale Bilderrahmen Modus. Wer braucht da noch echte Fotos…
All dieses Zubehör war in üblicher Apple Manier natürlich nicht mitenthalten, aber mein Vater hat sich alles gleich dazu bestellt. Es sollte sein neuer Heimcomputer sein und auch sein einziger. Das ist etwas was sich bis heute nicht geändert hat. Das iPad ist nicht mehr das gleiche, er ist jetzt bei seinem dritten, aber er hat traditionellen Computern den Rücken gekehrt. Größtenteils weil sie teurer und klobiger sind, aber vor allem weil sie schwieriger zu bedienen sind. Das ist etwas was mir schon so manches Mal aufgefallen ist. Wenn ich meine Eltern meinen Laptop vorsetze, um Ihnen etwas zu zeigen, kommt es häufig vor, dass sie den Finger heben und versuchen auf dem Display zu tippen. Das bringt nur Fingerabdrücke auf den Bildschirm, zeigt aber wie natürlich Touch-Bedienung geworden ist.
Der Computer ist tot, lange lebe der Computer!
Mobile Endgeräte machen den größten Teil des Internetverkehres aus. Klassische Computerumgebungen werden mehr und mehr zu einem Nischenmarkt für Entwickler und Professionelle.3, 10 Man hört selten am Esstisch jemanden davon reden, wie er seinen Arbeitsspeicher erweitert hat und nun endlich das neue Betriebssystem installieren kann. Oder wie man die Wärmeleitpaste seiner CPU erneuert hat, um die Temperatur im Betrieb zu senken. Die meisten wollen ein Gerät, das einfach funktioniert und das tut was es soll. Ohne irgendwelche Erweiterungen oder Instandhaltung. Und das ist genau das was Tablets bieten. Man kann und muss sich um nichts kümmern. Das Gerät an sich steht im Hintergrund und der Content im Vordergrund. Das beeinflusst dann auch unseren Umgang mit den Inhalten.
Ein prominentes Beispiel dafür ist der Tod des Flash Players von Adobe. Lange Zeit ein unverzichtbares Werkzeug bei der Erstellung von Webinhalten, ist dieses Jahr endgültig von Adobe eingestellt worden. Ab den 01.02.2021 ist sogar das reine Ausführen des Programms von seitens Adobe blockiert, wenn es noch auf dem Rechner installiert ist.1 Ein Grund für den Untergang von Flash war zu keinem kleinen Teil die sture Verweigerung Flash auf iOS Geräte zu bringen. Steve Jobs hatte seine Gründe damals in einem offenen Brief geäußert.9 Wenn Websites heutzutage keine mobile Version aufweisen, können sie als kaputt und nutzlos betrachtet werden. Ob es einem gefällt oder nicht, wir leben in der Zeit nach dem Computer.
5 epicyoutubevideos (2015): Old macintosh ads (1984-85). Video publiziert am 11.08.2015 auf YouTube. Online unter https://youtu.be/JkU3WCSGSw4 [Abruf am 29.01.2021]
7 Long, Tony (2011): Aug. 24, 1995: Say Hello to Windows 95. Zuletzt aktualisiert am 24.08.2014. Online unter https://www.wired.com/2011/08/0824windows-95/ [Abruf am 29.01.2021]
9 Shankland, Stephen (2010): Steve Jobs‘ letter explaining Apple’s Flash distaste. Apple’s CEO doesn’t like Flash. Here’s the full memo explaining why the company is keeping Adobe Systems‘ software off the iPhone and iPad. Zuletzt aktualisiert am 29.04.2010. Online unter https://www.cnet.com/news/steve-jobs-letter-explaining-apples-flash-distaste/ [Abruf am 29.01.2021]
11 Steve’s Old Computer Museum (2020a): IBM Personal Computer (PC). Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/ibm5150.html [Abruf am 28.01.2021]
12 Steve’s Old Computer Museum (2020b): Apple Macintosh. Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/macintosh.html [Abruf am 28.01.2021]
13 Steve’s Old Computer Museum (2020a): Dauphin DTR-1. Zuletzt aktualisiert am 08.05.2016. Online unter http://oldcomputers.net/dauphin-dtr-1.html [Abruf am 29.01.2021]
Ziel dieses Projektes war die Erstellung eines Spiels , das durch sämtliche Animationen bzw. Animationseffekte modern und dynamisch wirken sollte. Memory ist ein Spiel, das weltbekannt und nicht zu kompliziert zu programmieren ist. Im Internet gibt es sämtliche frei verfügbare Beispielcodes. Einer davon wurde in diesem Projekt verwendet.
Der Spielvorgang läuft folgendermaßen ab: Der Start des Spieles muss durch das Klicken eines Buttons ausgelöst werden. Danach hat man 30 Sekunden Zeit, um das Spiel zu gewinnen. Wenn man es nicht schafft, bricht das Spiel nach 30 Sekunden ab und man hat somit verloren.
Das Spiel besteht aus drei Ebenen: 1. Startbildschirm 2. Spiel 3. Endbildschirm: gewonnen oder verloren
Für die Einfachheit und Übersichtlichkeit besteht das Spiel aus zwei HTML-Dateien. Die Datei game_start.html beinhaltet die erste Ebene. Die Datei game.html die Ebenen zwei und drei.
Startbildschirm
Hier erscheinen nacheinander ein Button, der zum Spiel weiterführen soll, ein Austronaut und ein Raumschiff. Im Hintergrund bewegen sich von oben nach unten und von unten nach oben kleine Punkte, die Sterne repräsentieren sollen. Der Button hat einen Hover-Effekt: Wenn man über ihn mit der Maus fährt, verändert sich der Text und die Farbe .
Abbildung 1: Startansicht
Memory-Spiel
Das eigentliche Spiel befindet sich im rechten Drittel des Bildschirms und besteht aus zwölf Karten, welche in drei Reihen gestapelt sind. Links vom Spiel sieht man den Astronauten und eine Sprechblase. Über den Astronaut schwebt ein Button, mit dem das Spiel neu gestartet werden kann. Beim Klicken auf die Karten, erscheint zusätzlicher Text in der Sprechblase. Nach ein paar Sekunden verschwindet dieser.
Abbildung 2: Spiel
Gewonnen – Endbildschirm
Wenn man innerhalb der 30 Sekunden alle Paare gefunden hat, verschwinden die Sprechblase und die Karten. Stattdessen blendet das Programm Konfetti und Überschrift „6/6! Gut gemacht gemacht!“ ein. Im Hintergrund wird einmalig Triumpfsound „Ta-Da“ abgespielt.
Abbildung 3: Spiel gewonnen
Verloren – Endbildschirm
Wenn 30 Sekunden verstrichen sind und nicht alle Paare gefunden wurden, dann bricht das Spiel ab und statt der Sprechblase und der Karten erscheint die Überschrift „Verloren“ und in der Sprechblase steht jetzt „Schande!“. Der Astronaut fängt zu weinen an.
Abbildung 4: Spiel verloren
Erläuterung des Codes
Erste Ebene
HTML und javascript
Für die Erzeugung bestimmter Animationen lohnt es sich auf JS-Bibliotheken zurückzugreifen. In diesem Projekt wurde GSAP eingesetzt. Bei GSAP handelt es sich um eine JS-Bibliothek für zeitleistenbasierte Animationen . Die GSAP Funktionen lassen sich über CDN laden, indem man ihn im Head-Bereich einbindet.
Der CDN für allgemeine Funktionen reicht aber nicht aus, um Bewegung entlang eines vorgeschriebenen Pfades zu erzeugen. Der Code muss zusätzlich mit dem Plugin für GSAP-MotionPath ergänzt werden.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Memory game done with javascript and css animation">
<meta name="keywords" content="game, interactive, avascript, css, html">
<title>Memory Game</title>
<link rel="stylesheet" href="styles_start.css"> <!-- Nur für game_start -->
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <!-- Polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!-- Core Green Sock-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Plugin für MotionPath von Green Sock-->
</head>
Der HTML-Grundgerüst der ersten Ebene ist simpel aufgebaut. Es wurden nacheinander Elemente eingefügt, die in bestimmten Reihenfolge sichtbar werden sollten.
<div class="sternenhimmel-bild">
<!-- Sterne, die sich von unten nach oben und umgekehrt bewegen, insperiert von https://www.youtube.com/watch?v=aywzn9cf-_U -->
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars_2"></div>
<div id="stars2_2"></div>
<img id="astro" src="Bilder/astro.png">
<div>
<a href="game.html"><button id="button1"></button></a>
</div>
<img id="spaceship" src="Bilder/futurama.png">
</div>
Auf der ersten Ebene befindet sich der Javascript-Code in der HTML-Datei . Dank GSAP kann man den Code für die schwebende Bewegung des Astronauten kurz halten. Mit GSAP wird auch das Erscheinen des Buttons animiert. Man darf nicht vergessen den MotionPathPlugin zu registrieren, sonst wird motionPath nicht ausgeführt. Mit gsap.timeline() geben wir die Reihenfolge der Animationen vor. Zuerst soll der Button und dann der Astronaut erscheinen. Der Astronaut soll daraufhin im Kreis um den Button schweben und dann stehen bleiben.
Der Inhalt des Buttons wurde mit dem Pseudoelement ::after eingefügt. Das Ziel war es, den Text beim Hovern über den Button zu ändern. Beim Hovern sollen auch die Hindergrundfarbe und der Schatten sich verändern. Da :hover::after nur den Inhalt (also Text) ansteuert, muss man noch einmal :hover benutzen.
Um den Hintergrund dynamischer wirken zu lassen, werden zwei Sterne-Animationen hinzugefügt. Die Idee der Erstellung der Sterne mit box-shadow und sie dann in Bewegung zu setzten stammt von diesem Youtube-Video . Im Spiel bewegen sich die Sterne sowohl von oben nach unten als auch von untern nach oben. Ermöglicht wird es durch zwei Keyframes.
Für die zweite Ebene, also für die Datei game.html , fügen wir im Head-Bereich zusätzlich zu GSAP ein Script von LottieFiles hinzu . Dieser ermöglicht später eine Lottie-Animation zu starten.
Der HTML-Code ist auch hier unkompliziert gestaltet. Der Div mit der class=“grid“ ist der wichtigste Bestandteil dieses HTML-Codes. Über ihn erzeugt die app.js-Datei die Memory-Karten .
Bei der Lottie-Animation handelt es sich um eine Konfetti-Animation, die nur beim Gewinnen des Spiels über Javascript aktiviert wird. Sie ist in der HTML-Datei über den <lottie-player>-Tag eingebunden und über CSS angepasst.
Der grundlegende JS-Code für das Memory-Spiel stammt aus diesem YouTube-Video. Der Code wurde modifiziert und an eigene Bedürfnisse angepasst.
Das Programm führt folgende Schritte aus: createBoard() kreiert innerhalb des .grid-Divs Child-Elemete, die für die Erstellung der Karten benötigt werden. Timer löst nach 30 Sekunden die Funktion verloren() aus, die die Elemente .grid und und scoreDiv entfernt und stattdessen andere Elemente aktiviert. Die Funktion checkForMatches() erfüllt gleich mehrere Aufgaben: Sie vergleicht die angeklickten Karten und je nach Auswahl gibt einen Text in der Sprechblase aus. Wenn sie feststellt, dass alle Paare gefunden wurden, löscht bzw. deaktiviert sie bestimmte Elemente und blendet neue ein. Die flipCard()-Funktion sorgt dafür, dass die Karten „umgedreht“ werden und man das verborgene Bild sieht. Es können nur zwei Karten gleichzeitig umgedreht werden.
document.addEventListener('DOMContentLoaded', () => {
//Kartenauswahl
const cardArray = [
{
name: 'mond',
img: 'Bilder/mond.svg'
},
{
name: 'alien',
img: 'Bilder/alien.svg'
},
{
name: 'ufo',
img: 'Bilder/ufo.svg'
},
{
name: 'rocket',
img: 'Bilder/rocket.svg'
},
{
name: 'space',
img: 'Bilder/space.svg'
},
{
name: 'sun',
img: 'Bilder/sun.svg'
},
{
name: 'mond',
img: 'Bilder/mond.svg'
},
{
name: 'alien',
img: 'Bilder/alien.svg'
},
{
name: 'ufo',
img: 'Bilder/ufo.svg'
},
{
name: 'rocket',
img: 'Bilder/rocket.svg'
},
{
name: 'space',
img: 'Bilder/space.svg'
},
{
name: 'sun',
img: 'Bilder/sun.svg'
}
];
cardArray.sort( () => 0.5 - Math.random());
const grid = document.querySelector('.grid');
const resultDisplay = document.querySelector('#result');
const wordCloud = document.querySelector('#message');
const scoreDiv = document.querySelector('#score');
const gameAstro = document.querySelector('#gameAstro');
let cardsChosen = [];
let cardsChosenId = [];
let cardsWon = [];
//create your board
function createBoard() {
for (let i = 0; i < cardArray.length; i++) {
const cardDiv = document.createElement('div') //Um die karten herum einen Div erstellen
cardDiv.setAttribute('class', 'imgDiv') //Um die karten herum einen Div erstellen
const card = document.createElement('img')
card.setAttribute('class', 'Spielbilder')
card.setAttribute('src', 'Bilder/logo.svg')
card.setAttribute('data-id', i)
card.addEventListener('click', flipCard)
grid.appendChild(cardDiv).appendChild(card) //Um die Karten herum einen Div erstellen
}
};
//Timer. Falls das Spiel mach 30 Sekunden nicht gewonnen wurde, wird das Spiel abgebrochen
var timer = setTimeout( function(){verloren();}, 30000);
function verloren(){
grid.remove()
scoreDiv.remove()
gameAstro.style.marginTop = '17em'
gameAstro.style.marginLeft = '7em'
gameAstro.style.width = '10em'
document.querySelector('#verloren').style.display = 'block'
document.querySelector('#Schande').style.display = 'block'
gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'});
document.querySelector('#Traene').style.display = 'block'
};
//check for matches
function checkForMatch() {
const cards = document.querySelectorAll('img')
const optionOneId = cardsChosenId[0]
const optionTwoId = cardsChosenId[1]
if(optionOneId == optionTwoId) {
cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
wordCloud.textContent = 'Du hast die gleiche Karte angeklickt!'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
}
else if (cardsChosen[0] === cardsChosen[1]) {
wordCloud.textContent = 'Du hast ein Paar gefunden!'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
cards[optionOneId].removeAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].removeAttribute('src', 'Bilder/logo.svg')
cards[optionOneId].removeEventListener('click', flipCard)
cards[optionTwoId].removeEventListener('click', flipCard)
cardsWon.push(cardsChosen)
} else {
cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
wordCloud.textContent = 'Schade, versuch es noch mal'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
}
cardsChosen = []
cardsChosenId = []
resultDisplay.textContent = cardsWon.length
var audio = new Audio('ta-da.mp3');
if (cardsWon.length === cardArray.length/2) {
//Falls das Spiel innerhalb von 30 Sekunden gewonnen:
clearTimeout(timer) //Timer aussetzen, damit das Spiel nicht abgebrochen wird
audio.play();
grid.remove()
scoreDiv.remove()
gameAstro.style.marginTop = '17em'
gameAstro.style.marginLeft = '7em'
gameAstro.style.width = '10em'
document.querySelector('img#gameAstro').style.animationName = 'none' //Animation entfernen, damit GreenSock-Animation abgespilt werden kann
document.querySelector('#gewonnen').style.display = 'block'
document.querySelector('#confetti').style.display = 'block'
//Freudiges Springen
gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'})
.to('#gameAstro', { duration: .25, y: -50, repeat: -1, yoyo: true, ease: "sine.inOut", autoRound: false});
}
};
//flip your card
function flipCard() {
let cardId = this.getAttribute('data-id')
cardsChosen.push(cardArray[cardId].name)
cardsChosenId.push(cardId)
this.setAttribute('src', cardArray[cardId].img)
if (cardsChosen.length === 2) {
setTimeout(checkForMatch, 300)
}
};
createBoard();
});
css
Das Aussehen der Karten wird über die Klassen .grid , .imgDiv und .Spielbilder bestimmt. Die Klasse .grid ist für die Verteilung der Karten auf dem Bildschirm zuständig. Hier empfielt es sich, die Einstellung display:flex zu wählen. Es ist der leichteste Weg ist, die Karten zu positionieren. Für die richtige Reihung der Karten ist es wichtig, dass die Breite des .grid-Containers und die Breite der einzelnen Karten, die von .imgDiv gesteuert werden, auf einander abgestimmt sind.
Die einzelnen Elemente der dritten Ebene werden je nach Ergebnis des Spieles durch den JS-Code aktiviert. Aus diesem Grund sind sie alle mit display:none versehen. Der JS-Code verändert sie dann mit document.querySelector zu display:block.
Sowohl in der zweiten als auch in der dritten Ebene werden alle sichtbaren Elemente (bis auf die Memory-Karten) mit einer Schwebeanimation versehen, um den Eindruck zu vermitteln, dass die Objekte wie im echten Weltall schweben.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Bestimmt bist du im Netz schon mal der Abkürzung PWA über den Weg gelaufen. Doch, wofür steht diese Abkürzung überhaupt? Was sind PWAs? Um es schnell auf den Punkt zu bringen: PWA steht für Progressive Web App. Jetzt bleibt nur noch die nächste Frage. Was sind Progressive Web Apps?
Im Rahmen dieses Beitrages erkläre ich dir die Grundlagen zum Thema PWAs. Am Ende dieses Beitrages erwartet dich ein Link zu einer Anleitung. Mit Hilfe dieser Anleitung kannst du dir im Handumdrehen eine eigene Progressive Web App erstellen. In relativ kurzer Zeit und ohne viel Aufwand kannst du erste Ergebnisse erzielen! Probier es doch mal aus.
Zunächst kämpfen wir uns durch ein bisschen Theorie. Wir schauen uns den technischen Aufbau und mögliche Funktionen von Progressive Web Apps an. Danach werfen wir einen kurzen Blick auf bereits erfolgreich umgesetzte PWAs. Zum Schluss zeige ich dir am Beispiel der Twitter PWA, wie du diese erfolgreich auf deinem Endgerät installierst.
PWA – Progressive Web App
Der technische Aufbau
Eine Progressive Web App besteht, wie viele Internetseiten heutzutage aus diesen drei wesentlichen Bestandteilen:
Auf Grundlage dieser drei Technologien, die eine unabhängige Plattform darstellen, sollen sich Web-Anwendungen an Zielgeräte so weit anpassen, dass die Nutzung möglich ist. [1]
In diesem Zusammenhang ist auch häufig die Rede von einem sogenannten „responsiven Design“ einer Webseite. Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet. Somit kann der Inhalt gänzlich und schnell vom Besucher aufgenommen werden. [2]
Was macht eine Webseite zu einer Progressive Web App?
Progressive Web Apps sind, anders als normale Webseiten, auf dem jeweiligen Endgerät installierbar. Durch diesen Vorteil, bieten sie eine App-ähnliche Erfahrung, wie man sie bereits von Programmen auf einem Computer oder aus Apps aus dem Apple AppStore oder Google Play Store kennt. Das bedeutet auch, dass eine Progressive Web App in einem bestimmten Umfang auch „offline“, also ohne aktive Internetverbindung funktionieren kann. Somit kann eine PWA auch als eine Art Symbiose aus einer responsiven Webseite und einer App beschrieben werden.
Eine große Rolle spielt ebenfalls die Performance deiner PWA. Die Ladegeschwindigkeit und User Experience ist das A und O für den Erfolg.
Kurz zusammengefasst: Ausgehend von einer gemeinsamen Code-Basie, funktionieren PWAs auf allen möglichen Endgeräten in unterschiedlichsten Browsern. [3]
Sowohl die Browser Google Chrome, Firefox und Microsoft Edge, sowie Apples Safari unterstützen, Stand heute (26.07.2020), die Nutzung von Progressive Web Apps. [4]
Twitter – Eine erfolgreiche Progressive Web App
Als prominentes Beispiel für eine erfolgreiche Progressive Web App, kann ich dir die Twitter PWA empfehlen. Anstatt die App über den Google PlayStore oder Apple AppStore zu beziehen, kannst du auch einfach die PWA installieren. Über folgende Schritte bekommst du die schlanke App-Web-Version von Twitter über den Browser Google Chrome installiert:
Twitter PWA auf einem PC oder Laptop
Wenn du dich gerade am PC oder Laptop befindest, dann folge dieser Anleitung:
Nachdem du Schritt 1 durchgeführt hast, kannst du oben rechts auf die drei Punkte klicken.
Jetzt wählst du den Punkt: „Twitter installieren“ aus.
Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Desktop/Schreibtisch starten.
Klicke oben rechts auf die drei Punkte und wähle „Twitter installieren“ aus:
Installierte Twitter PWA auf macOS in Google Chrome.
Twitter PWA auf einem Android Endgeräit installieren
Wenn du dich gerade an einem Android Smartphone befindest, dann folge dieser Anleitung:
Rufe auf deinem Android-Endgerät die Webseite www.twitter.com auf.
Nachdem du Schritt 1 durchgeführt hast, kannst du oben rechts auf die drei Punkte klicken.
Jetzt wählst du den Punkt: „Zum Startbildschirm hinzufügen“ aus.
Installiere die Twitter PWA, indem du auf „Hinzufügen“ klickst.
Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Homescreen starten.
Klicke auf „Zum Startbildschirm hinzufügen“
Klicke auf „hinzufügen“ und die PWA wird installiert
Die Twitter PWA ist nun installiert:
Installation der Twitter PWA auf einem Android Gerät mit Google Chrome. Bilder: Eigene Screenshots So sieht die geöffnete Twitter PWA auf einem Android aus.
Twitter PWA auf einem Apple Endgerät installieren
Wenn du dich gerade an einem Apple-Smartphone mit dem Safari Browser befindest, dann folge dieser Anleitung:
Rufe auf deinem Apple-Endgerät die Webseite www.twitter.com auf.
Nachdem du Schritt 1 durchgeführt hast, kannst du unten in der Mitte auf den „Teilen…“-Knopf klicken.
Als nächstes wählst du den Punkt: „Zum Home-Bildschirm“ aus.
Installiere die Twitter PWA, indem du auf „Hinzufügen“ klickst.
Insofern alles korrekt geklappt hat, kannst du die PWA nun über eine Verknüpfung auf dem Homescreen starten.
Klicke unten in der Mitte auf den „Teilen…“-Knopf
Klicke auf „Zum Home-Bildschirm“
Klicke auf „Hinzufügen“
Installation der Twitter PWA auf einem Appe iPhone mit Safari. Bilder: Eigene Screenshots So sieht die geöffnete Twitter PWA auf einem iPhone aus.
Probiere es gerne auf deinem eigenen Gerät aus!
Weitere Progressive Web Apps
Da es für PWAs keine Art AppStore oder PlayStore gibt, haben sich diverse Internetseiten mit der Sammlung von bekannten Progressive Web Apps beschäftigt.
Unter folgenden Links kannst du dir zahlreiche weitere PWAs anschauen:
Ich finde die Idee und die umfangreichen Einsatzzwecke von Progressive Web Apps enorm spannend. Die Möglichkeit seinen Webseitenbesuchern auf einfach Art und Weise eine App-Version seines Internetauftritts zur Verfügung zu stellen, bietet großes Potential.
Gerade die Kosteneinsparung bei der Entwicklung von „nur“ einer Webseite, die dann zusätzlich mit wenig Aufwand als App erscheinen kann, finde ich für Unternehmen sehr interessant. Solche Unternehmen, die PWAs einsetzen können mit einer höheren Verweildauer ihrer Kunden auf ihrer Webseite rechnen. Dies fördert zugleich die Conversion-Rate.
In Zukunft werden sicher mehr und mehr Unternehmen auf den erst kurzen Erfolgszug der Progressive Web Apps aufspringen. Die einzigen benachteiligten dürften hier der Google PlayStore und der Apple Appstore sein, da ihnen wohlmöglich ein gewisser Anteil In-App-Verkäufe weg brechen könnte.
Mich persönlich hat das Konzept einer PWA überzeugt und ich werde es bei einem meiner nächsten privaten Projekte auf jeden Fall in Betracht ziehen.
Literatur und Quellen
[ 1 ] Ruppert, Sven (2019): How-to: Progressive Web Apps praktisch erklärt. Online unter: https://entwickler.de/online/web/progressive-web-apps-tutorial-tipps-579830771.html [Abruf am 26.07.2020]
[ 2 ] wendweb GmbH (2020): Was ist Responsive Webdesign. Online unter: https://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/ [Abruf am 26.07.2020]
[ 3 ] Google LLC (2020): Your First Progressive Web App. Online unter: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 [Abruf am 26.07.2020]
[ 4 ] Vaadin Ltd. (2020): Progressive Web App Browser Support. Online unter: https://vaadin.com/pwa/learn/browser-support [Abruf am 26.07.2020]
Ihr habt euch für die Webentwicklung entschieden – Glückwunsch. Ein Feld, so überlaufen wie kaum ein anderes. Hinter jeder Ecke wartet ein neues Projekt mit dem die Entwicklung einfacher, effektiver, schneller und sicherer sein soll. In dem Dschungel an Möglichkeiten ist es leicht, sich zu verirren. Deswegen stelle ich euch heute zwei der beliebtesten Frameworkes in Sachen Single-Page-Webanwendungen vor und vergleiche. React oder Angular (nicht zu verwechseln mit der Vorgängerversion AngularJS) – welches Framework passt am besten zu dir?
Der Beitrag in der Übersicht
Du kennst dich bereits aus? Dann spring doch gleich an die Stelle, die dich interessiert!
Single-Page-Applications, kurz SPA unterscheiden sich von herkömmlichen Webanwendungen insbesondere in einem Punkt – es gibt nur eine einzige HTML-Datei. Hierauf können Daten verändert und/oder dynamisch geladen werden. Die Verarbeitung ist somit client-seitig. Soll also beispielsweise etwas durch User-Interaktion geändert werden, wird keine neue HTML-Datei geladen, sondern die Datei client-seitig verändert.
Ablauf einer Webanwendung vs. SPA – Quelle: Selbst erstellt
Veranschaulicht seht ihr den Vorgang in dieser Grafik. Am Anfang arbeiten normale Webanwendungen genau wie SPAs. Die allererste Anfrage wird vom Client an den Server geschickt, welche mit einer HTML-Datei antwortet. Während sich bei der SPA diese niemals ändert, wird bei einer herkömmlichen Webanwendung dieser Vorgang wiederholt (sieht rote Pfeile). Findet eine neue Abfrage mittel POST statt, wird auch eine neue HTML-Datei von dem Server an den Client geschickt – und die Seite lädt neu. Bei SPAs (siehe grüne Pfeile) wird eine Anfrage mittels AJAX gesendet und mittels JSON wird die HTML Datei verändert.
Kein neues Laden, keine langen Wartezeiten. SPAs sind schneller und genau deshalb in der Webentwicklung immer beliebter.1 Nun aber zurück zu unseren SPAs Angular und React.
Angular & React – Was haben sie gemein?
Beide Plattformen sind Vorreiter in der Webentwicklung, genauer gesagt der Frontend-Entwicklung, da sowohl Angular, wie auch React eine Komponentenhierachie verwenden.
Kleiner Exkurs: Komponenten verwalten immer einen Teil einer View und können Unterkomponenten haben. Beide Projekte sind Open Source unter MIT Lizenz. Freier Zugang also. Auch auf die Community hinter beiden Plattformen könnt ihr euch verlassen.2 So glänzt insbesondere React mit inzwischen rund 149.000 Sternen auf Github. So gut wie jede Frage, die während der Entwicklung aufkommen wird, wurde bereits gefragt und beantwortet. Aber was zeichnet Angular und React aus? Und wer steht dahinter?
Wenn ihr einen schnellen Einblick über den Aufbau von Angular und React sucht, dann schaut am besten auf Stackblitz oder einer ähnlichen Seite vorbei. Dort könnt ihr ohne großen Aufwand ein Projekt mittels Angular oder React starten und euch mit den Strukturen vertraut machen, bevor ihr euch entscheidet.
Angular – Googles Framework 2.0
Hello World von Angular – Quelle: eigener Screenshot
So könnte auch euer erstes Projekt in Angular starten. Das Hello World der komplexen Ordnerstruktur von Angular.
Ihr fangt grade erst mit der Webentwicklung an und versteht schon jetzt die Welt nicht mehr? Ihr habt noch nie etwas von Angular gehört? Dann schaut dieses Video, in dem Angular simpel für Beginner erklärt wird und lest danach weiter. Angular ist ein Framework von Google, welches 2016 auf dem Markt erschienen ist, es ist also relativ „frisch“. Allerdings ist Angular kein Neuling, denn schon lange vor Angular gab es AngularJS. Die Vorgängerversion erschien bereits 2010. AngularJS und Angular sind nicht kompatibel, da Angular ein komplett neues Konzept vertritt und auch in einer neuen Sprache geschrieben ist – TypeScript. Diese Sprache wird auch in der Entwicklung mittels Angular verwendet.3
TypeScript? Aber ich kann doch nur JavaScript? Muss ich für Angular eine komplett neue Sprache lernen?
Keine Sorge, Angular ist für jeden verwendbar. Zwar empfiehlt das Team von Angular, TypeScript zu verwenden, aber auch reines JavaScript ist möglich. Die Chancen, die TypeScript bietet, sind aber nicht zu verachten. Und der Unterschied zwischen TypeScript und JavaScript ist gar nicht groß. Der Name sagt schon alles, was ihr Wissen müsst. TypeScript arbeitet mit Typen, erkennt, wenn falsche Typen deklariert werden – und warnt, was JavaScript allein nicht tut.4 Ein schneller Einstieg gelingt euch beispielsweise mit diesem Kurs.
Angular verwendet das Model-View-View Model. Sagt dir nichts? Macht nichts, im nachfolgenden Video wird es schnell und simpel erklärt.
React – Facebooks mächtige Bibliothek
Hello World von React – Quelle: eigener Screenshot
Simple Ordnerstrukturen, verwirrender Code. So beginnt das Hello World von React.
Ein großes Fragezeichen steht über euren Köpfen, wenn Ihr React hört? Dann schaut am besten dieses Video als fixen Einstieg.
React ist genaugenommen gar kein Framework, sondern nur eine JavaScript Bibliothek. Geschaffen 2011, von niemand anderem als Facebook, ist React wohl der beste Indikator dafür, dass eine einfache Bibliothek mächtiger sein kann, als man denkt. Der wichtigste Unterschied zu einem Framework ist, dass React sich einzig auf die View Ebene beschränkt. Zwar ist React relativ simpel aufgebaut, es lassen sich aber viele weitere Bibliotheken sehr einfach integrieren.5
Hinzu bietet React eine JavaScript-Syntax-Erweiterung mittels JSX, was vergleichbar mit XML ist. Aber wieso? Das Ziel von JSX ist es, das komplette User-Interface mittels einzelner Komponenten nachzubauen, um HTML in JavaScript zu integrieren. Richtig gehört, die Realität ist bei React einmal komplett verdreht worden. Standardgemäß wird nämlich JavaScript in HTML integriert. So wird nicht nur der Code übersichtlicher, sondern auch DOM-Manipulation fast unmöglich gemacht.6
Was solltest du wählen?
Viel Input, aber immer noch keine klare Empfehlung. Ich entschuldige mich – auch dafür, dass ihr vielleicht noch immer eine klare Empfehlung erwartet. Denn leider ist es nicht einfach zu sagen, zu wem React und zu wem Angular passt. Ein paar einfache Tipps kann ich euch aber mit auf den Weg geben.
Angular Logo – Quelle: angular.io
Angular gilt im allgemeinen als einsteigerfreundlicher, sowohl für Neulinge in der Web-Entwicklungswelt, als auch für Entwickler, die bereits Erfahrungen mit Java oder C++ gesammelt haben. Aber auch React hat viele Vorteile und ist nicht umsonst das beliebteste Framework, ohne überhaupt ein Framework zu sein.
React Logo – Quelle: reactjs.org
Ein Anreiz für React ist der Virtueller DOM, wodurch alles deutlich schneller wird, Angular kann hier nicht mithalten. Hinzu ist React auch bei kleineren Projekten gut geeignet, Angular wirkt dahingehend schnell überladen. Durch die schnell hinzufügbaren Bibliotheken ist React sehr flexibel und auch bei großer Interaktivität nützlich. Angular ist durch seine vielen vordefinierten Funktionen eher funktionabel als flexibel und bei geringer Interaktivität besser.7
React arbeitet mit JSX, was für Einsteiger abschreckend wirken kann. Oft kommt viel Code in einer Datei zusammen. Angular hingegen arbeitet mit HTML, erweitert mit Direktiven. React arbeitet mit dem One-Way-Binding, wodurch die Applikation schneller und flüssiger wird, aber insbesondere wird das Debuggen erleichtert. Angular arbeitet mit einem Double-Blind-Feature, wird also auf der einen Seite etwas verändert, verändert sich die andere Seite ohne, dass dafür etwas getan werden muss. So wird die Seite sehr schnell und responsiv, ein wichtiger Faktor.8
Angulars größter Anreiz ist wohl das, was viele Neulinge auf den ersten Blick abschreckt – TypeScript. Diese Sprache ist allerdings nicht mehr aufzuhalten und wird immer mehr verwendet. Sie ist relativ schnell zu lernen und öffnet viele neue Möglichkeiten. Wenn nicht jetzt, wann dann?
React oder Angular? And the winner is …
Auf wen fällt meine Wahl? Das wird wohl immer davon abhängen, was ich mit meiner Single-Page-Webanwendung erreichen will und wie. Arbeite ich allein oder im Team? Wie ist die Vorerfahrung von jedem einzelnen und wie die Vorlieben? Was ist das Ziel des Projekts?
2 Schlemmer, Frederik (2019): Angular, React oder vue.js? Eine Entscheidungshilfe. Online unter https://www.adesso.de/de/news/blog/angular-react-oder-vue-js-eine-entscheidungshilfe.jsp[Abruf am 19.05.2020]
