Der HTML5-Cross-Platform-Day auf der BASTA 2015

Browser-, Geräte- und Plattformübergreifend entwickeln – Do all the things!
Keine Kommentare

Das Thema Cross-Plattform-Entwicklung hat aktuell einen sehr großen Stellenwert in der IT. Anstatt viel Zeit und Geld in das Development von nativen Apps auf allen mobilen, Desktop- und Browserplattformen zu investieren, konzentriert man sich mittlerweile auf die Entwicklung einer Codebasis, die auf sämtlichen Plattformen ausgeführt werden kann.

Derzeit befinden wir uns in einem gigantischen Dschungel, bestehend aus Geräten und Herstellern. Dabei gilt es für Entwickler, die unterschiedlichsten Plattformen zu bedienen und verschiedenste Anforderungen zu erfüllen. JavaScript und HTML5 können hierbei Abhilfe schaffen – denn die Entwicklung von Apps ist nicht einfach, da jede Systemwelt ihre eigenen Tools und Anforderungen besitzt: Java und Eclipse für Android, Objective-C bzw. Swift und Xcode für iOS oder Microsoft-Tools für die Windows-Welt. Doch der Zugriff auf native Plattform-Features und Offline-Datenhaltung sind nicht die einzig zentralen Themen in einer Cross-Plattform-Architektur. Im Entwickler-Werkzeugkasten dürfen darüber hinaus moderne Lösungen zur Visualisierung von Daten in 2D und 3D ebenso wenig fehlen wie optimierte Interaktionen mit Touch-Oberflächen.

Der HTML5 Cross Platform Special Day auf der BASTA! bot Anregungen, wie man mit HTML5 und JavaScript sowohl Code für den Browser schreiben als auch native Apps für mobile Geräte und Anwendungen für den Desktop programmieren kann.

Die Zeit ist reif

Mit Frameworks und Tools, die auf Cross-Plattform-Strategien optimiert sind, sind Entwickler heute in der Lage, vollwertige Anwendungen für alle erdenklichen Plattformen auf Basis von Web-Technologien zu entwickeln. Echte Cross-Plattform-Entwicklung für Browser, Desktop, Tablet, Smartphone, TV & Co.: die Zeit ist reif – das ist zugleich der Leitspruch des Special Days. Die Speaker, darunter Christian Weyer (Thinktecture AG), Gregor Biswanger (CleverSocial.de), Christian Liebel und Manuel Rauber (beide Thinktecture AG), sowie Thorsten Hans (.NET rocks), gaben ihren Zuhörern zahlreiche Tipps mit an die Hand und lieferten einen exklusiven Einblick in die Aspekte der Cross-Plattform-Entwicklung. Was die Teilnehmer für sich und ihre Arbeit mitnehmen konnten, waren vor allem konkrete Ideen, um die eigenen Prozesse zu optimieren.

Mobile und Desktop: Volle Power!

Thomas Hilzendegen (Thinktecture AG) stellte die Vorteile einer Kombination von HTML5 und Cross-Plattform-Anwendungen vor. Ein ganz klarer Vorteil ist dabei, dass eine Applikation nur einmal erstellt werden muss, damit sie auf allen anderen Plattformen läuft. Gerade in der heutigen Zeit, in der es immer mehr Geräte gibt die über ein eigenes Betriebssystem verfügen, ist die Cross-Plattform-Entwicklung ein Segen.

 

API Conference 2018

API Management – was braucht man um erfolgreich zu sein?

mit Andre Karalus und Carsten Sensler (ArtOfArc)

Web APIs mit Node.js entwickeln

mit Sebastian Springer (MaibornWolff GmbH)

Native Hostanwendungen und Frameworks wie Cordova (für Mobile), NW.js (für Desktop) und Chrome unterstützen Entwickler bei ihrer Arbeit. Hilzendegen zeigte auf, wie einfach es ist, aus einer HTML5-Single-Page-Webanwendung eine native Anwendung für eine Vielzahl dieser Plattformen zu erstellen – und das alles mit nur einer Code-Base. Auch ist es möglich, mithilfe von NW.js neu entwickelte Anwendungen beispielsweise auf alten XP-Rechnern zum Laufen zu bringen – „Das hätte ich vor fünf Jahren auch nicht gedacht, dass ich sowas im Jahr 2015 noch machen muss“, lautete der Kommentar von Thorsten Hans dazu.

Denn auch Hans weiß: HTML5 kann mehr als nur Formulare. Er erklärte, wie man modulare HTML5-Apps mit AngularJS in native WPF- und WinForms-Anwendungen integriert – nämlich mit cefSharp. cefSharp bringt Chromium zu WPF/WinForms; über das Modul ist die Kommunikation zwischen beiden Welten per Bridge möglich. Außerdem zeigte er, dass es gar nicht so schwer ist, sich für die Zukunft zu rüsten und die Migration bereits bestehender Anwendungen auf Cross-Plattform-Technologien durchzuführen.

