Dieser Artikel wurde maschinell übersetzt.

Innovation

Entwicklung mobiler Websites, Teil 5: jQuery Mobile

Dino Esposito

 

In diesem Artikel werde ich einige Gedanken über jQuery Mobile, eine zunehmend beliebte mobile Technologie teilen.

Da immer mehr Websites von speziellen Websites Benutzer mobiler Geräte zu bedienen flankiert werden, hat eine Gleichung Form in den Köpfen vieler Entwickler und Manager. Einfach gesagt, klingt es wie folgt: Wenn Sie jQuery lieben, dann wirst du jQuery Mobile, zu lieben. Tatsache ist, dass eine Menge Leute (mich eingeschlossen) Liebe jQuery, potenziell eine große Anzahl von Entwicklern jQuery Mobile als Standardauswahl für jede mobile Webentwicklung zu verwenden, ohne jede weitere denken geneigt sein würden.

Ich gebe zu, dass ich dieses Muster folgte, genau dann, wenn ich mobile Entwicklung begonnen. Manchmal funktionierte es; Manchmal haben Sie es nicht. Und vielleicht noch wichtiger ist, manchmal ich dachte, es funktionierte, aber am Ende habe ich nicht wirklich bekommen, was meine Kunden gesucht haben.

Mobile Entwicklung ist nicht einfach ein Zweig der Webentwicklung. Zum größten Teil, es nicht gelingen, durch Anpassung (gut, vor allem Vereinfachung) was Sie bereits haben sei es Anwendungsfälle, Layout, Grafiken, Skripts oder andere verwandten Technologien,. Gut gemacht und Geräteübergreifende mobile Entwicklung ist ein wahre Paradigmenwechsel, wo die UX steht an erster Stelle und neue Arten von Profis zeigen sich: Informationsarchitekten und Interaktionsdesigner Inhalt Strategen. Mobiler Software ist oft entworfen und genehmigt durch Modelle und dann einfach umgesetzt, an einer bestimmten Position und in einem bestimmten Format der Daten.

Aber beachten Sie, dass die Technologie sollte nicht diktieren, wie Sie Ihre Geschäftsanforderungen zu erreichen; Technologie sollte nur ein Mittel, um Ihre sofortige Entwicklungsziele umzusetzen. Es klingt vielleicht wie eine Aussage ziemlich offensichtlich, verzichtet aber — seien wir ehrlich – wie oft haben Sie gesehen, diese Regel verletzt? Haben Sie schon einmal über dieses Anti-pattern "Pet-Technologie"? Lesen Sie es auf bit.ly/OvJdx0. Manchmal kommt es vor, dass eine bestimmte Technologie ohne zwingende oder Business-orientierte Grund abgeholt wird. Ebenso manchmal geschieht es, dass eine bestimmte Technologie für die falsche Aufgabe abgeholt — oder vielleicht noch schlimmer noch, seine Verwendung führt zu einem weniger als idealen Ansatz für eine bestimmte Aufgabe.

In der heutigen sich schnell ändernden mobile Welt, ist die Umsetzung jeder Technologie vor UX und strategischen Überlegungen ein großes Risiko. In der mobilen Entwicklung, Anwendungsfälle und Vision kommen erste und Technologie ist nur ein Mittel — wie es immer sein sollte!

Jetzt konzentriere ich mich auf das Hauptthema dieser Spalte, jQuery Mobile, deren starken und schwachen Seiten oft auf einer Skala, das zählt gemessen werden, was Sie tun können, anstatt was Sie tun möchten. Lesen Sie mehr über jQuery Mobile bei jquerymobile.org.

jQuery Mobile auf einen Blick

Insgesamt kommt die am besten geeignete Definition für jQuery Mobile von seiner Webseite. Es erklärt, dass jQuery Mobile ein HTML5-basierte Benutzeroberfläche-System für alle populären mobilen Plattformen. Darüber hinaus heißt es jQuery Mobile Code baut mit "progressive Enhancement" im Auge, und Ergebnisse sollte eine leicht "Theme-fähig"-Design. Darüber hinaus ist jQuery Mobile auf das solide Fundament von jQuery und jQuery UI gebaut. Viele professionelle Entwickler übernehmen jedoch, dass jQuery Mobile eine vereinfachte Version von jQuery für die Zwänge der typischen mobile Geräte optimiert ist.

