Role of 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?
How Metro helps React Native?
The packager does a few things:
- 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.
- Another feature is to provide fast startup to the app on the device/emulator by providing quick bundling speed.
- 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:
As shown in graph above this stage happens in parallel with the transformation stage.
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.
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!
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!! ;)
If this blog has ever helped you in any way then dont forget to give a Clap!! Thanks!