Off the shelf training program

Super apps training

This program will equip you with the essential knowledge needed to introduce super apps in your organization.

Sign up Sign up Sign up
Sign up

Why do the super app course?

This training is the right choice for you if:

  • you work in a team of 20+ engineers,
  • you’re an architect or an infrastructure engineer,
  • you’re an engineer working with React Native looking to expand your knowledge,
  • you’re a Tech Lead working with a big team and running into issues with its size,
  • you want to learn more about alternatives to Metro bundler for React Native.
Performance Audit Callstack
Super apps training
Off the shelf training program
Early access is over!
Please come back next week to download your copy of the Ultimate Guide to React Native Optimization!
Download your copy of the
Ultimate Guide to React Native Optimization

Sign up for super apps training

What exactly do we audit?
FPS
Frames Per Second
How many times your app UI can be redrawn in a second
TTI
Time To Interactive
Time for app boot to when the UI is ready fo interactions
App Size
AAB & IPA Bundles
How much space the app occupies on a device
Off the shelf training program
Contents

What does the training program include?

  • a number of dependencies in your project
  • amount of JavaScript used in your projects
  • rendering 
  • animations
  • RAM usage
  • navigation performance
  • cold start of the app
  • time for the user to see key interaction
  • CPU usage

#20
chapters
#214
pages
#20
graphs
#50
code examples
1.29G
Monthly Active Users globally – WeChat
29M
Monthly Active Users in Indonesia – Gojek
350M
Monthly Active Users in India – PayTM
114M
Monthly Active Users in globally – MoMo
49%
will switch to alternative digital service
38%
will tell others about their negative experience
43%
will contact the digital service for help
32%
will abandon or delete the digital experience
#1
Organizational agility
#2
Time to market
#3
Apps maintenance
#4
UX experience

The program covers the following modules, up to 10 minutes each:

  1. Introduction to Re.Pack
  2. Re.Pack setup in an existing codebase
  3. Intro to micro-frontends and module federation
  4. Module federation setup
  5. Federated modules inside a monorepo
  6. Federated modules inside a polyrepo
  7. Preparing your app for app store release - providing an overview and explaining the differences in the setup
  8. Dependencies management
  9. Mini app versioning management
  10. Catalog server with mini-apps versions (setup and deployment)
  11. Independent release pipeline (OTA setup)
  12. Mini-apps/federated modules independent versioning

testimonials

What do the experts say about the Guide to React Native Optimization?

Animate at 60 FPS no matter what

"By adding delightful animations to your app, users tend to be muchmore forgiving. If done carefully, animations in React Native canperform great and improve the perceived performance of the app to theuser."

William Candillon
Chief Technology Officer at 28msec

Avoid unused native dependencies

"There are so many tricky parts to making a great native app, and to lower the barrier to entry, React Native can abstract away things that you might want to come back and check on later once you’ve got your app up and running – this ebook does a solid job of helping you understand how to really get from good to great."

Orta Therox
CocoaPods creator, TypeScript core contributor

Make your app consistently fast

"Performance regression monitoring is a critical process in the development and maintenance of mobile apps. Without it, small issues can go unnoticed and lead to significant performance degradation, negatively impacting the user experience and potentially decreasing user retention. Regular performance regression monitoring allows developers to proactively identify and fix issues before they become a problem for users, ensuring the app runs at optimal performance and providing a better experience for all users."

Michał Chudziak
Independent Consultant @michalchudziak.dev

Christoph Nakazawa

"By testing key features of an app via integration testing, developers can effectively identify and eliminate potential bugs, ultimately leading to a more confident and efficient development process."

Christoph Nakazawa
Senior Engineering Manager & Creator of Jest

Animate at 60 FPS no matter what

"By adding delightful animations to your app, users tend to be much more forgiving. If done carefully, animations in React Native can perform great and improve the perceived performance of the app to the user."

William Candillon
Chief Technology Officer at 28msec

Avoid unused native dependencies

"There are so many tricky parts to making a great native app, and to lower the barrier to entry, React Native can abstract away things that you might want to come back and check on later once you’ve got your app up and running – this ebook does a solid job of helping you understand how to really get from good to great."

Orta Therox
CocoaPods creator, TypeScript core contributor

Make your app consistently fast

"Performance regression monitoring is a critical process in the development and maintenance of mobile apps. Without it, small issues can go unnoticed and lead to significant performance degradation, negatively impacting the user experience and potentially decreasing user retention. Regular performance regression monitoring allows developers to proactively identify and fix issues before they become a problem for users, ensuring the app runs at optimal performance and providing a better experience for all users."

