Re.Pack in React-Native
For many years, react-native developers used to build react-native apps with metro bundler (by default). Every time we run a react native project, a compilation of many javascript files is done into a single file with metro bundler. This one single file (index.bundle.js) is located on the device itself on which we are building our app.
How if we can have more control over this bundle?
How if we can decide when or what bundle will be loaded on our react-native app?
How if we can integrate many app bundles into one single app?
This question will lead us to find an alternative for this metro bundler. And it’s called Re.Pack
What’s Re.Pack do?
Re-pack is webpack-based toolkit to build your React Native application with the full support of webpack ecosystem. So basically Re-pack try to replace your previous single bundler in React Native, with webpack bundler (including all ecosystems inside the webpack)
The main feature of Re.Pack is Webpack and its ecosystem of loaders, plugins, and support for various features like symlinks, aliases etc, which gives us more control in our react-native bundler.
Why do we use the Webpack bundle ?
There are so many cool features that we can use with webpack bundler. Like :
Code-Splitting
We can use it for code-splitting React-Native Apps. Instead of just loading all the features inside our apps with a single bundler (metro), Users can only load what they want to use and see only. It will increase our app's performance, and reduce the size of the app.
Module Federations
Module Federations is a new feature in Webpack 5, this is really Cool !
The Module Federation approach allows to create micro frontends, which are built using separate/dedicated Webpack compilations from the same (monorepo) or different codebases.
In this above, we have 2 Apps and 1 Super App that contain App 1 and App 2. The best part of this Module Federations is App 1 and App 2 can still run independently, but also can run / load on the Super Apps.
So we can still install App 1 on our phone, we can still install App 2 on our phone, and we can…of course…install Super Apps on our phone also.
If App 1 develops a new feature and is deployed to productions (update the bundle on the cloud server), it’ll update App 1 inside the Super Apps. Really Cool!
After 2 Months we do research about Re.pack and successfully create a super apps example in our project, We want to share the lesson that we learn while doing this Re.pack POC :
- We must read the documentation step by step here : https://github.com/callstack/repack
- We must understand how to set up the webpack file config in our project. You can see in here: https://webpack.js.org/concepts/
- We must take care of our 3rd party library that has related dependencies with Babel
4. We must take care our shared 3rd party library with the host (super App)
5. Always remember that every native feature like GPS, Notifications, Permission is belongs to the host / Super Apps
Last, but not least…
This is some playground that you can use for test the super apps : https://github.com/zamotany/module-federation-repack
Happy Coding Guys !!!
