Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau

„Wir schreiben unsere nächste Reihe mobiler Produkte in HTML5.“ „Ja, viele Leute spielen derzeit mit Appcelerator, und ich spiele auch damit.“ „Nun, das ist nicht die Art von HTML5-Produkt, von dem ich spreche.“

Ich habe in letzter Zeit viele ähnliche Gespräche geführt, wahrscheinlich, weil ich eine HTML5-Anwendung entwickle. Wie „AJAX“ im Jahr 2005 war auch der Begriff „HTML5“ noch nicht klar definiert. Bevor man die Vorteile dieser neuen Technologie erkannte, war sie bereits überall im Einsatz und sogar in Betrieb.

Wenn Sie in einem Unternehmen arbeiten, dessen Manager eine Vorliebe für neue Technologien haben, ist die Comicfigur Mr. Dilbert mit etwas Glück durchaus bereit, sich in die Kabine neben Ihnen zu setzen.

Zwei Ansichten

Wenn Leute über HTML5 auf Mobilgeräten diskutieren, gibt es normalerweise zwei unterschiedliche Meinungen.

Aus wahrnehmungsbezogener Sicht wird der Rendering-Prozess der HTML5-Technologie hauptsächlich von Browsern, Anwendungen mit eingebetteten HTML5-Parsern (wie PhoneGap), Anwendungen, die das Öffnen von Lesezeichen unterstützen, oder Mobiltelefonprodukten (iPhone und iPad) durchgeführt. Der Vorteil dieser Technologie besteht darin, dass vorhandene Webseitendesigns wiederverwendet werden können, was Webentwicklern den Einstieg erleichtert. Gleichzeitig sind die Produkte qualitativ hochwertiger und besser für plattformübergreifende Produkte geeignet. Darüber hinaus ist es einfacher, Fehler zu debuggen und zu beheben, und Versionsaktualisierungen erfolgen schneller. Der Vorteil liegt in der Funktionalität. Wenn Sie eine eingebettete Architektur wie PhoneGap verwenden, treten weniger Probleme auf. Der Nachteil liegt in der Leistung, die gleichzeitig die größte Herausforderung für die HTML5-Technologie darstellt.

Aus rationaler Sicht besteht die HTML5-Technologie darin, über die JavaScript-Engine lokale Funktionen direkt zu steuern und Browserkomponenten auf mobilen Geräten zu verändern. Die Leistungsprobleme bei HTML5-Anwendungen werden eher durch die HTML/CSS-Rendering-Technologie als durch die JavaScript-Analyse gesteuert. Bei richtiger Verwendung kann Ihnen die HTML5-Technologie zweifellos viele neue Leistungseffekte bieten. Aktuelle Beispiele für HTML5-Technologien sind Appcelerator Titanium, Mobage/ngcore, Game Closure und PhobosLabs.

Node.js-Toolkit

Am Beispiel des PhobosLabs-Projekts wurde dieses Projekt unter Verwendung der JavaScriptCore-Komponente von WebKit abgeschlossen, wobei OpenGL zum Rendern der Schnittstelle auf der Geräteseite und die HTML5-Canvas-Komponenten-API für die Entwicklung verwendet wurde. Dies bedeutet, dass ein Entwickler sein HTML5-Spiel in einem Desktop-Browser mit guter Canvas-Unterstützung entwickeln und testen kann, und wenn er das Spiel in einem Browser auf einem Mobilgerät öffnet, ist die Leistung genauso gut (oder sogar besser). Die Auswirkungen der Entwicklung mit HTML5 sind denen der Entwicklung mit dem Node.js-Toolkit sehr ähnlich. Wenn Sie Node.js verwenden, müssen Sie nur die JavaScript-Engine aktivieren und nur die Node.js-Komponenten hinzufügen, die Sie für Ihre Anwendung benötigen.

Titanium von Appcelerator geht auf das Konzept der HTML5-Technologie ein und präsentiert uns eine vollständige Abstraktionsschicht von UI-Tools, die die Anwendung zur Generierung anderer Spieleprodukte ermöglicht. Dies bedeutet, dass ein HTML5-Anwendungsentwickler eine Schaltfläche über die JavaScript-UI-Bibliothek von Appcelerator erstellen kann und die interne Logik von Appcelerator diese Schaltfläche in eine native Schnittstellenschaltfläche für iOS umwandelt. Wir können die nativen Schaltflächen auf der Benutzeroberfläche über JavaScript steuern. Theoretisch müssen Entwickler keine einzige Zeile Objective-C-Code schreiben.

