App Entwicklung und Programmierung erklärt

Unter dem Begriff App kann man unterschiedlich Dinge verstehen - für die einen handelt es sich um Programme, die aus dem Apple App-Store oder dem Google Playstore auf einem Smartphone installiert werden können. Etwas weiter gefasst kann man eine App generell als Anwendung begreifen, die auf unterschiedlichen Geräten verwendet werden kann, im Browser, auf dem Mobil-Telefon, Tablets oder aber auch als installierbare Anwendung in Windows, macOS oder Linux. Meiner Ansicht nach ist dieses der Unterschied zu dem Begriff Software, der meist nur die letztere Kategorie umfasst - Programme die auf einem Betriebssystem für Desktop PCs oder Laptops laufen sollen. Das nur vorweg zur Klärung.

Dank moderner werdender Browser-Technologien können immer mehr Anwendungen, die früher spezielle Software benötigt haben, im Browser verwendet werden. WebGL zum Beispiel, eine etwas abgespeckte Version der Grafik-Schnittstelle OpenGL, ermöglicht die Erstellung von Grafik-Programmen und 3d-Anwendungen, die in jedem modernen Browser verwendet werden können. Mit WebAssembly können in anderen Programmier-Sprachen erstellte Programme im Browser ausgeführt werden. So verwischen die Grenzen zwischen Software-Entwicklung im klassischen Sinne und App- bzw. Webentwicklung immer mehr.

Was die meisten unter einer App verstehen ist wahrscheinlich eine auf dem iPhone oder Android Gerät installierte Anwendung. Da es mindestens zwei große Betriebssysteme für Smartphones und Tablets gibt - iOS (Apple) und Android (Google) - müssen eigentlich auch für beide Betriebssysteme spezielle Anwendungen programmiert werden, wobei erschwerend hinzukommt, dass unterschiedliche Programmiersprachen hierfür zum Einsatz kommen: Apple’s Swift und Android’s Java. Hier sieht man auch schon das Problem - will man seine App im Browser, auf iPhones und auf Android Geräten verwenden, so muss man zumindest das Frontend und die UI/UX (User Interface/User Experience = Bedienoberfläche und Nutzer Erfahrung) drei mal entwerfen und programmieren.

Frontend, Backend, Full-Stack - was ist das?

Die App Enwicklung hat sich historisch in zwei Bereiche aufgeteilt. Die einfachste Erklärung die mir einfällt: Das Frontend beinhaltet alles, was der Nutzer an seinem Gerät sieht und bedienen kann. Das Backend dagegen ist für den Nutzer unsichtbar und stellt für das Frontend APIs bzw. Daten zur Verfügung. Ein Full-Stack Entwickler ist einfach jemand, der beides macht.

Das Problem mit den drei verschiedenen Plattformen - Browser, iOS und Android - besteht selbst für große Firmen, denn es bedeutet einiges an Overhead. Daher wurden einige Technologien entworfen, z.B. React Native (Facebook) und Flutter (Google), die zumindest die Entwicklung zwischen den beiden mobilen Betriebssystemen vereinheitlichen sollen. Beide Tools ergeben am Ende eine Native App, aber beide Technologien und auch andere ähnliche haben Nachteile, die von Fall zu Fall unterschiedlich schwer ins Gewicht fallen können. Zum einen hat iOS von Haus aus eine eigene UI Bibliothek (eine Sammlung von Komponenten), die dann nicht mehr so ohne weiteres verwendet werden kann. Die App ist dann also zwar nativ, sieht aber nicht mehr aus wie eine iOS App und hat auch eine andere Bedienung. Weiterhin haben die unterschiedlichen Betriebssysteme eigene APIs (Schnittstellen) für etwas speziellere Bereiche, die dann entweder über Plugins oder selbst implementiert werden müssen, was den Vorteil etwas schmälert.

Je nach Anwendung kann auch ein App-Rahmen erstellt werden, der dann teile einer Webseite lädt. Das Ergebnis ist dann eine Hybride App, die sich dann je nach Art der App und Umsetzung wie eine echte App anfühlen kann. Der Vorteil hier ist, dass die Webversion der Anwendung, die in den meisten Fällen benötigt wird, größtenteils wiederverwendet werden kann.

