Evan Bacon, creator of Expo Router and Expo DOM components, joins to discuss revolutionary DOM components in Expo. He highlights how these tools simplify incremental web-to-native migration for developers. The conversation touches on practical strategies for enhancing user experiences and the advantages of using shared code. Moreover, Evan shares his unique background as a Lego artist, drawing parallels between building with Lego and app development. Listeners can expect insights into creativity and flexibility in both tech and art!
Expo DOM components enable incremental migration from web to native, allowing for a smoother transition without needing a full code rewrite.
The styling flexibility within DOM components empowers developers to use familiar CSS methodologies, enhancing design capabilities and user experience.
Deep dives
Introduction to DOM Components
DOM components are React components that utilize a 'use dom' directive, allowing them to render within a web view instead of translating web code to native views. This approach leverages React Native's web view capabilities to facilitate the use of web technologies within a React Native app. By using DOM components, developers can share existing bundler code and easily incorporate their websites into mobile applications without having to rebuild from scratch. This ability enables a smooth transition from web to native, allowing developers to incrementally migrate components while utilizing their existing web infrastructure.
Incremental Migration Advantages
The incremental migration capabilities provided by DOM components allow developers to gradually transition their applications from web technologies to native interfaces. Developers can choose specific components to migrate without a complete overhaul of their existing systems, making it easier to maintain a cohesive user experience. For example, if a screen functions well as a web view, it can remain in that format while other screens can be updated to native components as needed. This approach reduces the pressures typically associated with needing to rewrite large portions of code when adopting a new framework.
Styling and Functional Flexibility
Styling within DOM components is entirely web-based, permitting the use of various CSS methodologies such as global styles, CSS modules, and Tailwind CSS. This flexibility allows developers to implement familiar techniques when designing and customizing their web-based components, enhancing their overall output. The integration of Expo Web further supports this as it enables additional functionalities like server rendering, making it easier to build complex interactive experiences. As developers refine their apps, they may realize certain web features can enhance their experience and ultimately influence future native development.
Combining Web and Native Experiences
The use of DOM components empowers developers to create a more integrated experience between web and native functionalities. By enabling communication between web components and native APIs, developers can bring unique features such as haptic feedback into previously web-only experiences. For instance, a rich text editor can be quickly implemented as a DOM component, allowing developers to assess its utility before undertaking the more complicated task of building a native version. This dual approach not only facilitates development efficiency but also enables applications to evolve based on user feedback and operational success.
Expo's Evan Bacon joins Jamon to dive into Expo’s new DOM components! Learn how they enable incremental web-to-native migration, when to use them, and why they’re a game-changer for React Native developers. Plus, fun insights into Evan’s past as a Lego artist!
Infinite Red is an expert React Native consultancy located in the USA. With nearly a decade of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter, core React Native contributors, creators of Igniteand Reactotron, and much, much more), Infinite Red is the best choice for helping you build and deploy your next React Native app.
Get the Snipd podcast app
Unlock the knowledge in podcasts with the podcast player of the future.
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode
Save any moment
Hear something you like? Tap your headphones to save it with AI-generated key takeaways
Share & Export
Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode