Dezvoltarea aplicațiilor web mobile: când, de ce și cum

Există 6,8 miliarde de oameni pe planetă, dintre care 5,1 miliarde dețin un telefon mobil. Și astăzi, un procent din ce în ce mai mare din aceste dispozitive sunt smartphone-uri. Potrivit unui studiu recent al Centrului de Cercetare Pew, numărul utilizatorilor care accesează internetul de pe smartphone-urile lor s-a dublat cu mult în ultimii 5 ani, la fel ca și numărul de utilizatori care descarcă și folosesc aplicații mobile. Dintre cei care folosesc internetul sau e-mailul pe telefoanele lor, mai mult de o treime intră online în principal prin dispozitivele lor portabile.

Într-adevăr, computerul mobil devine din ce în ce mai omniprezent... și este minunat.

Cu excepția, desigur, când nu este.

Ca utilizator de dispozitive mobile, puține lucruri sunt la fel de frustrante și dificil de navigat ca o aplicație web mobilă prost proiectată sau chiar o aplicație nativă.

Și, în calitate de dezvoltator de aplicații mobile, puține lucruri pot fi la fel de iritante ca străduința de a susține o gamă cât mai largă de clienți de telefonie mobilă, fiecare având propriul său set frustrant de idiosincrazii. Indiferent dacă alegeți să dezvoltați o aplicație web mobilă, nativă sau hibridă, încercarea de a sprijini mai multe browsere mobile, dispozitive mai exotice și de a face față cu diverse platforme poate fi într-adevăr o experiență destul de sfâșietoare.

Desigur, nu toți dezvoltatorii de astăzi trebuie să-și facă griji cu privire la sprijinirea clienților de telefonie mobilă. Dar natura din ce în ce mai omniprezentă a dispozitivelor și aplicațiilor mobile sugerează cu tărie că cei care nu au nevoie să susțină clienții de telefonie mobilă astăzi vor trebui mai mult decât probabil să facă acest lucru într-un viitor nu prea îndepărtat. Deci, dacă nu vă gândiți deja la dezvoltarea de aplicații mobile, probabil că ar trebui să o faceți.

Aplicație web mobilă vs. aplicație nativă vs. aplicație hibridă

Așa cum este adevărat în cazul majorității selecțiilor de tehnologie, nu există un răspuns unic atunci când vine vorba de tipul de aplicație mobilă de dezvoltat. Există numeroase bune practici pentru aplicații web de luat în considerare, nu toate sunt tehnice. Cine este publicul tău țintă? Este mai probabil ca aceștia să prefere un web mobil sau o aplicație nativă? Care este diferența dintre aplicațiile native și cele hibride? Ce resurse de dezvoltare aveți și cu ce tehnologii mobile sunt cel mai familiarizați? Care este modelul de licențiere și vânzări pe care îl preconizați pentru produsul dvs.?

În general (deși există întotdeauna excepții), ruta aplicației web pentru mobil este mai rapidă și mai ieftină decât ruta nativă a aplicației mobile, mai ales atunci când obiectivul este să accepte o gamă largă de dispozitive. În schimb, pot exista capacități native pentru dispozitivul mobil (cum ar fi senzorul de mișcare și așa mai departe) care sunt esențiale pentru aplicația dvs., dar care sunt accesibile numai printr-o aplicație nativă (care ar face, prin urmare, alegerea aplicației web mobilă o non- starter pentru tine).

Și dincolo de întrebarea dintre aplicațiile web vechi și aplicațiile native, o aplicație mobilă hibridă poate fi răspunsul potrivit pentru tine, în funcție de cerințele și constrângerile de resurse. Aplicațiile hibride, cum ar fi aplicațiile native, rulează pe dispozitivul în sine (spre deosebire de în interiorul unui browser), dar sunt scrise cu tehnologii web (HTML5, CSS și JavaScript) și, de obicei, sunt susținute de un cadru de aplicație hibrid. Mai precis, aplicațiile hibride rulează într-un container nativ și folosesc motorul de browser al dispozitivului (dar nu browserul) pentru a reda HTML și a procesa JavaScript la nivel local. Un strat de abstractizare de la web la nativ permite accesul la capabilitățile dispozitivului care nu sunt accesibile în aplicațiile web mobile, cum ar fi accelerometrul, camera foto și stocarea locală.

Dar indiferent de alegerea pe care o faceți – fie că este o aplicație web mobilă, o aplicație nativă sau hibridă – aveți grijă să cercetați în mod adecvat și să vă confirmați presupunerile. De exemplu, în scopul acestui tutorial de dezvoltare a aplicațiilor web mobile, este posibil să fi decis să dezvolți o aplicație mobilă nativă pentru comerțul electronic pentru a-ți vinde produsele. Dar, potrivit Hubspot, 73% dintre utilizatorii de smartphone-uri spun că folosesc web-ul mobil mai mult decât aplicațiile native pentru a-și face cumpărăturile... Deci, în acest caz, este posibil să fi pariat pe calul greșit.

Și apoi, desigur, sunt considerațiile practice de timp și buget. După cum spune una dintre provermele mele preferate, „mai repede, mai bine, mai ieftin... alegeți oricare două” . În timp ce constrângerile legate de timpul de lansare pe piață și costurile sunt de o importanță capitală în dezvoltarea aplicațiilor web, este esențial să nu faceți compromisuri prea mari asupra calității în acest proces. Este destul de dificil să recuperezi încrederea unui utilizator care a avut o primă experiență proastă.

Într-adevăr, aplicațiile web mobile, native și hibride sunt toate animale radical diferite, fiecare cu propriul său set unic de beneficii și provocări. Acest tutorial de dezvoltare web mobil se concentrează în mod special pe metodologii și instrumente de utilizat și pe capcanele de evitat în dezvoltarea de aplicații web mobile extrem de funcționale, intuitive și ușor de utilizat.

Dezvoltarea aplicației web pentru mobil necesită o planificare detaliată

Identificarea cerințelor dvs. (sau ale clienților) este una dintre cele mai esențiale bune practici în dezvoltarea de aplicații, mobile sau de altă natură. Cercetați cu atenție capabilitățile vizate pentru a determina dacă acestea sunt realizabile în aplicația dvs. web mobilă. Este destul de frustrant și foarte neproductiv să realizezi că una sau mai multe dintre funcțiile tale esențiale client nu sunt acceptate, atunci când ai investit deja timp și resurse pentru a proiecta interfața web și infrastructura de suport.

O altă problemă comună pentru începătorii dezvoltatorilor de aplicații web mobile este să presupunem că codul bazat pe web pentru un browser desktop va funcționa „ca atare” într-un browser mobil. Nu. Cu siguranță există diferențe și, dacă nu ești conștient de ele, ele te pot mușca cu siguranță. Funcționalitatea de redare automată a etichetei HTML5 <video> , de exemplu, nu funcționează pe browserele mobile. În mod similar, proprietățile de transition și opacity CSS nu sunt acceptate (sau cel puțin nu sunt acceptate în mod constant) în majoritatea browserelor mobile în prezent. De asemenea, veți avea probleme cu unele metode API web pe o platformă mobilă, cum ar fi API-ul de streaming de muzică SoundCloud, care necesită Adobe Flash, care nu este acceptat pe majoritatea dispozitivelor mobile.

