Blogi

Natiivi, hybridi vai React Native? Mobiilisovellustyypit vertailussa

Juuso Haikonen

Väitetään, että ihmiset omistavat tänä päivänä enemmän mobiililaitteita kuin hammasharjoja. Pitääpä väite paikkansa tai ei, on taskussamme kulkevasta laitteesta tullut meille korvaamaton hyödyke. Perinteiset tietokoneet ovat menettäneet valta-asemansa, mutta miten käytämme aikamme mobiililaitteilla?

Keskiverto amerikkalainen käyttää mobiililaitetta noin 5 tuntia päivässä. Kyseisestä ajasta noin 90 % kuluu sovelluksissa. Vastoin yleistä oletusta, sovellusten kehitys voi olla myös verrattain edullista. Tämä edellyttää, että valitaan oikeat työkalut oikeaan hommaan.

Esitän seuraavaksi kolme yleistä tapaa nykyaikaiseen mobiilisovelluskehitykseen. Jos siis mietit vielä natiivisovelluksen, hybridisovelluksen ja React Nativen välillä, katso alta suositellut käyttökohteet sekä jokaisen plussat ja miinukset.

1. Natiivisovellus (Java/Kotlin, Objective C/Swift)

Natiivisovellus kehitetään Androidille Java/Kotlin ja IOS:lle Objective C/Swift -ohjelmointikielillä. Kyseessä on täysin erilaiset alustat, joten molemmille tarvitaan omat ohjelmistokehittäjät.

Androille kehitetyn sovelluksen voi julkaista vain Google Playssa ja vastaavasti IOS:lle suunnitellun Apple Storessa. Näin ollen jokainen ominaisuus joudutaan kehittämään kahteen eri otteeseen.

Osaavissa käsissä natiivikehityksellä päästään luonnollisesti aina parhaaseen lopputulokseen. Kannattaa kuitenkin huomata, että natiivisovelluksen kehityskustannukset nousevat paljon korkeammaksi kuin muissa lähestymistavoissa – tai vaihtoehtoisesti yrityksen täytyy keskittyä joko Android tai IOS -alustaan.

Puolustukseksi on sanottava, että Android ja IOS -maailmat ovat sovelluskehityksen näkökulmasta suhteellisen vakaat alustat. Tämä on hyvin positiivinen asia, mikäli sovelluksen on tarkoitus olla hyvin pitkäikäinen.

Suositellut käyttökohteet: pelit, pitkäikäiset sovellukset, yhden alustan sovellukset sekä ne sovellukset, jotka käyttävät poikkeuksellisen paljon mobiililaitteiden natiiveja ominaisuuksia

Plussat: loistava suorituskyky, kaikki natiiviominaisuudet suoraan käytössä, ei ylimääräisiä pullonkauloja

Heikkoudet: verrattain hitaampi kehitys, kallis kehittää molemmille alustoille, kaksi erillistä koodipohjaa

2. Hybridisovellus (HTML5, CSS3, Ionic 1-4)

Hybridisovellus on toteutettu moderneilla verkkoteknologioilla, eikä sen kehityksessä tarvita ollenkaan Android tai IOS -osaamista. Hybridisovellus voidaan kuitenkin julkaista myös Google Playssa sekä Apple storessa, ja ulkoisesti käyttäjän on vaikea erottaa sitä natiivista.

Tällä hetkellä suosituin framework on nimeltään Ionic 1-4. Se on täysin ilmainen avoimen lähdekoodin framework, joka sisältää huomattavan määrän valmiita käyttöliittymäkomponentteja, kuten listanäkymät, kortit ja syöttökentät.

Lisäksi frameworkissa on Cordova/PhoneGap plug-inien kautta tuki natiiveille ominaisuuksille, kuten kameralle, mainoksille tai vaikkapa sovelluksen arvioimiselle.

