arrow icon
REGISTER

A Step-By-Step Guide to Super App Development

2023-04-12
Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

With the number of active mobile users growing and the consumers' demands for smooth mobile-first experiences strengthening each year, it’s no surprise you’re considering jumping on the super app bandwagon. After all, super apps come with a number of benefits for both users and the businesses behind them.

To help you take the first step, we’ve put together some tips for developing a super app from the tech perspective. As businesses and their products come in all shapes and sizes, we’re focusing here on two scenarios:

  • building a super app from scratch,
  • migrating your solutions to a super app setup.

Speaking of different shapes and sizes, when creating a super app, you can choose from a couple of different approaches, including: 

  • 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

In this article, we’ll be focusing on the latter, not only because we’re the people behind Re.Pack, but primarily because this solution allows you to enjoy the most benefits compared to other tools. Building your super app with Re.Pack means 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 – these perks pretty much speak for themselves.

Now let’s get down to the super app development business, shall we?

Building a super app from scratch

For the sake of this tutorial, we’ve prepared an example repository with two apps inside one monorepo, namely <rte-code>HostApp<rte-code> and <rte-code>MiniApp<rte-code>. You can find the repository with the example here

The <rte-code>HostApp<rte-code> is a simple app with <rte-code>HomeScreen<rte-code> and a <rte-code>DetailScreen<rte-code>, which you can reach via a button on the <rte-code>HomeScreen<rte-code>. <rte-code>MiniApp<rte-code> is similar, but has a button that navigates to the <rte-code>GalleryScreen<rte-code> with a list of pictures. 

For now, those are two separate apps that have nothing in common with each other and run independently. Each app has its own navigation with a few screens. Our goal in this part will be to bring the <rte-code>MiniApp<rte-code> into the <rte-code>HostApp<rte-code> using Re.Pack and Module Federation

Why this combination of technologies? Re.Pack is an Open Source toolkit that allows you to build React Native apps with the support of the Webpack ecosystem. Thanks to supporting Module Federation ever since the 3.0 version, it’s particularly fit for developing mobile applications that benefit from code splitting – and super apps are a great example of those. 

Now that you get the gist of using Re.Pack and Module Federation to build a super app, we can get to the nitty-gritty. Let’s get started by cloning the repository:

Setting up Re.Pack in both HostApp and MiniApp

In both packages/host-app and packages/mini-app install Re.Pack with its dependencies:

Make sure to run <rte-code>yarn bootstrap<rte-code> from the repository's root to update the pods that come with those dependencies.

