React Native

WTF?!

is

sli.do

#L572

{       }

DOM

Javascript

v prohlížeči

{       }

Bridge

[ ...... ]

Javascript

v RN

React Native API

import { View, Text } from 'react-native'

const MyCoolApp = () => {
    return(
        <View>
            <Text>This doesn't do much</Text>
        </View>
    )
}

Slider, Button, Refresh, Loader, Drawer...

Alert, Touch, Camera, SMS, Geo, Gallery...

Historie

Vytvořeno Jordanem Walkerem

 

Léto 2013 - React native byl výsledkem interního hackatonu

                      ve Facebooku

 

Leden 2015 - První preview pro veřejnost

Březen 2015 - React native je open a na Githubu

React

Native

Native

vs

Šetří náklady

Znovupoužitelnost

Rychlost

 

Lepší výkon

Lepší zabezpečení

Lepší animace

Kdo používá React Native?

Facebook

Instagram

Walmart

Tesla

Uber Eats

Co je Expo?

Toolchain

SDK

Knihovna komponent

Build nástroj

Debug tools

OTA updates

 

Budoucnost Expa

Brzy

​    Bluetooth Api

    Lepší nástroje pro vývoj a kolaboraci

    Podpora React Native 0.59  = Hooky

    Podpora 64b apps pro Google Play

 

Plánováno

​    Nakupování v aplikaci

    React Native Youtube

    PDF viewer

    Audio playback na pozadí

React Native init

  • Přístup k 3rd party native knihovnám
  • Možnost psát a linkovat vlastní native moduly
  • Svoboda

Nevýhody

  • Je potřeba starat se o async load assetů (fonty, obrazky...)
  • Nemá zabudovaný  OTA
  • Je potřeba buildit na lokálním PC (Android studio, Xcode)
  • Nemá tak promakené dev tools jako Expo

    Výhody

CRNA - Expo

  • Jednoduchý build
  • Expo klient
  • Jednoduchá instalace
  • Možnost kdykoliv "ejectnout"
  • ExpoKit

Nevýhody

  • Není možné linkovat 3rd party knihovny
  • Hello world app zabírá 25 MB

  Výhody

Jak se rozhodnout?

Budu potřebovat native balíčky, které nejsou součástí Expa?

Jsem zkušený React native vývojář?

Chci mít kompletní kontrolu na build procesem?

React native má Styl

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
const BigBlue = styled(View)`
    color: blue;
    font-weight: bold;
    font-size: 30;
`

React native UI

NativeBase - 11982

React Native UI Kitten - 3822

React Native Paper - 3522

React Native Elements - 16075

React native antd mobile - 1060

Animace

React Spring

react-native.Animated

react-native.LayoutAnimation

const AnimatedView = animated(View)

Navigace

React Navigation

React Native Navigation

Debug

Starý dobrý console.log do expo dev tools

Redux dev tools - remote

Reactotron - console, redux, saga, network

Remote Chrome debug

 

React native je všude

Děkujeme za pozornost

Made with Slides.com