Metro Bundler in React native

React native is a platform on which we can make both Android and IOS apps with a single code base and its community is growing day by day exponentially. So if you are a keen learner and want to know whats going on behind the scenes of React Native and what magic is actually making things work on screens then you are at a right place. (Y)

If you have ever noticed “Running Metro Bundler” written while running node server by ‘ npm start’ after building an app through CLI by ‘react-native run-android’ or ‘react-native run-ion’, and wondered what is this Metro written in the terminal?

No worries! go along and i will show you the basic functionalities of Metro bundler and hows is it supporting react native framework.

What is Metro?

Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro. Metro is launched along with the node server that is being run by doing ‘npm start’ and we can see BUNDLE written in green box in the image above which shows the Bundling of files everytime we run a new project or reloads a current one.

How Metro helps React Native?

The packager does a few things:

1.) Most important feature of Metro is to provide the Sub-second reload cycles as they add and debug app UIs very quickly in matter of seconds thus you dont have to wait for the whole app to restart and start working. Similar feature is integrated in the Flutter library which is also a cross platform tool for building mobile apps.

2.) Another feature is to provide fast startup to the app on the device/emulator by providing quick bundling speed.

3.) Metro combines all javascript code into a single file and translates any Javascript code that device wont understand ( like JSX or some newer javascript syntax )

4.) Metro convert assets ( eg PNG files ) into objects that can be displayed by an ‘Image‘ component.

Thus we can say that some of the most important and cool features that provides react native developers a good developing experience are because of Metro Bundler.

How Metro works or does bundling process?

Metro has three separate stages in its bundling process:
Resolution
Transformation
Serialization

Bundling Process

Resolution
Metro needs to build a directed graph of all the modules that are required from the entry point to start the building process. To find which file is required from another file Metro uses a resolver. For eg to understand better if we have an app with multiple screens then Navigation libraries make a directed map of screens according to their order, in similar way Resolution maps javascript files in an order.
As shown in graph above this stage happens in parallel with the transformation stage.

Transformation
All modules go through a transformer. A transformer is responsible for converting a module to a format that is understandable by the target platform (eg. React Native). Transformation of modules happens in parallel based on the amount of cores that you have.

Serialization
After going through transformation process and converting modules into accessible format they will be serialized. A serializer combines the modules to generate one or multiple bundles. A bundle is literally a bundle of modules combined into a single JavaScript file.

To read more about bundling or how Metro works please visit https://facebook.github.io/metro/en/ and go through their docs. You can also contribute to their Github repo: https://github.com/facebook/metro

Create and solve issues. Have Fun!

Summary

Metro is a great packager used by React native library and is making many cool stuff possible within seconds of execution time. React native has still to travel a long journey to reach to the top of this industry with a exponentially increasing competition from its competitor Flutter.

Development and improvements in such libraries will make roots of React Native stronger and will give strength to emerge among possible competitors maybe not now but when the Nights will be Darker and Full of Terrors!!