{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Rocket Ship","title":"#044 - Yoga, Layouting and New Architecture with Delphine Bugner","html":"","width":"100%","height":180,"duration":2804,"description":"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.devDelphine BugnerDelphine Twitter: https://twitter.com/DelphineBugnerDelphine Github: https://github.com/delphinebugnerLinksDelphine \"The Yoga Enigma\" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprYYoga: https://www.yogalayout.dev/TakeawaysYoga 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...","thumbnail_url":"https://img.transistorcdn.com/1mTgnNUxqgj8QDkI4V51oojxwjdNqhjuAp7rEDt2W1s/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzQzNTgzLzE2OTAz/ODE4NzktYXJ0d29y/ay5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}