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

Software Mansion
14 Jun 202418:03

Summary

TLDRIn 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.

Outlines

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Mindmap

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Keywords

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Highlights

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Transcripts

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen
Rate This

5.0 / 5 (0 votes)

Ähnliche Tags
React NativePerformanceCross-PlatformGame DevelopmentMobile AppsWeb DevelopmentUI OptimizationAnimationOpen SourceMusic Learning
Benötigen Sie eine Zusammenfassung auf Englisch?