2min read

Modern applications with React native

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, and UP by enabling developers to use React along with native platform capabilities. React Native uses the same design as React, allowing you to compose a rich mobile UI from declarative components. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app", you build a native app.

By Isidoro Allegretti

Marketing and sales

16 January 2023

Applications development concepts in React

React is a framework that gives the developer a set of components such as containers, texts, images or lists with a graphical interface which, if nested together, constitute the different facades of an application.The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via serialized data over an asynchronous and batched bridge.

Some advantages

We identify:

  • The specificity of the components: In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps.

  • Fast refresh mechanism to immediately see the changes made by the developer. See your changes as soon as you save

  • Optimized Code Generation: using the Metro Bundler, React Native speeds up the development process by generating optimized code.

  • Improved Batching and Caching Behaviours: React Native helps to improve the performance of an app by improving the way batching and caching behaviour is done.

  • Dynamic Delivery System

When the challenge gets harder

If we need to develop applications with a dynamic import or with different independent services such as real-time chat, payment systems or access to the calendar, re-pack comes to our support. Re.pack is toolkit using Webpack 5 which allows the creation of advanced structure applications such as dynamic import, micro frontend and superapp.

Re.pack

React Native environment and Browser environment have differences. React Native needs to run additional JS setup/init code so that it's usable at all. There's a great discrepancy between available APIs. In React Native we also have platform-specific files — e.g.: .ios.js.android.js and so on. Putting all the above together makes Webpack unable to produce bundle at all due to build errors and then the bundle produced by Webpack is unusable by default. Therefore, we need to make changes to Webpack configuration and change how and what Webpack puts into the final bundle. All these necessary changes are encapsulated inside Re.Pack in form of Webpack plugins.


Share

About Author

Isidoro Allegretti

Marketing and sales

Graduating in digital humanities at the University of Pisa. Passionate about technology and martial arts.

Extendi logo

Enabling Digital Innovation

Newsletter

Get periodic updates, the best insights and some precious tips.

Language

Italiano

|

English

Copyright © 2022 · Privacy policy

P.iva 06304560482