Byg en mobil skabelon med styr

'Mobil': sådan et interessant og altomfattende ord. Det ser ud til i disse dage, det er enten det primære samtaleemne blandt webdesignere og udviklere eller er i det mindste tangentielt relateret. Ligesom buzz-ordene 'HTML5' og 'Ajax' er begyndt, har mobilbrug fortsat få trækkraft. Måske ikke overraskende kan den samme tilgang til at opbygge frontenden af ​​et Ajax-drevet websted til en desktop-browser også anvendes til indlejrede HTML5-apps, der kan køre på mobile enheder.

hvordan man laver et karaktermodelark

Dette er emnet for min tale på Big Design Conference i Dallas, TX - Brug webfærdigheder til at oprette mobilapps . Tilfældigt (eller bekvemt for mig) er det også, hvad jeg skal dække i denne artikel: Sådan bruges Handlebars.js at lave en let HTML5 'app', der kan forbruge Dribbble API . Lyder godt? Okay, lad os komme til det.



Det grundlæggende

Handlebars.js er et supersæt af Overskæg , en logikfri skabelonsyntaks, der kan inkorporeres i en række programmeringssprog. Mens forudsætningen bag overskæg er beundringsværdig - den fuldstændige adskillelse af forretningslogik fra præsentation - kan det ofte være ret begrænsende, hvilket kræver separate skabeloner, hvorvidt visse JSON-egenskaber er tilgængelige, der skal gengives.



Styret har en balance mellem at være let, dechiffreret og give lige nok logik

Styret har en balance mellem at være let, dechiffreret og give lige nok logik

For mig finder håndtag den perfekte balance mellem at være let, dechiffreret, når den er blandet med HTML, og give lige nok logik til at overholde TØR ( Gentag ikke dig selv ) -princip.



Som med overskæg bruger styret '{{' og '}}' til at indkapsle JSON ejendomme. Vendt sidelæns kan disse krøllede seler se lidt ud som et overskæg (deraf ordspillet på 'styret overskæg'). Ud over overskæg indeholder styrene den syntaks, der er nødvendig for grundlæggende betingelser, såsom ...

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

Fra dette kodeeksempel er det ikke svært at bestemme, hvad der sker. Det minder noget om hvordan ExpressionEngine syntaksudseende eller den skabelonmetode, der er taget Django . Punktet er, at det er betydeligt mere menneskeligt læsbart (og designervenligt) end at foretage streng sammenkædning af old school i en JavaScript-loop. Når vi taler om, styrer også looping, hvilket giver mulighed for genbrug af et grundlæggende HTML-uddrag til en liste over emner.



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