In Wahrheit ist was auf der Homepage der jQuery Mobile Website gerade das wahre Wesen der Bibliothek. jQuery Mobile ist ein Framework, das für viele Entwickler leicht zu bedienen ist – oder zumindest es entpuppt sich als wesentlich einfacher als die meisten anderen Frameworks für mobile Lösungen draußen zu verwenden. Es ist ein Rahmen, der mit der Benutzeroberfläche von Ansichten hilft, die funktionieren gut, wenn auf mobile und Touch-basierte Geräte angezeigt. Nicht nur sind die Touch-basierte (und später Mobil-orientierte) Ansichten einfach zu erstellen, sondern sie sind auch leicht zu zu bilden ein Navigationssystem mit Übergängen und Effekten zusammenbinden. Erstellte Ansichten nutzen die Einrichtungen des jQuery Mobile arbeiten gut mit Smartphones und teilweise auch mit älteren Geräten, führt zu die entscheidende Frage: Ist das wirklich genug für Ihre mobile Web-Entwicklung?

Wo ist die Mobile in jQuery Mobile?

Ich habe persönlich jQuery Mobile verwendet, für die Benutzeroberfläche einer Web-basierten Anwendung zu erstellen, das Laptop oder Tablet-Nutzer abzielt — keine Handys überhaupt! — und es funktionierte wunderbar. Es war zu dieser Zeit, die ich zuerst vorgestellt, dass einige Art von Beziehung zwischen jQuery UI und jQuery Mobile schließen.

Erhöhen Sie als überraschend, wie es klingen mag, lassen Sie uns den Punkt: Ist jQuery Mobile wirklich ein Rahmen für die mobile Entwicklung?

Auf der Grundlage der Beschreibungdes der Technologie auf jquerymobile.org, sollten jQuery Mobile als primäres Werkzeug für die Benutzeroberfläche des Touch-basierte Frontends Sie. Ein Touch-basierte Frontend ist wahrscheinlich ein mobiles Gerät (das heißt, Tablet oder Smartphone), aber mobile Web-Entwicklung hat viel mehr Facetten als die front-End.

Nur mit jQuery Mobile für die Vermittlung von einigen UI das passt gut in kleine Immobilien der Bildschirm des Geräts möglicherweise ein Ansatz, der in einfachen Szenarien funktioniert. Wenn als einen allgemeinen, umfassenden Ansatz genommen, jedoch kann es ein bisschen simpel sein.

Lasst uns was Sie in eine mobile Lösung finden können, die über die Funktionen von jQuery Mobile hinausgeht. Zuallererst sollten Sie eine klare Vorstellung von der Website, die Sie erstellen, ausgedrückt durch eine große Auswahl an Anwendungsfällen, einen klar definierten Datenfluss zwischen Server und Client, und, noch wichtiger ist, eine Liste der Mobile Profile, Sie dienen wollen. Ein mobile-Profil ist ein Oberbegriff verschiedenen Familien, die Geräte an, die Ihre Website dienen will: Smartphones, Tabletten, Notebooks, smart-TVs und ähnliche Geräte, die in den letzten Jahren oder so gebaut oder eine beliebige Zelle Telefone, die mit dem Internet verbinden können.

Nicht jedes mobile Website muss mehrere Geräteprofile zu unterstützen, obwohl diese Notwendigkeit zunehmend strengere und dringlicher geworden ist. Unterstützt mehrere Geräteprofile bedeutet Umgang mit unterschiedlichen Ansichten und dynamische Anpassung der Ziel-Antwort auf Basis der Geräteeigenschaften und Fähigkeiten. In meinem letzten Artikel (msdn.microsoft.com/magazine/jj618291) habe ich einen Ansatz basiert auf einer serverseitigen Gerät Beschreibung Repository wie Wireless Universal Resource File oder WÜRFL Multi-serving vorgelegt (siehe wurfl.sourceforge.net). Welche Art von Out-of-Box-Unterstützung erhalten Sie in diesem Zusammenhang von jQuery Mobile?