Wenn man es nicht darauf anlegt, in einen der App-Stores aufgenommen werden, kann auch eine Progressive-Web-App (PWA) eine Option sein, die man einfach zum Home-Screen hinufügen kann. Leider haben PWAs vor allem auf iPhones einen schweren Stand, so funktioniert zum Beispiel die Wiedergabe von Audio im Hintergrund nicht.

Die Lösung mit dem besten Ergebnis ist in vielen Fällen leider, native Apps für die unterschiedlichen Plattformen zu entwickeln, was aber natürlich größere Kosten verursacht.

Bestandteile einer typischen App

Eine typische App lädt und speichert Daten, die auf so genannten Servern liegen (Backend), zeigt diese dem Nutzer an und lässt ihn neue Daten hinzufügen, bearbeiten oder löschen. Dieses ist natürlich eine stark vereinfachte Darstellung moderner Webanwendungen und Apps, soll aber an dieser Stelle erstmal genügen.

Der oder die Server

Fangen wir am Ursprung an - beim Server. Ein Server ist stark vereinfacht ein Computer, auf dem statt macOS oder Windows meist Linux ohne eine grafische Oberfläche läuft. Trotzdem lassen sich auf einem Server die unterschiedlichsten Programme installieren und ausführen. Ein Webserver wie Apache oder NGINX, der Daten und Dateien via HTTP ausliefert, verschiedene Datenbanken wie PostgreSQL, MySQL oder auch Redis, aber auch Tools zur Verarbeitung von Bildern. Aber vor allem ist der Server der Ort, an dem die Backend-Programme ausgeführt werden, die in den unterschiedlichen Programmiersprachen Ruby, Python, Go geschrieben sein können. Aber wer kümmert sich eigentlich um den Server?

Früher war die Antwort hier eindeutig: der System-Administrator, kurz Sys-Admin. Ein Sys-Admin sorgt dafür, dass auf den Servern alles reibungslos funktioniert und alles immer auf dem neuesten Stand ist, damit keine Sicherheitslücken entstehen. Heute ist auch diese Frage nicht mehr so einfach zu beantworten, denn zusammen mit der Cloud-Technologie erblickte ein neues Buzz-Word das Tageslicht: DevOps.

Aber der Reihe nach: Die Cloud an sich ist schon ein so weit gefasster Begriff, dass er gar nicht so einfach zu erklären ist, und es nicht unwahrscheinlich, dass er teilweise einfach so verwendet wird, um cool zu sein 😎 Der bekannteste Anbieter ist sehr wahrscheinlich AWS von Amazon (Amazon Web Services). Eine Cloud-Lösung kann man sich vielleicht am ehesten als einen spezialisierten Server vorstellen, der bereits bestimmte Funktionen mitbringt und so das Entwickeln einer App vereinfachen soll. Es soll sogar so einfach sein, dass sich nicht spezielle Sys-Admins, sondern die Entwickler nach dem angesprochenen Dev-Ops Ansatz um die Infrastruktur kümmern können sollen. Für viele Anwendungs-Fälle gibt es fertige Cloud-Lösungen von Amazon, Google, Microsoft und Co. Ein bekanntes Beispiel ist das Amazon Produkt S3, welches das Speichern von Dateien nicht nur erleichtern soll, sondern auch flexibel erweiterbar ist. Das bedeutet, dass “Festplatte voll” kein Problem darstellt, weil bei Amazon die Festplatte so schnell nicht voll ist und man immer so viel bezahlt, wie man nutzt.

Aber auch bei klassischen Server Anbietern gibt es dank Virtualisierung die Möglichkeit, ohne großen Umzug sein Produkt zu erweitern, falls der gewählte virtuelle Server an seine Grenzen stößt. Und natürlich ist auch eine Kombination von den verschiedenen Anbietern eine gängige Lösung und am Ende auch immer eine Preisfrage. Der Preis ist nämlich bei Cloud-Lösungen aufgrund der nutzungsbedingten Abrechnung nicht so einfach abzusehen - in der Regel sind die Preise aber um einiges höher als bei virtuellen Servern oder auch dedicated Servern, bei denen man allerdings einen Sys-Admin braucht. Es gehen allerdings die Meinungen (wie leicht angedeutet) auseinander, ob man man mit dem Dev-Ops Ansatz wirklich den Sys-Admin spart, da der Umgang mit den verschiedenen Cloud Produkten ebenso gelernt sein will.

Das Backend

