#034 - React Architecture Tips with Charlotte Isambert

03/19/24 • 45 min

In this episode, Charlotte Isambert, developer at BAM Labs, shares insights on architecture, emphasizing the importance of splitting code into features and following domain-driven design principles. Charlotte also introduces the QRQC (Quick Response Quality Control) and explains Ship Show Ask methodologies, which focus on problem-solving and efficient code reviews. Additionally, she highlights the benefits of adopting a one-feature flow approach and provides general recommendations for improving code quality in React projects.

Learn React Native - https://galaxies.dev

Charlotte Isambert

Charlotte Twitter: https://twitter.com/c_isambert
Charlotte Github: https://github.com/charlotteisambert

Links

React Summit 2024 Talk: https://portal.gitnation.org/badges/react-summit-2024/charlotte_isambert
Build Your Mental Model of React’s Rendering Behavior: https://www.youtube.com/watch?v=-x2HdZ5unH4

Takeaways

Splitting code into features and following domain-driven design principles can improve code organization and maintainability.
The QRQC methodology encourages understanding the root cause of bugs and implementing preventive measures to avoid similar issues in the future.
Ship Show Ask promotes efficient code reviews by allowing developers to indicate when a review is unnecessary or when feedback is desired.
Adopting a one-feature flow approach, where the entire team focuses on one feature at a time, can improve code quality and knowledge sharing.
General recommendations include actively participating in open source projects, continuously learning and improving, and implementing problem-solving techniques.

Learn React Native - https://galaxies.dev

Charlotte Isambert

Charlotte Twitter: https://twitter.com/c_isambert
Charlotte Github: https://github.com/charlotteisambert

Links

React Summit 2024 Talk: https://portal.gitnation.org/badges/react-summit-2024/charlotte_isambert
Build Your Mental Model of React’s Rendering Behavior: https://www.youtube.com/watch?v=-x2HdZ5unH4

Takeaways

Splitting code into features and following domain-driven design principles can improve code organization and maintainability.
The QRQC methodology encourages understanding the root cause of bugs and implementing preventive measures to avoid similar issues in the future.
Ship Show Ask promotes efficient code reviews by allowing developers to indicate when a review is unnecessary or when feedback is desired.
Adopting a one-feature flow approach, where the entire team focuses on one feature at a time, can improve code quality and knowledge sharing.
General recommendations include actively participating in open source projects, continuously learning and improving, and implementing problem-solving techniques.

Previous Episode

#033 - NativeWind & React Native Styling with Mark Lawlor

Mark Lawlor, the creator of NativeWind, joins Simon on the Rocketship podcast to discuss the challenges of styling in React Native and the solutions provided by NativeWind. Mark explains the limitations of the StyleSheet API in React Native and how NativeWind addresses these limitations by bringing CSS concepts to React Native. He also highlights the benefits of using Tailwind CSS with NativeWind and the power of the NativeWind library in enabling complex styles and theming in React Native applications.

Learn React Native - https://galaxies.dev

Mark Lawlor

Mark Twitter: https://twitter.com/mark__lawlor
Mark Github: https://github.com/marklawlor
NativeWind: https://www.nativewind.dev/

Links

Nativecn-UI: https://github.com/Mobilecn-UI/nativecn-ui

Takeaways

The StyleSheet API in React Native provides basic styling primitives but lacks support for complex styles and state-based styling.
Styling in React Native becomes more complex as the app grows and needs to support different states, platforms, and devices.
NativeWind is a styling system for React Native that brings CSS concepts to React Native, allowing developers to use Tailwind CSS and leverage the power of CSS variables, media queries, and other CSS features.
NativeWind enables developers to write styles in a familiar CSS syntax and provides advanced features like transition classes, platform-specific themes, and support for CSS variables and calculations. CSS variables can be used for theming and sub-theming in Native Wind.
Standardization and compatibility with other libraries and platforms are important goals for NativeWind.
Future plans for NativeWind include introducing new primitives, improving animations, and supporting other styling libraries.

Next Episode

#035 - React Native Skia with William Candillon

In this conversation, Simon Grimm interviews William Candillon, the creator of Can It Be Done in React Native, about React Native Skia. They discuss the basics of Skia, the benefits of using Skia in React Native, and the performance improvements in React Native Skia. They also talk about the connection between reanimated and React Native Skia, as well as practical examples of what can be done with React Native Skia. William shares the latest release of React Native Skia and provides resources for developers to get started with it.

Learn React Native - https://galaxies.dev

William Candillon

William Twitter: https://twitter.com/wcandillon
William YouTube: https://www.youtube.com/@wcandillon
William Github: https://github.com/wcandillon

Links

React Native Skia: https://github.com/Shopify/react-native-skia
Will it Fly video: https://www.youtube.com/watch?v=eUbj_NxcgKg&ab_channel=WilliamCandillon
Daehyeon Mun: https://twitter.com/DaehyeonMun
Enzo Mangano: https://twitter.com/reactiive_
Text rendering hates you: https://faultlore.com/blah/text-hates-you/

Takeaways

React Native Skia is a powerful library that brings the best of Skia to React Native, allowing developers to create high-performance animations and graphics.
Skia is a 2D graphics library that is used by Flutter and other frameworks. It provides low-level APIs for drawing and rendering graphics.
React Native Skia improves performance by bypassing the bridge between native and JavaScript threads, allowing for faster animation and rendering.
The connection between reanimated and React Native Skia allows for advanced animations and interactions in React Native applications.
Developers can get started with React Native Skia by checking out William Candela's tutorials and the official documentation.