Michał Chudziak
Independent Consultant @michalchudziak.dev

Run tests for key pieces of your app

"By testing key features of an app via integration testing, developers can effectively identify and eliminate potential bugs, ultimately leading to a more confident and efficient development process."

Christoph Nakazawa
Senior Engineering Manager & Creator of Jest

Super App Case Study

We worked with MoMo

MoMo is a Vietnamese e-wallet super app with more than 114M users. 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.

summary

How This Guide Is Organized

Optimizing the React Native app is a complex process where you need to take various aspects into account – from implementation through using the latest React Native features to testing and continuous deployment.
This guide is a comprehensive source of tactics, tricks, tips, tools, and best practices to help you deliver an optimized React Native app. We not only focus on the technological aspects of React Native optimization. We also underline the impact of each technological aspect on business continuity. This guide contains best practices for optimizing:

  • Stability
  • Performance
  • Resource page
  • User experience
  • Maintenance costs
  • Time-to-market

All these aforementioned aspects have a particular impact on the revenue-generating effectiveness of your apps. Such elements as stability, performance, and resource usage are directly related to improving the ROI of your products because of their positive impact on the user experience. With a faster time-to-market, you can stay ahead of your competitors, whereas an easier and quicker maintenance process will help you reduce your spending on that particular process.

This guide is divided into three parts:

The first part is about improving performance through understanding the React Native implementation details and knowing how to maximize them. This part covers the following topics:

  • Pay attention to UI re-renders
  • Use dedicated components for certain layouts
  • Think twice before you pick an external library
  • Always remember to use libraries dedicated to the mobile platform
  • Find the balance between native and JavaScript
  • Animate at 60FPS - no matter what
  • Replace Lottie with Rive
  • Optimize your app’s JavaScript bundle

The second part is about improving performance by using the latest React Native features or turning some of them on. This part describes the following topics:

  • Always run the latest React Native version to access the latest features
  • How to debug faster and better with Flipper
  • Avoid unused native dependencies
  • Optimize your Android application startup time with Hermes
  • Optimize your Android application’s size with Gradle setting
  • Experiment with the New Architecture of React Native

The third part is about enhancing the stability of the application by investing in testing and continuous deployment. This part tackles the following topics:

  • Run tests for key pieces of your app
  • Have a working Continuous Integration (CI) in place
  • Don’t be afraid to ship fast with Continuous Deployment
  • Ship OTA (Over-the-Air) in an emergency
  • Know how to profile iOS
  • Know how to profile Android

The structure of each section looks like this:

Issue: The first part describes the main problem with React Native performance. 
Solution: The second part outlines how that problem may affect your business and what the best practices are to solve it.
Benefits: The third part focuses on the business benefits of our proposed solution.

process

How performance audits work in practice?

1. Define

We meet with you to learn & define your key performance-related challenges.

2. Measure

We jump into your codebase and product to measure your current performance.

3. Analyse

We analyze your tech stack, architecture, and currently used solution to find and outline room for improvement and propose solutions along with their possible impact.

Process

Deliverables

Completing this course will let you:

  1. Learn how module federation allows separate teams to work together on one app without blocking each other
  2. Deploy micro frontends architecture with module federation for your RN app
  3. Fully understand the benefits of a super app for your organization
  4. Save time on gathering limited knowledge about super apps
  5. Level up as an architect for mobile infrastructure
  6. Learn about the tools you need while building your super app

gains

Why should you do this course with Callstack?

Callstack is a top global contributor to React Native, leading the innovation of cross-platform technologies. Being an official React Native partner we are setting the direction for the framework and supporting industry leaders. We’re also the authors of Re.Pack. This tool allows you to build a React Native super 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.

TL;DR We know the topic inside out, and we co-create the technologies we use and talk about.

trusted by

Stripe logo
Dream11 logo
Dream11 logo
Dream11 logo
Dream11 logo
Coinmine logoExpo logoMLS logoAdvantys logoOneHousing logo

deliverables

What are audit deliverables?

1. Audit report

Consisting of:

  • measurements of initial product performance
  • analysis of your performance bottleneck 
  • recommendations on possible solutions
  • possible impact of each of suggested solution
  • most impactful areas to take care of

2. Presentation

Presentation of the report to your team.

3. Q&A

Q&A session around diagnosed causes and possible improvements.

What tools do we use?

React Dev tools & profilers, Native profilers, JavaScript Profilers, Native debuggers, Dep Check

contact

Let's work together!

Need help with React or React Native? Let us know!

I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.