Im Backend befindet sich der Code der App, der mit Diensten (z.B. Datenbank) auf dem Server oder auf anderen Servern interagiert. Zusammen mit dem Webserver bildet er die Schnittstelle nach außen zum Frontend. Der Backend-Code der App kann wiederum in kleinere Teile zerlegt werden, die dann jeweils einen speziellen Bereich der Anwendung übernehmen. Eine solche Architektur nennt sich Micro-Service basierte Architektur, und steht im Gegensatz zu einer monolithischen Architektur. Bei Micro-Services kann jeder Service eine eigene Technologie verwenden, solange der Service mit den anderen kommunizieren kann.

Da es in der Backend-Entwicklung oft darum geht, Dinge zu erstellen, zu bearbeiten oder zu löschen (CRUD), haben sich Frameworks (Zusammenstellung von Bibliotheken) wie Ruby on Rails oder Django (Python) etabliert, die diese wiederkehrenden Aufgaben beschleunigen und schon eine Anwendungs-Struktur wie MVC (Model-View-Controller) vorgeben, wobei der View (Ansicht) Teil auch eine Api sein kann, und somit das Erzeugen der Ansicht an das Frontend ausgelagert wird. Dieser Ansatz hat durch die verschiedenen Plattformen (Browser, iOS und Android, siehe oben) an Popularität gewonnen, da das Frontend nun nicht mehr zwingend aus HTML besteht, welches im Browser angezeigt wird.

Die gängigsten API Architekturen sind REST (Representational State Transfer) und GraphQL, ohne tiefer ins Detail zu gehen ist GraphQL die neuere Variante, die mehr Möglichkeiten für die nutzenden Clients bietet, aber auch komplexer in der Implementierung ist.

Wichtige Backend Funktionen sind zum Beispiel Nutzer und Rechte-Management, also Registrierung und Anmeldung, aber auch ob der angemeldete Nutzer Funktionen verwenden darf. Weitere Beispiele sind Valdierung von gesendeten Anfragen, Speichern und/oder Konvertieren von Daten, Kommunikation mit anderen Teilen der App oder anderen Servern, Ausführen von Hintergund-Prozessen, Neuronale Netze/Machine Learning - um nur einige Dinge zu nennen.

Das Frontend

Das Frontend beschreibt den Teil der App, der auf dem Client ausgeführt wird, also im Browser, Smartphone usw. Für die klassische Webentwicklung besteht das Frontend aus HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) und Javascript. Wenn man nur HTML benutzen würde, würde man alle Inhalte in einer Art Standard-Style sehen, den die Web-Browser mitliefern. Durch Hinzufügen von CSS kann man die HTML Elemente nun nach belieben im Aussehen anpassen und positionieren. Und last but not least kann Javascript sowohl HTML als auch CSS erzeugen oder verändern und vieles mehr.

Während der klassische Ansatz HTML auf dem Server erzeugt hat und dann im Frontend nur noch die Funktionalität mit Javascript verfeinert wurde, haben sich die letzten Jahre - auch befördert durch Technologien wie React.js - Javascript lastigere Anwendungen etabliert. In solchen Anwendungen übernimmt das Frontend mehr Aufgaben, wie z.B. das erstellen des HTMLs, Übersetzung von Inhalten, Anwendungslogik, Routing bzw. Navigation oder das verwalten des Anwendungs-Status (State-Management), um nur einen Auszug zu geben.

Eine vielleicht nicht so weit verbreitete Variante, die trotzdem nicht unerwähnt bleiben soll, ist unter dem Begriff “HTML over the wire” bekannt. Dort werden Teile der Webseite über Websocket-Verbindungen ausgetauscht, was den Vorteil hat, dass man große Teile der Anwendungslogik auf dem Server belassen kann.

Ist der Client dagegen ein Smart-Phone und man möchte mit einer nativen App vertreten sein, spielen HTML, CSS und Javascript wie bereits angesprochen keine Rolle mehr. Daher sind hybride Lösungen vor allem für kleinere Projekte populär.

App programmieren lassen

Ich hoffe, dass ich mit dem Text einen kleinen Überblick verschaffen konnte und den richtigen Grad zwischen Oberflächlichkeit und Detail halbwegs getroffen habe. Sollten Sie Interesse haben, eine Anwendung entwickeln zu lassen, wenden Sie sich gerne an mich für eine unverbindliche erste Einschätzung über das Kontaktformular!