13 wichtige Programmierwerkzeuge für das mobile Web

Wenn es um die Programmierung für mobile Geräte geht, wird die Auswahl schnell zum Dilemma. Zielen Sie auf Kosten der steigenden Flut von Android auf den lukrativen iPhone-Markt? Gehen Sie nativ oder schreiben Sie Code in das mobile Web? Und während ein einzelner Codestapel, der auf einer immer breiteren Palette von Plattformen, Formfaktoren und Geräten eine optimale Leistung erbringt, der Traum wäre, ist die Realität ein fragmentierter Versuch, bei dem rudimentäre Aufgaben oft eine Herausforderung darstellen können.

Aber mit Herausforderungen und Chancen kommen neugierige Köpfe. Und die Zahl der Entwickler, die ihre Aufmerksamkeit auf den Aufbau mobiler Tools und Bibliotheken richten, baut schnell ein lebendiges Ökosystem auf, um mobilen Entwicklern zu helfen - insbesondere denjenigen, die sich für das mobile Web entschieden haben.

[Auch auf .com: Entdecken Sie vier Möglichkeiten, um Smartphone-Webanwendungen zu erstellen, ohne den App Store von Apple zu besuchen. | Bleiben Sie mit dem Fatal Exception-Blog und dem Developer World-Newsletter über wichtige Erkenntnisse zur Anwendungsentwicklung auf dem Laufenden. | Bleiben Sie mit dem Mobile Edge-Blog und dem Mobilize-Newsletter über mobile Neuigkeiten und Erkenntnisse auf dem Laufenden. ]]

Eine Zeit lang war dieses Set begrenzt. Das Versprechen von HTML5 hat jedoch vielen Entwicklern die Augen für die unzähligen Vorteile des mobilen Webs gegenüber dem Versuch geöffnet, native Software auf dem Gerät zu installieren.

Erstens sind Websites geöffnet. Es ist nicht erforderlich, "Mutter darf ich" mit dem App Store-Genehmigungsteam zu spielen, wenn das Produkt gestartet oder aktualisiert wird.

Zweitens können Entwickler 100 Prozent ihres Umsatzes mit mobilen Apps erzielen. Natürlich muss man einen Weg finden, das Geld selbst zu sammeln, was nicht immer einfach ist. Aber die 30-prozentige Kürzung, die Apple durch App-Käufe erzielt, ist ein hoher Tarif für eine Reihe von Daten in einer Datenbank und eine große Bürokratie.

Drittens wird HTML5 robuster und funktionsreicher. Mit der neuesten Version können Sie Daten auf dem Client speichern und die meisten Aufgaben einer nativen App ausführen. Mit anderen Worten, die Browser-Sandbox verfügt fast über dieselben Funktionen wie die native Code-Sandbox. Und ja, die nativen Code-Apps werden in einer eigenen versiegelten Ecke des Betriebssystems gespeichert.

Viertens sind HTML5-Apps nicht gerätegebunden. Während sich ein Großteil des Hype weiterhin um Apples iPhone dreht, lassen sich HTML5-Apps relativ einfach auf andere Plattformen verschieben. Es ist nicht so einfach wie ein Knopfdruck, aber viel einfacher als die Übersetzung Ihrer App von Objective C nach Java.

Es gibt natürlich Einschränkungen. Web-Apps können Konnektivitätsproblemen zum Opfer fallen. Sie sind oft etwas langsamer und viele native App-Entwickler weisen gerne auf die Millisekunden-Verzögerungen hin, die möglicherweise spürbar sind oder nicht. Spieleentwickler sollten zweimal überlegen, ob sie sich auf raffinierten, reaktionsschnellen Code in JavaScript verlassen sollen.

Die größte Einschränkung kann in der Entwicklung selbst liegen. Die Tools von Apple eignen sich zwar gut für einen Blick in die nativen Apps, es ist jedoch schwieriger, sich eingehend mit der Struktur des Codes zu befassen, der in Ihrem mobilen Browser ausgeführt wird. All dieses Interesse an der mobilen Entwicklung und dem mobilen Web hat eine Reihe von Bibliotheken und Tools hervorgebracht, die das Erstellen von Anwendungen mit ihnen vereinfachen. Hier finden Sie eine Liste auffälliger Projekte mit dem Potenzial, den Aufbau des mobilen Webs bequemer zu gestalten.

Mobiles Web-Programmiertool: ChocolateChip-UI

Laden Sie ChocolateChip-UI herunter

