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.

55c3671e959e903a7880eaf0cf61f3e4?s=128

Ritesh Kumar

May 26, 2018
Tweet

Transcript

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

    SDE, Anarock
  2. None
  3. Intro

  4. • Let’s us build mobile application • Same Design as

    React • True Native Behaviour
  5. NativeScript “write once, use everywhere.” React Native “learn once, write

    everywhere”
  6. Apps built using RN

  7. react-native init myapp cd myapp yarn yarn build yarn start

    Getting started
  8. Development

  9. Type Checking

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

  11. UI Development

  12. react-storybook • Isolated UI Development • Faster updates while development

    • Snapshot testing using storyshots.
  13. 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 "=> <CenterView>{getStory()}"</CenterView>) .add("Default", () "=> [ <Button title={"Hello"} key={1} "/>, <Button title={"Hello"} key={2} color={colors.red} "/>, <Button title={"Hello"} key={2.1} color={colors.red} disabled "/>, <Button title={"Hello"} key={3} filled "/>, <Button title={"Hello"} key={3.1} filled disabled "/>, <Button title={"Hello"} key={4} iconName={"update"} "/> ]); "// .add ("Another Configuration", () "=> "// <Button "/> )
  14. Isolated UI Development •Decoupled from the app architecture •Developed like

    a library •Easier testing •Maintainable
  15. Images

  16. <Image source={require('./my-icon.png')} "/> ├── my-icon@2x.png └── my-icon@3x.png React Native will

    automatically look for the suitable resolution with that file name
  17. Different Pixel Densities Different Image Resolutions

  18. Use SVGs • Use react-native-svg • Optimize svg using something

    like svgo
  19. <svg xmlns="http:"//""www.w3.org/2000/svg" width=“200" height="100" version="1.1" > <rect width="200" height="100" stroke="black"

    stroke-width="6" fill="green" "/> "</svg> import Svg, { Rect } from "react-native-svg" export default function() { return ( <Svg width={200} height={100}> <Rect width={200} height={100} stroke="#000" strokeWidth={6} fill="green" "/> "</Svg> ) } HTML Code React Native Code
  20. https://transform.now.sh/svg-to-react-native Automate It

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

  22. Performance

  23. InteractionManager.runAfterInteractions InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); Runs

    code after the current animations have finished
  24. requestAnimationFrame requestAnimationFrame(() "=> { "// ""...task""... }); • Runs code

    before next repaint • If you are using Animated API, it takes care of the frame updates for you.
  25. InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); requestAnimationFrame(() "=>

    { "// ""...task""... }); VS
  26. Long Lists •Don’t use ScrollView •Use FlatList or SectionList •They

    use VirtualizedList internally
  27. Debugging

  28. None
  29. Open Devtools Refresh on file Change Update Changed Code Inspect

    components & Touchable areas FPS Monitor
  30. Better Debugging (Inspect + Devtools + Redux) react-native-debugger

  31. • Use default debugger unless it isn’t useful. It’s fast

    • Turn off network monitoring if you don’t need it
  32. Live Reload • Reloads the entire page. • State is

    lost. • Updates the changed code. • State is not lost. Hot Reloading
  33. Debugging on Device adb shell input keyevent 82

  34. Dev Mode Tap multiple times to enable dev mode

  35. 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
  36. 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);
  37. Releases

  38. beta beta_native master JS only changes Native + JS Changes

    Codepush Play Store 2.1.x 2.x.0
  39. Minor (2.5.x) Major (2.6.0) All PRs that will go in

    CodePush Update Native release Beta Beta Native
  40. Release Cycle Native OTA Fortnightly Bug Fixes - Instantly Features

    - Weekly
  41. Keep in mind "react-native-image-picker": "^0.26.7" Don’t do this or your

    OTA might break your app.
  42. Expo

  43. Getting Started Scan a QR code Open a Link

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

  45. Native Features

  46. Thank You @ritz078