Podcast Summary
Discussing Tomaguie: Unifying React Native and the web for consistent styling: Tomaguie is a project by Nathan Weinert to simplify the process of building cross-platform apps using React, allowing for sharing of more code while maintaining the native feel of each platform.
Nathan Weinert, a software engineer at Vercel, discussed his project Tomaguie, which aims to unify React Native and the web for consistent styling across both platforms. Weinert, who has been working in software engineering for a long time and specializes in React, shared that the idea for Tomaguie came from his desire to create universal apps since the beginning of React. He explained that for small teams or solo developers building cross-platform apps, the process can be overwhelming, and Tomaguie is his attempt to make the experience smoother. Styling in React Native is done using a stylesheet, which is a simplified version of CSS designed to be a JavaScript object. Tomaguie's goal is to allow developers to share more code between React Native apps while maintaining the native feel of each platform.
Bringing React Native to the web: React Native Web allows developers to write code once and run it on both mobile apps and web apps, providing a consistent UI and efficient development experience
React Native Web is a project that brings the React Native APIs, which include styling and native-like functionality, to the web through polyfills. This allows developers to write code once and have it run on both mobile apps (using native components) and web apps (using polyfilled components). The goal is to provide a consistent UI across both platforms, with the ability to fallback to native components where necessary. While React Native encourages writing platform-specific code, projects like Tamagui aim to share more code between web and mobile development. React Native Web was started soon after React Native's launch and has been used by projects like Twitter. It's a heroic project that enables developers to write code that works on both the web and mobile platforms, providing a more efficient development experience.
Tomaguie: A CSS compiler for React Native Web: Tomaguie generates CSS at build time, reducing runtime JavaScript and eliminating multiple React components for faster rendering in React Native Web applications.
Tomaguie is a styling library for React Native Web that aims to output CSS instead of JavaScript for improved performance. It started as a solution to the lack of web native styling options and has since grown to include an optimizing compiler. This compiler generates CSS at build time, reducing the need for runtime JavaScript, and performs tree flattening, which eliminates the need for multiple levels of React components for individual HTML elements, resulting in faster rendering. By using Tomaguie, developers can create more efficient and performant React Native Web applications.
Tomagui: Flattening React components for improved performance: Tomagui optimizes React apps by flattening components into divs, reducing rendering layers and preserving original component structure at build time.
Tomagui is a compiler that optimizes React applications by flattening components into divs, reducing the number of rendering layers and ultimately improving performance. The speaker gave an example from Thomandgogi.dotdev's website, where Tomagui flattened 50 React nodes into just divs. The speaker also mentioned that while React Native forces wrapping text in text components, leading to an extra div for every text, Tomagui doesn't change the structure of the output at all, only doing the optimization work at build time. The speaker also shared that they took inspiration from Stitches and Radix for designing their Tomagui website, which showcases individual components and allows quick and instant theme and color changes. The site is visually appealing and informative, with a touch of whimsy that doesn't hinder usability. The speaker also mentioned that they had to change the name of their project from Snack UI to Tomagui due to a similar name with Expo's Snack. The docs for Tomagui are all custom-built using Tomagui itself.
Using Atomic Styles for Simplified CSS Overriding: Atomic styles simplify CSS overriding by assigning unique class names to each property and value, ensuring consistency and control in generating and overriding styles.
Tomagui, a JavaScript platform, utilizes atomic styles to make it easier to properly override CSS properties, especially when generating CSS. Atomic styles involve creating a unique class name for each CSS property and value, such as "bc-red" for "background-color: red." This approach, similar to Tailwind, ensures that there's only one class per property, simplifying the process of generating and overriding styles. The speaker shared that they had previously worked on a similar project but struggled with it due to not using atomic styles, leading to edge case bugs and frustration. By adopting atomic styles, the speaker was able to effectively address these issues and successfully develop Tomagui. This method is particularly useful when generating CSS, as it provides the necessary control to overcome the lack of cascading in React Native and the web.
Using granular padding for precise styling: Granular padding allows for more control and avoids cascading logic, while Tamagui offers a consistent syntax for animations with various drivers.
Using granular padding in styling, instead of global padding, can make it easier to control and avoid cascading logic in development. This approach, which is a middle ground between web's atomic classes and React Native's styling, allows for more precise overwriting of styles as components are added. Additionally, the Tamagui library, mentioned in the discussion, offers a consistent syntax for animations, allowing developers to plug in different drivers for various animation needs. While the animations currently work well, they are not yet as advanced as some other libraries, but the ability to use a CSS driver for web animations helps keep the weight of the library manageable. The speakers also mentioned their admiration for the smoothness of animations in the Toma GUI library and the performance work that went into achieving it. Overall, the conversation highlighted the importance of finding the right balance between functionality, ease of use, and performance in styling and animation libraries.
React Native's limitations compared to web development: React Native has limitations like lack of advanced layout systems, strict no-escape-hatches policy, and larger bundle sizes due to spring-based animations.
While React Native offers a powerful and flexible solution for building mobile apps, it still has limitations compared to web development. For instance, the use of Flexbox for layout and the lack of support for certain advanced layout systems like Grid. Additionally, while React Native is making strides in allowing for more flexibility, there are still limitations, such as the strict no-escape-hatches policy in React Native Web. This means developers may need to use alternative solutions or workarounds for certain features. Another notable point is the use of spring-based animations, which provide a nice bouncy effect, but require bringing along all of React Native and React, leading to larger bundle sizes. Overall, while React Native offers many benefits, it's important to be aware of its limitations and consider the trade-offs when deciding between building for mobile or web.
React Native adopts web technologies and React server components bring server-side rendering: React Native integrates web technologies for better gradients, while React server components enable server-side rendering for faster, more efficient web pages
The React ecosystem is seeing significant advancements in various areas, including React Native and React server components. React Native is adopting web technologies like role attributes, data attributes, and CSS styling, aiming for first-class support for gradients. On the other hand, React server components represent a new approach to building web applications, allowing for server-side rendering of certain components and reducing the amount of JavaScript that needs to be sent over. This could lead to more efficient and faster loading web pages. However, the implementation and understanding of React server components are still evolving, and it remains to be seen how they will be adopted and integrated into React Native apps. Overall, these developments reflect a continued focus on enhancing the React ecosystem and pushing the boundaries of what is possible with JavaScript-based frameworks.
Balancing benefits and challenges of dynamic pages with a less native development experience: React Server Components offer dynamic pages without app redeployment but require prefetching data and writing native-specific components for dynamic features, adding complexity to handling dynamic data and potentially leading to forks in the codebase.
React Server Components aim to offer the advantage of dynamic pages without the need for app redeployment, a feature not commonly found in native apps. However, this comes at the cost of a less native development experience. Instead of instant responsiveness and local first data, developers may need to prefetch data and write native-specific components for certain dynamic features. The absence of a DOM in React Native adds complexity to handling dynamic data and may lead to forks or "weirdness" in the codebase. Ultimately, the success of React Server Components will depend on how well developers can balance the benefits of dynamic pages with the challenges of a less native development experience.
Interviewee's work setup prioritizes comfort and flexibility: The interviewee values comfort and flexibility in his work setup, using a single screen, customized text editor, and frequent position changes to alleviate back pain and maintain focus. He stays updated on tech news through Twitter and Hacker News.
The interviewee prioritizes comfort and flexibility in his work setup, often moving around and using various positions to alleviate back pain and maintain focus. He prefers using a single screen and has customized his text editor and terminal with aliases for frequently used commands. To stay updated in the tech scene, he relies on Twitter and Hacker News. Despite his preference for being mobile, he also acknowledges the need for multiple monitors for certain tasks. Overall, his approach emphasizes finding a work environment that suits his physical and productivity needs.
Focus on one project at a time in web development: Start small, learn with resources, and stay updated for a successful web development journey
Starting out in web development, especially with React Native, it's important to focus on one project at a time instead of trying to build both web and native apps simultaneously. The speaker recommends finding a good boot camp or learning resource to gain hands-on experience. They also emphasize the ease of getting started with web development today compared to the past, with tools like Vercel making deployment simple. The speaker expresses excitement about upcoming features in web development, specifically improvements to color handling. Overall, the conversation highlights the benefits of starting small, focusing on learning, and staying updated with the latest developments in web development.
New Chrome color profiles and CSS features enhance web design: Lab color profiles improve gradient rendering, container queries enable responsive design based on device size, and page transitions add engaging animations to web pages.
The latest Chrome release has introduced new color profiles, specifically Lab, which significantly improves gradient rendering. This, along with new CSS features like container queries and page transitions, makes for an exciting time in the world of CSS development. The speaker personally is excited about page transitions and hopes to use them in future projects. Container queries, which are easier to implement in native apps compared to media queries, allow for responsive design based on device size. The speaker also shared a personal story about discovering comfortable flip flops, Obeos, and adapting to wear them even in cold weather with the help of toe socks.
Speaker's Sandal Preferences: The speaker values comfort and convenience in slip-on sandals and has had a positive experience with Birkenstocks in the past but is considering trying a new brand due to perceived quality issues.
The speaker expresses a preference for certain types of sandals, specifically those with a thick back, due to their comfort and ease of use. He mentions his past experience with Birkenstocks but feels their quality has declined, and he is considering trying out a new brand. The speaker also shares his personal background, including his middle name "Birdman," and promotes his open-source project Tomagoi. Throughout the conversation, the speaker expresses appreciation for the comfort and convenience of slip-on sandals, making it clear that this is a key factor in his sandal purchasing decisions. Additionally, he encourages support for his project and shares his Twitch streaming handle.