Un factor deosebit de complicat în dezvoltarea aplicațiilor web pentru mobil este faptul că durata de viață a dispozitivelor mobile tinde să fie mult mai scurtă decât cea a ecranelor desktop (durata medie de viață a unui telefon mobil în SUA este de aproximativ 21 de luni). Aceste durate de viață mai scurte ale dispozitivelor, însoțite de lansări constante de noi dispozitive și tehnologii mobile, generează un peisaj în continuă schimbare de dispozitive care urmează să fie vizate. În timp ce lucrul într-un browser ameliorează oarecum această problemă, protejându-vă de o serie de probleme specifice dispozitivului, va trebui totuși să proiectați o vizualizare bazată pe browser care să accepte multe rezoluții diferite ale ecranului (precum și să ajustați în mod corespunzător orientările peisaj și portret ).

Trebuie să se gândească, de asemenea, la suportul Retina Displays de la Apple (afișaje cu cristale lichide care au o densitate a pixelilor suficient de mare încât ochiul uman să nu poată discerne pixelii individuali la o distanță tipică de vizualizare). Mai multe produse Apple – inclusiv iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini și iPad Air – oferă ecrane Retina. În special pentru o aplicație web mobilă, este important să fiți conștient de faptul că un afișaj Retina face imaginile cu rezoluție joasă (care sunt de obicei oferite dispozitivelor mobile) să pară neclare și poate apărea pixelarea. Cea mai bună soluție de dezvoltare a aplicațiilor în aceste cazuri este ca serverul să recunoască că cererea vine de la un dispozitiv Retina și apoi să ofere clientului o imagine alternativă cu rezoluție mai mare.

Dacă doriți să utilizați unele dintre lucrurile interesante HTML5, nu uitați să verificați în prealabil dacă funcționalitatea pe care o căutați este acceptată pe întregul peisaj al dispozitivelor pe care clienții dvs. îl vor folosi probabil. De exemplu, în iOS 6 și versiuni ulterioare, nu există suport pentru funcționalitatea navigator getUserMedia , deoarece camera este accesibilă numai prin aplicațiile native. Două resurse excelente pentru a verifica ce este acceptat pe anumite dispozitive și browsere sunt caniuse.com și html5test.com.

Interogările media CSS3 vă pot ajuta, de asemenea, să oferiți conținut personalizat pentru fiecare dispozitiv. Iată câteva exemple de cod pentru captarea diferitelor caracteristici ale dispozitivului, cum ar fi densitatea pixelilor, rezoluția ecranului și orientarea:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Optimizarea aplicației dvs. web mobile pentru performanță

„OMG, chestia asta este atât de lent!” În calitate de dezvoltator de aplicații web mobile, acestea sunt probabil ultimele cuvinte pe care doriți să le auziți vreodată de la unul dintre utilizatorii dvs. Prin urmare, trebuie să vă gândiți cu atenție cum să reduceți și să optimizați fiecare octet și transfer de server pentru a reduce timpul de așteptare al utilizatorului. Este nerealist să te aștepți că transferurile se vor face întotdeauna printr-o rețea WiFi și trebuie să știi că 60% dintre utilizatorii de web mobil spun că se așteaptă ca un site să se încarce pe telefonul lor mobil în 3 secunde sau mai puțin (sursă). În mod similar, Google a descoperit că, pentru fiecare cinci secunde suplimentare de timp de încărcare, traficul a scăzut cu 20% (și, de asemenea, merită remarcat faptul că motoarele de căutare iau în considerare timpul de încărcare ca parte a calculului scorului de calitate a paginii).

Ca parte a acestui tutorial de dezvoltare a aplicațiilor web mobile, iată câteva sfaturi care vă pot ajuta să optimizați performanța aplicațiilor dvs. web mobile și să minimizați latența:

• Optimizarea imaginii. Timpul de încărcare a imaginii este binecunoscut a fi una dintre cele mai mari probleme de performanță care afectează încărcarea paginii pe dispozitivele mobile. Utilizarea optimizatorilor de imagine online, cum ar fi smushit.com, poate fi utilă pentru a rezolva această problemă.
• Comprimarea codului. Comprimarea fișierelor JavaScript și CSS, în funcție de cantitatea de cod pe care o aveți, poate avea un impact semnificativ asupra performanței.
• Interogări baze de date.
  • Unele browsere pentru dispozitive mobile nu acceptă atât de multe cookie-uri ca și browserele desktop, ceea ce poate duce la necesitatea de a executa și mai multe interogări decât de obicei. Prin urmare, memorarea în cache pe server este esențială în special atunci când acceptă clienții aplicațiilor web mobile.
  • Nu uitați să utilizați filtrele adecvate pentru a preveni injectarea de interogări SQL care altfel ar putea compromite securitatea site-ului și a serverului dvs.
• Rețele de livrare de conținut (CDN). Dacă intenționați să furnizați o mulțime de videoclipuri, imagini, fișiere audio sau alte tipuri de media, folosirea unui CDN este foarte recomandată. Unele dintre cele mai comune CDN-uri comerciale includ Amazon S3, Microsoft Windows Azure și MaxCDN. Avantajele utilizării unui CDN sunt numeroase și includ:
  • Performanță de descărcare îmbunătățită. Utilizarea resurselor unui CDN vă permite să distribuiți încărcarea, să economisiți lățime de bandă și să creșteți performanța. Cele mai bune CDN-uri oferă o disponibilitate mai mare, o latență mai mică a rețelei și pierderi mai mici de pachete. În plus, multe CDN-uri oferă o selecție distribuită global de centre de date, permițând descărcărilor să aibă loc de pe un server mai aproape de locația utilizatorului (rezultând mai puține hopuri în rețea și descărcări mai rapide).
  • Mai multe descărcări simultane. Browserele limitează de obicei numărul de conexiuni simultane la un singur domeniu, după care descărcările suplimentare sunt blocate până la finalizarea uneia dintre descărcările anterioare. Puteți vedea adesea această limită în acțiune atunci când descărcați multe fișiere mari de pe același site. Fiecare CDN suplimentar (pe un domeniu diferit) permite descărcări concurente suplimentare.
  • Analiză îmbunătățită. Multe CDN-uri comerciale oferă rapoarte de utilizare care pot suplimenta propria analiză a site-ului web și care pot oferi o mai bună cuantificare a vizionărilor și a descărcărilor video. GTmetrix, de exemplu, are un instrument excelent de raportare a site-ului web pentru monitorizarea și optimizarea surselor încărcate pe site-ul dvs.

Instrumente de dezvoltare a aplicațiilor web mobile

„Uneltele potrivite pentru locul de muncă potrivit” este o zicală veche care se aplică la fel de mult pentru dezvoltarea de software ca și pentru orice alt domeniu. Acest tutorial oferă și o introducere la unele dintre instrumentele cele mai populare și utilizate pe scară largă pentru dezvoltarea de aplicații web mobile, dar rețineți că pot exista foarte bine și alte instrumente care sunt „potrivite” pentru dezvoltarea aplicației dvs. web mobile, în funcție de cerințele dvs. și resursele disponibile.

Alegerea cadrului potrivit pentru aplicația web mobilă JavaScript

Deoarece dezvoltarea de aplicații web pentru mobil tinde să creeze multe dintre aceleași provocări comune – cum ar fi compatibilitatea între browsere și HTML și CSS inconsecvenți în browserele mobile – au fost dezvoltate cadre (pe baza HTML5 și CSS3) care sunt special concepute pentru a rezolva aceste probleme și pentru a funcționa cât mai impecabil pe o gamă largă de telefoane inteligente și tablete. Cele mai multe dintre aceste cadre de aplicații web mobile sunt ușoare, ceea ce ajută la facilitarea navigării rapide pe web mobil, fără a compromite aspectul și senzația site-ului dvs.

Lărgindu-ne vederea dincolo de peisajul mobil, dacă există un singur cadru JavaScript popular care merită menționat, acesta este jQuery. Dacă sunteți familiarizat cu versiunea pentru desktop, vă recomand să încercați jQuery Mobile pentru aplicația dvs. web mobilă. Are o bibliotecă de widget-uri care convertește marcajul semantic într-un format prietenos cu gesturile, facilitând operațiunile pe ecranele tactile. Cea mai recentă versiune constă dintr-o bază de cod cu adevărat ușoară, care include o mulțime de elemente grafice care vă pot îmbunătăți cu adevărat interfața de utilizare.

O altă alternativă, Sencha Touch, câștigă rapid și cotă de piață. Oferă performanțe excelente în ansamblu și ajută la producerea unei interfețe de utilizator web mobil care arată și se simte în mare parte ca una nativă. Biblioteca sa de widget-uri cu funcții complete se bazează pe biblioteca JavaScript ExtJS Sencha.

Iată câteva diferențe cheie de luat în considerare atunci când comparăm jQuery Mobile și Sencha Touch:

• Priviți și simțiți. În general, aspectul și senzația unei aplicații Sencha Touch sunt mai clare și mai bune decât cele ale unei aplicații mobile jQuery, dar este important să ne amintim că astfel de reacții tind să fie foarte subiective.
• Extensibilitate. jQuery Mobile oferă o mulțime de extensii terță parte și este în mod inerent conceput pentru a fi foarte extensibil, în timp ce Sencha Touch este în prezent mult mai mult un cadru „închis”.
• Suport pentru dispozitiv. jQuery Mobile vizează în prezent o secțiune transversală mai mare de dispozitive decât Sencha Touch.
• HTML „vs.” JavaScript. jQuery este în mare parte centrat pe HTML (adică, extinde și manipulează HTML existent în JavaScript), în timp ce codarea Sencha Touch este în întregime bazată pe JavaScript. (Acesta este un exemplu, de altfel, că setul de abilități al echipei de dezvoltare este important de luat în considerare atunci când alegeți tehnologia.)
• Dependențe externe. jQuery mobil necesită jQuery și jQuery UI pentru manipularea DOM, în timp ce Sencha Touch nu are dependențe externe.
• Curbă de învățare. Majoritatea dezvoltatorilor consideră că timpul de accelerare cu jQuery este mai mic decât cel al Sencha Touch, poate alimentat de procentul mare de dezvoltatori web care sunt deja familiarizați cu bibliotecile standard jQuery.

Framework responsive și aplicații web mobile

Un număr tot mai mare de cadre responsive au început să apară în ultimii ani, două dintre cele mai populare în prezent fiind Bootstrap și Foundation. Pe scurt, cadrele responsive simplifică și eficientizează proiectarea și implementarea UI responsive bazate pe web, încapsulând cele mai comune machete și paradigme UI într-un cadru reutilizabil, optimizat pentru performanță. În cea mai mare parte, bazate pe CSS și JavaScript, multe dintre aceste cadre sunt open-source, de descărcat gratuit și ușor de personalizat. Cu excepția cazului în care aveți un set foarte specific de cerințe, este probabil ca utilizarea unuia dintre aceste cadre va reduce nivelul de efort pentru a proiecta și implementa aplicația dvs. web mobilă.

Examinând cele două opțiuni principale, Bootstrap și Foundation, câteva dintre diferențele cheie de luat în considerare includ:

• Platforme vizate. Deși Bootstrap acceptă dispozitive mobile, tablete și desktop, este orientat în primul rând spre utilizarea desktopului. Fundația, pe de altă parte, este concepută pentru toate dimensiunile și tipurile de ecrane.
• Compatibilitate browser. Bootstrap este compatibil cu IE7 sau o versiune superioară, în timp ce Foundation este compatibil doar cu IE9 sau o versiune superioară.
• Diversitate de layout-uri și componente. Bootstrap are o colecție semnificativ mai mare de elemente UI decât este oferită de Foundation.
• Redimensionare automată. Cu Foundation, grila se micșorează și se întinde în funcție de înălțimea și lățimea curentă a browserului, în timp ce Bootstrap acceptă doar un set predefinit de dimensiuni de grilă bazat pe un set standard de dimensiuni de ecran.