jQuery Mobile und Responsive Design

Reaktionsschnelle Design ist das Framework Fähigkeit, eine maßgeschneiderte Version einer Seite für bestimmte Geräte bereitzustellen. Weiter oben in diesem Artikel erwähnte zitiert von der Website jquerymobile.org ich progressive Erweiterung als eine der Säulen des jQuery Mobile Framework. Progressive Verbesserung ist ein Bottom-up-Web-Entwurfsmuster mit dem Erstellen Sie Seiten, die schrittweise Verbesserung einen Kern, der auf jedem Browser funktioniert. Progressive Verbesserung ist das Gegenteil von "graceful Degradation", die für eine Top-Down-Ansatz entscheidet: Die beste Erfahrungen zu definieren und als anmutig wie Sie können, wenn der Browser einige erforderlichen Fähigkeiten verpasst beeinträchtigen. Progressive Verbesserung kann als Muster für Ihre Web-Erfahrung besser zu machen.

Beachten Sie, dass ein Web-Erlebnis entgegenkommender zählen einige ad-hoc-mobile Unterstützung anbieten, aber wird im Browser reagieren bedeutet nicht unbedingt mit Schwerpunkt auf mobilen Clients.

Also mithilfe von jQuery Mobile Sie besorgt über die Erkennung von Gerätefunktionen, möglicherweise nicht wie die Bibliothek wird sichergestellt, dass die Ausgabe auch auf älteren Browsern funktionieren würde. Lasst uns den Kern der jQuery Mobile Umsetzung der das progressive Enhancement-Muster.

Browser-Partitionierung

Die Mobile jQuery-Bibliothek unterstützt drei Browserprofile — mit dem Namen A, B und C — wo a-Klasse Browsern am meisten verbesserte Markup die Bibliothek dienen kann und erhalten-C-Grade Browsern nur einfaches HTML Inhalt mit keine Extraeigenschaften, wie Stile und AJAX. Jedes Profil zeichnet sich durch eine Liste der Funktionen, die Browser in Bezug auf die Bibliothek Bedürfnisse zu bieten. Beispielsweise die Unterstützung für CSS Media Queries ist eine wichtige Fähigkeit in jQuery Mobile, und es ist eine grundlegende Voraussetzung für einen Browser in der Gruppe A fallen. Neben CSS Media Queries unterstützen a-Klasse Browser JavaScript, AJAX und volle Manipulation des Document Object Model (DOM). A-Klasse Browser sind, wo die Bibliothek betreibt in vollen Zügen, und die Liste der a-Klasse Browser wird häufig aktualisiert.

Der grundlegende Unterschied zwischen der a-Klasse und B-Grade Browsern ist die fehlende Unterstützung für AJAX. B-Klasse-Browsern deaktiert jQuery Mobile AJAX für Seitenübergänge und Anforderungen. Also erwarten Sie in der Lage, zur Durchführung von Geschäften erfolgreich, aber mit einem weniger angenehmen Erlebnis werden.

Schließlich sind C-Klasse Browser meist ältere Browser keine Unterstützung für Medien-Anfragen und eingeschränkte Unterstützung für JavaScript, CSS und DOM-Manipulation. C-Klasse-Browser keine Norm DOM-Manipulation wird auf Elemente angewendet und einfaches HTML wird serviert. Die aktuellste Matrix von Browsern und Klasse ist abrufbar unter jquerymobile.com/gbs. Abbildung 1 und Abbildung 2 die Wiedergabe der gleichen Seite auf a-Klasse und C-Grade Browsern anzeigen.

Abbildung 1 Beispiel-Seite auf einem Android Gerät mit A-Grade

Abbildung 2 Beispiel-Seite auf eine C-Grade-Android-Handy

