התחל במצב לא מקוון עם האפליקציה Player FM !
#044 - Yoga, Layouting and New Architecture with Delphine Bugner
Manage episode 426689283 series 3498415
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: https://twitter.com/DelphineBugner
- Delphine Github: https://github.com/delphinebugner
Links
- Delphine "The Yoga Enigma" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprY
- 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.
67 פרקים
Manage episode 426689283 series 3498415
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: https://twitter.com/DelphineBugner
- Delphine Github: https://github.com/delphinebugner
Links
- Delphine "The Yoga Enigma" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprY
- 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.
67 פרקים
כל הפרקים
×
1 #067 - Quitting React Native, React Compiler, Legend List & React Native Performance 24:42

1 #066 - Expo 53 BETA, FlashList v2, React Native Popularity, App Sales & OTA Alternative 27:16

1 #065 - Expo SDK 53 Preview, RevenueCat Paywalls, AI Images & Gemini 25:35

1 #064 - Time for Change (App Updates, Vercel AI SDK & TikTok) 17:24

1 #063 - From Idea to App using Replit with Matt Palmer 57:06

1 #062 - Navigation, Styling & The State of React Native with Beto 1:07:27

1 #061 - Shipping Successful AI Apps with Your Average Tech Bro 54:26

1 #060 - Module Federation, RSCs & Universal Apps with Jack Herrington 1:16:57

1 #059 - Expo Router, RSC & DOM Components with Evan Bacon 1:13:32

1 #058 - React Native Games & Animations with Ben Awad 52:01

1 #057 - The Time for React Native is Now 10:24

1 #056 - Bluesky's React Native App & AT Protocol with Samuel Newman 47:42

1 #055 - Why Companies use React Native, Job Interviews & Open Source Trends with Jamon Holmgren 1:26:54

1 #054 - React Native Music Game with Kim Chouard (Skia, NativeWind, Expo AV) 1:00:48

1 #053 - Why Accessibility in React Native matters with Britta Evans-Fenton 59:34
ברוכים הבאים אל Player FM!
Player FM סורק את האינטרנט עבור פודקאסטים באיכות גבוהה בשבילכם כדי שתהנו מהם כרגע. זה יישום הפודקאסט הטוב ביותר והוא עובד על אנדרואיד, iPhone ואינטרנט. הירשמו לסנכרון מנויים במכשירים שונים.