What is Metro in React-Native?


Whenever anyone tries to run the react native platform, an extensive compilation of JavaScript files gets arranged together in a single file. This compilation is done through a bundler called metro.

Metro is a well-accepted Java script bundler with many options, including an entry file that provides you with a Java script file along with all the previous files.

Let us look at the functionalities of the metro bundler and how it has been supporting the react native framework -

How Does Metro Help in React Native Development?

One essential feature of the metro is the sub-second reload cycles. This feature adds and debugs the app UIs in a matter of seconds, where you usually don't have to wait for the app to restart and start working.

The second most useful feature of the metro application is providing a quick start-up to the apps and a fast-bundling speed.

Other key features are-

  • All the JavaScript codes are combined into a solidary file through the metro. It even translates any JavaScript codes that your device might not understand.

  • Metro has another unique feature that allows you to convert assets into objects you can portray through an image.

How Does Metro Work?

Let us now look at how metro goes through the bundling process. It has got three separate stages for it -

Resolution

For the very first stage, the metro needs to build a directed graph consisting of all the modules in it which are required from the entry point to initiate the building process. Metro uses a resolver to help you navigate different files and locate which should be used. Let us take an example to help you understand it better, considering you have an app that has multiple screens. Then the option of navigation libraries will provide you with a direct map of all the available screens in perfect order. Like that, the resolution will help you map all the JavaScript files in a coordinated manner.

Transformation

The second stage comprises all the modules going through a transformer. The function of the transformer is to convert the module in such a way and format that it becomes easily understandable for the target platform like react native. This transformation process is parallel based on the total number of available cores.

Serialization

Soon after the transformation process is completed, the converted modules will be accessible through serialization. The serializer combines all the modules to create single or multiple bundles, which are all bundles of modules combined into a file of JavaScript.

A step-wise guide to how Metro works

For the first step, let us look at app development through working with bundles in the metro.

App Development

During the application's runtime, javascript might serve up a bundle through metro via the user's app. And using an HTTP request and unique user code, the bundle will pick up the signal and automatically run the JavaScript. Coincidentally it is a usual scenario during the process of app development.

However, it creates a good separation between the developer's box and the test machine, considering it is a mobile device.

Subsequently, the part serving up the bundles shows how fast the refresh has been working. For instance, if you decide to change the JavaScript metro produces a unique patch for it and sends the same to the bundle through another HTTP request. When you receive this patch, you can apply it to the current bundle.

Thus, it will give you an idea of slick the refresh has been working and if your app has probably accepted all the changes or not.

Producing Offline Bundles For A Release

If you want the bundle to be inserted directly into your application as a resource, then it can be done through an offline bundle. For creating an offline bundle, metro takes the initiative and produces a bundle considering it a part of your application.

However, the bundle is loaded directly through a user code as if there is no option for requesting through an HTTP server.

The native apps mainly consist of JavaScript applications, which often become a headache for the developers who need to debug those JavaScript. Let us look at some basic ways through which you can complete this debugging process seamlessly: -

Debugging Through Web

The initial JavaScript bundle wouldn't be running in the client process for web debugging. Web debugging is carried out through two methods, but before you use those, you need to relaunch the app in debug mode.

Debugging Through Chrome

For this debugging method, you would use the tools available in chrome to carry out the debugging process. Whenever you decide to launch the metro, a new tab will navigate you to a specific URL from where you can carry out the process of debugging. Upon reaching there, you can click on the F12 button and start using the debugging tools there.

Debugging Using VS Code

Suppose you are writing your JavaScript in VS code. Then debugging it would be the best option. But first, you would need to install the debugging react native tools available for debugging.

Debugging Directly

If you are looking to debug your offline bundle, then doing it might be the best option. While the JavaScript is running directly through the client process, the JavaScript also gets debugged.

Conclusion

To summarize everything, using metro would be a great way to use in react native platform through which you can execute many different tasks in a matter of seconds. Hopefully, after reading the above article, you now understand the role of the metro in building native applications.

Updated on: 07-Dec-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements