Woraus besteht eine App und wie bringen wir sie dazu, das zu machen, was sie soll?
Liest man sich einfach mal quer durch die verschiedenen Kategorien unseres Blogs versteht man als Nicht-Programmierer oft nur Bahnhof. In diesem Beitrag will ich versuchen, ein wenig Licht in das Dunkel des Entwickler-Lateins zu bringen, Begrifflichkeiten zu klären und den FLYACTS-Entwicklungsansatz verdeutlichen.
Nur Enden und kein Anfang
Bevor auf die einzelnen, von FLYACTS angewandten Technologien eingegangen wird, müssen zwei grundlegende Begriffe geklärt werden. Eine mobile App für Smartphone oder Tablet ist oft mehr als ein paar Codezeilen. Vielmehr ist es ein kompliziertes Zusammenspiel aus einer mobilen, sichtbaren/berührbaren Komponente und einem ortsgebundenen, unsichtbaren Teil. Ersteres wird als Frontend bezeichnet, letzteres als Backend. Bildlich gesprochen, das Frontend ist die Spitze eines Eisbergs, und das Backend, der große, unter Wasser liegende, unsichtbare Teil des Eisbergs.
Frontend – der Anfang vom Ende
Das Frontend ist letztlich die Anwendung die sich hinter dem bunten Icon auf dem Handy oder Tablet verbirgt. Man kann es anschauen und es berühren. Es ist die eigentliche Benutzeroberfläche mit der man als Anwender interagiert.
Ende gut, alles gut – das Backend
Der überwiegende Teil der Apps greifen in irgend einer Weise auf ein Backend zurück. Dies ist oft eine Datenbank, zum Beispiel ein Produktkatalog. Es kann sich aber auch um komplexere Dienste handeln.
Zusammenspiel Front- und Backend (Quelle: http://www.alticreation.com/difference-developpeur-front-end-et-developpeur-back-end/)
Zusammenspiel beider Enden
Zwischen einem Frontend und einem Backend werden in der Regel permanent Daten ausgetauscht. Betrachtet man beispielsweise eine Shopping-App, fängt dies mit dem Zugang zum Produktkatalog an. Die einzelnen Produkte und deren Beschreibungen sind nicht in der App auf dem Smartphone oder Tablet hinterlegt. Vielmehr sendet die App (das Frontend) eine Anfrage an ein Warenwirtschaftssystem (Backend), mit der Bitte, eine aktuelle Artikelliste zu übermitteln. Diese Liste wird in der App dargestellt und der Nutzer erhält die Möglichkeit, detaillierte Infos (Beschreibungstexte, Photos, Kundenbewertungen) zu einzelnen Produkten abzufragen. Diese Infos werden vom Backend bereitgestellt. Der Kauf eines oder mehrerer Artikel wird über das Warenwirtschaftssystem abgewickelt. Der Nutzer muss sich anmelden, in dem er sich mit seinen Daten authentifiziert. Dazu gleichen die Anwendung die im Frontend eingegebenen Daten mit dem im Backend hinterlegten Logindaten ab (zum Beispiel ist der Benutzername vorhanden, stimmt das korrespondierende Passwort). Die Zahlungsabwicklung wird in der Regel auch über das Backend realisiert.
Unser Handwerkszeug
FLYACTS entwickelt Hybrid-Apps, d.h. unsere Entwickler schreiben einen universellen Programmcode für eine App. Dieser wird in spezielle Container, betriebssystemspezifisch für die Plattformen Android und iOS, verpackt. Unsere Apps basieren auf drei Grundbausteinen/Technologien: HTML5, CSS3 und JavaScript (JS). HTML5, kurz für Hypertext Markup Language Version 5, machte einen hybriden Entwicklungsansatz erst möglich. Die Internetprogrammiersprache befreit die Entwickler von den Zwängen der nativen App-Entwicklung und lässt sie auf die leistungsfähigsten Elemente der mobilen Betriebssysteme zurückgreifen: die Webbrowser Chrome und Safari. Die Chrome und Safari zugrundeliegenden Engines können vielmehr als Internetseiten anzeigen. HTML5 dient auch zum Bau des Grundgerüstes einer App. Dies ist vergleichbar mit der Sitemap einer Webseite. Die einzelnen Seiten (Views) einer App werden konstruiert und miteinander verknüpft. CSS3, kurz für Cascading Style Sheets Level 3, bringt einfach gesagt Farbe ins Spiel. Diese Technologie ermöglicht die Darstellung und Anpassung von Inhalten (Layout, Schrift & Farbe) und Einbindung interaktiver Gestaltungselemente. CSS3 sorgt auch dafür, dass Apps die Darstellung ihrer Inhalte an unterschiedlichste Bildschirmformate und -auflösungen anpassen. Die objektbasierte Programmiersprache JavaScript ist der dritte Grundbaustein für die Entwicklung hybrider Anwendungen. Legt HTML5 das Grundgerüst und stellt CSS3 Inhalte dar, haucht JavaScript einer App Leben ein. Mit JavaScript wird Logik in eine App implementiert. Dies wird mit verschiedenen Frameworks realisiert.
Frameworks
Ein Framework ist keine (halb-)-fertige Anwendung, sondern eine Art wiederverwendbare Rahmenstruktur für Apps. In diese Struktur implementieren Entwickler die einzelnen, angeforderten Funktionalitäten. FLYACTS nutzt eine Reihe verschiedener Frameworks. Damit können unsere Entwickler flexibel auf die wechselnden Anforderungen von App-Projekten reagieren.
AngularJS
AngularJS ist ein Open-Source-Frontend-Framework für Hybrid-Apps und Desktop-Webanwendungen und bietet von eine Vielzahl von Vorteilen. Durch seinen Ursprung im Hause Google steht ein Big Player des Internets hinter diesem Framework. Dies macht diese Technologie zukunftssicher. Eine große Entwickler-Gemeinschaft tauscht sich rege über diverse Foren aus.
Ionic
Ionic ist ebenfalls ein Open-Source-Framework für die Frontend-Entwicklung mobiler Apps. Es ergänzt in der Regel AngularJS. Während AngularJS die Struktur der App bestimmt, konzentriert sich Ionic auf die Schnittstelle zum Nutzer, um diesem eine intuitive und performante Bedienung zu bieten. Rund um Ionic können Entwickler auf eine Vielzahl von Services und plattformspezifische Designs für Android & iOS zugreifen.
Bootstrap
Bootstrap ist ein drittes von FLYACTS eingesetztes Framework für die Frontend-Entwicklung. Es dient zur Entwicklung von dynamischen und responsiven Webanwendungen für Browser. Bootstrap kann als eine Sammlung von HTML und CSS Gestaltungsvorlagen und JavaScript-Erweiterungen verstanden werden. Bootstrap ermöglicht es eine Webseite so zu konstruieren, dass der Nutzer stets in den vollen Funktionsumfang bei bestmöglicher User-Experience kommt, ganz gleich ob er die Webseite auf einem 50-Zoll-SmartTV oder einem 4-Zoll Smartphone aufruft.
Node.js
Node.js ist auch ein Open-Source-Framework, allerdings für die Entwicklung von Backend-Systemen. Als Stärken lassen sich eine hohe Skalierbarkeit und Performance anführen. Zudem ist Node.js in JavaScript (deshalb .js) geschrieben, der gleichen Sprache wie die Frontends. Node.js wird u.a. von IBM. Microsoft, SAP und PayPal genutzt.
MongoDB
MongoDB ist eine dokumentenorientierte Open-Source-Datenbank die in Node.js Systeme implementiert werden kann. MongoDB ist wie gemacht für BigData, den Austausch großer Datenmengen zwischen Front- und Backend. Es bietet den Vorteil einer hohen Skalierbarkeit und ist durch die Möglichkeit zur Nutzung von Cloud-Computing-Diensten nicht an stationäre Server gebunden.
Electron
Electron, ehemals Atom Shell, zielt, anders als die bisher ausgeführten Frontend-Frameworks nicht auf Hybrid-Apps für mobile Endgeräte oder Web-Apps ab. Auf Basis erwähnter Technologien HTML5, CSS3 und JavaScript sind plattformunabhängige Desktop-Apps für Linux, Mac und Windows möglich. Einen weiterführende Beitrag zu Electron und Desktop-Apps gibt es hier: https://www.flyacts.com/blog/hybride-desktop-apps-mit-dem-framework-electron/
Cordova&PhoneGap
Die Ausführungen über die Technologien und Frameworks wären aber ohne die Erwähnung von Cordova und Phonegap unvollständig. Beide ermöglichen erst den hybriden App-Entwicklungsansatz. Cordova ist ein open-source Kommandozeilenwerkzeug. Das Tool übernimmt das Verpacken des Programmcodes in betriebssystemspezifische Container. Erst dadurch können die Apps auf Android- und iOS-Geräten funktionieren. PhoneGap ist ein Webdienst von Adobe. Basierend auf Cordova hat Adobe dieses Werkzeug mit einer grafische Benutzeroberfläche versehen und ermöglicht das plattformunabhängige “Bauen” von Apps für Android und iOS. Die App-Entwickler benötigen nun keine spezielle Hardware für das Verpacken des Programmcodes. Phonegap stellt neben der Möglichkeit die fertige App als Datei auf einen PC oder Mac zu laden, auch einen Link und QR-Code zur App zur Verfügung. Dies ermöglicht das direkte Installieren der Apps auf mobilen Endgeräten und erleichtert den Testprozess ungemein.
Crosswalk
Hybrid-Apps sollen auf Android und iOS gleichermaßen funktionieren. Beide Plattformen sehen und “fühlen” sich aber unterschiedlich an. Die Funktionen sind auf beiden Systemen vorhanden, aber Buttons, Nutzerführung und Menüs sind anders positioniert oder aufgebaut. Dies wirkt sich auch auf die webbasierten Hybrid-Apps aus. Meist soll eine App ein allgemein gültiges Design haben. Hier kommt Crosswalk ins Spiel. Crosswalk integriert in hybriden Apps eine einheitliche WebView, damit die App auf allen Geräten gleich funktioniert und aussieht. Zusammengefasst – FLYACTS setzt auf eine Vielzahl von Technologien und Frameworks. Der Einsatz erfolgt dabei immer dynamisch und flexibel, und sich an den Anforderungen an die App orientierend. Vielleicht konnte diese relativ kompakte Zusammenfassung des ”Entwickler-Sprechs” ein wenig Licht ins Dunkel der App-Entwicklung bringen. Andererseits, FLYACTS-Kunden genießen einen Full-Service. Die Auseinandersetzung mit den technischen Aspekten der App-Entwicklung überlässt man beruhigt unserem Team. Falls man mehr wissen möchten, unser Blog lädt zur umfassenden Lektüre ein. Sind noch Fragen offen? Wir beraten gern über unser Kontaktformular oder per Telefon.
