Explore the technical guide to super app development
The first stop on our journey to super app development – a step-by-step guide that will allow you to discover the theory behind the super app project and build a super app from scratch. The guide focuses on two scenarios: building a super app from scratch and migrating your app to a super app setup.
Discover Re.Pack – a Webpack based toolkit for React Native
Re.Pack allows you to build a React Native app with the full support of the Webpack ecosystem. As an open-source library, it is regularly updated, and you don’t need to invest your team's time and effort into maintaining custom solutions.
See our super app demo
We’ve put the theory into practice to give you even more insights into what super app development is all about, we’ve put together a case study of the super-app-showcase, a prime example of a repository demonstrating how to structure a super app when working with Re.Pack.
How do you start building a mini app?
Check out the “Building a super app from scratch” section in our Step-by-Step Guide to Super App Development that should provide you with a basic understanding, or go ahead and have a look at our super-app-showcase that provides a more robust example of the super-app inside a monorepo.
What technologies should we go for when building super apps?
When creating a cross-platform super app with React Native, Re.Pack is the only solution that enables you to achieve that. It allows you to leverage Module Federation for code sharing and modular architecture. Beyond Re.Pack, any React Native library that fits your specific requirements and use cases should be compatible with your super app, enabling you to build a powerful, feature-rich, and well-integrated application.
What are the alternative approaches to super app development?
Alternatives include Play Feature Delivery for Android, and WebView for iOS. If your app is not constrained by the size or team velocity issues, you can also go with regular app development. We focus on Re.Pack because this approach allows you to enjoy the most benefits compared to other tools, for example, the ability to reuse features across apps, smaller JS bundle size, OTA updates, time and cost-effective development experience, and potential to leverage third-party contributors.
Are mini apps and micro frontends the same?
Micro frontends are a modular frontend architecture for the web, while mini apps are small and often self-contained applications within a super app, typically for mobile platforms. They are related but not the same. Mini apps embrace the concept of micro frontends within them. You can think about mini apps as micro-frontends for mobile apps.
What are the prerequisites for transitioning into super app development as an organization?
If you are keen on adopting the super app architecture, it’s crucial to ensure the development team has the necessary skills or provide training on super app concepts and best practices. Establishing clear goals and vision for adopting the architecture will also come a long way. You should first make sure your organization actually needs this kind of architecture. You’ll know it when you hit certain issues with scaling teams working together on the same product.
What's the most efficient and non-disruptive way of moving from traditional mobile app development to super app-related architecture, tools, and processes?
To efficiently transition to a super app-related architecture, analyze the current app to identify components suitable for mini apps. Develop a phased migration plan, first focusing on low-risk or easily separated components. Ensure the team is well-trained by providing resources and workshops on super app concepts and best practices. Throughout the process, monitor progress and address challenges to maintain a smooth and non-disruptive transition.
How can I ensure safety when working with third-party developers?
How do super apps relate to OTA?
Super apps and OTA (Over-The-Air) updates are related to app maintenance and deployment. Super apps, with their modular architecture and mini apps, allow for more granular updates and easier maintenance. OTA updates enable developers to directly deploy these updates, including those related to mini apps, to users' devices without the app store review process. Combining super apps with OTA updates results in a streamlined process for maintaining and improving app features and user experience.
How do you communicate and evangelize super app development to the developers?
Show them super-app-showcase. Make them play with it. Your team will usually know when they need this kind architecture. It will happen when you hit scaling issues – having multiple teams contributing to the same app, dealing with conflicts and shared release pipeline issues.
What approach to super app development can you adopt?
Digital products come in all shapes and sizes, which is why the common answer to many questions in software development is “it depends”. Super app development is no different, as depending on your preferences, you can choose from the following approaches:
- Native Android application with Feature Delivery
- Native iOS application with WebViews
- Cross-platform React Native application with Metro
- Cross-platform React Native application with Webpack and Re.Pack
At Callstack, though, we recommend going for the latter because it proves to be the most beneficial. Compared to other tools and solutions available on the market, Re.Pack allows you to enjoy:
- reusable features
- smaller JS bundle size
- OTA updates of on-demand features
- time and cost-effective development experience
- ability to leverage third-party contributions
If you’re wondering how it works in practice, we encourage you to check out our super-app-showcase.
What exactly is Callstack’s super-app-template?
Our super-app-showcase is a repository demonstrating how to structure a super app when working with Re.Pack and Module Federation to achieve the best business results. It highlights various solutions and best practices developers can employ to tackle challenges and streamline the super app development process.
The super-app-showcase comprises:
- the host app, which is the main container for the micro-frontends
- the shell app, which functions like a blueprint of the host app with shared dependencies
- a few mini apps, each dedicated to a single service booking, shopping, dashboard, and news – the latter being stored in a separate repository.
You can learn more about the architecture and the intricacies of the template from the case study published on our blog.
How does super app development with Callstack template influence your team’s work and developer experience?
By definition, a super app is built as a platform “to deliver a mini apps ecosystem that users can choose from to activate for consistent and personalized app experiences.” This modular approach allows a large development team to split into smaller squads, each focused on a respective mini app, and enables third-party contributions to be seamlessly integrated into the final product.
When implemented right, such a workflow may lead to greater flexibility, independence, and development speed. Among the steps to optimize developer experience in the super app setup, there are:
- creating and exposing a sandbox environment that closely resembles your host app, like the shell app in our super-app-template,
- if need be, creating an SDK that contains common and repeatedly used elements,
- organizing the codebase into a monorepo, which is an optional step.
Using Re.Pack and our super-app-template to build your super app makes the application of these tips in developers’ work much easier.
How much time can we save on super app maintenance?
Adopting a super app can significantly reduce maintenance time by enabling code modularity, smaller codebases, better scalability, and improved testing. The exact time saved depends on the app's size, complexity, and development efficiency will be extended by the time dealing with shared dependencies.
How much faster can we release super apps and their updates compared to traditional mobile apps?
In comparison to the traditional deployment, where you would have to go through the AppStore/PlayStore review process every time you would want to change the app. While this can be mitigated with an OTA solution like CodePush or Expo Updates, Module Federation gives you more granular control over what gets updated. It depends on how your product delivery pipeline is organized and whether the app has OTA set up. What’s worth noting is that releasing full features will usually require AppStore/PlayStore submission for compliance. However, thanks to mini apps being independently deployed and versioned, particular feature/mini app teams have the potential to move significantly faster with fewer chances of being blocked by other teams lagging behind the release schedule.
How quickly can we build a mini app draft to check how the technology behind it works?
While the setup of Re.Pack and Module Federation inside your project is relatively simple, It’s hard to say how long it might take as it all depends on what you want to include in the draft as well as the complexity of your own setup. If you would like to see how such a draft might look like you can try the super-app-showcase we prepared.
How fast can you ship and deliver features?
With super app architecture in place, you can ship bug fixes and some of the features much faster when compared to a traditional mobile app. When it comes to bigger features, you will have to submit your app for another review in the AppStore/PlayStore to stay compliant with the store policies. Failure to do so might result in your app being taken off the store.
How fast can you release the super app and its updates?
The initial release of the super app will require you to submit your app for a review like a traditional mobile app with all of the mini apps enabled. When it comes to updating the app - it depends. As the super-app is divided into a host-app and mini-apps, if you would like to update the host-app you will have to go through the review process again, but for the mini-apps, it’s reduced to uploading them to a remote location like a CDN to make them available for download.
How does the accelerated speed of development translate into cost savings?
Accelerated development in super apps saves costs by reducing development time, enabling efficient resource allocation, improving code quality, and facilitating seamless updates. These factors contribute to lower personnel costs, higher productivity, and better customer satisfaction.