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.
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.
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.
When we mix native and React Native components, we eventually find the need to communicate between these two worlds. In this section, we’ll explain the concept of the bridge, show how it can affect app performance, and what kind of data can be passed through it back and forth. We will also present modern approaches to JS/native communication: JSI, and Turbo Modules.
The native code in React Native is mostly written in Objective C and Java. These languages have been available on the market for a very long time, but as time passes, industry standards change. It’s fine to use new languages for each platform – our goal is to present you with all the pros and cons.
It’s time to get our hands dirty and write some code. We’ll create our first native module with Swift. Participants will learn how to invoke native functions from JS, export constants, and send events from native to JS. In this unit, developers will learn how to create backward-compatible Turbo Modules that work with new and old RN architecture.
In this section, we’ll show how to push a React Native screen to a native navigation stack. We’ll create a simple native layout and push the React Native view to the stack. We’ll also show how to pre-initialize the bridge to match the native navigation user experience.
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