What is New Design?
In the new architecture of React Native, there are as yet three threads however planned in a manner to make them as performant and proficient as could be expected.
The principal fundamental idea that is utilized is, presently the undertakings are isolated into a state of harmony and async rather than just async.
It empowers us to play out the significant UI tasks first and in a state of harmony with the edge pace of the mobile screen.
Along these lines, supreme no edge is dropped as the assignments are executed in a state of harmony with the client connections (high need).
Additionally, as any string can draw out the progressions in the Shadow string (synchronized with the principle thread for need undertakings), it would need to be made changeless to have consistency and stay away from stops.
The other significant idea which would extraordinarily lessen the memory utilization is utilizing references rather than a totally different duplicate of the DOM hubs.
This is useful in having predictable and proficient DOM hubs. Additionally with the reference, we can play out any activity that we would have finished with its duplicate yet in a lot speedier way.
As the React Native group is dealing with the new design, there have been a couple of terms used to portray the different pieces. This post plans to explain a portion of the terms and focuses on these terms.
The Bridge
In the present design of React Native, the correspondence among JavaScript and Java/Objective C occurs over “the bridge”.
- This bridge is a queue that sends messages in encrypted form as JSON strings among JavaScript and Java/ObjC. During each tick, we remove messages from the front of the queue and process them. This process is asynchronous.
- The bridge will enable an interface for Java/ObjC to plan JavaScript execution, normally utilized for callbacks from Native Modules.
- The bridge is likewise attached to the lifecycle of React Native. Beginning or halting React Native typically implies that the bridge is introduced or destroyed.
JavaScript Interface (JSI)
Rather than utilizing the extension for queued messages, the new architecture permits us to straightforwardly “invoke” Java/ObjC strategies.
A similarity would be the manner by which we call DOM techniques from JavaScript in the program.
For instance, in the articulation var el = document.createElement(‘div’); the variable el holds a reference not to a JavaScript object, but rather to an article that was perhaps started up in C++.
At the point when JavaScript calls el.setAttribute(‘width’, 100), we end up simultaneously conjuring the setWidth technique in C++ that changes the real width of that component.
In React Native, we can comparably utilize the JavaScript interface to conjure strategies on UI Views and Native Modules that are carried out in Java/ObjC.
Also Read: 6 Reasons To Know Why React Is Popular?
Fabric
Fabric is the new React Native design proposed by the community to make the mobile application client experience superior to the native applications. That’s why the majority of the apps developer companies use fabric frequently
Actually, like Fiber design in ReactJS has incredibly improved the execution, Fabric is to be placed in a similar way to improve the exhibition and proficiency of the application.
Most important principle of fabric are:
Prioritizing the Tasks
As we as a whole realize JavaScript treats all async occasions as something similar and the entirety of the occasions/measures are dealt with similarly as far as asset allotment yet with the Fabric engineering, client cooperations, for example, looking over, contact, hold, signals and so forth will be focused on and will be executed simultaneously in the fundamental string or local string.
While different undertakings, for example, API solicitations will be executed asynchronously.
Unchanging Shadow Tree
As any string can demand a change so this turns out to be vital for us to have steady information or DOM chain of command.
To accomplish this, the shadow tree should be permanent. With this, it will not make any difference where the progressions are coming from as long as our tree is predictable with any remaining string that it is being imparted to.
This is a vital idea that would guarantee that there would not be any gridlock condition autonomous of a simultaneous or asynchronous solicitation.
Decreasing Memory Consumption
We have found in the current design that we need to keep two progressions/DOM hubs i.e inside Shadow string and JavaScript string.
This includes a great deal of memory utilization, almost twice what it ought to be. So another idea is acquainted with keep a solitary duplicate of it in the memory while different strings, for example, JavaScript would just have a reference of it to play out any tasks.
CodeGen
In both TurboModules and Fabric, interface available to JavaScript could be defined using Flow(or Typescript).
We can further leverage this interface definition to generate many of the C++ classes and the interfaces/protocols for Java/ObjC implementations.
For example, in the case of TurboModules, the C++ class that wraps the Java/ObjC class and exposes the methods using a JSI object can be generated.
This will ensure that all JavaScript calls have implementations available on the native side and will continue to ensure this with over-the-air updates like code push.
Conclusion
As far as backward compatibility, the greater part of the JavaScript application code doesn’t need to change because of the new engineering.
The Java/ObjC code composed for custom View Managers or Native Modules should change, however a large number of them can be code-modded to utilize the new framework.
A similarity layer can likewise be composed that will let custom View Managers and Native Modules to keep working in the new framework.
As far as timetables, the vast majority of the JSI code has effectively arrived in the archive at the hour of composing this post.
A great deal of the Fabric code is likewise in the storehouse, and updates to TurboModules keep on carrying out.
Since this is a for the most part in reverse viable, there doesn’t need to be a solitary date of delivery, however to a greater degree a continuous rollout. You can follow the React Native archive and the issues about Fabric and TurboModules for refreshes.