Erstellen Sie eine mobile Vorlage mit Lenkern

'Mobile': ein so interessantes und umfassendes Wort. Es scheint heutzutage, dass es entweder das Hauptthema der Konversation zwischen Webdesignern und Entwicklern ist oder zumindest tangential miteinander verbunden ist. So wie die Schlagworte 'HTML5' und 'Ajax' abgenommen haben, hat die mobile Nutzung weiter an Bedeutung gewonnen. Es ist vielleicht nicht überraschend, dass der gleiche Ansatz zum Erstellen des Frontends einer Ajax-gesteuerten Site für einen Desktop-Browser auch auf eingebettete HTML5-Apps angewendet werden kann, die auf Mobilgeräten ausgeführt werden können.

Arten von Illustrationen für Kinderbücher

Dies ist das Thema meines Vortrags auf der Big Design Conference in Dallas, TX - Verwenden Sie Web Skills, um mobile Apps zu erstellen . Zufälligerweise (oder bequemerweise für mich) ist es auch das, was ich in diesem Artikel behandeln werde: Wie man es benutzt Lenker.js um eine leichte HTML5 'App' zu erstellen, die die Dribbble API . Klingt gut? Okay, dann lass uns loslegen.

Die Grundlagen

Handlebars.js ist eine Obermenge von Schnurrbart , eine logiklose Vorlagensyntax, die in eine Vielzahl von Programmiersprachen integriert werden kann. Die Prämisse hinter Moustache ist zwar bewundernswert - die vollständige Trennung der Geschäftslogik von der Präsentation -, kann jedoch häufig recht einschränkend sein und separate Vorlagen erfordern, unabhängig davon, ob bestimmte JSON-Eigenschaften zum Rendern verfügbar sind oder nicht.



Der Lenker schafft ein Gleichgewicht zwischen Leichtigkeit, Entschlüsselbarkeit und gerade genug Logik

Der Lenker schafft ein Gleichgewicht zwischen Leichtigkeit, Entschlüsselbarkeit und gerade genug Logik

Für mich bietet der Lenker die perfekte Balance zwischen Leichtgewicht, Entschlüsselbarkeit in HTML und einer ausreichenden Logik zur Einhaltung des DRY ( Wiederholen Sie sich nicht ) Prinzip.

Wie bei Moustache verwendet der Lenker '{{' und '}}' zum Einkapseln JSON Eigenschaften. Seitlich gedreht, können diese geschweiften Klammern wie ein Schnurrbart aussehen (daher das Wortspiel auf 'Lenkerschnurrbart'). Über den Schnurrbart hinaus enthält der Lenker die Syntax, die für grundlegende Bedingungen erforderlich ist, wie z.

