Join us for three hands-on workshops for React & React Native developers at an advanced level. Led by industry experts, the workshops are designed to enhance your cross-platform skills and maximize your experience at React Universe Conf 2024.
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 recall the most popular and basic techniques in app testing: Static analysis, unit, integration, end-to-end and snapshot testing.
Write integration tests for our app by mocking API responses without losing confidence with Mock Service Worker.
Write tests for animated components with the built-in Animated API or libraries such as Reanimated. Learn how to mock animations and mimic animation state.
Introduce Maestro (React Native) / Cypress.io (web) / Playwright (web) to test in simulators, emulators, and on real devices. Guide participants through the setup, identify core functionalities and cover them with e2e tests.
Introduce Reassure and guide participants through the setup, identify parts that can have performance issues, and cover them with regression tests.
Configure GitHub Actions to run all types of tests after every commit.
