Asiantuntijapuheenvuoron diaesitys. Aiheena React Native. Tekijä: Stefan Ylimäki

1. React Native
Kaksi mobiilisovelluskehityksen
kärpästä yhdellä iskulla.

2. Mobiilisovelluskehitys
- Sovellusten kehitystä mobiililaitteille.
- Android- ja iOS-alustoille.

3. Mobiilisovelluskehityksen ongelma
- Android versio (Kotlin, Java tai C++)
- iOS versio (Swift, Objective-C)
- Molemmille alustoille pitää olla omat sovelluskehitystiimit.

4. Mobiilisovelluskehitysteknologiat
- React Native ei ole “the one and only”
- Muita vastaavia viitekehyksiä: Flutter, Cordova, Xamarin,
Ionic Framework, NativeScript, Framework 7, jQuery
Mobile, Phone Gap, BootStrap, …

5. React Native
- Toinen suosituista monialustaisista mobiilisovelluskehitysviitekehyksistä
Flutterin kanssa.
- Molemmilla n. 40% markkinaosuus.
- Kehittänyt Facebook, julkaistu vuonna 2015
- Olet käyttänyt React Native, jos käytät jotain seuraavista sovelluksista:
- Instagram, Discord, Airbnb, Facebook, Microsoft Outlook, Teams, Skype, …

7. Mitä on React Native? 1/2
- React Nativea käytetään oikeiden (natiivien) mobiilisovellusten
kehittämiseen iOS:lle ja Androidille.
- Koostuu kahdesta osasta:
- React.js
- JavaScript kirjasto käyttöliittymien rakentamiseen.
- Normaalisti käytetty verkkosovellusten kehitykseen.
- Itse asiassa React.js on alustariippumaton.
- React + react-dom = verkkosovellus
- React + React Native = natiivi mobiilisovellus

8. Mitä on React Native? 2/2
- React Native
- Kokoelma “erityisiä” React komponentteja.
- “Erityiset” React komponentit käännetään (compile) natiiveiksi komponenteiksi.
- Natiivin alustan (iOS/Android) API:t on paljastettu JavaScriptille.
- React Native yhdistää Reactin käytettävään alustaan.

9. Konepellin alla 1/2
● Esimerkki React Native sovelluksesta:
● Käytännössä sovellus on Reactia (kirjoitettu JavaScriptillä).
const App = props => {
return (
<View>
<Text>Hello there!</Text>
</View>
);
};

10. Konepellin alla 2/2
● Ero Reactiin ovat renderöitävien elementtien tagit.
● React Native “mäppää” ja kääntää elementit kunkin alustan vastaaviin.
○ Kun React Nativessa kirjoitetaan <View> -elementti.
■ iOS-laitteet renderoivät UIView -komponentin.
■ Android-laitteet renderöivät android.View -komponentin.
■ Verkkosovelluksissä <View></View> komponentti olisi <div></div>

11. Kiitos mielenkiinnosta!
Kysymyksiä?