Developing Apps With React Native

  • Published on
    08-Jan-2017

  • View
    720

  • Download
    1

Transcript

  • DEVELOPING MOBILE APPS WITH

    REACT NATIVE @ A LVA R O V I E B R A N T Z / / AV I E B R A N T Z . C O M . B R

    1

  • IT Analyst at Sefaz-MT Former Fullstack developer at

    Procurix Bsc. Computer Science at UFMT Golang and React enthusiast

    Cuiab, MT, Brasil

    alvarowolfx

    @alvaroviebrantz

    Alvaro Viebrantz

  • DevMT

  • R E A C TW H A T I S R E A C T ?

    5

  • R E A C T

    Just the V of MVC

    6

    Created by Facebook 2013-2016

  • R E A C T

    7

    D ATA D O M

    f(data) = View

    One-way Data Flow

  • R E A C T

    8

    Simple and DeclarativeJSX

  • R E A C T

    9

    JSX is a syntactic sugar

    Its just Javascript

  • R E A C T

    Everything is a Component

    10

  • R E A C T

    Bring your own Architecture

    11

  • R E A C T I N T E R N A L SH O W R E A C T W O R K S ?

    12

  • R E A C T I N T E R N A L S

    13

    Virtual DOM

  • R E A C T I N T E R N A L S

    14

    Batch Updates Blazing Fast Diff Algorithm

  • R E A C T I N T E R N A L S

    15

    S TAT E

    State vs Props Mutable vs Immutable

    What you Own vs What you WonP R O P S

  • R E A C T I N T E R N A L S

    componentWillMount render componentDidMount

    shouldUpdateComponent componentWillUpdate render componentDidUpdate

    componentWillUnmount

    M O U N T U P D AT E U N M O U N T

    16

    View lifecycle

  • R E A C T P U S H E D T H E W E B F O R W A R D

    17

    Many cutting edge web technologies

  • R E A C T P U S H E D T H E W E B F O R W A R D

    18

    Modern JS

    Many projects using ES6 and ES7(!!!)

  • R E A C T P U S H E D T H E W E B F O R W A R D

    19

    More Functional Programming in Javascript

    Immutability

  • R E A C T P U S H E D T H E W E B F O R W A R D

    Awesome tooling and packaging

    Hot code reload

    20

  • R E A C T P U S H E D T H E W E B F O R W A R D

    Advanced application architectures

    21

  • R E A C T R E P E R C U S S I O N

    More Javascript oriented

    Components as a Tree

    Simpler Lifecycle

    One way data flow

    Functional Programming

    22

  • R E A C T N AT I V EW H A T I S R E A C T N A T I V E ?

    23

  • I N A G I A N T S H O U L D E R S

    Why not apply this for mobile development ?

    24

  • W H Y N O T N AT I V E ?

    Native is hard

    Platform specific code

    Develop, Compile, Build, Test tedious lifecycle

    Hard to find developers

    Web developers are more easy to find

    But native its a necessary evil

    25

  • A LT E R N AT I V E S T O N AT I V E

    26

    Hybrid apps with Cordova

  • A LT E R N AT I V E S T O N AT I V E

    27

    Many plugins (!!!)Awesome frameworks

  • A LT E R N AT I V E S T O N AT I V E

    28

  • S TAT E O F W E B V I E W SThe State of JavaScript on Android in 2015 is poor

    https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/1

    This is the benchmark most representative of Discourse performance, and the absolute best known Android score for this benchmark is right at ~400ms on a Samsung Galaxy S6. That doesn't seem too bad until you compare.. iPhone 5 340ms iPhone 5s 175ms iPhone 6 140ms iPad Air 2 120ms iPhone 6s 60-70ms

    29

  • R E A C T N AT I V E

    Created by Facebook

    Public release on early 2015

    Only iOS first

    Late 2015

    Android support

    30

  • R E A C T N AT I V E A P P R O A C H

    Swap Virtual DOM and DOM Elements with:

    Native Views

    No web views !!!

    31

  • R E A C T N AT I V E A P P R O A C H

    Flexbox CSS Subset

    All implemented natively

    32

  • R E A C T N AT I V E A P P R O A C H

    Dedicated Gestures API

    (PanResponder)

    no more fastclick

    33

  • R E A C T N AT I V E A P P R O A C H

    Easy Animation API

    Based on Facebooks Origami

    34

  • R E A C T N AT I V E A P P R O A C H

    Some Web Polyfills Navigation, Timers, Fetch, RAF looks exactly the same

    35

  • N AT I V E A P P

    R E A C T N AT I V E A P P R O A C H

    Thin React to Native Bridge

    36

    J AVA S C R I P T E N G I N E B Y P L AT F O R M

    R E A C T J S

    Y O U R A P P C O D E

    R E A C T N AT I V E J S L I B R A R Y

  • N AT I V E A P P

    R E A C T N AT I V E A P P R O A C H

    37

    J AVA S C R I P T E N G I N E B Y P L AT F O R M

    R E A C T J S

    Y O U R A P P C O D E

    R E A C T N AT I V E J S L I B R A R Y

    Y O U R N AT I V E A P P L I B

    Y O U R J S B R I D G E L I B

  • N a t i v e a p p

    R E A C T N AT I V E A P P R O A C H

    38

    J a v a s c r i p t e n g i n e

    B y p l a t f o r m

    A w e s o m e B u t t o n . a n d r o i d . j s

    AwesomeBu t t on . j s

    A w e s o m e B u t t o n . i o s . j s

  • R E A C T N AT I V E E X T E N S I B I L I T Y

    Native Modules and Views can be marked as exported to be accessed on the JS side

    Must conform to Module or View contract on each platform

    39

  • R E A C T N AT I V E T O O L S

    ES 6

    FlowType (optional)

    Some ES 7

    async / await

    All backed by Babel

    40

  • Inspector and Profiler

    Live / Hot Module Reload

    R E A C T N AT I V E T O O L S

    41

  • R E A C T N AT I V E C O M P O N E N T S

    ActivityIndicatorIOS

    DatePickerIOS

    DrawerLayoutAndroid

    Image

    ListView

    MapView

    Modal

    Navigator

    NavigatorIOS

    PickerIOS

    Picker

    ProgressBarAndroid

    ProgressViewIOS

    RefreshControl

    ScrollView

    SegmentedControlIOS

    SliderIOS

    StatusBar

    Switch

    TabBarIOS

    TabBarIOS.Item

    Text

    TextInput

    ToolbarAndroid

    TouchableHighlight

    TouchableNativeFeedback

    TouchableOpacity

    TouchableWithoutFeedback

    View

    ViewPagerAndroid

    WebView

    42

    http://facebook.github.io/react-native/releases/0.22/docs/activityindicatorios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/datepickerios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/drawerlayoutandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/image.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/listview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/mapview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/modal.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/navigator.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/navigatorios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/pickerios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/picker.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/progressbarandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/progressviewios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/refreshcontrol.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/scrollview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/segmentedcontrolios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/sliderios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/statusbar.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/switch.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/tabbarios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/tabbarios-item.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/text.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/textinput.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/toolbarandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/touchablenativefeedback.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/touchablewithoutfeedback.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/view.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/viewpagerandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/webview.html#content

  • R E A C T N AT I V E C O M P O N E N T S

    43

    ListView

    MapView

    Navigator

    ScrollView

    Text

    TextInput

    View

    WebView

    http://facebook.github.io/react-native/releases/0.22/docs/listview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/mapview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/navigator.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/scrollview.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/text.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/textinput.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/view.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/webview.html#content

  • R E A C T N AT I V E A P I S

    ActionSheetIOS

    Alert

    AlertIOS

    Animated

    AppRegistry

    AppStateIOS

    AppState

    AsyncStorage

    BackAndroid

    CameraRoll

    Clipboard

    DatePickerAndroid

    Dimensions

    IntentAndroid

    InteractionManager

    LayoutAnimation

    Linking

    LinkingIOS

    NativeMethodsMixin

    NetInfo

    PanResponder

    PixelRatio

    PushNotificationIOS

    StatusBarIOS

    StyleSheet

    TimePickerAndroid

    ToastAndroid

    VibrationIOS

    Vibration

    44

    http://facebook.github.io/react-native/releases/0.22/docs/actionsheetios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/alert.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/alertios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/animated.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/appregistry.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/appstateios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/appstate.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/asyncstorage.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/backandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/cameraroll.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/clipboard.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/datepickerandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/dimensions.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/intentandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/interactionmanager.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/layoutanimation.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/linking.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/linkingios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/nativemethodsmixin.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/netinfo.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/panresponder.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/pixelratio.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/pushnotificationios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/statusbarios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/stylesheet.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/timepickerandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/toastandroid.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/vibrationios.html#contenthttp://facebook.github.io/react-native/releases/0.22/docs/vibration.html#content

  • R E A C T N AT I V E E C O S Y S T E M45

  • R E A C T N AT I V E A D O P T I O N

    28.000+ 30.000 Github stars

    Backed by Facebook

    Version 0.21 0.24-rc

    Fast iterations

    46

  • PA C K A G E S A N D C O M P O N E N T Shttp

    s://js.coach

    47

    https://js.coach

  • C O D E P U S Hmicrosoft.github.io/code-push/

    48

  • 49

  • 50

  • R E A C T N AT I V E O N W I N D O W S

    51

    https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/

  • S H O W C A S E F 8 C O N F E R E N C E A P P

    52

    https://github.com/fbsamples/f8app

  • S H O W C A S E

    53

  • C H E C K I T O U T

    Install NodeJS and NPM

    Install React Native command line tools

    For iOS development

    Only on Mac and only need Xcode

    For android dev

    Install Android SDK and Genymotion (recommended)

    > npm install -g react-native-cli

    54

  • C H E C K I T O U T

    Then just create a project with

    To run the iOS project

    To run the Android project

    > react-native init AwesomeProject

    > react-native run-ios

    > react-native run-android55

  • 56

    DEMOMay the demo gods be with us

  • G I F PA R T Y

    57

  • G I F PA R T Y

    58

    Giphy API

    Redux Architecture

    Navigation + ListView + CustomComponents

    Tests with Chai + Mocha

    All available ongithub.com/alvarowolfx/GifPartyReactNative

    http://github.com/alvarowolfx/GifPartyReactNative

  • G I F PA R T Y

    59

    Lets Organize the partyLets Animate the party

    Lets Make Our Own party

  • G I F PA R T Y

    60

  • W H O S G O N N A W I N ?

    61

  • W H O S G O N N A W I N ?

    R E A C T N AT I V E I O N I C & C O R D O VA

    P E R F O R M A N C E V E R Y G O O D G O O D

    N AT I V E M O D U L E S G O O D G O O D

    S TA R T P R O J E C T V E R Y G O O D P O O R

    LT S U P P O R T C U T T I N G E D G E V E R Y G O O D

    C O M M U N I T Y P O O R V E R Y G O O D

    E C O S Y S T E M P O O R V E R Y G O O D

    B A C K E D B Y FA C E B O O K G O O G L E A N D I O N I C

    D E B U G G E R & P R O F I L E R V E R Y G O O D P O O R

    D E V T O O L S G O O D G O O D

    62

  • T H AT S A L L F O L K S 63

    DEVELOPING MOBILE APPS WITH

    REACT NATIVE