React Native announces re-architecture of the framework for better performance

Why React Native

5 years ago when React Native was announced at React.js conf 2015, Facebook opened the doors for web developers and engineers who wanted to take their existing skill set into the world of mobile development. Since then React Native has been nothing short of a phenomenon. React Native has come a long way since then, becoming the 13th most popular open source project on Github.

React Native came with the promise of revolutionizing the user interface development process with its core set of cross-platform UI primitives, and its popular declarative rendering pattern. Previously, there have been many frameworks which branded themselves as “Cross-Platform” like Ionic and Cordova, but simply put, they just rendered inside a web view, or an “HTML5 app,” or a “hybrid app.” These apps lacked the native feel of an Android/iOS app made with Java/Swift and led to a terrible user experience.

React Native, on the other hand, works a bit differently where the User Interface(UI) components are kept in the native block and the business logic is kept in the JavaScript block. At any user interaction/request, the UI block detects the change and sends it to the JavaScript block, which processes the request and sends back the data to the UI block. This allows the UI block to perform with native experience since the processing is done somewhere else.

The Dawn Of A New Beginning

As cool as these features may sound, working with React Native is quite difficult. If there is a feature that you need to add that is not yet supported by the React Native library, developers have to write their own Native Module in the corresponding language, which can then be linked to the React Native codebase.

There are several native modules which are not present in the ecosystem like gesture-handling and native navigation. Complex hacks are required to include them in the native components. For apps with complex integration between React Native and existing app code, this is frustrating.

Sophie Alpert, Engineering Manager at Facebook, mentioned in a blog post named State of React 2018, “We’re rewriting many of React Native’s internals, but most of the changes are under the hood: existing React Native apps will continue to work with few or no changes.” This comes with no surprise as clearly Facebook cares about developer experience and hence decided to go ahead with this architectural change with almost no breaking changes. A similar move which was applauded was when they transitioned to React Fiber.

This new architectural change is in favor of making the framework more lightweight and better fit into existing native apps involving three major internal changes:

New and improved threading Model

It will be possible to call synchronously into JavaScript on any thread for high-priority updates while keeping low-priority work off the main thread.

New Async Rendering Capabilities

This will allow multiple rendering priorities and to simplify asynchronous data handling

Lighter and faster bridge

Direct calls between native and JavaScript are more efficient and will make it easier to build debugging tools like cross-language stack traces.

Along with these architectural changes Facebook also hinted to slim down React Native to make it fit better with the JavaScript ecosystem. This includes making the VM and bundler swappable.

React Native is a brilliantly designed cross-platform framework which gave a new dimension to mobile development and a new hope to web developers. Is this restructuring going to cement its place as a top player in the mobile development marketplace? Only time will tell. Till then you can read more about the upcoming changes on their official website.

Is React Native is really Native framework?

Building VR experiences with React VR 2.0

Jest 23, Facebook’s popular framework for testing React applications is now released