Der native Teil ist hart, aber hat man das erstmal geschafft, ist alles weitere sehr, sehr einfach.

Vor allem Cordova-Plugins für mobile Devices und NW.js-Module auf dem Desktop können spielend leicht aus HTML5-Apps mit nativen APIs kommunizieren. Durch Cordova-Plugins lassen sich vorhandene native Funktionalitäten erweitern, denn alle Plugins sind npm-Module. Bevor man aber anfängt selbst zu entwickeln, empfahl Hans einen Blick auf npm, da dort bereits über 1500 Cordova-Plugins zur Verfügung stehen. Zum Abschluss noch ein wichtiger Tipp von Thorsten Hans: Node-Module bei der Entwicklung nie einchecken! Denn nur ein einziger Rechner mit anderer Konfiguration lässt die entwickelte Anwendung versagen. Und wenn gar nichts mehr geht hilft folgender, nicht ganz ernst gemeinter, Rat: 42 ist die Antwort auf alles!

Datenvisualisierung in 2D und 3D

Wie Christian Liebel und Manuel Rauber aus eigener Erfahrung wissen, sind Zahlen für sich genommen meist langweilig und auch nur wenig aussagekräftig. Wie kann man den Daten nun Leben einhauchen? Ganz einfach: Per Visualisierung. Auf diese Weise kann man Zusammenhänge verstehen und Daten  vergleichen. Durch Webtechnologien stehen Entwicklern dafür viele Möglichkeiten zur Verfügung: Beispielsweise können per WebGL nicht nur 2D-Diagramme, sondern auch interaktive 3D-Darstellungen plattformübergreifend realisiert werden.

Bei 2D ist Canvas das Maß der Dinge: durch die Bitmap ist eine Cross-Plattform-Grafik-Manipulation möglich, sodass die entsprechende Visualisierung auf allen Plattformen und Devices läuft. Möchte man Daten in 3D darstellen, steht man vor dem Problem, 3D-Content auf 2D-Bildschirme zu bringen. Das funktioniert mit einem neuen Kontext auf Canvas: WebGL. ANGLE ermöglicht ein direktes Rendering in fast natives 3D; mit three.js lassen sich bei 3D-Darstellungen Anpassungen in Geometrie, Farb- und Lichteigenschaften sowie Mesh vornehmen. Auf diese Weise lässt sich beispielsweise ein 3D-Modell der Welt erschaffen – mit 60 Frames pro Sekunde. So wurde per WebGL die Welt in 30 Minuten erschaffen, andere brauchen dafür sieben Tage, so Liebel.

World with WebGL

Screenshot: Software & Support Media

Ein weiteres spannendes Projekt, das diese Technik nutzt, ist Flight Arcade von Microsoft.

Offline First! – Aber schnell!

Auch das Thema „Offline“ ist für die Cross-Plattform-Entwicklung ein spannender Punkt. Denn jeder, der öfter mit dem Zug unterwegs ist oder auf dem Land lebt, kann ein Lied von mangelnder Internetabdeckung singen. Deshalb ist es wichtig, dass Anwendungen sowohl online als auch offline funktionieren. Christian Weyer erklärte, dass man für „Offline-First-Anwendungen“ sowohl eine darauf abgestimmte Architektur als auch Werkzeuge benötigt, um eine Offlinefähigkeit überhaupt zu implementieren. Mit HMTL5 und JavaScript lässt sich etwa das leidige Problem der Datensynchronisation lösen sowie eine Cross-Plattform-App entwickeln, die auch noch den Ansatz „Offline First“ verfolgt.

Natürlich spielt bei der Entwicklung von allen Cross-Plattform-Anwendungen auch der Performanceaspekt eine Rolle: Denn nur performante Applikationen sind gute Applikationen! Gerade HTML5 kann laut Gregor Biswanger bei der Entwicklung von Cross-Plattform-Apps eine gute Leistung liefern. Entwickler neigen nämlich oftmals dazu, Fallstricke beim Development und der zugehörigen Performance zu übersehen und sich in ihnen zu verfangen. Damit das nicht passiert, stellte Biswanger fünf Top-Performancetipps vor, um den eigenen Anwendungen noch einmal ordentlich Schub zu verleihen. Nachlesen kann man die Tipps bei uns auf entwickler.de.

Wer sich noch weiter mit dem Thema Cross-Plattform-HTML5 beschäftigen möchte, dem legen wir unser Entwickler Magazin Spezial Vol.5 ans Herz. Jetzt heißt es also Gas geben und Loslegen mit dem Entwickeln von Cross-Plattform-Anwendungen!

Aufmacherbild: railway  von Shutterstock.com / Urheberrecht: DrMadra

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -