Šta su hibridne mobilne aplikacije?
Mobilne aplikacije su više od običnih web aplikacija, jer za razliku od browsera mobilni uređaji imaju senzore i specifične funkcionalnosti (kamera, žiroskop, vibracija i dr.). Upravo mogućnost pristupa tim funkcionalnostima odvaja mobilne aplikacije od obične responzivne web stranice.
Nastanak hibridnih mobilnih aplikacija
Da biste razvili “nativne mobilne aplikacije” na više različitih platformi, potrebno je da u timu imate softverske inženjere za svaki operativni sistem. Pored velike (čitaj “skupe”) zavisnosti od specifičnog kadra, treba naglasiti da je otežavajuća okolnost što ne možemo da iskoristimo i podelimo programski kod između različitih verzija iste aplikacije. Sve navedeno utiče da je cena i vreme razvoja nativnih aplikacija velika.
Rešenje za navedene probleme su takozvane “hibridne mobilne aplikacije”. Radi se o web aplikacijama pisanim sa klasičnim web tehnologijama (HTML, JavaScript, i CSS), čiji programski kod se kompajlira u aplikaciju koja se izvršava u webviw-u. Kod hibridnih mobilnih aplikacija programski kod pišemo samo jednom, a ostale verzije (za svaku od željenih platformi) se dobijaju kompajliranjem tog koda. Ovakve aplikacije se zovu “hibridne”, jer ipak nisu čisto nativne mobilne aplikacije, (sve prikazivanje vrši preko tzv. “WebView” umesto platforme korisničkog interfejsa), ali takodje nisu ni čisto Web-based (jer imaju pristup izvornim API-ima uređaja i pripremljene su za distribuciju na odgovarajućoj platformi).
Mane hibridnih aplikacija
Pisanje programskog koda samo jednom a da automatski dobijemo verzije za svaku od željenih platformi zvuči idealno, medjutim i hibridne aplikacije sa sobom nose određena ograničenja.
Najveći problem hibridnih aplikacija su njene performanse. Kod starijih telefona (pogotovo na Android platformi pre verzije 4.0) se javlja problem ne dovoljno brzog renderovanja korisničko interfejsa i seckanje efekata animacije ili tranzicije. Iako je trenutno situacija bolja, uglavnom zbog značajne procesorske snage aktuelnih aparata, a delom zbog alata koje se koriste za razvoj i napretka u optimizaciji mobilnih operativnih sistema. Ipak za neke funkcionalnosti (npr. widget na Android platformi) hibridne web aplikacije i dalje nemaju adekvatno rešenje. Ne treba zanemariti da gradeći hibridne aplikacije mi automatski nasledjujemo sve probleme koje dolaze sa programiranjem na web-u (različita podržanost funkcionalnosti za različite browsere…)
Tehnologije za razvoj hibridnih aplikacija
Kao i pri izradi standardnih web aplikacija za izradu hibridnih mobilnih aplikacija, se koriste frontend tehnologije: HTML, CSS, i JavaScript (najčešće se ne koristi plain JavaScript već neki od framework-a: Angular, React, Vue.js…). Medjutim pored pomenutog seta tehnologija je potrebno:
- Omogućiti pristup sistemskim funkcijama uredjaja (Cordova)
- Obezbediti alat za kompajliranje aplikacije u native kod željene platforme (Cordova)
- Stilizovati izgled i funkcionalnost korisničkog okruženja kao na originalnim platformama (IOS, Android) sa nekom od specijalizovanih UI biblioteka: Ionic, Framework7, OnsenUI, Quasar…
Cordova
Šta je Cordova a šta PhoneGap?
Kompanija “Nitobi” je 2009 kreirala Open Source projekat pod nazivmom “PhoneGap”. Medjutim 2011 Adobe kupuje firmu Nitobi. Pošto je PhoneGap u trenutku kupovine bio besplatan a njegov softver je već koristilo više proizvođača u svojim softverskim proizvodima (Oracle, IBM…), da bi zaštitili dugovečnost projekta PhoneGap, Nitobi je pre prodaje donirao PhoneGap “Apache Softvare” fondaciji. Pošto je sa kupovinom firme Nitobi Adobe kupio pravo i na ime “PhoneGap”, stoga je Apache fondacija generisala novo ime, pa naziv “Apache Cordova” predstavlja open source project a “PhoneGap” je Adobeova distribucija istog proizvoda. U medjuvremenu je Adobe dodao nove funkcionalnostima (uglavnom vezane za olakšavanje developmenta), kao što je PhoneGap Build Service, PhoneGap Developer App i Adobe PhoneGap Enterprise.
Namena Cordove
Apache Cordova sistem omogućuje dve stvari hibridnim mobilnim aplikacijama:
- Funkcije za komunikaciju sa sistemskim komponentama direktno iz JavaScripta
- Kompajliranje web aplikacije u native code
a) Pristup sistemskim funkcijama uređaja
Cordova vam obezbedjuje API za pristup sistemskim funkcijama uredjaja, tako da iz web aplikacije možemo da aktiviramo kameru, izbacimo notifikaciju, očitamo koordinate i dr. Ove funkcionalnosi se obezbedjuju instaliranjem odgovarajućeg Cordova plugina:
- Battery Status
- Camera
- Console
- Contacts
- Device
- Device Motion
- Device Orientation
- Dialogs
- File
- File Transfer
- Geolocation
- Globalization
- InAppBrowser
- Media
- Media Capture
- Network Information
- Splashscreen
- Vibration
- Statusbar
- Whitelist
b) Kompajliranje web aplikacije u native kod
Kompajliranje web aplikacije podrazumeva, generisanje aplikacije koja sadrži ogoljeni browser (tzv. webview) i web aplikaciju koja se izvršava u takvom browser-u. Takodje pored toga sadrži konfiguracione fajlove, manifest mobilnog operativnog sistema i dr. Tako generisana aplikacija je pripremljna za distribuciju kroz odgovarajuću mrežu (Google Play ili Apple store).
Izbor UI biblioteka za oponašanje native mobilnih aplikacija?
Jasno je da za izradu aplikacija (kod kojih se većina logike nalazi na klijentu) može da se koristi i samo plain JavaScript, medjutim progameri zbog bržeg i jednostavnijeg programiranja koriste frontend framework-e. U moru frontend frameworka trenutno se ističu: Angular, React i Vue.js. Ok, izabrali smo jedan od frameworka i sa njim ćemo odraditi svu “logiku” aplikacije na klijentu medjutim tu dolazi “teži” deo, jer svaki od operativnih sitema (IOS, Android, Windows, Blackberry…) ima svoj prepoznatljiv korisnički interfejs, pa je izrada interfejsa ogroman posao. Upravo tada na scenu stupaju UI biblioteke za oponašanje native mobilnih aplikacija.
Tabelarni pregled karakteristika biblioteka
U ovom delu ću napraviti pregled nekih ui bibloteka za mobilne aplikacije, a jedini uslov da se nadju na listi je da podržavaju oba operativna sistema i IOS i Andorid material dizaj.
| Framework | Datum kreiranja | Trenutna verzija | Wrapper type | Matični framework | Podržani framework | Podržana platforma | Podržana ver. platforme | Broj komponenata | Github stars | Github contributors |
|---|---|---|---|---|---|---|---|---|---|---|
| Ionic 2 | Januar 2017 | 3.9.2 | Cordova | Angular | Angular | Hybrid mobile app | Android 4.1+, iOS 8+ | 30+ | 33207 | 254 |
| Framework7 | Feb. 2014 | 2.0.7 | Cordova | / | Vue.js, React | Hybrid mobile app | Android ~4.1, iOS 7+ | 55+ | 11706 | 81 |
| Quasar | Oktobar 2015 | 0.14 | Cordova | Vue.js | Vue.js | PWA, Hybrid mobile, Electron apps | Android ~4.1, iOS 7+ | 60+ | 5007 | 87 |
| OnsenUI | Januar 2010 | 3.9.2 | Cordova | / | Angular, React, Vue.js | Hybrid mobile app | Android 4.4+, iOS 8+ | 25 | 5984 | 87 |
Lični utisak
Ionic je najpopularniji i najozbiljniji sa najviše saradnika na projektu, ali podržava samo Angular. Quasar je bibloteka sa rastućnom popularnosti koji pored hibridnih aplikacija o istom trošku može da generiše (sa istim kodom) i PWA i desktop aplikacije (Windows, IOS). Ima ogroman broj komponenti ali i zamerke na dizajn koji ne liči dovoljno ni na IOS ni na Android. Takodje treba naglasiti da ga je moguće koristiti jedino u saradnji sa Vue.js framework-om. Framework7 podržava i React i Vue.js, prilično je popularan i ima verovatno najbolji dizajn (naručito za IOS). Pored toga ima pristojan broj komponenti, medjutim preferira lični način rutiranja i lični DOM management sistem. OnsenUi jedini podržava sva tri glavna frameworka podjednako, i ima odličan dizajn, ali je mana mali broj komponenti (npr. nema date-time picker).