Die kleine Bildschirmfläche mobiler Geräte legt Wert auf ein effektives Interface-Design. Geben Sie Robert Biggs ein, einen Webentwickler in Nordkalifornien, der die ChocolateChip-UI entwickelt hat, ein Framework für die Erstellung einer lohnenden mobilen Oberfläche in HTML.

Technisch gesehen ist der vom Entwickler erstellte zugrunde liegende Code WAML (Web Application Markup Language), eine Markup-Sprache, die auf HTML5 basiert. Die meiste einfache Arbeit wird mit WAML-Tags wie oder erledigt . Das JavaScript des Frameworks funktioniert über die WAML und verwandelt es in reines HMTL5 für das Smartphone.

Diese Kombination ist federleicht. Sie können Ihr eigenes HTML, CSS und JavaScript in die WAML einmischen und sie navigiert problemlos durch den Übersetzungsprozess von ChocolateChip-UI.

Obwohl dieser Ansatz nicht perfekt ist, kann ich verstehen, warum Biggs diese Route gewählt hat. Ich habe mich schon früher in den JavaScript-Abschlüssen vieler mobiler Entwicklungstools verirrt und es ist nicht schön.

Die Sammlung von WAML-Widgets von ChocolateChip-UI ist ziemlich umfangreich und erscheint alle wie die Standard-iPhone-Benutzeroberflächen. Es enthält sogar Extras wie Löschlisten, mit denen Benutzer Elemente mit wenigen Fingerbewegungen aus einer Liste entfernen können.

Mobiles Web-Programmiertool: Mobl

Laden Sie Mobl herunter

JavaScript hat viele Ecken und Kanten, die Webentwickler weiterhin scheuern. Das Mobl-Team hat beschlossen, diese Kanten zu glätten und gleichzeitig ein Framework für die Erstellung mobiler Anwendungen zu erstellen, die in WebKit-Browsern ausgeführt werden. Anstatt Ihre Anweisungen in HTML, JavaScript und CSS zu schreiben, schreiben Sie sie in Mobl, und der Mobl-Compiler wandelt sie für den mobilen Browser in HTML, JavaScript und CSS um.

Der Ansatz ermöglichte es dem Mobl-Team, einige der schwierigeren Probleme von JavaScript zu beheben, z. B. wie Funktionen zur verzögerten Ausführung an andere Funktionen übergeben werden. Das Verfolgen aller verschachtelten Klammern, die dazu in JavaScript erforderlich sind, kann schnell nervenaufreibend werden und die Fehlerwahrscheinlichkeit erhöhen.

Mobl beseitigt diese Komplexität durch die Verwendung einer deklarativeren Syntax. Wenn Sie 1.000 Millisekunden anhalten möchten, schreiben Sie:

sleep(1000); doNext();

Mobl kompiliert dies in JavaScript mit einer setTimeoutFunktion und einer callbackFunktion, die ausgeführt wird doNext(). Als Entwickler müssen Sie nicht über die callbackSyntax nachdenken oder darüber, wie Sie alles in eine weitere Funktion einbinden. Alles, was Sie tun müssen, ist eine Liste der Dinge zu schreiben, die passieren sollen.

Es gibt Dutzende von Möglichkeiten, wie das Mobl-Team Ihnen beim Schreiben dieser Anweisungen hilft, ohne auf die Interpunktion in JavaScript achten zu müssen. Das Endergebnis ist eine schöne Sammlung der Standard-Idiome mobiler Apps. Willst du eine Bildlaufliste? Schließen Sie einfach Ihre Artikelliste mit dem Schlüsselwort group ein.

Die Entwickler, denen dieser Ansatz nicht gefällt, sind bereits mit Objective-C oder JavaScript vertraut. Warum sollte man noch eine andere Sprache mit etwas anderer Syntax lernen, wenn diese etwas andere Syntax nur wieder in etwas umgewandelt wird, das sie bereits verstehen? Andererseits könnten Sprachliebhaber eine Reihe guter, neuer Ideen finden, damit sich die Reise lohnt.

Mobile Web-Programmiertool: jQuery Mobile

Laden Sie jQuery Mobile herunter

Als die Leute hinter dem jQuery-Framework beschlossen, die mobilen Plattformen in Angriff zu nehmen und ein einfaches UI-Toolkit für Smartphones zu erstellen, war klar, dass es breite Aufmerksamkeit und Experimente erregen würde. Das Ergebnis ist ein Projekt, das von vielen großen Hardwareherstellern gut unterstützt wird und auf Mobilgeräten mit Sicherheit relativ erfolgreich sein wird.

