Drücken Sie Enter, um das Ergebnis zu sehen oder Esc um abzubrechen.

Julian Jänicke in App Entwicklung

Eine Multiplattform App entwickeln mit HTML5

In unserem Blog schreiben wir sehr oft über die Anforderungen an Programmierer, die eine Mobile App entwickeln möchten. Meist über die Entwicklung für Android oder iOS, über responsive Webseiten und den Unterschied zwischen nativen und Web Apps. Auch von der Monetarisierung von Projekten und dem Design von Anwendungen haben wir Euch oft berichtet. Aber ein Thema ist bei uns bisher viel zu kurz gekommen: Die App Entwicklung in HTML5. Da dies aber eine super Möglichkeit bietet, Multiplattform Apps zu kreieren, wollen wir nun unser Versäumnis nachholen!

App entwickeln HTML5

Für alle, die gerade erst in die Thematik eintauchen: Der Unterschied zwischen nativen Apps und Cross-Platform-Apps ist der, das native Anwendungen in ihrer eigenen Programmiersprache geschrieben werden müssen. Das Cross-Platform-Development hingegen verwendet einen einzigen Code, um auf den verschiedensten Endgeräten verwendet werden zu können, genau wie Web Apps, über die wir schon einige Male für Euch geschrieben haben.

Innerhalb der Kategorie existieren zwei Wege zu Cross-Platform-Apps. Der erste ist WebView (verwendet HTML5, CSS3, JavaScript; wir besprechen diese Art in diesem Artikel) und der zweite heißt Xamarin (eine Anwendung wird in einer einheitlichen Sprache programmiert und später “übersetzt”, um auf den verschiedenen Betriebssystemen zu laufen).

Eine Programmiersprache, die die Entwicklung einer Mobile App für mehrere Betriebssysteme gleichzeitig ermöglicht, ist also HTML5. Im Folgenden möchten wir sie Euch genauer vorstellen.

Was genau ist eigentlich HTML5?

Die Hypertext Markup Language (HTML) wird für die Struktur und den Inhalt im Web verwendet. HTML5 wird von Multimedia-Anwendungen unterstützt und kann Audio- und Videodateien darstellen. Aber man kann mit ihr auch das Layout einer Seite und damit die gesamte Darstellung programmieren.

Was bedeutet dies für uns als App Entwickler? Ganz einfach: wir können interaktive Apps mit HTML5 programmieren und sie auf jedem mobilen Gerät abspielen.

Tatsächlich ist HTML5 eine der am häufigsten verwendeten Sprache für die Entwicklung von Web Apps und nicht-native Anwendungen.

Warum mit HTML5 die App entwickeln?

Als erstes müssen wir herausstellen, dass HTML5 eine sehr weit verbreitete Programmiersprache ist. Seitdem die fünfte Version von HTML im Oktober 2014 vom World Wide Web Cosortium (W3C) veröffentlicht wurde, findet der Interessierte eine Unmenge an Informationen im Netz.

Die neue Version verfügt über einige Innovationen, die die Sprache auch von anderen Sprachen abhebt. Nun kann der Entwickler Audio und Video ohne Plug-In direkt integrieren und automatisch ein responsives Design erstellen.

Die Bedeutung von HTML5

Wir haben schon festgestellt, warum eine Programmiersprache für alle App Programmierer weltweit so wichtig ist. Aber weshalb besitzt HTML5 solch eine herausragende Stellung bei der Cross-Platform-Entwicklung? Im Folgenden erklären wir Euch die Vorteile dieser Sprache für das App Entwickeln.

  • Als erstes und vor allem stellen wir die Vielseitigkeit heraus. HTML5 läuft auf allen Webbrowsern (Chrome, Safari, Firefox, Internet Explorer), egal ob auf einem mobilen Gerät oder dem traditionellen PC.
  • Es ist eine Sprache, mit der Audio- und Videodateien nativ eingefügt werden können. Das Darstellen und Einfügen multimedialer Inhalte während der Entwicklung ist jederzeit möglich.
  • Es ist “mobile friendly”. Wer Erfahrung mit der Mobile App Entwicklung hat, wird bestätigen, dass HTML5 die Sprache der Wahl ist, wenn man responsive Webseiten erstellen möchte, die auf dem Bildschirmen von mobilen Geräten abgespielt werden sollen. Daher ist die Sprache perfekt für die Programmierung von Webseiten, die nach Apps aussehen sollen (also Web Apps). Laut der Analyse von Vision Mobile verwenden über 50% der Anwendungen HTML5 mit JavaScript und CSS.