{{#if something}} Do stuff with {{something}} {{else}} Sorry, we got nothing. {{/if}}

Anhand dieses Codebeispiels ist es nicht schwierig zu bestimmen, was passiert. Es erinnert etwas an wie ExpressionEngine Syntax-Looks oder der Templating-Ansatz Django . Es ist wesentlich menschlicher lesbar (und designerfreundlich) als die Verkettung von Zeichenfolgen der alten Schule in einer JavaScript-Schleife. Apropos, Lenker führen auch Schleifen durch, sodass ein einfaches HTML-Snippet für eine Liste von Elementen wiederverwendet werden kann.

{{#if items}}
    {{#each items}}
  • {{this.name}}
  • {{/each}}
{{/if}}

Lenker können auch mehrstufige JSON-Objekte ausführen. Hier ist ein Beispiel für ein hypothetisches Restaurantmenü. Im vorherigen Beispiel hatten wir {{this.name}}, aber im nächsten Beispiel lassen wir das 'this' weg. Präfix. Ohne funktioniert es einwandfrei, da Lenker wissen, was {{name}} bedeutet, wenn sie kontextuell in {{#each}} verschachtelt sind.

{{#with menu}}
{{#each categories}}
{{name}}
{{#each subcategories}}
{{name}}
{{#each item}}
{{name}} - {{price}}
{{/each}} {{/each}} {{/each}}
{{/with}}

Abhängig von den übergebenen JSON-Daten würde dies ungefähr so ​​aussehen…

Beverages
Wines by the Bottle
Crystal White Wine - .95
Red, Red Wine - .00
Sodas
Cola - .99
Seltzer - .99
Entres
Seafood
Etc.

Demo-App

Nachdem wir einige der einführenden Grundlagen behandelt haben, wollen wir uns damit befassen die Demo . Für die Zwecke dieser Diskussion habe ich mich ausschließlich auf die Front-End-Aspekte konzentriert, während für eine tatsächliche Site zweifellos einige serverseitige Komponenten beteiligt wären.

Der Grund, warum ich diesen Weg gegangen bin, ist zweierlei. Erstens die Kürze. Zweitens hat man beim Erstellen einer HTML5-App, die in ein mobiles Gerät eingebettet werden soll, nicht den Luxus einer serverseitigen Umgebung, die auf dem Telefon ausgeführt wird. Die Art und Weise, wie wir unsere Daten in die HTML-Ansicht übertragen, besteht darin, JSON von / an einen Remote-API-Endpunkt zu empfangen (und optional zu senden). In diesem Fall Dribbble. Da diese spezielle API schreibgeschützt ist, werden wir einfach Daten abrufen und in unserer HTML-Ansicht rendern.

Wir

Wir empfangen (und senden optional) JSON von / an einen Remote-API-Endpunkt

Da wir Handlebars.js verwenden, um die Dribbble-API zu verwenden, habe ich diese Demo-App 'Handlebbbars' genannt. ich benutze Sass (über Kompass ), um die Stylesheets zu schreiben, die dann in eine einzelne application.css-Datei kompiliert werden. Meiner Meinung nach ist dies der beste Workflow für die CSS-Vorverarbeitung. Es geht über den Rahmen dieses Artikels hinaus, aber wenn Sie neugierig sind, habe ich darüber geschrieben Hier ...

Schauen wir uns die Demo an .html und application.js Dateien.

demo.html

Das erste bemerkenswerte Element in demo.html ist der Dropdown-Menü mit 'Seite 1' bis 'Seite 25' (die Dribbble-API bietet bis zu 25 Seiten mit jeweils 30 Aufnahmen). Dies dient zwei Zwecken:

1. Es ist ein visueller Indikator dafür, welche Seite angezeigt wird.

zwei. Es kann verwendet werden, um direkt zu einer bestimmten Seite zu springen.

Es ist jedoch nicht das nur Navigationsmethode, die wir bereitstellen werden. Apropos Navigation, wir haben auch eine mit Anweisungen zum Paginieren entweder über die J / K-Tasten (bei Verwendung eines Desktop-Browsers) oder durch Wischen nach links / rechts auf einem Touchscreen-Gerät.

Darunter haben wir den Kern der gesamten App,

    . Dies ist einfach ein leerer Container, in den wir unseren dynamisch generierten Inhalt einfügen, nachdem JSON von Handlebars analysiert und in HTML gerendert wurde. Wir sehen auch und . Die Lademeldung wird angezeigt, wenn Ajax ( JSONP ) Anforderungen werden an die Dribbble-API gesendet und bei der Rückgabe von Daten ausgeblendet. Für den Fall, dass die Ajax-Anforderungen zu lange dauern (oder vollständig fehlschlagen), wird die Fehlermeldung angezeigt. Dies bietet dem Benutzer die Möglichkeit, die Seite manuell zu aktualisieren.

    wie man ein Logo Designer wird

    Gegen Mitte des Seitencodes wird die Tag mit unserer Vorlage trägt einen merkwürdigen Inhaltstyp…

    {{#each shots}}
  • {{title}}

    {{#if player.twitter_screen_name}} {{/if}} {{#if likes_count}} {{/if}} {{#if short_url}} {{/if}}
    Designer: {{player.name}}
    Twitter: @{{player.twitter_screen_name}}
    Likes: {{likes_count}}
    URL: {{short_url}}
  • {{/each}}

    Während das meiste davon ziemlich einfach sein sollte, gibt es ein paar Dinge, die ich speziell hervorheben möchte. Das Typattribut auf dem Tag enthält einen Wert, der für alle Browser unsinnig ist: Text / X-Lenker. Wirklich, das könnte alles sein - wie Typ = 'Erdnussbutter' - Solange es sich nicht um Text / Javascript handelt, würde ein Browser den Inhalt als JavaScript analysieren (was wir nicht wollen). Stattdessen wollen wir die einfach da sitzen und nichts tun. Wir werden die Vorlage später über den Code in abrufen application.js .

    Es ist erwähnenswert, das Seltsame src = 'Daten:…' auf dem Vordergrundbild. Ich codiere spacer.png (das finden Sie in der '/ Assets / Bilder' Ordner), da dadurch möglicherweise HTTP-Anforderungen gespeichert werden, wenn dieser HTML-Code als Website bereitgestellt wird. Alternativ könnte unser Code in eine native App eingebettet sein. In diesem Fall wäre die Netzwerklatenz ein strittiger Punkt, weil spacer.png wäre am Telefon selbst.

    Als kluger Leser könnten Sie neugierig sein, was spacer.png sieht aus wie. Es ist einfach ein transparentes 4x3-Pixel-Bild. Ich habe dies getan, weil die Bildfläche für Dribbble vorhersehbare 400 x 300 Pixel beträgt. Also, wie die spacer.png Dies zwingt dazu, ein konsistentes 4x3-Seitenverhältnis beizubehalten. Ich lade jede Aufnahme als Hintergrundbild hinter diese transparente Ebene und erzwinge eine optimale Anpassung über - Hintergrundgröße: Auto 100% - Nur für Aufnahmen mit einem funky (nicht 4x3) Seitenverhältnis. Dies hat den zusätzlichen Vorteil des Caching, da die meisten Browser keine zusätzliche HTTP-Anforderung senden, wenn bereits ein Hintergrundbild im Cache vorhanden ist.

    Ganz am Ende der Seite haben wir die Tags, die das gesamte aktuelle JavaScript enthalten. Für IE9 diene ich jQuery und für andere Browser, die ich bediene Zepto .