Developing Apps With React Native

Embed Size (px)

Text of Developing Apps With React Native

  • 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.htm