Programovanie

13 základných programovacích nástrojov pre mobilný web

Pokiaľ ide o programovanie pre mobilné zariadenia, z výberu sa rýchlo stane dilema. Zameriavate sa na lukratívny trh iPhone na úkor rastúceho prílivu Androidu? Chodíte natívne alebo píšete kód na mobilný web? A aj keď jediným snom kódu, ktorý optimálne funguje na čoraz väčšom množstve platforiem, tvarových faktorov a zariadení, by bol sen, realitou je fragmentovaný pokus, v ktorom môžu byť základné úlohy často výzvou.

Ale s výzvami a príležitosťami prichádzajú zvedavé mysle. A plodina vývojárov, ktorí zameriavajú svoju pozornosť na budovanie mobilných nástrojov a knižníc, rýchlo vytvára živý ekosystém, ktorý pomáha mobilným vývojárom - najmä tým, ktorí sa rozhodli zacieliť na mobilný web.

[Tiež na .com: Objavte 4 spôsoby, ako vytvárať webové aplikácie pre smartphony bez toho, aby ste prechádzali cez Apple App Store. | Pokračujte v získavaní informácií o vývoji kľúčových aplikácií pomocou blogu Fatal Exception a bulletinu Developer World. | Vďaka blogu Mobile Edge a bulletinu Mobilize budete neustále informovaní o novinkách a poznatkoch z oblasti mobilných technológií. ]

Na istý čas bola táto súprava obmedzená. Ale prísľub HTML5 otvoril mnohým vývojárom oči pre nespočetné výhody mobilného webu v porovnaní s pokusom o inštaláciu natívneho softvéru do zariadenia.

Najprv sú otvorené webové stránky. Pri uvedení alebo aktualizácii produktu sa nemusíte „hrať s matkou“ so schvaľovacím tímom App Store.

Po druhé, vývojári môžu získať 100 percent zo svojich výnosov z mobilných aplikácií. Samozrejme, musíte si nájsť spôsob, ako si peniaze zhromaždiť sami, čo nie je vždy jednoduché. Ale 30-percentné zníženie, ktoré si Apple berie z nákupu aplikácií, je vysoká tarifa za to, čo je z veľkej časti riadok v databáze a veľká byrokracia.

Po tretie, formát HTML5 je čoraz robustnejší a bohatší na funkcie. Najnovšia verzia umožňuje ukladať údaje o klientovi a vykonávať väčšinu vecí, ktoré dokáže natívna aplikácia. Inými slovami, karanténa prehľadávača má takmer všetky rovnaké funkcie ako karanténa natívneho kódu. A áno, aplikácie s natívnym kódom sú uchovávané v ich vlastnom zapečatenom rohu operačného systému.

Po štvrté, aplikácie HTML5 nie sú viazané na zariadenie. Zatiaľ čo veľká časť humbuku naďalej obieha okolo iPhonu Apple, aplikácie HTML5 sa dajú pomerne ľahko presunúť na iné platformy. Nie je to také jednoduché ako stlačenie tlačidla, ale je to oveľa jednoduchšie ako preklad aplikácie z Objective C do Javy.

Existujú samozrejme obmedzenia. Webové aplikácie môžu byť obeťou problémov s pripojením. Sú často o niečo pomalšie a mnoho vývojárov natívnych aplikácií rád upozorňuje na milisekundové oneskorenia, ktoré môžu alebo nemusia byť viditeľné. Herní vývojári si budú musieť dvakrát premyslieť, či sa spoliehajú na úhľadný a mimoriadne citlivý kód v JavaScripte.

Najväčšie obmedzenie môže byť v samotnom vývoji. Aj keď sú nástroje spoločnosti Apple celkom dobré na nahliadnutie do natívnych aplikácií, je ťažšie prehĺbiť sa do štruktúry kódu spusteného vo vašom mobilnom prehliadači. Celý tento záujem o mobilný vývoj a mobilný web priniesol množstvo knižníc a nástrojov na uľahčenie procesu vytvárania aplikácií s nimi. Tu je zoznam pútavých projektov, ktoré môžu uľahčiť vytváranie mobilného webu.

Programovací nástroj pre mobilný web: ChocolateChip-UI

Stiahnite si ChocolateChip-UI

