Hyppää sisältöön

React Native – natiivisovelluksia ketterästi ilman kompromisseja

Natiivit mobiilisovellukset ovat hienoja, mutta niiden kehittäminen on helposti kallista ja hidasta. Kehittämiseen tarvitaan useita koodipohjia, iso tiimi ja vähintään kuusinumeroinen budjetti. Vai tarvitaanko sittenkään? Mitä jos natiivisovelluksia voisi kehittää kuin web-sovelluksia – ketterästi, yhdellä koodipohjalla ja budjetissa pysyen? Tähän on jo ratkaisu, ja sen nimi on React Native.

Tuulikki Laine, 09.02.2023

Mikä, miksi ja miten?

Meta (silloinen Facebook) julkaisi ensimmäisen version React Nativesta jo 2015. Ajatus oli kunnianhimoinen – natiivisovellusten kehittäminen JavaScriptilla, ilman erillisiä koodipohjia iOS- ja Android -laitteille. Web-teknologioita oli yritetty tuoda natiivisovelluskehitykseen aiemminkin, mutta ne olivat perustuneet tyypillisesti WebView -ratkaisuun, eli eräänlaisen selainikkunan tuomiseen natiivin “kehyksen” sisään. Tämä kompromissi kyllä ketteröitti kehitystä, mutta sovellusten suorituskyky jätti toivomisen varaa. React Native toi markkinoille uudenlaisen ratkaisun, jossa JavaScriptilla luodut elementit pystyttiin yhdistämään suoraan laitteen natiiveihin komponentteihin.

React Native on viime vuosien aikana vahvistanut asemaansa nopealla tahdilla, ja yhä useammat isotkin toimijat ovat vaihtaneet perinteiset usean koodipohjan ratkaisunsa React Nativeen. Meta luonnollisesti luottaa omaan tuotteeseensa Facebookin ja Instagramin mobiilisovelluksissa, mutta nykyisin myös muun muassa Discord, Skype, Microsoft Office, Shopify, Walmart, Tesla ja Pinterest ovat rakentaneet sovelluksensa React Nativen päälle.

React Nativen suurin etu on siinä, että kehittäjä käyttää webistä tuttua teknologiaa, mutta lopputuote hyödyntää iOS- tai Android -laitteen natiiveja ominaisuuksia. Sama koodipohja toimii sellaisenaan molemmissa käyttöjärjestelmissä, mikä leikkaa kehityksen ajasta ja kustannuksista pois ison siivun. Tämä ei kuitenkaan tarkoita, että ulkoasun tai toiminnallisuuksien suhteen tulisi tehdä kompromisseja. React Native -sovellus ei vain näytä ja tunnu “oikealta” natiivisovellukselta – se on sellainen.

React Native vs. PWA

React Native -sovellus ei siis ole progressiivinen web-sovellus (progressive web app eli PWA), vaan täysiverinen natiiviapplikaatio. PWA toimii selaimessa, mutta sillä on tiettyjä natiivisovelluksen piirteitä, kuten offline-näkymä ja mahdollisuus tallentaa sovellus kuvakkeena laitteen aloitusnäkymään. Konepellin alla PWA on kuitenkin “vain” verkkosivu, ja sillä on myös verkkosivun rajoitteet. Erityisesti iOS-puolella PWA:n ominaisuuksissa on rajoitteita, sillä esimerkiksi push-notifikaatiot eivät toistaiseksi ole mahdollisia.

React Native -sovellus ei toimi selaimessa, vaan se käyttää suoraan laitteen omia toiminnallisuuksia. React Native -sovelluksen kehittäminen ei kuitenkaan välttämättä ole paljonkaan kalliimpaa tai raskaampaa kuin PWA:n.

Suurin ero PWA:n hyväksi on sovelluskauppaprosessin puuttuminen. Koska React Native -sovellus on natiivisovellus, käyttäjät lataavat sen sovelluskaupasta, eivät suoraan verkosta. Kehittäjän näkökulmasta tämä tarkoittaa, että myös päivitysten yhteydessä tulee käydä läpi hyväksyntäprosessi, joka saattaa varsinkin Applen puolella kestää useita päiviä. Mutta tähänkin on olemassa ratkaisu…

Toteutimme Golf Sarfvikin mobiilisovelluksen React Nativella.

Expo ja Over the air -päivitykset

React Native tekee jo itsessään mobiilisovellusten kehittämisestä ketterää ja joustavaa, mutta Expo-kirjaston avulla saadaan vielä uusi vaihde silmään. Expon avulla React Native- sovelluskehitys saadaan nopeasti alkuun, ja Expon työkalut tekevät esimerkiksi push-notifikaatioiden lähettämisestä entistä helpompaa.

Suurin syy käyttää Expoa React Nativen rinnalla ovat niin sanotut Over the air -päivitykset. Expon avulla sovellukseen voidaan tehdä päivityksiä ilman sovelluskaupan hyväksyntäprosessia. Tämä johtuu siitä, että Expo erottaa JavaScript-koodin natiivisovelluksen koodista tavalla, joka mahdollistaa nimenomaan JavaScript-koodin päivittämisen ilman, että natiivikoodiin (esim. Swift, Java) tarvitsee koskea lainkaan. Näin esimerkiksi käyttöliittymään, ulkoasuun tai teksteihin liittyvät muutokset onnistuvat nopeasti, ilman raskasta hyväksyttämistä sovelluskaupassa (sen sijaan isommat, esimerkiksi integraatioihin liittyvät muutokset vaativat tämän edelleen).

Expossa on joitakin rajoitteita puhtaaseen React Nativeen verrattuna, esimerkiksi aivan kaikkia rajapintoja ei toistaiseksi ole sen kautta saatavilla. Tämä ei kuitenkaan välttämättä ole ongelma – sovelluksen voi aina siirtää pois Expo-ympäristöstä, mikäli myöhemmin käy ilmi, ettei jotakin ominaisuutta ole saatavilla (Exposta pois siirtyminen on suhteellisen helppoa, vaikka kehitys olisi aloitettu sen avulla – tällaisessa tilanteessa tulee lähinnä tarkistaa Exposta riippuvaiset kirjastot ja etsiä niille sopivat vaihtoehdot). Expo myös kehittää uusia ominaisuuksia aktiivisesti.

Lopuksi

React Nativen ansiosta natiivisovelluksen kehittäminen ei ole yhtä raskasta, kallista ja aikaa vievää, kuin vielä joitakin vuosia sitten. Tästä huolimatta projektiin ei kannata ryhtyä, ennen kuin on selvitetty tarkasti, miksi sovellus halutaan, kenelle se on tarkoitettu, mitkä ovat sen hyödyt käyttäjälle, ja miten sitä tullaan markkinoimaan. PWA tai mobiilioptimoitu verkkosivusto ovat edelleen päteviä ratkaisuja tilanteeseen, jossa selaimen ominaisuudet riittävät, päivitysten nopeus halutaan optimoida ja sovelluskauppaprosessi halutaan välttää.

React Native tarjoaa kuitenkin mahdollisuuden kehittää natiivisovelluksia uudella tavalla, jossa prosessi ja hinta vertautuvat web-kehitykseen.

Kiinnostaako sinua PWA tai React Native -sovellus? Ota meihin yhteyttä, niin löydetään sinulle paras sovellusratkaisu!

Haku