Now let’s make some adjustments to the setup. To make React Native CLI able to use Re.Pack commands (such as <rte-code>webpack-start<rte-code> or <rte-code>webpack-bundle<rte-code>), we will add the following content to <rte-code>react-native.config.js<rte-code> (or create it if it doesn't exist):

Having done that, let’s update our <rte-code>package.json<rte-code> scripts to reflect these changes. Edit the <rte-code>start<rte-code> script for both apps, so it utilizes new <rte-code>webpack-start<rte-code> command, which starts the development server for Re.Pack:

Now add <rte-code>webpack.config.mjs<rte-code> to each app in our monorepo. For now, we’ll start with a default template that will be modified along the way. You can find the ES Module template here or the CommonJS equivalent here. Either one will work just fine.

The last step of this part is to modify the scripts used for bundling the iOS and Android.

Open your application's XCode project/workspace and:

  1. Click on the project in the Project navigator panel on the left
  2. Go to Build Phases tab
  3. Expand Bundle React Native code and images phase
  4. Add export BUNDLE_COMMAND=webpack-bundle to the phase

Go to <rte-code>android/app/build.gradle<rte-code> in both apps, uncomment the line with <rte-code>bundleCommand<rte-code> in the react block, and modify it to use <rte-code>webpack-bundle<rte-code>:

That’s the basic setup for Re.Pack; try running the apps to see if everything works as expected.

Setting up ModuleFederationPlugin

Now it’s time to set up the <rte-code>ModuleFederationPlugin<rte-code>. Not long ago, you were required to do some hacky workarounds to get the Module Federation working with Re.Pack. Since the release of version 3.0, though, the <rte-code>ModuleFederationPlugin<rte-code> has been included out of the box. 

Let’s add a new instance of <rte-code>RePack.ModuleFederationPlugin<rte-code> to our <rte-code>webpack.config<rte-code> in the <rte-code>HostApp<rte-code>: 

We’ve added all our dependencies because they all have native code inside, and whenever a dependency has native parts, you must add it to the shared field inside <rte-code>ModuleFederationPlugin<rte-code>. 

Usually, when a node module contains <rte-code>android<rte-code> and/or <rte-code>ios<rte-code> directories, you should consider it native. When it comes to dependencies with only JavaScript in them, you can leave them out, and Re.Pack will take care of downloading them from the mini app. However, it is advised to also include them as you will reduce the overall network transfer when loading the bundles. 

We’ve also specified <rte-code>singleton<rte-code> and <rte-code>eager<rte-code> on them. 

<rte-code>Singleton<rte-code> means that only one instance of such a module will ever be initialized, which is a requirement for React and React Native. It is usually a good idea to make the dependencies with native parts <rte-code>singleton<rte-code> as well. 

<rte-code>Eager<rte-code>, on the other hand, means that the module is added to the initial bundle and will not be loaded later. All shared modules in the host app should be <rte-code>eager<rte-code>. In remote containers, it depends on the build configuration. When you want to run the app as a standalone, you need to mark all the shared dependencies as <rte-code>eager<rte-code> as well.

Having that in mind, let's add a similar configuration of the plugin to the mini app:

1. Inside webpack.config.mjs, let’s grab <rte-code>STANDALONE<rte-code> from the process.env

2. Now let’s add the <rte-code>ModuleFederationPlugin<rte-code> just like in the <rte-code>HostApp<rte-code>

3. Finally, let’s add a separate script to run webpack in our mini app in standalone mode and modify the previous start script to run on a different port (which will come in handy soon when we need to have both our development servers running at the same time)

<rte-code>STANDALONE env<rte-code> variable will help us to distinguish when we want to run the app as a separate entity or as a mini app. Currently, modules specified in <rte-code>shared<rte-code> will be eagerly loaded only when running the app on its own.

Setting up ScriptManager in the HostApp

The last part of the setup to get the <rte-code>HostApp<rte-code> ready to accept remote containers is to add the <rte-code>ScriptManager<rte-code>’s resolver. We need to tell our app where to find the mini app, and we’re about to do it now. 

Let’s add the following piece in the <rte-code>HostApp’s index.js<rte-code> on line 4 

As <rte-code>ScriptManager<rte-code> can have many resolvers, we need to return the configuration for the bundle only if we get a URL match. Implicitly returning undefined here means the <rte-code>ScriptManager<rte-code> should keep looking at other resolvers to find a proper match. In the example, the configuration contains info about the URL and platform, but many more options are available for the more advanced use cases.

Our basic Module Federation setup is now complete, and we can start connecting the two apps.

Using MainNavigator from the MiniApp in the HostApp

In this part, we will be going through the process of reusing the whole <rte-code>MiniApp<rte-code> inside our <rte-code>HostApp<rte-code>. The part we will need is the <rte-code>MainNavigator<rte-code> from the <rte-code>MiniApp<rte-code>, as we don’t want to have two <rte-code>NavigationContainers<rte-code> in our app. 

First, we must expose the <rte-code>MainNavigator<rte-code> from the <rte-code>MiniApp<rte-code> to be available for consumption in the <rte-code>HostApp<rte-code>. Let’s go to MiniApp’s <rte-code>webpack.config.mjs<rte-code> and expose it there:

You can expose the components to be consumed by adding them in the form of key-value pairs, where the key is the name used to refer to that component in the <rte-code>HostApp<rte-code>, and the value is the path to the component. Note that for this to work, we must use <rte-code>export default<rte-code> in our component.

Once we’re done with that, it’s time to import the <rte-code>MiniApp<rte-code> into the <rte-code>HostApp<rte-code>. Let’s create a new screen that will house the <rte-code>MainNavigator<rte-code> from the <rte-code>MiniApp<rte-code>: 

<rte-code>Federated.importModule<rte-code> takes two parameters: the name of the container and the name of the component that we want to import. As we want to load the component only when the user enters that particular screen, we need to put the import inside <rte-code>React.lazy<rte-code> and render it within <rte-code>React.Suspense<rte-code>.

To finish up, let’s add the <rte-code>MiniAppScreen<rte-code> to the <rte-code>MainNavigator<rte-code> in the <rte-code>HostApp<rte-code> and add a button to navigate to <rte-code>MiniAppScreen<rte-code> inside <rte-code>HomeScreen<rte-code>:

Now we should have a working <rte-code>MiniApp<rte-code> inside our <rte-code>HostApp<rte-code>. Go ahead and start both development servers using <rte-code>yarn start<rte-code> command in the root of the repository, and then let’s run the host app. If you choose to run the app on Android, remember to expose the port on the Android emulator to your machine by running:

Click on the newly added button to Navigate to MiniApp and enjoy your super app!

It’s easy to notice that after navigating to the <rte-code>MiniApp<rte-code>, we end up with two navigation headers. We can fix that by adjusting the header in the <rte-code>HostApp<rte-code> or exposing a navigator without the header; the decision is up to you.

Migrating to a super app setup

Migrating to a super app setup requires careful consideration and planning. Upgrading your existing setup with Re.Pack and Module Federation, as we’ve described above, shouldn’t pose problems in itself. However, it may become challenging in the context of your current project and the custom solutions it involves. In this part, we look at such challenges and cover a few key things to consider when turning your product into a super app.

Aligning dependencies

If you’re considering enriching your product portfolio with a super app, your codebase is probably already large enough to contain many dependencies. The biggest challenge lies in aligning the dependencies between respective apps, so they can be shared as efficiently as possible.

If there is an issue with one library or component, the federated module could suffer misaligned versions of libraries in the host app. Some tolerance is involved, as Re.Pack will try to fetch the missing dependencies by default, and runtime errors might not be the case. At the end of the day, however, Re.Pack will complain about version requirements not being met, albeit in development mode. 

When the package contains native code and the versions are not aligned, a runtime error will occur. To avoid that, it is a good idea to have an error boundary wrapper that prevents federated modules from crashing your host app and displays fallback components when such issues arise.

Assets handling

Another thing that’s vital to successfully migrating your app is handling the assets. When the mini app is embedded into the host app, it won’t be able to access its local assets, as they won’t be added to the host app asset’s registry in build time. You need to remember that this problem won’t manifest itself in development mode with dev-server – only when working with a static bundle produced by the <rte-code>react-native webpack-bundle<rte-code> command. 

Re.Pack offers two ways to deal with that. The first one, and by far the preferred one, is to handle the assets just like we do on the web, where our assets are first uploaded to a remote server (preferably CDN) first, and only then can be downloaded by the users. Re.Pack provides allows you to gather all the assets and modify the final bundle so that the production build can download them on demand.

These assets are now remote, so it might be necessary to include a placeholder to display while loading them. When working with remote assets, the only limitation is that the hostname of your CDN needs to be known at build time, so Re.Pack can generate the URLs for these assets.

Another alternative to consider is inlining all the assets from the federated module, so they are downloaded with the bundle itself. You can do that by adjusting the <rte-code>assetLoader<rte-code>’s options in the <rte-code>webpack.config.mjs<rte-code>, namely: setting inline to true. This solution has one major drawback: it significantly increases the bundle size. You might consider inlining some assets if you don’t want them to be publicly accessible on the web, or they are vital to a swift startup of your mini app, as they will be instantly visible to the user.

Sharing state across the app

When trying to create a super app from an existing app by extracting a certain functionality to a mini app, state management might become an issue. Until now, the state has been tightly coupled with the whole app. If you want your mini app to be a consumer of that state, it is necessary to address that problem. 

For the sake of this example, let’s assume we have a setup like in the first part of the article. To make our state management solution reusable across the board with mini apps and the host app, we could extract the shared state into a separate package. Depending on whether you would like to update the state part of the app over-the-air, you could make it into a federated module as well. Otherwise, this can be a statically imported module into both the host app and the mini app. 

If we specify this module inside the <rte-code>shared<rte-code> portion of the Re.Pack’s <rte-code>ModuleFederationPlugin<rte-code>, we will only have one copy of that module during the runtime of our super app. If that’s the case, we will be able to place the <rte-code>ContextProvider<rte-code> component in the host app and access the same instance in our mini app, having a shared state across the whole app.

These are just a few examples of challenges you might face when migrating to a super app setup. It’s hard to tell what you might run into, as every app is unique in its own way. Mind that Module Federation has been present in the web environment for quite some time, so if your problem is strictly related to the JS part of the app, chances are someone solved a similar problem already, and the concept might be applicable in the context of super apps.

Summary

We hope this article has shed more light on what it takes to develop a super app from the tech standpoint. Whether you’re up for building a super app from scratch or migrating your current solution into such a setup, it might turn out that your team needs some help to do it right. That’s why we’ve prepared a super-app-showcase. Use it to your advantage, and don’t hesitate to reach out to us if you have any questions about super app development.

If you’re looking for more organizational tips, we’ve also got you covered with a blog post about developer experience and planning the work of your in-house team and third-party contributors. We’ve also published a case study of a super-app-showcase that might significantly speed up your work.

Author:
Jakub Romańczyk
Software developer with a passion for React & React Native who loves to dissect and analyze every problem he encounters in his work. He has a particular interest in performance optimisation, tweaking and fine-tuning for optimal results. Enjoys hiking in rugged, scenic regions such as Scotland or Iceland.
arrow icon
MORE posts from this author
The super app landscape

What are super apps?

arrow-down

Super apps are multipurpose platforms that integrate a wide range of services and features to answer diverse user needs, all within a single mobile interface. Comprised of modular mini apps that users can activate at their convenience, super apps are the software equivalent of Swiss army knives that deliver a powerful mobile-first experience.

Super apps act as a one-stop shop for customers, allowing them to perform everyday tasks like shopping, paying bills, communicating, and more, all in one place. They’re a powerful tool for businesses looking to captivate users with what Mike Lazaridis, Blackberry founder who coined the term in 2010, defined as a “seamless, integrated, contextualized and efficient experience.”

A good example of such an all-round experience is WeChat, a multipurpose app developed in China. Its core features include messaging, localization, a search engine, a news feed, payments, loans, public services, transportation, and housing – and that’s by no means a finished list. It shouldn’t be surprising that the number of active users on WeChat is estimated to reach 1.102 billion by 2025.

What do super apps offer?

arrow-down

Super apps are made to meet the modern-day demand for smooth, convenient, all-encompassing mobile experiences. What makes them stand out, however, is the way they’re built and how they work. 

Ordinary mobile products offer a variety of features within a single application. Super apps, on the other hand, operate as a platform to deliver modular mini apps that users can activate for personalized experiences. The things that account for the super quality in super apps include:

  • range of services – while a mobile application typically serves a single purpose, a super app aims to be the only piece of software a user needs to perform a variety of actions across services or even industries, like Grab, WeChat, or Gojek.
  • all-in-one toolkit – traditional suites of applications released by tech giants like Google or Microsoft require users to switch between products to access different services. Super apps, on the other hand, shorten the customer journey by allowing users to achieve different goals within a single ecosystem without downloading multiple digital products.
  • data sharing – as opposed to ordinary apps that collect data related to a specific purpose only, super apps gather and process much more user data. While this may raise privacy and security concerns, properly-handled data sharing between respective services is a safe way to ensure an even smoother user experience.
  • financial services – there are limitless combinations of services that super apps may offer, from messaging, social networking, and e-commerce to transportation and health. However, as the examples of Gojek’s GoPay or WeChat Pay within WeChat Wallet show, built-in payment is one of the most prevalent. Super app users are usually required to provide their payment information only once for cross-service transactions – and they don’t need to leave the app to finalize the payment.

What’s the global landscape of super apps?

arrow-down

Ever since the launch of WeChat in 2011, super apps have been on the rise. There has been a notable difference between the emerging and developed economies’ approach to this kind of digital products, though. 

Super apps have taken emerging markets by storm. Among the most notable all-in-one applications released in the last decade are Southeast Asia's leading platforms Grab and MoMo, Latin America-based Rappi, Middle East’s first super app Careem, and WhatsApp, which started turning into a super app in Brazil by launched in-app business directory and shopping features. There are a few reasons why super apps have been booming in developing countries:

  • mobile-first nations – the emerging economies didn’t experience the desktop revolution the same way the developer markets did. Only once smartphones hit the market did they get to easily access the internet, which made many Asian nations mobile-first consumers and contributed to the wide adoption of super apps.
  • unbanked population – a large percentage of unbanked populations was the issue that the emerging economies have struggled with for a long time. To give you an idea, in 2018, over 220 million adults in China, 190 million in India, and 99 million in Pakistan didn’t have a bank account. With financial services often lying at their core, super apps allow users to access their assets and make purchases through mobile devices.
  • regulators’ support – governments in emerging economies have been supporting super apps to drive technological advancement together. For example, WeChat’s been subsidized by the Chinese government since its creation in 2011, while Jakarta entered into a partnership with Grab, Gojek, and other local startups to accelerate the launch of the capital’s smart city project. 

While super apps have been proliferating across emerging markets, they’ve been struggling to gain traction in the West. Among the reasons why are:

  • consumers’ concerns with data security and privacy,
  • rigid data sharing and antitrust laws,
  • cut-throat competition between existing players in most verticals.

What does the super app market look like now, and how will it evolve?

arrow-down

As of early 2023, 68% of the world’s population uses a mobile phone. Over the past year, the community of mobile users grew by 168 million individuals, and over 92% of all consumers use a mobile device to access the internet. These trends make the future look bright for businesses behind all sorts of mobile applications, including super apps, and translate into some promising numbers:

  • In 2022, the global super apps market size was valued at 61.30 billion U.S. dollars and was expected to expand at a compound annual growth rate of 27.8% until 2030. 
  • Gartner predicts that by 2027, over half of the population will be using multiple super apps daily, and their adoption will take place on both personal and enterprise levels. 
  • The survey conducted by statistics bureaus of the US, UK, Germany, and Australia estimated the number of potential day-one users for super apps is estimated to reach 98 million, which would result in an estimated 3.25 trillion U.S. dollars in annual spending on a super app by early-adoption users.

Super apps are widely adopted in Asia, the Middle East, Latin America, and Africa, but developed economies aren’t exempt from this global tech trend. The key to success in the US and Europe is to understand the distinctive needs and qualities of the Western markets. Having that in mind, Deloitte proposed the following direction for super apps in developed countries:

  • Having an established brand with developed user trust will make the organization’s entry into the super app ecosystem smoother, which seems promising for medium businesses and enterprises.
  • While banking and insurance-related features are indispensable in super apps, social media, ride-share, and payment companies are more likely to succeed in the Western market.
  • Unlike in the emerging economies, in the West, it seems unlikely to have one dominant super app; instead, we’re more likely to witness the rise of vertical-specific super apps, which means more opportunities for business growth.
  • Western super apps won’t aim to oust traditional mobile apps, and their competitive advantage is more likely to rely on giving users the ability to “manage fewer accounts, transact faster through consistent payments, save money using loyalty and rewards, and experience a better product enabled by cross-service insights and advice.”
  • Bearing in mind data privacy concerns, super apps targeted at the developed economies’ consumers will likely be more transparent about data use, and their functioning may require closer collaboration with regulators on the business's side.
  • The US and Europe won’t focus on the B2C market alone; we’re likely to witness there the emergence of more B2B super apps that will drive value “through data-driven insights, automated advice, and seamless integration of businesses’ platforms into a single workspace.”
Business impact of super apps

What are the business benefits of super apps?

arrow-down

Super apps have dominated emerging markets, and it’s only a matter of time before their popularity grows in the West. If you’re still wondering if your organization should jump on the super app bandwagon, consider the following business benefits:

  • increased customer acquisition – compared to traditional mobile applications, super apps offer a much wider range of services that cater to the needs of diverse audiences, which translates into a bigger potential user base. As your super app grows, it’s also possible to convert the existing users into consumers of a new service at practically zero cost, much like Gojek did.
  • improved user engagement – providing consolidated services in one place and consistently expanding the offering with new features gives you more touchpoints for interaction with users and makes it easier to keep them engaged. In the words of Dara Khosrowshahi, Uber’s CEO, “when we see customers using more than one product, their engagement with the platform more than doubles.” All of that boils down to bigger profits.
  • business stability and sustainable growth – this benefit relates to the ones we’ve already discussed, but it’s worth paying special attention to it due to the current economic landscape. Super apps embrace vertical growth by encouraging a shift from a product to a platform mindset. Offering a range of services may help your business survive when a given vertical suffers from an unexpected breakdown, as was the case with travel during the pandemic. 
  • increased revenue – services within the super app ecosystem can be provided by either you as the app owner or the third-party partners. Opening up your space to various retailers lets you monetize your product easily.
  • faster bug fixing – you can release fixes and improvements Over The Air (OTA), which means no hassle with Google Play or App Store review processes. Thanks to super app configuration, mini apps can download and install updates instantly without rebuilding the whole app.
  • team independence and development efficiency – while developing super apps in separate repositories, the host of the super app provides the necessary tools and infrastructure. The teams can work independently, which results in faster development, fewer code conflicts, and increased ownership in product teams.
  • security despite users’ concerns with data privacy, a super app is a sandbox where developers can play without breaking anything. You can build an environment where you mock some sensitive parts of your codebase. As a result, the environment is more secure, and external providers can move faster and contribute features to your app.

What makes super apps popular with users?

arrow-down

Super apps collectively have over 2.4 billion active users all over the world. Their enormous popularity in the B2C market can be attributed to:

  • ability to coordinate different aspects of everyday life in one place,
  • convenience and engaging experience without the need to learn how to use multiple apps,
  • time and storage saving resulting from having one user profile and downloading a single app for all services,
  • minimized risk of losing sensitive information when switching between service providers.

These benefits speak to those who haven’t yet had a chance to use a super app. According to a report by PYMNTS and PayPal, seven in ten global consumers express interest in a solution allowing them to manage payments and other everyday activities through a centralized tool. There’s much untapped potential in the developed economies, so why not be among the first to unlock it?

What are the concerns and challenges that come with super apps?

arrow-down

While super apps offer numerous benefits to both businesses and consumers, they come with some serious challenges as well:

  • data privacy – the multitude of services available within super apps is actually a mixed blessing for many users, especially in the West. Having heard hundreds of stories about data privacy abuse and data breaches from big tech companies, consumers are hesitant to share all their personal data with a single service provider, even if it comes with invaluable benefits.
  • regulatory issues – as a result of data privacy infringements, regulators around the world are implementing laws to further protect personal data and restrict sharing of user data between service providers. Another challenge for businesses behind super apps may be the competition legislations adopted in developed economies.  
  • user experience – in terms of UX, the main challenge for the teams behind the mini apps that make the super app is to strike a balance between consistency and uniqueness. On the one hand, the consistent look and feel account for a positive user experience, drive adoption and retention, and foster a sense of safety. On the other, super apps by definition are made to cater to the diverse needs of heterogeneous audiences, all at once. As each demographic segment interacts with digital products differently, the question remains how to maximize usability without overcomplicating the user experience.
Super apps and your organization

What does moving into the super app ecosystem mean for your organization?

arrow-down

Digital products are not developed in a vacuum. The way they’re designed and operate depends on many factors, one of which is communication between the development team. 

As stated by Melvin E. Conway: "Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure." In simple words, Conway’s law means that the organizational structure is often mirrored in software design. For example, large corporations still using legacy technologies are much more likely to build stiff monoliths – and so their product reflects the organizational concerns more than the actual user needs.

A tool to tackle this issue is the reverse Conway maneuver, according to which the desired software architecture is what affects the organizational structure, not the other way round. This way, teams are capable of building digital products optimized for changing user requirements and business objectives, just as is the case with super app development.

The super app approach has a profound impact on how you organize the work of your developers. It enables respective teams to independently develop and deploy parts of the host application as mini apps and gives more room for third-party contributions. The way the super app architecture influences team composition and the development process is a great example of the reverse Conway law in practice.

What should you consider when choosing a super app development partner?

arrow-down

Hiring a tech partner to build your super app can be a real money and time-saver. It takes the burden of internal recruitment from you if you lack in-house expertise in this area and opens up possibilities for upskilling. When looking for a reliable super app development company, we advise looking for the following qualities:

  • experience building super apps – it may sound obvious, but checking if the tech partner’s portfolio includes projects like yours is key. Super apps are a special kind of mobile applications, so the software development company of your choice should know its way around building mini apps and integrating them into whole ecosystems. If you’re wondering about our experience, check out how we improved the performance of MoMo’s super app and mini apps by migrating their architecture to Re.Pack
  • consultancy approach – what sets a good tech partner apart from ordinary outsourced teams is proactivity in matching tech solutions with your needs. You should be looking for a company that’s eager to take a closer look at your current product and situation first, without assessing it as good or bad, but focusing on the potential for improvement. Only once the tech partner understands your pain points and objectives better can they suggest a bespoke mix of technology and solutions. 
  • going beyond development – stepping into the super app ecosystem is not a purely technical choice; it also entails a certain degree of organizational change. That’s why the right tech partner should be able to outline the product roadmap and propose relevant changes to processes, workflows, and peopleware.
  • knowledge-sharing – if your in-house team doesn’t have much experience building super app ecosystems, it might be a good idea to look for a tech partner whose developers will share their specialist knowledge with your squad. This will make the long-term development work more efficient and lay the foundations for sustainable business growth.

At Callstack, we’ve got super app development skills and a business-oriented proactive approach. Get in touch with us, and let’s find out how we can help your business succeed with the next big super app.

Super app development in practice

What are key tech considerations for super app development?

arrow-down

The unique experience that super apps offer comes with some special development considerations. Here’s a brief overview of the main factors, which you can read more about in the tech FAQ:

  • tech stack – there’s no one-size-fits-all solution to building a robust and sustainable super app, so you can go for native or cross-platform development, depending on your needs and capabilities. Our experience shows that choosing React Native and Re.Pack means optimal user experience and the ability to leverage code splitting for streamlined development and simplified management of your super app.
  • consistent performance – whether you’re in charge of all services or you’re cooperating with a third-party partner, all functionalities within your super app should have equal operating speed and effectiveness, even on low-end devices and in the low-speed internet environment.
  • user-friendly design – the abundance of features can be overwhelming unless you minimize the friction with a consistent design. To captivate the users, your super app’s design should be visually appealing yet clean and intuitive, especially if you’re planning to win the hearts of Western users, who are accustomed to straightforward navigation and minimalist design.
  • security ensuring user safety should be a priority for every tech business; however, with super apps storing all personal information in one place, their creators should put in even more effort to prevent security breaches. The precautions your development team can take include pen tests, 2FA, code obfuscation, data encryption, and more.

What approach to super app development can you adopt? 

arrow-down

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?

arrow-down

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's super-app-template influence your team’s work and developer experience?

arrow-down

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-showcase,
  • 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.

The super app landscape
Business impact of super apps
Super apps and your organization
Super app development in practice

What are super apps?

arrow-down

Super apps are multipurpose platforms that integrate a wide range of services and features to answer diverse user needs, all within a single mobile interface. Comprised of modular mini apps that users can activate at their convenience, super apps are the software equivalent of Swiss army knives that deliver a powerful mobile-first experience.

Super apps act as a one-stop shop for customers, allowing them to perform everyday tasks like shopping, paying bills, communicating, and more, all in one place. They’re a powerful tool for businesses looking to captivate users with what Mike Lazaridis, Blackberry founder who coined the term in 2010, defined as a “seamless, integrated, contextualized and efficient experience.”

A good example of such an all-round experience is WeChat, a multipurpose app developed in China. Its core features include messaging, localization, a search engine, a news feed, payments, loans, public services, transportation, and housing – and that’s by no means a finished list. It shouldn’t be surprising that the number of active users on WeChat is estimated to reach 1.102 billion by 2025.

What do super apps offer?

arrow-down

Super apps are made to meet the modern-day demand for smooth, convenient, all-encompassing mobile experiences. What makes them stand out, however, is the way they’re built and how they work. 

Ordinary mobile products offer a variety of features within a single application. Super apps, on the other hand, operate as a platform to deliver modular mini apps that users can activate for personalized experiences. The things that account for the super quality in super apps include:

  • range of services – while a mobile application typically serves a single purpose, a super app aims to be the only piece of software a user needs to perform a variety of actions across services or even industries, like Grab, WeChat, or Gojek.
  • all-in-one toolkit – traditional suites of applications released by tech giants like Google or Microsoft require users to switch between products to access different services. Super apps, on the other hand, shorten the customer journey by allowing users to achieve different goals within a single ecosystem without downloading multiple digital products.
  • data sharing – as opposed to ordinary apps that collect data related to a specific purpose only, super apps gather and process much more user data. While this may raise privacy and security concerns, properly-handled data sharing between respective services is a safe way to ensure an even smoother user experience.
  • financial services – there are limitless combinations of services that super apps may offer, from messaging, social networking, and e-commerce to transportation and health. However, as the examples of Gojek’s GoPay or WeChat Pay within WeChat Wallet show, built-in payment is one of the most prevalent. Super app users are usually required to provide their payment information only once for cross-service transactions – and they don’t need to leave the app to finalize the payment.

What’s the global landscape of super apps?

arrow-down

Ever since the launch of WeChat in 2011, super apps have been on the rise. There has been a notable difference between the emerging and developed economies’ approach to this kind of digital products, though. 

Super apps have taken emerging markets by storm. Among the most notable all-in-one applications released in the last decade are Southeast Asia's leading platforms Grab and MoMo, Latin America-based Rappi, Middle East’s first super app Careem, and WhatsApp, which started turning into a super app in Brazil by launched in-app business directory and shopping features. There are a few reasons why super apps’ have been booming in developing countries:

  • mobile-first nations – the emerging economies didn’t experience the desktop revolution the same way the developer markets did. Only once smartphones hit the market did they get to easily access the internet, which made many Asian nations mobile-first consumers and contributed to the wide adoption of super apps.
  • unbanked population – a large percentage of unbanked populations was the issue that the emerging economies have struggled with for a long time. To give you an idea, in 2018, over 220 million adults in China, 190 million in India, and 99 million in Pakistan didn’t have a bank account. With financial services often lying at their core, super apps allow users to access their assets and make purchases through mobile devices.
  • regulators’ support – governments in emerging economies have been supporting super apps to drive technological advancement together. For example, WeChat’s been subsidized by the Chinese government since its creation in 2011, while Jakarta entered into a partnership with Grab, Gojek, and other local startups to accelerate the launch of the capital’s smart city project. 

While super apps have been proliferating across emerging markets, they’ve been struggling to gain traction in the West. Among the reasons why are:

  • consumers’ concerns with data security and privacy
  • rigid data sharing and antitrust laws
  • cut-throat competition between existing players in most verticals.

What does the super app market look like now, and how will it evolve?

arrow-down

As of early 2023, 68% of the world’s population uses a mobile phone. Over the past year, the community of mobile users grew by 168 million individuals, and over 92% of all consumers use a mobile device to access the internet. These trends make the future look bright for businesses behind all sorts of mobile applications, including super apps, and translate into some promising numbers:

  • In 2022, the global super apps market size was valued at 61.30 billion U.S. dollars and was expected to expand at a compound annual growth rate of 27.8% until 2030. 
  • Gartner predicts that by 2027, over half of the population will be using multiple super apps daily, and their adoption will take place on both personal and enterprise levels. 
  • The survey conducted by statistics bureaus of the US, UK, Germany, and Australia estimated the number of potential day-one users for super apps is estimated to reach 98 million, which would result in an estimated 3.25 trillion U.S. dollars in annual spending on a super app by early-adoption users.

Super apps are widely adopted in Asia, the Middle East, Latin America, and Africa, but developed economies aren’t exempt from this global tech trend. The key to success in the US and Europe is to understand the distinctive needs and qualities of the Western markets. Having that in mind, Deloitte proposed the following direction for super apps in developed countries:

  • Having an established brand with developed user trust will make the organization’s entry into the super app ecosystem smoother, which seems promising for medium businesses and enterprises.
  • While banking and insurance-related features are indispensable in super apps, social media, ride-share, and payment companies are more likely to succeed in the Western market.
  • Unlike in the emerging economies, in the West, it seems unlikely to have one dominant super app; instead, we’re more likely to witness the rise of vertical-specific super apps, which means more opportunities for business growth.
  • Western super apps won’t aim to oust traditional mobile apps, and their competitive advantage is more likely to rely on giving users the ability to “manage fewer accounts, transact faster through consistent payments, save money using loyalty and rewards, and experience a better product enabled by cross-service insights and advice.”
  • Bearing in mind data privacy concerns, super apps targeted at the developed economies’ consumers will likely be more transparent about data use, and their functioning may require closer collaboration with regulators on the business's side.
  • The US and Europe won’t focus on the B2C market alone; we’re likely to witness there the emergence of more B2B super apps that will drive value “through data-driven insights, automated advice, and seamless integration of businesses’ platforms into a single workspace.”

What are the business benefits of super apps?

arrow-down

Super apps have dominated emerging markets, and it’s only a matter of time before their popularity grows in the West. If you’re still wondering if your organization should jump on the super app bandwagon, consider the following business benefits:

  • increased customer acquisition – compared to traditional mobile applications, super apps offer a much wider range of services that cater to the needs of diverse audiences, which translates into a bigger potential user base. As your super app grows, it’s also possible to convert the existing users into consumers of a new service at practically zero cost, much like Gojek did.
  • improved user engagement – providing consolidated services in one place and consistently expanding the offering with new features gives you more touchpoints for interaction with users and makes it easier to keep them engaged. In the words of Dara Khosrowshahi, Uber’s CEO, “when we see customers using more than one product, their engagement with the platform more than doubles.” All of that boils down to bigger profits.
  • business stability and sustainable growth – this benefit relates to the ones we’ve already discussed, but it’s worth paying special attention to it due to the current economic landscape. Super apps embrace vertical growth by encouraging a shift from a product to a platform mindset. Offering a range of services may help your business survive when a given vertical suffers from an unexpected breakdown, as was the case with travel during the pandemic. 
  • increased revenue – services within the super app ecosystem can be provided by either you as the app owner or the third-party partners. Opening up your space to various retailers lets you monetize your product easily.
  • faster bug fixing – you can release fixes and improvements Over The Air (OTA), which means no hassle with Google Play or App Store review processes. Thanks to super app configuration, mini apps can download and install updates instantly without rebuilding the whole app.
  • team independence and development efficiency – while developing super apps in separate repositories, the host of the super app provides the necessary tools and infrastructure. The teams can work independently, which results in faster development, fewer code conflicts, and increased ownership in product teams.
  • security despite users’ concerns with data privacy, a super app is a sandbox where developers can play without breaking anything. You can build an environment where you mock some sensitive parts of your codebase. As a result, the environment is more secure, and external providers can move faster and contribute features to your app.

What makes super apps popular with users?

arrow-down

Super apps collectively have over 2.4 billion active users all over the world. Their enormous popularity in the B2C market can be attributed to:

  • ability to coordinate different aspects of everyday life in one place,
  • convenience and engaging experience without the need to learn how to use multiple apps,
  • time and storage saving resulting from having one user profile and downloading a single app for all services,
  • minimized risk of losing sensitive information when switching between service providers.

These benefits speak to those who haven’t yet had a chance to use a super app. According to a report by PYMNTS and PayPal, seven in ten global consumers express interest in a solution allowing them to manage payments and other everyday activities through a centralized tool. There’s much untapped potential in the developed economies, so why not be among the first to unlock it?

What are the concerns and challenges that come with super apps?

arrow-down

While super apps offer numerous benefits to both businesses and consumers, they come with some serious challenges as well:

  • data privacy – the multitude of services available within super apps is actually a mixed blessing for many users, especially in the West. Having heard hundreds of stories about data privacy abuse and data breaches from big tech companies, consumers are hesitant to share all their personal data with a single service provider, even if it comes with invaluable benefits.
  • regulatory issues – as a result of data privacy infringements, regulators around the world are implementing laws to further protect personal data and restrict sharing of user data between service providers. Another challenge for businesses behind super apps may be the competition legislations adopted in developed economies.  
  • user experience – in terms of UX, the main challenge for the teams behind the mini apps that make the super app is to strike a balance between consistency and uniqueness. On the one hand, the consistent look and feel account for a positive user experience, drive adoption and retention, and foster a sense of safety. On the other, super apps by definition are made to cater to the diverse needs of heterogeneous audiences, all at once. As each demographic segment interacts with digital products differently, the question remains how to maximize usability without overcomplicating the user experience.

What does moving into the super app ecosystem mean for your organization?

arrow-down

Digital products are not developed in a vacuum. The way they’re designed and operate depends on many factors, one of which is communication between the development team. 

As stated by Melvin E. Conway: "Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure." In simple words, Conway’s law means that the organizational structure is often mirrored in software design. For example, large corporations still using legacy technologies are much more likely to build stiff monoliths – and so their product reflects the organizational concerns more than the actual user needs.

A tool to tackle this issue is the reverse Conway maneuver, according to which the desired software architecture is what affects the organizational structure, not the other way round. This way, teams are capable of building digital products optimized for changing user requirements and business objectives, just as is the case with super app development.

The super app approach has a profound impact on how you organize the work of your developers. It enables respective teams to independently develop and deploy parts of the host application as mini apps and gives more room for third-party contributions. The way the super app architecture influences team composition and the development process is a great example of the reverse Conway law in practice.

What should you consider when choosing a super app development partner?

arrow-down

Hiring a tech partner to build your super app can be a real money and time-saver. It takes the burden of internal recruitment from you if you lack in-house expertise in this area and opens up possibilities for upskilling. When looking for a reliable super app development company, we advise looking for the following qualities:

  • experience building super apps – it may sound obvious, but checking if the tech partner’s portfolio includes projects like yours is key. Super apps are a special kind of mobile applications, so the software development company of your choice should know its way around building mini apps and integrating them into whole ecosystems. If you’re wondering about our experience, check out how we improved the performance of MoMo’s super app and mini apps by migrating their architecture to Re.Pack
  • consultancy approach – what sets a good tech partner apart from ordinary outsourced teams is proactivity in matching tech solutions with your needs. You should be looking for a company that’s eager to take a closer look at your current product and situation first, without assessing it as good or bad, but focusing on the potential for improvement. Only once the tech partner understands your pain points and objectives better can they suggest a bespoke mix of technology and solutions. 
  • going beyond development – stepping into the super app ecosystem is not a purely technical choice; it also entails a certain degree of organizational change. That’s why the right tech partner should be able to outline the product roadmap and propose relevant changes to processes, workflows, and peopleware.
  • knowledge-sharing – if your in-house team doesn’t have much experience building super app ecosystems, it might be a good idea to look for a tech partner whose developers will share their specialist knowledge with your squad. This will make the long-term development work more efficient and lay the foundations for sustainable business growth.

At Callstack, we’ve got super app development skills and a business-oriented proactive approach. Get in touch with us, and let’s find out how we can help your business succeed with the next big super app.

What are key tech considerations for super app development?

arrow-down

The unique experience that super apps offer comes with some special development considerations. Here’s a brief overview of the main factors, which you can read more about in the tech FAQ:

  • tech stack – there’s no one-size-fits-all solution to building a robust and sustainable super app, so you can go for native or cross-platform development, depending on your needs and capabilities. Our experience shows that choosing React Native and Re.Pack means optimal user experience and the ability to leverage code splitting for streamlined development and simplified management of your super app.
  • consistent performance – whether you’re in charge of all services or you’re cooperating with a third-party partner, all functionalities within your super app should have equal operating speed and effectiveness, even on low-end devices and in the low-speed internet environment.
  • user-friendly design – the abundance of features can be overwhelming unless you minimize the friction with a consistent design. To captivate the users, your super app’s design should be visually appealing yet clean and intuitive, especially if you’re planning to win the hearts of Western users, who are accustomed to straightforward navigation and minimalist design.
  • security ensuring user safety should be a priority for every tech business; however, with super apps storing all personal information in one place, their creators should put in even more effort to prevent security breaches. The precautions your development team can take include pen tests, 2FA, code obfuscation, data encryption, and more.

What approach to super app development can you adopt? 

arrow-down

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-template.

What exactly is Callstack’s super-app-template?

arrow-down

Our super-app-template 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-template 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.

What does the super app How does super app development with Callstack template influence your team’s work and developer experience? look like now, and how will it evolve?

arrow-down

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.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.