Depanarea și testarea aplicațiilor web mobile

Depanarea aplicațiilor web mobile poate fi dificilă și oarecum frustrantă, mai ales dacă trebuie să căutați diferite dispozitive pe care să le testați sau să instalați SDK-uri pentru o emulare (de obicei imperfectă) a platformelor client vizate.

În acest context, un avantaj clar al dezvoltării web mobil (în comparație cu dezvoltarea de aplicații native) este că puteți utiliza instrumente standard de dezvoltare bazate pe browser pentru a vă depana aplicația. Pe baza preferinței mele personale pentru depanarea de la distanță, cel pe care îl recomand în acest tutorial de dezvoltare a aplicației este Chrome cu DevTools. Alte opțiuni standard includ Firefox cu instrumentele Firebug sau Opera's Dragonfly.

Unele dintre motivele pentru care prefer Chrome cu DevTools includ:

• Emulator mobil în DevTools din Chrome. Acesta este, probabil, singurul motiv suficient pentru a selecta Chrome pentru depanarea aplicațiilor web mobile. Caracteristicile cheie includ emularea evenimentelor tactile, falsificarea agentului de utilizator, limitarea lățimii de bandă a rețelei, suprasolicitarea locației geografice, înlocuirea orientării dispozitivului și emularea tipului media CSS.
• Editor interactiv. Posibilitatea de a edita JavaScript sau CSS din mers.
• Depanator JavaScript superior. Permite puncte de întrerupere DOM și oferă posibilitatea de a profila timpul de execuție a codului JavaScript.
• Vizualizatoare JSON și XML încorporate. Evită necesitatea oricăror pluginuri pentru a inspecta răspunsurile serverului.
• Suport pentru protocolul Android Debug Bridge (ADB) direct prin USB. Facilitează instanțierea ușoară a unei sesiuni de depanare la distanță. (Iată un tutorial bun de la Google despre cum să începeți depanarea de la distanță în Chrome.)
• Inspecția dinamică a resurselor. Vă permite să inspectați sursele de date locale ale aplicației dvs., inclusiv bazele de date IndexedDB sau Web SQL, stocarea locală și de sesiune, cookie-urile și resursele Application Cache. De asemenea, puteți inspecta rapid resursele vizuale ale aplicației dvs., inclusiv imagini, fonturi și foi de stil.

Pentru a testa aspectul și compatibilitatea cu navigarea încrucișată a aplicației dvs. web, puteți utiliza și câteva instrumente online utile, cum ar fi BrowserStack. Introduceți adresa URL a aplicației dvs., selectați browserul, versiunea și sistemul de operare și veți obține vizualizarea emulată (și viteza de încărcare) a site-ului dvs. în acel mediu. Un alt instrument util în acest scop este CrossBrowserTesting.

Învelire

Odată cu extinderea rapidă continuă a numărului, varietății și sofisticarii dispozitivelor mobile de pe piață și utilizate în prezent, nevoia de aplicații mobile eficiente, ușor de utilizat și de înaltă performanță este probabil să crească substanțial. Prin urmare, posibilitatea de a dezvolta aceste aplicații în mod inteligent și eficient va continua să fie de o importanță capitală.

Mulți factori trebuie luați în considerare atunci când alegeți între opțiunile de aplicații mobile web, native și hibride pentru dispozitivele mobile. Fiecare are propriile avantaje, dar aplicațiile web mobile vor reprezenta adesea cea mai eficientă opțiune de dezvoltare (și, prin urmare, time-to-market). Dacă alegeți să mergeți pe această cale, sper că acest tutorial de dezvoltare a aplicațiilor web mobile vă va ajuta să vă duceți mai direct și cu succes la destinație.