Native vs. web Mobil vs. Hybrid

Acest articol a fost publicat in categoria Tehnologii in .

La fiecare pas de jur in prejurul noastru sunt persoane ce folosesc dispozitive mobile. Fara nici o indoiala, telefoanele inteligente sunt dispozitivele ce au avut un impact deosebit asupra vietilor noastre inca de la aparitia acestora si probabil ca o vor avea inca o buna perioada de timp de aici inainte. Toti cei ce folosesc acest tip de dispozitive se bucura de beneficiile aduse de acestea cum sunt mobilitatea, capacitatea de a citi mailuri, folosirea retelelor sociale, vizionarea de filme, toate acestea realizate in miscare. Daca vrei sa dezvolti o aplicatie pentru piata de aplicatii mobile, decizia care urmeaza firesc a fi luata este cu privire la tipul acesteia: nativa, HTML5 sau una hibrida. Aplicatiile mobile nu mai sunt o optiune ci pur si simpu au devenit o necesitate. Ai nevoie de o aplicatie mobila, dar nu stii de unde sa incepi?

Care este calea cea mai buna?

native-html-hybride-apps
Source image: https://spaceotechnologies.wordpress.com

nativ

Toti suntem familiarizati cu aplicatiile native, acele aplicatii ce sunt descarcabile avand iconite colorate ce se gasesc pe ecranul dispozitivului nostru inteligent. Constructia de aplicatii native inseamna folosirea limbajelor native ale platformei, Objective-C pe iOS (XCode tool), Java pe Android (Eclipse sau Android Studio ca instrumente), C# pentru Windows Phone (Visual Studio). Principalul avantaj al aplicatiilor native este dat de performanta acestora. Acestea sunt compilabile in cod masina (Dalvik byte cod sub Android), oferindu-ne cea mai buna performanta ce poate fi obtinuta de pe telefonul mobil.
Cea mai buna performanta include animatii rapide si fluide precum si acces complet la resursele telefonului, suport multi touch precum si cele mai recente API-uri. Dezvoltarea de aplicatii native este departe de a fi usoara. In ciuda existentei de resurse informationale din belsug poate sa nu fie inteles corect de catre toate lumea. Codul trebuie scris special pentru fiecare platforma, acelasi cod trebuie rescris in mare si doar foarte putin din el fiind posibil a fi distribuit catre celelalte platforme. Logica poate fi aceeasi, dar limbajul, API-urile si procesul de dezvoltare este diferit. Acest proces poate fi relativ lung in cazul aplicatiilor complexe.

Inainte de a te decide cu privire la dezvolatarea unei aplicatii native, trebuie sa-ti raspunzi la urmatoarele intrebari:

  1. Aplicatia ta foloseste exclusiv functionalitati native? Din moment ce aplicatiile native ruleaza pe sistemul de operare al dispozitivului – spre deosebire de browserul web – ele sunt capabile sa faca folosire completa de functionalitatile si harware-ul dispozitivului. Astfel aplictiile native pot accesa functiile dispozitivului precum GPS, Bluetooth, accesari ofline, mesaje SMS, notificari, descarcari de date in fundal, agenda.
  2. Aplicatia ta va impinge limitele hardware ale dispozitivului la maxim? Performanta ridicata este beneficiul nr1 al unei aplicatii native. Jocuri precum Angry Birds sau Infinity Blade sunt construite ca si aplicatii native tocmai pentru a beneficia la maximum de avatajele harware-ului si functiilor sistemului de operare. Ruland intr-un broweser mobil, jocurile si aplicatiile procesor intensive nu pot obtine niveluri extrem de scazute de latenta, elemente ce sunt necesare acestor aplicatii extrem de interactive.
  3. Publicul dvs ar descarca aplicatia? Procesul prin care un user obtine o aplicatie nativa este foarte bine definit. Aplicatiile native sunt trimise catre magazinul de aplicatii, ca si Google Play sau magazinul de aplicatii de la Apple. Astfel se parcurge un proces de aprobare inainte sa devina disponibile pentru download. De asemena acest proces de distributie este unitar – pentru ca utilizatorii sa stie de unde sa le descarce. Unele aplicatii de business pot fi distribuite printr-un magazin privat de aplicatii sau prin anumite optiuni de app store oferite de Apple sau Google.
  4. Planificati monetizarea aplicatiei? Magazinele de aplicatii ofera un standard cu privire la posibilitatea de monetizare a aplicatiei, oferind posibilitatea organizatiei tale sa taxeze bani pentru fiecare descare in parte, aceasta fiind cea mai simpla metoda de monetizare existenta. In orice caz, magazinele de aplicatii percep un anumit procent din tranzactie (Ex: 30% din Apple App Store) dar si orice cumparare online din cadrul respectivului magazin.

Cand sa nu dezvoltam aplicatii native:

    1. Daca nu ai talentul si timpul necesar dezvoltarii.
    2. Daca nu ai useri consistenti si devotati.
    3. Daca nu ai infrastructura back-end necesara

html

O aplicatie mobila web este o aplicatie care se comporta ca si o aplicatie nativa, dar ruleaza in browser. Ca orice aplicatie web, o aplicatie mobila web trebuie sa permita descarcarea in timpul rularii. Daca rezultatul dorit arata faptul ca aplicatia trebuie sa aiba un aspect nativ, aceasta poate sa fie ambalata ca si o aplicatie de sine statatoare ce ruleaza in propriul sau web view.

Cateva elemente cheie ce trebuiesc luate in considerare:

      1. Timpul si resursele sunt limitate iar suportul multi-plaform se afla in capul listei dvs? HTML5 permite o baza de cod unica pe care programatorii o pot folosi la lansarea pe mai multe platforme rapid; codul poate fi scris odata iar aceeasi versiune poate fi rulata pe mai multe sisteme de operare.
      2. Comunitatile colaborative sunt importante pentru echipa ta de dezvoltare? HTML5 este cunoscuta pentru comunitatea deschisa si mare de dezvoltatori. Cu siguranta sunt mai multi dezvoltatori talentati si priceputi in dezvoltare web decat in dezvoltarile pentru iOS, Android, etc.
      3. Planifici realizarea de actualizari frecvente la aplicatia ta? HTML5 permite dezvoltatorilor sa elimine procesul de aprobare al magazinelor de aplicatii. Schimbarile sunt pur si simplu impinse catre serverele production si astfel utilizatorii vad actualizarile imediat.
      4. Servesti o audienta ce prefera sa nu descare aplicatiile? Este de ajutor intelegerea cerintelor pe care aplicatia le satisface dar si daca audienta targeta de dvs prefera sau nu sa descare aplicatia, in acest caz HTML5 este solutia necesara.
      5. Detii deja o aplicatie web si doresti sa faci tranzitia catre mobile web? Daca firma dvs are deja o aplicatie web si aveti de gand efectuarea trecerii catre mobil, puteti utiliza codul existent in construirea versiunii web pentru mobil mai repede.
      6. Aplicatia dvs va fi puternic axata pe continut? HTML5 poate fi ideal in cazul aplicatiilor care necesita functionalitati minimale ce se concentreaza in special pe continut.

Cand sa nu folositi HTML5

      1. Daca performanta avansata este o prioritate de top.
      2. Daca aplicatia trebuie sa acceseze functii sau servicii native ale dispozitivului.
      3. Daca doresti monetizarea aplicatiei

dsadsa

Aplicatie framework :

-Backbone va ofera o structura minimalista si lineara la aplicatiile web prin oferirea de modele, colectii si conecteaza totul la REST API-ul existent.
– Ember.js are o abordare diferita, oferind o abordare foarte structurata a dezvoltarilor web ce imprumuta mult din filozofia ce se afla in spatele proiectelor ca: Ruby on Rails.
– Angular ofera o abordare unica la structura aplicatiilor
– Flight de la Twitter este o componenta usoara a JavaScript framework pentru atribuire comportament la DOM nodes.
– React de la Facebook este o librarie de JavaScript pentru crearea de UI-uri.
DOM Frameworks:

Framework-uri DOM:
– jQuery Mobile este un sistem de interfata unificat, bazat pe HTML5 pentru toate platformele populare de dispozitive mobile.
– Enyo este un JavaScript app framework – ce permite programatorilor sa construiasca aplicatii HTML5 native de calitate ce ruleaza pe orice dispozitiv.
– Sencha Touch este un mobile app framework bazat pe HTML5 si Java Script.
– Bootstrap and Foundation ajuta la dezvoltari web responsive ce sunt special create pentru mobil oferind rapiditate in dezvoltare.
– Uranium este o interactiune widget library rapida si usoara pentru pagini web desktop si mobile.
– Polymer este un nou tip de librarie web, construita deasupra Componentelor Web, pentru a conduce la impulsionarea platformelor web pe browserele moderne.
– Modernizr este o librarie JavaScript ce face usoara detectarea de capabilitati a usereului de browser.
– HTML5 Boilerplate este o colectie de bune practici si experiente de la sute de dezvoltatori, ce ofera un solid template de start pentru aplicatii moderne.
– Grunt este un instrument de constructie pentru proiecte JavaScript
– Node-build-script include taskuri pentru producerea de proiecte HTML5 personalizabile bazate pe HTML5 Boilerplate.
– HTML5 Project Builder este disponibil pe Github, permitandu-va sa creati un backend pentru orice side client website.
hybrid
Este normal ca dupa aparitia aplicatiilor native si a celor web, fiecare cu setul propriu de avantaje si dezavantaje, sa apara o a treia clasificare – aplicatiile hybrid. Definim aplicatia hybrid, ca fiind aceea aplicatie construita folosind HTML5 si JavaScript, ce este infasurata in interiorul unui recipient nativ care ofera acces la functionalitatile native ale platformei.

Beneficii:
– Programatorul poate utiliza competentele web existente
– Cod unic pentru platforme multiple
– Timp si cost redus pentru dezvoltare
– Design simplu pentru factori de forma variati (incluzand tablete) folosind web design responsiv
– Acces la dispozitive si functionalitati ale sistemului de operare
– Capabilitati ofline avansate
– Vizibilitate crescuta pentru ca aplicatia sa poata fi distribuita nativ (prin intermediul magazinelor de aplicatii) si catre browserele mobile (prin intermediul motoarelor de cautare)

Source image: http://www.bullcitymobile.com/

Dezavantaje
– Probleme de performanta pentru anumite tipuri de aplicatii ( unele bazate pe functionalitati native complexe sau tranzitii grele, cum sunt jocurile 3D)
– Timp si efort crescut necesar pentru a mima interfata nativa
– Nu toate dispozitivele si functionalitatile sistemelor de operare sunt suportate
– Risc de a respinse de Apple daca aplicatia nu este perceputa ca indeajuns de nativa (de exemplu, un banal website)

cross-platform-mobile-development-tools

Instrumente aplicatii hybride
– PhoneGap (Apache Cordova) este un framework gratis open source ce permite crearea de aplicatii mobile folosind API-uri web standardizate.
– Trigger.io este o platforma de dezvoltare mobila ce leaga un framework hybrid cu un API JavaScript functionalitatea dispozitivului si componentele UI cu un mediu de constructie cloud based.
– IBM Worklight este o platforma de dezvoltare aplicatii ce extinde PhoneGap (Apache Cordova) cu instrumente de dezvoltare aditionale si server suport pentru integrari backend, autentificare, notificari si ciclu de management pe viata. Stackoverflow contine un ghid necesar pentru intelegerea diferentelor dintre PhoneGap si Worklight.
– Secha Spaces este o platforma pentru distribuire HTML5 in siguranta si de aplicatii business hybride intr-un mediu de gestionare enterprise.
– Appcelerator Titanium ofera un set de instrumene mobile foarte folositoare ce va ajuta sa emulati (sau simulati) aplicatia pe o platforma reala si nu in browser. Cand aplicatia este rulata pe dispozitiv, nu se ambaleaza in mod de vizualizare web, dar se interpreteaza de un motor Javascript (JavaScriptCore in iOS sau Rhino in Android).

cross-platform-stats
Source image:https://www.developereconomics.com/

CONCLUZII

Selectarea platformei mobile corecte este cheia pentru a livra experiente mobile bogate catre angajati si clienti. Aplicatiile native pot fi calea pentru a firmele ce au planuri de a dezvolta aplicatii de inalta performanta ce necesita latenta scazuta la hardware. HTML5 este o obtiune excelenta pentru companiile cu resurse limitate ce isi doresc lansare de aplicatii multi-platform. Hybrid este modul prin care o organizatie doreste sa lanseze o aplicatie pe mai multe dispozitive dar deasemena sa profite de caracteristicile pe care doar o aplicatie web nu le poate oferi. Primul pas ar fi ca organizatiile interesate sa evalueze beneficiile si dezavantajele fiecarei platforme pentru a ajuta la luarea celei mai informate decizii posibil.

Surse:

http://www.sitepoint.com/
http://www.moovweb.com/


Exemple de proiecte


Spotlight

Magento / CSS3 / HTML5 / Ajax / Webservices


Mr Crispy

Magento / CSS3 / HTML5 / Ajax / Webservices