Realitná kancelária mobilných zariadení s malou obrazovkou kladie dôraz na efektívny dizajn rozhrania. Zadajte Roberta Biggsa, webového vývojára v severnej Kalifornii, ktorý vytvoril ChocolateChip-UI, rámec pre vybičovanie hodnotného mobilného rozhrania v HTML.

Technicky je základným kódom vytvoreným vývojárom WAML (Web Application Markup Language), značkovací jazyk postavený na HTML5. Väčšina ľahkej práce sa vykonáva pomocou značiek WAML alebo . JavaScript rámca funguje cez WAML a mení ho na čistý HMTL5 pre smartphone.

Táto kombinácia je ľahká ako pierko. Môžete vložiť svoje vlastné HTML, CSS a JavaScript do WAML a navigácia v procese prekladu ChocolateChip-UI je v pohode.

Aj keď tento prístup nie je dokonalý, rozumiem, prečo si Biggs vybral túto cestu. Už predtým som sa stratil v uzavretí JavaScriptu mnohých nástrojov na vývoj mobilných zariadení a nie je to pekné.

Zbierka widgetov WAML spoločnosti ChocolateChip-UI je pomerne komplexná a všetky vyzerajú ako štandardné používateľské rozhrania pre iPhone. Zahŕňa dokonca doplnky, ako sú zoznamy odstránení, ktoré umožňujú používateľom eliminovať prvky zo zoznamu niekoľkými pohybmi prsta.

Programovací nástroj pre mobilný web: Mobl

Stiahnite si Mobl

JavaScript má veľa drsných okrajov, ktoré naďalej mrzú vývojárov webu. Tím Mobl sa rozhodol tieto hrany vyhladiť a zároveň vybudovať rámec pre vytváranie mobilných aplikácií, ktoré bežia v prehliadačoch WebKit. Namiesto písania pokynov v HTML, JavaScript a CSS ich napíšete v Moble a kompilátor Mobl ich premení na HTML, JavaScript a CSS pre mobilný prehliadač.

Tento prístup umožnil tímu Mobl opraviť niektoré zložitejšie problémy JavaScriptu, napríklad spôsob odovzdávania funkcií iným funkciám na oneskorené vykonávanie. Sledovanie všetkých vnorených zátvoriek potrebných na to v JavaScripte môže rýchlo znecitlivieť a zvýšiť pravdepodobnosť chyby.

Mobl sa tejto zložitosti zbavuje použitím deklaratívnejšej syntaxe. Ak chcete pozastaviť 1 000 milisekúnd, napíšete:

spánok (1 000); doNext ();

Mobl to zostavuje do JavaScriptu s a setTimeout funkcia a a zavolaj späť funkcia, ktorá sa vykoná doNext (). Ako vývojár nemusíte myslieť na zavolaj späť syntax alebo ako zabaliť všetko do ešte inej funkcie. Všetko, čo musíte urobiť, je napísať zoznam vecí, ktoré chcete, aby sa stali.

Existuje niekoľko spôsobov, ako vám tím Mobl pomáha s napísaním týchto pokynov bez toho, aby ste museli venovať pozornosť všetkým interpunkčným znakom v JavaScripte. Konečným výsledkom je pekná zbierka štandardných idiómov mobilných aplikácií. Chcete posúvací zoznam? Stačí zabaliť zoznam položiek kľúčovým slovom skupina.

Vývojárom, ktorým sa tento prístup nebude páčiť, budú vyhovovať už objekty Objective-C alebo JavaScript. Napokon, prečo sa učiť ďalší jazyk s mierne odlišnou syntaxou, keď sa táto mierne odlišná syntax zmení iba na niečo, čomu už rozumejú? Milovníci jazyka potom opäť môžu nájsť množstvo dobrých nových nápadov, vďaka ktorým sa to oplatí.

Programovací nástroj pre mobilný web: jQuery Mobile

Stiahnite si jQuery Mobile

Keď sa ľudia stojaci za rámcom jQuery rozhodli vyriešiť mobilné platformy a vytvoriť jednoduchý súbor nástrojov používateľského rozhrania pre smartphony, bolo jasné, že by to pritiahlo rozsiahlu pozornosť a experimentovanie. Výsledkom je projekt, ktorý je dobre podporovaný mnohými významnými výrobcami hardvéru a ktorý musí byť relatívne úspešný na mobilných zariadeniach.