Der einfachste Teil von jQuery Mobile ist das HTML-zentrierte Layout. Seiten werden in DIVs und anderen Standard-HTML-Komponenten wie z

  • Stichworte. Infolgedessen lässt sich jQuery Mobile einfach in dynamische Websites und CMS integrieren, da die Verwendung häufig nur das Hinzufügen eines neuen Themas oder Skins erfordert. Es gibt zum Beispiel mehrere Drupal-Themen und -Module, die auf jQuery Mobile basieren.

    Die enge Integration mit jQuery bedeutet, dass viele, aber nicht alle Plug-Ins für den Desktop auch mit mobilen Websites funktionieren. Es gibt auch einige mobile Plug-Ins, die das mobile Framework erweitern. Die leichte Berührung des Frameworks und das fruchtbare Ökosystem rund um jQuery Mobile bedeuten, dass wir wahrscheinlich sehen werden, dass seine Leistung nur wächst.

    Mobiles Web-Programmiertool: The-M-Project

    Laden Sie The-M-Project herunter

    Wenn die Sammlung von Methoden und Stilen von jQuery Mobile nicht ausgefeilt genug ist, bietet The-M-Project eine Sammlung von Widgets, die zu jQuery Mobile-Objekten kompiliert werden. Es behandelt viele der kleinsten Details des Designs, z. B. das Platzieren eines Symbols genau an der richtigen Stelle, sodass Sie sich stattdessen auf das Gesamtbild konzentrieren können.

    Der Code ist mit dem Model-View-Controller-Muster strukturiert. Ein Großteil der Arbeit besteht darin, eine große JSON-Struktur zu erstellen, die die verschiedenen Seiten und Widgets definiert, die sich auf diesen Seiten befinden. Das Layout wird von The-M-Project übernommen.

    Das Verhalten der App wird definiert, indem für jede Seite Funktionen erstellt werden, die an verschiedene Ereignis-Hooks angehängt sind. Das M-Projekt sorgt dafür, dass die Veranstaltungen ihren Ort erreichen.

    Es ist nichts wert, dass der Erstellungs- und Bereitstellungsprozess in Node.js integriert ist. Der Code zum Erstellen Ihrer großartigen Kreation wird auch in Node.js ausgeführt. Der Test wird auf demselben Server durchgeführt. Wenn es funktioniert, können Sie die Mischung aus Code und Bibliothek auf jeden Webserver übertragen oder sie weiter in Node.js integrieren.

    Mobiles Web-Programmiertool: Touchqode

    Touchqode herunterladen

    Sie sitzen in einem Café in Paris, auf dem Gipfel des Mount Everest oder anderswo ohne Ihren Laptop oder Desktop. Eine Idee fällt Ihnen ein. Kritzeln Sie es auf ein Stück Papier und kommen Sie später darauf zurück? Nicht, wenn Touchqode auf Ihrem Android-Handy ausgeführt wird. (Eine iPhone-Version kommt bald.)

    Diese winzige Entwicklungsumgebung bietet eine überraschend große Anzahl von Funktionen auf einem winzigen Bildschirm. Der Code wird hervorgehoben, die Skripte können lokal ausgeführt werden und Sie können Ihren neuen Code über FTP synchronisieren. Wenn der Chef unterwegs anruft, sollten Sie keine Probleme haben, etwas zu reparieren, das nur wenige Tastenanschläge benötigt. Ich kann mir nicht vorstellen, lange Programme mit meinem Android-Handy zu schreiben, aber da Autoren ganze Romane auf ihren Handys verfasst haben, ist es möglicherweise zu früh anzunehmen, dass Benutzer Touchqode nur zum Erstellen einiger gelegentlicher Codezeilen verwenden.

    In jedem Fall ist Touchqode zur Not gut.

    Mobiles Web-Programmiertool: LimeJS

    Laden Sie LimeJS herunter

    Einer der Gründe, warum Flash-Spiele so überzeugend sind, ist das fruchtbare Ökosystem von Bibliotheksautoren, die ihre Arbeit an Flash-Entwickler verkaufen können. DigitalFruit hat LimeJS erstellt, um Entwicklern, die die in HTML5 enthaltenen WebGL-Objekte verwenden möchten, ähnliche Unterstützung zu bieten.

    Die ersten Ergebnisse von LimeJS sind in WebKit-Browsern wirksam. Der Code ist technisch gesehen JavaScript, aber die Struktur ähnelt einem guten, altmodischen C mit Aufrufen der OpenGL-Bibliothek. Es sollte möglich sein, OpenGL automatisch in diese Bibliothek zu kompilieren, obwohl dies wahrscheinlich einige Hand-Tuning erfordert.

    LimeJS-Angebote sind einige nützliche Funktionen zur Vereinfachung der Spieleentwicklung. Es gibt Szenen voller Ebenen und einen Regisseur, der Ereignisse nach einem flexiblen Zeitplan abfeuert. Es gibt Animationen und Übergänge, die die Sprites über die Seiten bewegen. Alle Funktionen sind Personen bekannt, die bereits Gelegenheitsspiele geschrieben haben.

    Die Entwicklungsumgebung umfasst mehrere moderne Details. Das grundlegende Gebäude wird in Python verwaltet, und das endgültige Paket kann zusammen mit dem Closure Compiler von Google gebündelt werden, damit es schneller heruntergeladen werden kann.

    LimeJS ist attraktiv für alle, die Zeit damit verbracht haben, Spiele für OpenGL-Frameworks in anderen Umgebungen zu entwickeln. Während die endgültige Syntax JavaScript ist, stützt sie sich nicht auf die komplexeren Ideen, die JavaScript für einige abschreckend machen, zumindest bis der Closure Compiler seine Arbeit erledigt.

    Mobiles Web-Programmiertool: Jdrop

    Mehr über Jdrop

    Auf den ersten Blick scheint Jdrop ein großer Haufen JSON zu sein, der möglicherweise für eine offene NoSQL-Datenbank gehalten wird. In der Praxis ist diese Webressource so optimiert, dass mobile Entwickler Leistungsdaten zwischen den kleinen Bildschirmen und dem Desktop zusammenstellen können, wo sie besser analysiert werden können.

    Um das Extrahieren von Leistungsfeedback von Mobilgeräten zu vereinfachen, bietet Jdrop Mobile Perf an, ein Lesezeichen, das eine Reihe von Leistungslesezeichen zusammenfasst, darunter Firebug Lite, Seitenressourcen, DOM Monster, SpriteMe, CSSess und Zoompf. Mit Mobile Perf können Sie Ihre App auf einem Telefon debuggen und die resultierenden Daten automatisch in der Jdrop-Cloud speichern, um sie später von Ihrem Desktop aus zu analysieren. Dies bietet eine interessante Möglichkeit, die tatsächliche Leistung von Mobilgeräten zu debuggen und die HTML-Quelle Ihrer bevorzugten mobilen Websites zu untersuchen.

    Mobiles Web-Programmiertool: XUI, Zepto

    Laden Sie XUI herunter

    Laden Sie Zepto herunter

    Die meisten der hier beschriebenen Frameworks dienen dazu, das schwere Heben zu erledigen, indem eine Beschreibung der Anwendung, die oft in ihrer eigenen Sprache geschrieben ist, in etwas umgewandelt wird, das auf der Seite ziemlich gut aussieht. XUI und Zepto sind sehr unterschiedlich. Sie beginnen mit der Idee, dass HTML und CSS die meisten Dinge, die angezeigt werden sollen, bereits ziemlich gut anzeigen können und nur Hilfe beim Erstellen und Ändern des DOM bieten.

    Diese Bibliotheken legen weder Ihre Widgets an noch erstellen sie Widgets jeglicher Art. Sie erhalten, was HTML bietet, und steuern dann das Erscheinungsbild mit CSS. Die Bibliothek hilft Ihnen bei der Bearbeitung des DOM, indem sie Funktionen wie das Auffinden von Elementen, das Anhängen von Klassen und das Jonglieren von Ereignissen bietet.

    Die Auszahlung ist in der Größe. Die aktuelle Version von Zepto wiegt ungefähr 2.300 Bytes, ungefähr ein Zehntel der Größe von jQuery. XUI ist nur ein bisschen größer. Der Vergleich mit jQuery ist zutreffend, da beide einen Großteil der Syntax ausleihen, ohne die Funktionen anzubieten, die anspruchsvolleren und umfangreicheren Code erfordern. XUI ruft beispielsweise den Code ab, der für die Kompatibilität mit BlackBerry oder IE Mobile erforderlich wäre. Wenn Sie sie möchten, können Sie eine dickere Bibliothek erhalten.