One Application - Multiple Processes - Deepstash
One Application - Multiple Processes

One Application - Multiple Processes

Every process has one or more threads. And a program can actually be made up of many processes. In the example above, you’ll notice that it says Google Chrome (44). This means that Google Chrome is actually running 44 different processes. Processes in a single program are referred to as child processes. A program that uses multiple processes is referred to as multi-processed.

1

STASHED IN:

5

TL;DR how threading is working in React Native and the solution of handling data flux for a like button and its counter

STASHED IN:

5 Comments

MORE IDEAS FROM Handling threads in React Native and Data Flux

React Native is Multi-Processed

Instead of running multiple threads, React Native runs multiple processes. 3 main processes run in React Native. (Even if they are called threads)

  1. UI Thread
  2. JS Thread
  3. Render Thread / Shadow Tree

2

STASHED IN:

5

Intro

Thread. You can think of a thread as a set of instructions to be executed by the CPU. A thread is a component of a process.

Process. A process is a program that is running. For example, the browser (perhaps Google Chrome, Safari, or Firefox) you are using to view this article is a process.

2

STASHED IN:

5

Single-threaded means that a process is designed to have only one thread of execution. This means only one set of instructions executes at once.

Multi-threaded means that a process has two or more threads. So it can execute multiple instructions simultaneously.

As a multi-threaded program, several instructions can run at a time. Let’s pretend this program has two threads. So, the program can run two instructions at a time.

1

STASHED IN:

5

Because React Native is single-threaded, if you have a process that has many responsibilities, you can have performance problems. Imagine you have a process responsible for rendering a video on the screen and a live feed of comments on the video. The video rendering could block the live feed from updating correctly, or the live feed could cause stuttering in the video.

2

STASHED IN:

5

Problem With Animations

If animation run on JS Thread then for each frame the JS Thread will send serialized data on Bridge to the UI Thread. This will result in something similar with real life traffic jam where we have the bridge and the cars(code for each frame).

In addition of this imagine also doing a network request and a dispatch for global state, the JS Thread would be more busy resulting in even more lag.

A very good solution for running animations on UI Thread is react-native-reanimated which also give the opportunity to run any piece of JS code, not only animations.

1

STASHED IN:

5

Solution Animation + Data Flow

Imagine having a like animation and a counter. When the like is pressed the counter should increment.

A person using the interface doesn’t know about how data flux is designed, what is a network request. The person just expects the heart to be colored immediately.

As React Native is single-threaded, the best approach is to run animation on UI Thread(color the icon + update the counter) and only when the animation is finished run on JS Thread the rest of the work as updating state and sending a network request. In this way the counter is not waiting for request, the whole interaction is on UI.

2

STASHED IN:

5

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA

They started with iOS and when Android release was ready, took them only 2 days to build.

However, they immediately stopped after identifying various issues such as poor performance of touch events and lack of 64-bit support .

Though they thought React Native was ideally for iOS.

2

STASHED IN:

5

Testing in React Native

As your codebase expands, small errors and edge cases you don’t expect can cascade into larger failures. Bugs lead to bad user experience and ultimately, business losses. One way to prevent fragile programming is to test your code before releasing it into the wild.

There is more value in testing than you might realize. One of the best ways to fix a bug in your code is to write a failing test that exposes it. Then when you fix the bug and re-run the test, if it passes it means the bug is fixed, never reintroduced into the code base.

4

STASHED IN:

7

STASHED IN:

0 Comments

Some of the main disadvantages of the current structure
  • There are two realms: JS and Native which are not really aware of each other and do not share the same memory
  • The communication is async through the bridge between the two realms
  • It is slow to transfer large chunks of data. Since the memory is not shared, all the data passed between js and native is a new copy
  • No way to update the UI in a sync way.
  • The library repo is HUGE. It makes the library heavier and also making it slower to contribute code from outside or release new fixes

4

STASHED IN:

2