Kim Chouard – Zero to Music Hero: Building Cross-Platform Games in Months With React Native & Skia

Summary

In this insightful presentation, Kimar, the CTO of ODS Music, challenges the notion that React Native is slow and unsuitable for web development. He demonstrates how a single code base can be used to build high-performing apps for both native and web platforms, using the example of ODS Play, a multiplatform music learning game. He discusses overcoming performance challenges, leveraging Reanimated and Skia for smooth animations, and optimizing UI with platform-specific styles. Kimar also addresses the importance of minimizing re-renders and using tools like Storybook for UI testing, concluding with a call for collaboration on improving audio capabilities in React Native.

Takeaways

• 🚀 The speaker aims to change the narrative around React Native's performance, arguing it can be as performant as native code with a single code base for both native and web platforms.
• 🎼 Kimar, the CTO of ODS Music, shares their experience building a multiplatform music learning game, ODS Play, which faced specific performance challenges due to its real-time feedback nature.
• 🎮 The game requires a 60 FPS frame rate with no lag to maintain tempo accuracy, emphasizing the need for high performance across web, iOS, and Android platforms.
• 🔄 React Native's single-threaded nature can lead to performance bottlenecks when handling animations and user interactions simultaneously.
• 👌 The use of 'useNativeDriver' in React Native allows offloading animations to the UI thread, freeing up the JavaScript thread and preventing thread overload.
• 🛠 Reanimated library provides more intuitive API and control over animations, keeping everything on the UI thread and enhancing performance.
• 🎨 Skia, a common rendering engine across different platforms, is utilized for efficient rendering, but requires compiling and dealing with low-level code, which is simplified by the use of React Native for Skia.
• 📏 React.memo is used to prevent unnecessary re-renders, ensuring components only update when their props change, which is crucial for performance in a game with many interactive elements.
• 🔍 The concept of 'viewport rendering' is introduced to only render notes that are currently visible to the user, improving performance by not rendering thousands of notes at once.
• 🌐 Tailwind CSS approach is mentioned for its potential in applying platform-specific styles and animations within React Native, offering a powerful way to handle styling.
• 📚 Storybook is highlighted as a tool for isolating UI components for testing and ensuring consistency across different settings and platforms.

Q & A

What is the main argument the speaker is trying to make about React Native?

The speaker argues that contrary to common belief, React Native can be as performant as true native code and is highly suitable for building high-performance apps for both native and web platforms with a single code base.

Who is Kimar and what is his role in the context of the talk?

Kimar is the CTO of ODS Music, and he shares his experience building a multiplatform music learning game called ODS Play, discussing the challenges faced and how they were overcome using React Native.