Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native: The Development Flow

React Native: The Development Flow

React Native is slowly becoming the preferred choice for developing mobile applications. If you are already a web developer, you will find that most of the principles of coding remain the same as it uses the same design as React. But the development flow might feel a bit overwhelming for someone who is creating a React Native app for the first time.

In this talk, I will describe the various tools and methods that can simplify your development workflow. I will talk about the whys and hows of debugging, performance optimizations and improved release cycles so that the next time you are developing a React Native application, you feel at home.

Ritesh Kumar

May 26, 2018
Tweet

More Decks by Ritesh Kumar

Other Decks in Technology

Transcript

  1. React Native
    The Development Flow
    Ritesh Kumar / @ritz078
    Lead SDE, Anarock

    View full-size slide

  2. • Let’s us build mobile application
    • Same Design as React
    • True Native Behaviour

    View full-size slide

  3. NativeScript
    “write once, use everywhere.”
    React Native
    “learn once, write everywhere”

    View full-size slide

  4. Apps built using RN

    View full-size slide

  5. react-native init myapp
    cd myapp
    yarn
    yarn build
    yarn start
    Getting started

    View full-size slide

  6. Type Checking

    View full-size slide

  7. https://transform.now.sh
    Automate It

    View full-size slide

  8. UI Development

    View full-size slide

  9. react-storybook
    • Isolated UI Development
    • Faster updates while
    development
    • Snapshot testing using
    storyshots.

    View full-size slide

  10. import React from "react";
    import { storiesOf } from "@storybook/react-native";
    import CenterView from "./CenterView";
    import Button from "components/GenericButton";
    import colors from "utilities/colors";
    storiesOf("GenericButton", module)
    .addDecorator(getStory "=> {getStory()}")
    .add("Default", () "=> [
    ,
    ,
    ,
    ,
    ,

    ]);
    "// .add ("Another Configuration", () "=>
    "//
    )

    View full-size slide

  11. Isolated UI Development
    •Decoupled from the app architecture
    •Developed like a library
    •Easier testing
    •Maintainable

    View full-size slide


  12. ├── [email protected]
    └── [email protected]
    React Native will automatically look for the suitable resolution
    with that file name

    View full-size slide

  13. Different Pixel Densities
    Different Image Resolutions

    View full-size slide

  14. Use SVGs
    • Use react-native-svg
    • Optimize svg using something
    like svgo

    View full-size slide

  15. xmlns="http:"//""www.w3.org/2000/svg"
    width=“200"
    height="100"
    version="1.1"
    >
    width="200"
    height="100"
    stroke="black"
    stroke-width="6"
    fill="green"
    "/>
    "
    import
    Svg,
    { Rect }
    from "react-native-svg"
    export default function() {
    return (

    width={200}
    height={100}
    stroke="#000"
    strokeWidth={6}
    fill="green"
    "/>
    "
    )
    }
    HTML Code React Native Code

    View full-size slide

  16. https://transform.now.sh/svg-to-react-native
    Automate It

    View full-size slide

  17. 40-50% size reduction on replacing png with SVG

    View full-size slide

  18. InteractionManager.runAfterInteractions
    InteractionManager.runAfterInteractions(() "=> {
    "// ""...long-running synchronous task""...
    });
    Runs code after the current animations have finished

    View full-size slide

  19. requestAnimationFrame
    requestAnimationFrame(() "=> {
    "// ""...task""...
    });
    • Runs code before next repaint
    • If you are using Animated API, it takes care of the frame updates
    for you.

    View full-size slide

  20. InteractionManager.runAfterInteractions(() "=> {
    "// ""...long-running synchronous task""...
    });
    requestAnimationFrame(() "=> {
    "// ""...task""...
    });
    VS

    View full-size slide

  21. Long Lists
    •Don’t use ScrollView
    •Use FlatList or SectionList
    •They use VirtualizedList internally

    View full-size slide

  22. Open Devtools
    Refresh on file Change
    Update Changed Code
    Inspect components &
    Touchable areas
    FPS Monitor

    View full-size slide

  23. Better Debugging (Inspect + Devtools + Redux)
    react-native-debugger

    View full-size slide

  24. • Use default debugger unless it isn’t useful. It’s fast
    • Turn off network monitoring if you don’t need it

    View full-size slide

  25. Live Reload
    • Reloads the entire page.
    • State is lost.
    • Updates the changed code.
    • State is not lost.
    Hot Reloading

    View full-size slide

  26. Debugging on Device
    adb shell input keyevent 82

    View full-size slide

  27. Dev Mode
    Tap multiple times to enable
    dev mode

    View full-size slide

  28. import * as Rx from “rxjs";
    this.devModeStream = new Rx.Subject();
    this.devModeStream
    .bufferWhen(() "=> this.devModeStream.debounceTime(1000))
    .filter(x "=> x.length ">= 6)
    .subscribe(this.toggleDevMode);
    Create a stream

    View full-size slide

  29. import * as Rx from “rxjs";
    this.devModeStream = new Rx.Subject();
    this.devModeStream
    .bufferWhen(() "=> this.devModeStream.debounceTime(1000))
    .filter(x "=> x.length ">= 6)
    .subscribe(this.toggleDevMode);
    onClick this.devModeStream.next(event);

    View full-size slide

  30. beta
    beta_native
    master
    JS only changes
    Native + JS Changes
    Codepush
    Play Store
    2.1.x
    2.x.0

    View full-size slide

  31. Minor (2.5.x)
    Major (2.6.0)
    All PRs that will go in
    CodePush Update
    Native release
    Beta
    Beta
    Native

    View full-size slide

  32. Release Cycle
    Native OTA
    Fortnightly Bug Fixes - Instantly
    Features - Weekly

    View full-size slide

  33. Keep in mind
    "react-native-image-picker": "^0.26.7"
    Don’t do this or your OTA might break your app.

    View full-size slide

  34. Getting Started
    Scan a QR code
    Open a Link

    View full-size slide

  35. Online expo editor
    https://snack.expo.io/

    View full-size slide

  36. Native Features

    View full-size slide

  37. Thank You
    @ritz078

    View full-size slide