DMAIC (Define, Measure, Analyze, Improve, and Control) is a methodology for a structured approach to performance optimization efforts. It helps the project team to identify the key bottlenecks and their reasons and focus their efforts on improving performance in high-value areas.

Optimizing React code is crucial for well-made React Native apps. At the beginning of this training, we’ll explain the life cycles of React and the best ways to consume them to achieve performance boosts. After that, we’ll show some patterns and antipatterns used in daily React development, which significantly affect performance.

Writing JavaScript code is a major part of React Native development. As with any other language, sometimes it’s easy to introduce a shiny line of code that could kill performance. In this section, we’ll introduce tools to help participants diagnose their code and eliminate bottlenecks.

Understanding the communication between JS and Native is crucial for optimizing React Native performance. We want to make every participant aware of how it works, what it means to block a bridge, and how we count FPS. Differences between new and old RN architecture. Additionally, we will compare an initialized React Native app with native apps, including a demonstration of native tools that work well with React Native.

Apps written in React Native are fully native apps. It means that the tools used by native developers could be helpful for React Native developers. We would like to focus on things like UI Inspectors in Xcode and Android Studio, Xcode’s Instruments, and Android Profiler.

Sometimes debugging the dev build in Chrome or generally debugging JavaScript is not enough. We want all participants to be aware of the native debugging techniques, which include reading the logcat and xcode console, reading the device’s console, placing breakpoints in native code, and inspecting the UI.

In our experience, we found that RN performance is affected by a set of common performance issues. This module will present these issues, as well as ways to properly diagnose and resolve them.

A large set of performance issues occurring in RN apps is the result of excessive re-rendering of complex element trees. This process can be greatly optimized by properly restructuring your components and applying various memoization techniques. We will also showcase typical issues that happen when applying memoization and how to address them.

We’ll start by explaining common testing terminology and introducing the testing pyramid and testing trophy as a depiction of the importance of certain types of testing and time-to-value ratio.

We’ll talk about TypeScript, Flow, ESLint, and show how certain types of tests can be replaced with these tools to give developers real-time feedback that’s faster than most of the tests.

The next step is presenting Jest as a platform, showing what’s powerful about the library, and what’s baked in, and explaining how it can be configured and extended to your needs.

Write unit tests for our app using Jest. Taking a solid ride through the app functionalities, and identifying places where we want to add tests using code coverage.

Write integration tests for our app to test connections between our units/components for the functionality we’ve just covered in the previous topic.

Introduce Maestro (React Native) / Cypress.io (web) to test in simulators, emulators, and on real devices. Guide participants through the setup, identify core functionalities, and cover them with e2e tests.

Explain the ideas behind snapshot testing, when to use it, and common pitfalls. Show how it serializes structured data to a string and how we can write our custom serializers