App entwickeln

  • Für Nachfrager mit einem limitierten Budget ist diese Programmierung die beste Alternative zu der teuren Entwicklung nativer Apps. HTML5 eignet sich auch gut für Beta-Versionen einer teuren Business-App oder einem Mobile Game, um zu testen, ob das Konzept gut funktioniert, oder Fehler bei der Entwicklung gemacht wurden. Das Mobile Game Candy Crush (puzzles) beispielsweise startete mit dieser Technologie und wurde später erst als native App entwickelt.

Vor- und Nachteile der Cross-Platform-Entwicklung

Aufgrund der grundlegenden Eigenschaften von Anwendungen, die mit HTML5 entwickelt wurden, ist der wichtigste Vorteil von Cross-Platform-Apps die Ähnlichkeit zu Web-Entwicklungen. Web Entwickler können ihre Erfahrung sehr schnell und einfach anwenden, um eine erfolgreiche Mobile App programmieren zu können.

“Ein weiterer Vorteil ist, dass wir nicht doppelt oder dreimal so viele Ressourcen aufwenden müssen, wenn wir eine Mobile App nicht nur für Android, sondern auch für iOS oder Windows Phone entwickeln möchten”, erklärt Jose Antonio Llopis, Technischer Direktor von Yeeply.

Als Nachteil dieser Anwendungen muss auf jeden Fall die Geschwindigkeit der Apps genannt werden, die tatsächlich wesentlich geringer ist, als die von nativen Apps. Außerdem ist der Zugriff der App auf Funktionen des mobilen Geräts nur sehr eingeschränkt möglich. Auch die Aussage, dass die Anwendung auf allen Betriebssystemen automatisch läuft, ist nur mit Einschränkungen wahr. der Entwickler muss zwingend auf allen Systemen die Funktionalität der App testen und schauen, ob alles läuft und ob gegebenenfalls das Design angepasst werden muss.

Beachtet auch, dass, obwohl die App cross-platform ist, eine APK (für Android-Geräte) oder IPA (für iOS-Geräte) generiert werden muss, damit die App gelesen und angezeigt werden kann. Deshalb benötigt der App Programmierer die SDK für jede Plattform. Alternativ könnt Ihr einen Service wie Adobe Build nutzen, der die Generierung automatisch erledigt.

Werkzeuge für die Multiplattform-Entwicklung

App-entwickeln-HTML5

Die gängigsten Werkzeuge um Apps nach dem Typ WebView zu erstellen, haben wir Euch im Folgenden aufgelistet:

  • Apache Cordova: ist ein Framework für die Entwicklung mobiler Anwendungen von Adobe Systems. Es ermöglicht den Nutzern, hybride Anwendungen für mobile Geräte zu erstellen. JavaScript, HTML5 und CSS3 werden dazu verwendet.
  • AngularJS: ist ein JavaScript-Framework. Als open code und von Google gepflegt, wird es verwendet, um Web Apps auf einer einzigen Seite zu entwickeln und zu verwalten.
  • Ionic: ist ein kostenloses und open sourced Tool, mit dem man eine hybride App entwickeln kann. Es basiert auf HTML5, CSS und JS. Es wurde mit Sass erschaffen und mit AngularJS optimiert.

Auch wenn die Qualität der beschriebenen Anwendungen nicht ganz an die der nativen Apps heranreicht, erhält man sehr gute Ergebnisse bei kleinen oder mittleren Projekten, die nicht allzu viele Funktionen oder eine sehr hohe Performance erfordern. Tatsächlich wurde beispielsweise die erste App von Facebook mit dieser Technologie entwickelt, bis man aufgrund des Erfolges beschlossen hatte, eine native App herzustellen.

Jetzt seid Ihr an der Reihe! Erzählt uns in den Kommentaren, welche Erfahrungen Ihr mit den unterschiedlichen Möglichkeiten der App Entwicklung gemacht habt. Welche Tools nutzt Ihr? Vermisst Ihr etwas in unserem Artikel?

app entwickeln

Kommentare

Kommentare sind deaktiviert für diesen Beitrag