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

Wtf is React native

By Pepa Vidlák

Made with Slides.com

Wtf is React native

  • 587

More from Pepa Vidlák