Hybridisovellusten ylivoimaisesti paras ominaisuus on kehitysnopeus. Sama koodi voidaan julkaista lähes sellaisenaan kaikille mobiililaitteille. Lisäksi todella kattavat dokumentaatiot sekä loistavat työkalut varmistavat huippunopean kehityksen.

Kolikolla on kuitenkin myös kääntöpuolensa. Jos sovelluksella on runsaasti riippuvuuksia  mobiililaitteiden natiiviominaisuuksiin, tämä aiheuttaa helposti suorituskykyongelmia. Ja jos käyttäjän vuorovaikutukseen perustuvat animaatiot ovat keskeinen osa käyttäjäkokemusta, on katseet parempi suunnata natiiveihin ratkaisuihin.

Suositellut käyttökohteet: pitchaus, protot, in-house -sovellukset, yksinkertaiset sovellukset

Plussat: halpa kehitys, nopeat tulokset, yksi koodipohja

Heikkoudet: suorituskyky ei yllä natiivisovellusten tasolle

3. React Native (React, Java/Kotlin, Objective C/Swift)

React Native on Facebookin kehittämä framework mobiilisovelluksille. Sitä käyttävät Facebookin ohella suurimmat mobiilialustat, kuten AirBnB ja Instagram. Se on ikään kuin hybridi- ja natiivisovelluksen välimalli.

Tämän frameworkin perusideana on, että suurin osa sovelluksesta kehitetään React Nativen avulla, loput natiivisti. React Native -sovellukset eroavat hybrideistä siten, että ne kääntyvät täysin natiiveiksi. Ja toisin kuin natiivikehityksessä, tämä saavutetaan lähes yhdellä koodipohjalla.

Toisinaan Android ja IOS -laitteille joudutaan tekemään spesifiä koodausta, mutta suurin osa business-logiikkaa sekä käyttöliittymää voivat olla jaettua koodia. Toisin sanoen React Native hyödyntää parhaat puolet natiivi- ja hybridikehityksestä.

Tuotekehityksen näkökulmasta React Native ei kuitenkaan ole täydellinen. Dokumentaatiot ja työkalut ovat hyvät, mutta ne eivät yllä esimerkiksi hybridikehityksen (Ionic) tasolle. Erityismaininta täytyy antaa todella sekavalle navigaatiotuelle (siirtymiset eri näkymien välillä), mikä on kuitenkin keskeinen osa mitä tahansa mobiilisovellusta.

React Native ei itsessään sisällä myöskään valmista UI-pakettia, vaan sellainen on asennettava erikseen. Lisäksi sovelluskehittäjien on opeteltava React Nativen spesifiä syntaksia, sekä perehdyttävä React Nativen arkkitehtuuriin ja toimintaperiaatteisiin. Muuten vaarana on sovelluksen heikko suorituskyky.

Ongelmat ovat kuitenkin suhteellisen helppo välttää ja ratkaista. Osaavissa käsissä React Nativella tehdään maailmanluokan mobiilisovelluksia.

Suositellut käyttökohteet: lähes kaikki mobiilisovellukset, jotka halutaan julkaista kuluttajille/asiakkaille

Plussat: todella hyvä suorituskyky, kääntyy natiiviksi, nopea kehitys, lähes yksi koodipohja

Heikkoudet: Suorituskyky voi olla ongelma, erityisesti jos käytetään väärin, framework kehittyy nopeasti, mikä mahdollistaa rajapintojen rikkoontumiset, heikko navigaatiotuki, ei täysin kattavaa UI-pakettia

Painavaa asiaa kevyellä otteella!  TILAA BLOGIKIRJOITUKSET SÄHKÖPOSTIISI 

Aiheet: Ohjelmistokehitys

Juuso Haikonen
Juuso Haikonen

Hankevetäjän, scrum masterin ja front-end-koodaajan työtehtävät ovat minulla suloisessa sulosoinnussa. Neljäs, vähintään yhtä tärkeä rooli on pitää huolta toimistomme puujalkavitseistä. Mitä huonompi – sitä parempi.