Styr kan også udføre JSON-objekter på flere niveauer. Her er et eksempel på en hypotetisk restaurantmenu. I det forrige eksempel havde vi {{this.name}}, men i det næste eksempel slipper vi for 'dette'. præfiks. Det fungerer fint uden, fordi håndtag ved, hvad {{name}} betyder, når de sammenhængende er indlejret i {{#each}}.

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

Afhængigt af de JSON-data, der blev sendt ind, ville det gengive noget som dette ...

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

Demo-app

Nu hvor vi har dækket nogle af de indledende grundlæggende, lad os fordybe os i demoen . I forbindelse med denne diskussion har jeg udelukkende fokuseret på frontend-aspekterne, mens du for et faktisk websted uden tvivl vil have nogle komponenter på serversiden involveret.

Årsagen til, at jeg er gået denne rute, er dobbelt. For det første kortfattethed. For det andet, når man bygger en HTML5-app, der skal integreres i en mobilenhed, har man ikke den luksus, at et serverside-miljø kører på telefonen. Den måde, vi får vores data til HTML-visningen på, er at modtage (og eventuelt sende) JSON fra / til et eksternt API-slutpunkt. I dette tilfælde Dribbble. Da denne specifikke API er skrivebeskyttet, henter vi simpelthen data og gengiver dem i vores HTML-visning.

Vi

Vi modtager (og sender eventuelt) JSON fra / til et eksternt API-slutpunkt

I mangel af et bedre navn, da vi bruger Handlebars.js til at forbruge Dribbble API, kaldte jeg denne demo-app 'Handlebbbars.' jeg bruger Sass (via Kompas ) for at skrive typografiarkene, som derefter kompileres til en enkelt application.css-fil. Efter min mening er det den bedste CSS preprocssing-arbejdsgang. Det er uden for denne artikels anvendelsesområde, men hvis du er nysgerrig, skrev jeg om det her ...

Når det er sagt, lad os se på demoen .html og application.js filer.

demo.html

Det første bemærkelsesværdige element i demo.html er rullemenu, der indeholder 'Side 1' til 'Side 25' (Dribbble API tilbyder op til 25 sider med 30 billeder hver). Dette tjener to formål:

1. Det er en visuel indikator for, hvilken side der vises.

to. Det kan bruges til at hoppe direkte til en given side.

Det er dog ikke det kun navigationsmetode, vi skal levere. Apropos navigation, vi har også en med instruktioner om, hvordan du paginerer enten via J / K-tasterne (hvis du bruger en desktop-browser) eller ved at stryge til venstre / højre på en berøringsskærmenhed.

Nedenfor har vi kernen i hele appen,

    . Dette er simpelthen en tom beholder, hvor vi hælder vores dynamisk genererede indhold, efter at JSON er blevet parset og gengivet til HTML af Handlebars. Vi ser også og . Indlæsningsmeddelelsen vises, når Ajax ( JSONP ) anmodninger sendes til Dribbble API og skjules, når data returneres. I tilfælde af at Ajax-anmodningerne tager for lang tid (eller mislykkes fuldstændigt), vises fejlmeddelelsen. Dette giver brugeren mulighed for manuelt at opdatere siden.

    Mod midten af ​​sidens kode er tag, der indeholder vores skabelon, bærer en nysgerrig indholdstype ...

    {{#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}}

    Mens det meste af det skal være ret ligetil, er der et par ting, jeg gerne vil kalde specifikt på. Typeattributten på tag indeholder en værdi, der er meningsløs for alle browsere: tekst / x-styr. Virkelig, dette kunne være hvad som helst type = 'jordnøddesmør' - så længe det ikke er noget i retning af tekst / javascript, hvilket ville få en browser til at analysere indholdet som JavaScript (hvilket ikke er det, vi ønsker). I stedet ønsker vi bare at sidde der og ikke gøre noget. Vi henter skabelonen senere via koden i application.js .

    Det er værd at bemærke det underlige src = 'data:…' på forgrundsbilledet. Jeg koder for spacer.png (som kan findes i '/ aktiver / billeder' mappe), fordi dette potentielt gemmer HTTP-anmodninger, hvis denne HTML ender med at blive serveret som et websted. Alternativt kunne vores kode integreres i en indbygget app, i hvilket tilfælde netværksforsinkelse ville være et svagt punkt, fordi spacer.png ville være på selve telefonen.

    Som en klog læser er du måske nysgerrig efter hvad spacer.png ligner. Det er simpelthen et gennemsigtigt billede på 4x3 pixel. Jeg gjorde dette, fordi billedlærredet til Dribbble er en forudsigelig 400x300 pixel. Så som spacer.png strækker sig, tvinger dette et konsistent 4x3 billedformat til at opretholdes. Jeg indlæser hvert skud som baggrundsbillede bag dette gennemsigtige lag og tvinger den bedst mulige pasform via - baggrundsstørrelse: auto 100% - bare i tilfælde af skud, der har et funky (ikke 4x3) billedformat. Dette har den ekstra fordel ved cache, da de fleste browsere ikke sender en ekstra HTTP-anmodning, hvis der allerede findes et baggrundsbillede i cachen.

    I slutningen af ​​siden har vi tags, der indeholder al den aktuelle JavaScript. For IE9 tjener jeg jQuery og for andre browsere, jeg serverer Zepto .