Yoga, Layouting and New Architecture with Delphine Bugner | Rocket Ship 044

Delphine Bugner, Mobile Tech Lead at BAM, discusses the inner workings of Yoga in React Native. Yoga is responsible for positioning components on the screen based on their dimensions and styling props. Delphine emphasizes the importance of understanding how things work under the hood and why they were designed that way. She shares her uncommon journey into becoming a React Native tech lead and her passion for exploring the technical aspects of technology. She also discusses the architecture of Yoga and how it works under the hood, including the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code. The conversation concludes with a discussion about the future of Yoga and its alignment with React on the web.

Delphine Bugner

Links

Takeaways
- Yoga is responsible for positioning components on the screen based on their dimensions and styling props in React Native.
- Understanding how things work under the hood and why they were designed that way is important for developers.
- Yoga was created as a replacement for CSS in React Native and provides a common platform-agnostic layouting solution.
- The architecture of Yoga involves the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code.
-The new architecture in React Native improves code maintenance and performance.
- View flattening is a concept in Yoga that minimizes unnecessary containers in the view hierarchy.
- Debugging Yoga can be done by using breakpoints in C++ to understand the algorithm and identify the source of bugs. The new architecture in React Native brings more conformity with the web and allows for features like suspense and transitions that were not possible before.
- Working with native modules in React Native is not as difficult as it may seem, and developers can use tools like Bob or Create React Native Library CLI to simplify the process.
- Expo provides a more maintained and active ecosystem compared to the community libraries, making it a good choice for new projects.
- Yoga is continuously evolving to align React Native with the web, and future updates will offer more configuration options for developers.

00:00 Introduction and Background
04:37 Uncommon Journey into React Native
08:41 Building a Mobile App for an Electric Vehicle Company
12:08 Yoga: A Platform-Agnostic Layouting Solution
16:03 The Architecture of Yoga
22:33 Debugging Yoga: Using Breakpoints to Uncover Bugs
25:43 Exploring the New Architecture in React Native
31:06 Getting Started with Native Modules in React Native
37:25 Choosing Between Expo and Community Libraries
45:54 The Future of Yoga in React Native
48:05 Delphine's Project at BAM: Custom Native Modules and Expo Considerations

[nero]

Little bit difficult using Yoga over uniStyles, for now