Having a single page application limited to single view does not do justice to many popular social media websites like Facebook, Instagram which render multiple views using React today. We need to move ahead and learn how to display multiple views in our single page application.
For example, we are used to seeing a home page which displays welcome message and related content. The site’s background details can be found on the ‘About Us’ page, a list of users and their details are listed on a different page and there might be various other pages to include several different views.
The main difference between Ionic and RN is the how UI is rendered. In Ionic, it is by a WebView like a common web page, while in RN, it is drawn with native frames. Thus, RN based Apps are more responsive as they are faster.
In a project manager’s view, RN is more flexible as self-defined module and UI components are easier to create, but it requires more native knowledge from developers. Ionic is faster as existing web UI components can be largely reused. So Ionic is a less expensive option compared to React Native, but it is more limited in both performance and flexibility.
React has a Virtual DOM object, for each DOM object which acts as a representation for that original object. While updating DOM virtual DOM acts as the middle layer and only updates real DOM when there are any changes to virtual DOM. In that case react will update only the updated components and not the entire DOM.
How React Native works?
The Virtual DOM in React
In React, the virtual DOM acts as a layer between the developer’s description of things ought to look and work done actually to render them onto the page. To render interactive user interfaces in a browser, a developer must need to edit the browser’s Document Object Model(DOM). This process is a little bit expensive, and excessive writes to the DOM leads to the performance errors. Rather than directly rendering changes on the page, React computes the necessary changes by using an in-memory version of DOM.
Extending the Virtual DOM
The Virtual DOM certainly has performance benefits, but its real potential lies in the power of its abstraction. What if React could render to a target other than the browser DOM? Why should the React be limited to a browser? React “understands” how your application supposed to look like. The conversion of that ideal to actual HTML elements on the page should be replaced by some other step. During the first two years of React’s public existence, some spectators noticed this intriguing possibility. For an instance, Netflix modified React, so that they could render a huge variety of platforms including televisions and DVD players. Then at React conference, Facebook has announced a new library called React Native that does same for iOS and android, allowing React to render natively on mobile platforms.
What does it mean to render natively? In React for the web, this means it renders to browser DOM. With React Native, native rendering means, it renders using native APIs for creating views.
WHY USE REACT NATIVE?
One of the first thing people ask after learning React Native is, how it relates to standard, native platform development. How should the user make the decision of using React Native or not?
– At the beginning, Facebook only developed React Native to support iOS. However, with its recent support on Android operating system, the library can now render mobile UIs for both the platforms.
React is still new but it’s maturing quickly and Facebook has stated its plans to continue investing its growth.
- It offers third-party plugin compatibility and less memory usage: Third-party plugins means a user need not rely on a WebView for certain functions. For instance, if you are adding Google maps functionality to your app, React Native app let’s the user link the plug-in with a native module, so, the user can link-up the map with the device functions like zoom, rotate, and the compass by using less memory.