Yoga, Layouting and New Architecture with Delphine Bugner | Rocket Ship 044 скачать в хорошем качестве

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. Learn React Native - https://galaxies.dev Delphine Bugner Delphine Twitter:   / delphinebugner   Delphine Github: https://github.com/delphinebugner Links Delphine "The Yoga Enigma" talk in Berlin:    • The Yoga Enigma: Deep dive into the mechan...   Yoga: https://www.yogalayout.dev/ 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