Najjednoduchšou časťou aplikácie jQuery Mobile je jej rozloženie zamerané na HTML. Stránky sú zabudované v súboroch DIV a iných štandardných súčastiach HTML, ako sú

  • značky. Vďaka tomu je jQuery Mobile ľahko integrovateľný s dynamickými webmi a CMS, pretože jeho použitie je často iba otázkou pridania novej témy alebo vzhľadu. Existuje napríklad niekoľko tém a modulov Drupalu postavených na aplikácii jQuery Mobile.

    Úzka integrácia s jQuery znamená, že veľa, ale nie všetky doplnky pre počítač, budú fungovať aj s mobilnými webmi. Existuje tiež niekoľko mobilných doplnkov, ktoré rozširujú mobilný rámec. Ľahký dotyk rámca a úrodného ekosystému postaveného na aplikácii jQuery Mobile znamená, že jeho sila sa pravdepodobne iba zvýši.

    Programovací nástroj pre mobilný web: The-M-Project

    Stiahnite si The-M-Project

    Ak kolekcia metód a štýlov v jQuery Mobile nie je dosť prepracovaná, The-M-Project ponúka kolekciu widgetov, ktoré sú kompilované do objektov jQuery Mobile. Zaobchádza s mnohými drsnými dizajnovými detailmi, ako je umiestnenie ikony na správne miesto, takže sa môžete sústrediť na väčší obrázok.

    Kód je štruktúrovaný vzorom Model-View-Controller. Veľká časť práce spočíva v budovaní veľkej štruktúry JSON, ktorá definuje rôzne stránky a widgety, ktoré sa na týchto stránkach nachádzajú. O usporiadanie sa stará projekt The-M-Project.

    Chovanie aplikácie je definované vytvorením funkcií pripojených k rôznym pripájačom udalostí pre každú stránku. The-M-Project sa stará o zabezpečenie toho, aby sa udalosti dostali na svoje miesto.

    Nestojí za to, že proces zostavovania a nasadenia je integrovaný do súboru Node.js. Kód na zostavenie vášho skvelého stvorenia tiež beží v Node.js; testovanie sa vykonáva na rovnakom serveri. Keď to funguje, môžete zmes kódu a knižnice preniesť na akýkoľvek webový server alebo ju môžete ďalej integrovať do súboru Node.js.

    Programovací nástroj pre mobilný web: Touchqode

    Stiahnite si Touchqode

    Sedíte v kaviarni v Paríži, na vrchole Mount Everestu alebo kdekoľvek inde bez notebooku alebo stolného počítača. Zarazí vás nápad. Načrtnete to na zdrap papiera a vrátite sa k tomu neskôr? Nie, ak máte na telefóne s Androidom spustený Touchqode. (Verzia pre iPhone bude čoskoro k dispozícii.)

    Toto malé vývojové prostredie obsahuje na malej obrazovke prekvapivo veľké množstvo funkcií. Kód je zvýraznený, skripty sa dajú spustiť lokálne a nový kód môžete synchronizovať pomocou protokolu FTP. Ak šéf volá, keď ste na cestách, mali by ste mať malý problém s opravou niečoho, čo potrebuje iba niekoľko stlačení klávesov. Neviem si predstaviť, že by som s telefónom s Androidom písal dlhé programy, ale vzhľadom na to, že autori vytvorili na svoje mobilné telefóny celé romány, môže byť príliš skoro predpokladať, že používatelia na vytvorenie niekoľkých riadkov príležitostného kódu použijú iba Touchqode.

    Či tak alebo onak, Touchqode je dobrý na dotyk.

    Programovací nástroj pre mobilný web: LimeJS

    Stiahnite si LimeJS

    Jedným z dôvodov, prečo sú hry Flash také presvedčivé, je úrodný ekosystém autorov knižníc, ktorí môžu svoju prácu predať vývojárom programu Flash. Spoločnosť DigitalFruit vytvorila program LimeJS s cieľom ponúknuť podobnú podporu vývojárom, ktorí chcú používať objekty WebGL, ktoré sú súčasťou HTML5.

    Skoré výsledky LimeJS sú účinné v prehliadačoch WebKit. Kód je technicky JavaScript, ale jeho štruktúra vyzerá podobne ako dobrý staromódny C s hovormi do knižnice OpenGL. Malo by byť možné automaticky skompilovať časť OpenGL do tejto knižnice, aj keď to bude pravdepodobne vyžadovať určité ručné ladenie.

    Ponuky LimeJS sú niektoré užitočné funkcie, ktoré uľahčujú vývoj hier. K dispozícii sú scény plné vrstiev a režisér, ktorý bude strieľať udalosti podľa flexibilného harmonogramu. Existujú animácie a prechody, ktoré posúvajú skřítkov po stránkach. Všetky funkcie poznajú ľudia, ktorí už skôr písali príležitostné hry.

    Vývojové prostredie obsahuje niekoľko moderných prvkov. Základná budova je spracovaná v Pythone a konečný balík je možné zoskupiť spolu s kompilátorom Google Closure Compiler, aby sa mohol sťahovať rýchlejšie.

    LimeJS bude atraktívny pre každého, kto strávil čas vývojom hier pre rámce OpenGL v iných prostrediach. Aj keď je konečnou syntaxou JavaScript, nespolieha sa na zložitejšie nápady, vďaka ktorým je JavaScript pre niektorých kompromisný, prinajmenšom dovtedy, kým kompilátor Closure Compiler nevykoná svoju prácu.

    Programovací nástroj pre mobilný web: Jdrop

    Viac o Jdropovi

    Na prvý pohľad sa zdá, že Jdrop je veľká hromada JSONu, ktorý by sa mohol mýliť s otvorenou databázou NoSQL. V praxi je tento webový zdroj vyladený tak, aby pomáhal vývojárom mobilných zariadení zhromažďovať údaje o výkone medzi malými obrazovkami a počítačom, kde je možné ich lepšie analyzovať.

    Na uľahčenie získavania spätnej väzby o výkone z mobilných zariadení ponúka Jdrop záložku Mobile Perf, ktorá agreguje množinu záložiek výkonu vrátane Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess a Zoompf. Prostredníctvom Mobile Perf môžete ladiť svoju aplikáciu v telefóne a výsledné údaje automaticky ukladať do cloudu Jdrop na neskoršiu analýzu z počítača, čo predstavuje zaujímavý spôsob ladenia skutočného mobilného výkonu a skúmania zdroja HTML vašich obľúbených mobilných webov.

    Programovací nástroj pre mobilný web: XUI, Zepto

    Stiahnite si XUI

    Stiahnite si Zepto

    Väčšina tu popísaných rámcov existuje na to, aby vykonala ťažké testovanie pomocou premeny popisu aplikácie, často napísanej v ich vlastnom jazyku, na niečo, čo na stránke vyzerá celkom dobre. XUI a Zepto sú veľmi odlišné. Začínajú myšlienkou, že HTML a CSS sú už celkom dobré v zobrazovaní väčšiny vecí, ktoré by mohli chcieť zobraziť, a ponúkajú iba pomoc pri vytváraní a úprave DOM.

    Tieto knižnice nebudú rozložiť vaše widgety ani vytvárať widgety akéhokoľvek druhu. Získate to, čo ponúka HTML, a potom budete ovládať jeho vzhľad pomocou CSS. Knižnica je tu na to, aby vám pomohla manipulovať s DOM ponúkaním funkcií, ako je schopnosť vyhľadávať prvky, pripájať triedy a žonglovať s udalosťami.

    Výplata je vo veľkosti. Aktuálna verzia Zepta váži okolo 2 300 bajtov, čo je zhruba desatina veľkosti jQuery. XUI je o niečo väčšie. Porovnanie s jQuery je trefné, pretože obidve si požičiavajú veľkú časť syntaxe bez toho, aby ponúkli niektorú z funkcií, ktoré si vyžadujú zložitejší a ťažší kód. Napríklad XUI vytiahne kód, ktorý je kompatibilný s BlackBerry alebo IE Mobile. Ak ich chcete, môžete si zaobstarať tučnejšiu knižnicu.

    $config[zx-auto] not found$config[zx-overlay] not found