Die HTML5-Technologie hat ihre Vorteile. Wenn Sie zum Schreiben von Code noch JavaScript verwenden, können Sie sich von der lästigen HTML/CSS-Layoutlogik und den Stildeklarationen verabschieden. Sie können sich auch von diesen großartigen Debugging-Tools verabschieden. Doch diese Technologie hat auch ihre Schattenseiten. So hat beispielsweise die HTML5-Spiele-API Mobage einige kleinere Probleme. Die Canvas-Komponente kann auf einem relativ kleinen Bildschirm flüssig dargestellt werden, aber wenn der Bildschirm etwas größer wird, wie im Appcelerator-Beispiel, muss man beim Debuggen auch die zusätzliche Komplexität der Schnittstellenebene berücksichtigen. Es gibt viele negative Bewertungen zu Appcelerator und wenn Sie die oben genannten Punkte im Hinterkopf behalten, sind diese negativen Bewertungen tatsächlich verständlich.

Das Problem liegt immer noch im Browser

Die erste Schwierigkeit bei der Entwicklung einer vollständigen mobilen HTML5-Anwendung besteht darin, dass sie zu langsam läuft. Das zweitgrößte Problem sind die sehr dummen Toolbeschränkungen. Viele Komponenten weisen in verschiedenen Browsern Schwachstellen auf, wie beispielsweise die Navigationskomponente von jQuery Mobile und die innerHTML-Komponente von iOS. Sie müssen also Funktionen reduzieren, um Schwachstellen zu vermeiden, oder Sie sind bereit, etwas Zeit zu investieren, um diese Schwachstellen zu beheben.

Sie können selbst ein Experiment durchführen. Wenn Sie in einer iOS-Anwendung nur ein oder zwei Schnittstellenbibliotheken und ein wenig selbst geschriebenen JavaScript-Code verwenden, ohne weitere JavaScript-Bibliotheken, werden Sie feststellen, dass diese HTML5-Anwendung zwar reibungslos und vollständig läuft, aber keine Funktionen hat. Die Veröffentlichung und Ausführung von PhoneGap iOS-Projekten auf dem iPhone 3GS dauert nur 1 bis 2 Sekunden. Allein diese Tatsache zeigt, dass selbst die einfachsten HTML5-Anwendungen wirklich reibungslos laufen. Wenn Sie also feststellen, dass einige Vorgänge in Ihrer HTML5-Anwendung 10–15 Sekunden dauern oder das Laden des gesamten Programms 15 Sekunden dauert, liegt dies alles an einigen JavaScript-Schnittstellenbibliotheken.

Zwei repräsentative UI-Bibliotheken

Ein HTML5-Programmierer für mobile Anwendungen benötigt normalerweise nur zwei Dinge: Das erste ist die Verbindungsschicht zwischen der nativen Plattform und der Weboberfläche; das zweite ist die mobile UI-Bibliothek.

PhoneGap hat sich in den letzten Jahren allmählich zur Standardwahl für Pfropfschichten entwickelt. Es ermöglicht HTML5-Anwendungen, die Kamera mobiler Geräte aufzurufen, auf Mobiltelefonkontakte zuzugreifen und Dateien über JavaScript zu lesen und zu schreiben. Zu den beliebtesten mobilen UI-Bibliotheken gehören jQuery Mobile und Sencha Touch.

jQuery Mobile wurde erst letztes Jahr erstellt, ist also sehr neu und offensichtlich noch nicht sehr ausgereift. Die Navigationsleistenkomponente von jQuery Mobile ist schrecklich. Sie ist beim Umblättern deutlich langsamer als die native Seitenverwaltung und wenn Sie den Browser nicht aktualisieren, können Sie den Listeninhalt nicht erhöhen. Beim Test auf einer PC-Desktopplattform war auch die CPU-Auslastung sehr hoch (die Version war Alpha 4 von jQuery Mobile). Mein Projekt verwendet es hauptsächlich, weil es relativ einfach ist (leichter zu knacken) und weil diese Bibliothek auf jQuery basiert, ist der Einstieg für jeden erfahrenen Webprogrammierer leicht.

Sencha Touch soll ausgereifter und schneller als jQuery Mobile sein. Aber wenn ich Dinge mit hoher Komplexität sehe, hasse ich sie nicht automatisch. Denn mein Unterbewusstsein sagt mir, dass es viele Funktionen gibt, die ich nie nutzen werde, ich aber erzwinge, dass diese zusätzlichen Dinge in meine App geladen werden, was die Gesamtleistung meiner App erheblich verschlechtert. Ich könnte mich zwar irren, aber die leistungsstärkste mobile App auf der App-Seite von PhoneGap ist IGN Dominate. Sie läuft sehr reibungslos und basiert auf Sencha Touch, aber ich bin sicher, dass sie viel Zeit in die Optimierung dieses Produkts investiert haben.

Debuggen und Ändern

Bei der Entwicklung von HTML5-Anwendungen haben viele Leute möglicherweise die Tatsache übersehen, dass das Debuggen oder Ändern einer HTML5-Anwendung sehr einfach ist. Jeder Entwickler, der an einem großen HTML5-Entwicklungsprojekt gearbeitet hat, kann Ihnen sagen, dass Debugging und Wartung 80 % des Projektlebenszyklus in Anspruch nehmen können, wenn nicht mehr. Das heißt: Wenn Sie von einem Entwicklungstool hören, dass es eine Chat-Anwendung in 15 Minuten entwickeln kann, können Sie damit möglicherweise nur 20 % der Arbeit in 15 Minuten erledigen. Für die restlichen 80 % müssen Sie möglicherweise mehr als dreimal so viel Aufwand aufwenden.

Beim Debuggen von HTML5-Mobil-Apps treten einige Probleme auf, da das Konsolenprotokoll nicht ausgedruckt werden kann. Wenn der JavaScript-Code also eine Schwachstelle oder einen Fehler enthält, müssen Sie den Fehler mithilfe von „alert()“ melden, da Sie ihn sonst möglicherweise nicht finden können. PhoneGap behebt dieses Problem. Es kann das Konsolen-Debugging-Protokoll über die XCode-Konsole ausdrucken, aber die Funktionalität ist immer noch sehr eingeschränkt.

Die derzeit effektivste Lösung ist weinre. Trotz aller Bugs ist es lauffähig. Damit können Sie auch die Benutzeroberfläche Ihrer mobilen Anwendung an Haltepunkten debuggen. Weinre ist ein auf WebKit basierender Webinspektor. Sein Debugging-Tool-Hintergrund bezieht und ersetzt Debugging-Code über einen Remote-Server. Vor zwei oder drei Wochen habe ich den Code des Web Inspectors etwas untersucht und festgestellt, dass es nicht wirklich schwer ist, ihn in einen Remote-Debugger umzuwandeln. Die Entwicklung von Weinre wird in den kommenden Monaten schneller voranschreiten und möglicherweise entwickelt jemand sogar einen Ersatz dafür. Warten wir es ab und sehen wir.

In den nächsten Jahren werden Debugging-Tools für die HTML5-Technologie bei der Entwicklung mobiler Anwendungen zweifellos an Bedeutung gewinnen, da sie 80 % der Arbeitslast der meisten Entwickler übernehmen können. Möchten Sie Ihr Interface-Design mit Objective-C ändern? Bearbeiten, neu kompilieren und ausführen. Wiederholen Sie diese drei Schritte, bis Sie zufrieden sind. Bei vielen Neukompilierungsschritten kann dies einen Tag dauern. Um dies zu erreichen, HTML5-Technologie verwenden? Bearbeiten Sie einige CSS-Eigenschaften mit weinre und testen Sie sie. Sie müssen die App nicht einmal schließen, um mit dem Debuggen fortzufahren. Bis zu einem gewissen Grad können Sie Ihre mobile HTML5-App auch in einem Desktop-Browser debuggen. Aber glauben Sie mir, Ihre App kann auf Mobilgeräten zahlreiche Schwachstellen aufweisen, daher müssen Sie weinre verwenden.

Leider wird oft ein Toolkit oder eine Funktion gelobt, aber man hört selten jemanden, der ein Debugging-Tool als großartig lobt. Ich schätze, obwohl es das von HTML5-Mobilprogrammierern am häufigsten verwendete Tool ist, wird darüber selten gesprochen.

Zusammenfassung: Aktuelle Situation

Obwohl dieser Artikel etwas lang ist, muss ich ihn dennoch zusammenfassen:

1. Es gibt nur zwei Möglichkeiten, HTML5-Anwendungen auf Mobilgeräten zu entwickeln. Verwenden Sie entweder die HTML5-Syntax oder nur die JavaScript-Engine.

2. Die Konstruktionsmethode der JavaScript-Engine ermöglicht die Erstellung mobiler Webspiele. Da die Schnittstellenebene komplex ist, habe ich zur Verwendung ein UI-Toolkit reserviert.

3. Reine HTML5-Mobil-Apps laufen langsam und sind voller Fehler, aber nach der Optimierung ist die Wirkung besser. Obwohl nicht viele Leute bereit sind, eine solche Optimierung durchzuführen, können Sie es trotzdem versuchen.

4. Der größte Vorteil mobiler HTML5-Anwendungen besteht darin, dass sie direkt auf der Webseite debuggt und geändert werden können. Um den Effekt von HTML5 zu erzielen, müssen Entwickler nativer Anwendungen möglicherweise einen hohen Aufwand betreiben und die Codierung, das Debuggen und die Ausführung ständig wiederholen. Dies ist ein Problem, das sie zuerst lösen müssen.

5. Ja, die HTML5-Portierung ist ziemlich unkompliziert, aber ich gehe davon aus, dass jeder dies zu einem automatisierten Vorgang machen wird.

Das oben beschriebene umfassende Verständnis des Entwicklungsstatus von HTML5 in der mobilen Entwicklung ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.