Die Mobile jQuery-Bibliothek ist vernünftig, nicht für B-Klasse und -C-Grade Browsern optimiert. Als Abbildung 2 zeigt, die Benutzer möglicherweise noch eine gute Behandlung erhalten, aber noch wichtiger ist, Sie haben keine Kontrolle über diese. Den HTML-Code in Abbildung 1 und Abbildung 2 ist ziemlich einfach und nicht mehr als eine ungeordnete Liste enthält. Was passiert, wenn Sie eine viel anspruchsvollere Seite mit Bildern, Popups, Textblöcke verschiedener Länge und Format und Schaltflächen haben?

jQuery Mobile verdankt seine schöne Grafik (wie im Abbildung 1), intensive DOM-Manipulation und AJAX-Features. Außerhalb der a-Klasse Browsern garantiert jQuery Mobile nur eine Seite sichtbar ist. Finden Sie mehr abrupte Übergänge (kein AJAX) und einfachere DOM-Manipulation, oder es liegt eine komplette Fallback auf einfachem HTML. Ungeachtet der Tatsache dass jQuery Mobile kann bis zu drei verschiedene Ansichten der gleichen Seite, die grundlegende HTML-Reste, die das gleiche und Transformationsregeln behoben werden und außerhalb Ihrer Kontrolle.

Die Quintessenz ist, dass wenn Sie mehr als a-Klasse Browser unterstützen müssen, Sie wahrscheinlich besser wäre Weg fallenlassen jQuery Mobile Browser Einstufung und die Einführung Ihrer eigenen Logik Browserprofile und ad-hoc-Ansichten zu behandeln (siehe Abbildung 3).

Abbildung 3 gezielt verschiedene Grade der Browser

Der Beispielcode im Artikel des letzten Monats enthält ein Beispiel für diesen Ansatz.

Um zusammenzufassen, ist jQuery Mobile im Wesentlichen ein UI-Framework, das macht einen guten Job, der Ihnen bekannte HTML-Elementen verwenden, wenn Sie eine Ansicht erstellen zu lassen. Als nächstes verwandelt sie einfache HTML-Elemente in semantisch-Objekten, die in einer Touch-basierte Umgebung gut funktionieren und passen gut auf kleinen Bildschirmgrößen. jQuery Mobile implementiert das progressive Enhancement-Muster und keiner Browser hinterlassen. Dies bedeutet jedoch nicht, dass Sie durch die Annahme einfach jQuery Mobile das Gerät-Fragmentierung-Problem effektiv begegnen können – die große Menge an signifikant verschieden mobilen Browser und Geräte. Manchmal sind Sie bieten völlig unterschiedliche Ansichten zu verschiedenen Klasse-Profile und auch sicherstellen, dass Sie Browser nach verschiedenen Logik Partitionieren erforderlich. jQuery Mobile umfasst die Logik der reaktionsschnelle Webdesign und CSS Media Queries im Mittelpunkt. Wie in meinem Artikel vom Juli 2012 (msdn.microsoft.com/magazine/jj190798), CSS Media Queries sind groß zu verwenden mit reichen Geräte (Tabletten, Laptops, intelligente TVs und vielleicht Smartphones), wo Sie wollen lediglich Nachsetzen und Ausblenden von Elementen, die nicht angezeigt werden kann. Medien-Abfragen erfordern reiche Browsern und sind kein Handy-spezifische Funktion.

Ich schlage vor, bevor Sie zu jQuery Mobile umarmen, Sie die folgende Frage: Ist es OK, bestimmte Smartphones (oder ähnliche Geräte) zu benennen als Einstiegspunkt für Ihre Website wirklich zu genießen? Wenn ja, dann ist jQuery Mobile ist mehr als OK für Sie. Andernfalls nehmen sie weiter und entdecken Sie andere Möglichkeiten.

Dino Esposito ist der Autor von „Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) sowie „Programming ASP.NET MVC 3” (Microsoft Press, 2011) und Mitverfasser von „Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press, 2008). Esposito lebt in Italien und ist ein weltweit gefragter Referent für Branchenveranstaltungen. Sie können ihm auf Twitter unter twitter.com/despos folgen.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Christopher Bennage