Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native: The Development Flow

68 views

Published on

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.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

React Native: The Development Flow

  1. 1. React Native The Development Flow @ritz078 Ritesh Kumar Lead SDE, Anarock
  2. 2. 😥
  3. 3. Intro
  4. 4. • Let’s us build mobile application • Same Design as React • True Native Behaviour
  5. 5. NativeScript “write once, use everywhere.” React Native “learn once, write everywhere”
  6. 6. Apps built using RN
  7. 7. react-native init myapp cd myapp yarn yarn build yarn start Getting started
  8. 8. Development
  9. 9. Type Checking
  10. 10. https://transform.now.sh Automate It
  11. 11. UI Development
  12. 12. react-storybook •Isolated UI Development •Faster updates while development •Snapshot testing using storyshots.
  13. 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. 14. Isolated UI Development •Decoupled from the app architecture •Developed like a library •Easier testing •Maintainable
  15. 15. Images
  16. 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. 17. Different Pixel Densities Different Image Resolutions
  18. 18. Use SVGs • Use react-native-svg • Optimize svg using something like svgo
  19. 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. 20. https://transform.now.sh/svg-to-react-native Automate It
  21. 21. 40-50% size reduction on replacing png with SVG
  22. 22. Performance
  23. 23. InteractionManager.runAfterInteractions InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); Runs code after the current animations have finished
  24. 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. 25. InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); requestAnimationFrame(() "=> { "// ""...task""... }); VS
  26. 26. Long Lists •Don’t use ScrollView •Use FlatList or SectionList •They use VirtualizedList internally
  27. 27. Debugging
  28. 28. Open DevtoolsRefresh on file Change Update Changed Code Inspect components & Touchable areas FPS Monitor
  29. 29. Better Debugging (Inspect + Devtools + Redux) react-native-debugger
  30. 30. •Use default debugger unless it isn’t useful. It’s fast •Turn off network monitoring if you don’t need it
  31. 31. Live Reload • Reloads the entire page. • State is lost. • Updates the changed code. • State is not lost. Hot Reloading
  32. 32. Debugging on Device adb shell input keyevent 82
  33. 33. Dev Mode Tap multiple times to enable dev mode
  34. 34. 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
  35. 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); onClick this.devModeStream.next(event);
  36. 36. Releases
  37. 37. beta beta_native master JS only changes Native + JS Changes Codepush Play Store 2.1.x 2.x.0
  38. 38. Minor (2.5.x) Major (2.6.0) All PRs that will go in CodePush Update Native release Beta Beta Native
  39. 39. Release Cycle Native OTA Fortnightly Bug Fixes - Instantly Features - Weekly
  40. 40. Keep in mind "react-native-image-picker": "^0.26.7" Don’t do this or your OTA might break your app.
  41. 41. Expo
  42. 42. Getting Started Scan a QR code Open a Link
  43. 43. Online expo editor https://snack.expo.io/
  44. 44. Native Features
  45. 45. Thank You @ritz078

×