Bacon says web deployment can reach users in seconds, while beta app approval can take 5 to 15 hours. Expo Router uses file-based routing and familiar web APIs across web and native, while supporting native navigation primitives and server rendering work in progress.
Web Once, Native Everywhere: Introducing Expo DOM Components
Speaker
Evan Bacon, creator of Expo Router at Expo, presents Expo DOM Components at React Universe Conf 2024, hosted by Callstack.
Bacon demonstrates taking a shadcn/ui website and opening it in an Expo app. Adding the `use dom` directive renders web code in a WebView, while developers can gradually replace surrounding parts with native tabs, stacks, headers, and search controls. A native callback can connect a web button to an iOS notification API.
Expo Atlas shows the native and web bundles created for the project and how a DOM component is represented in each. Bacon notes that WebViews must parse and compile JavaScript on the device, which can delay content after native navigation appears. Moving the initial route to native can improve startup incrementally.
Expo CLI reuses bundler configuration across platforms, including aliases and optimizations. Bacon previews experimental tree shaking planned for SDK 52, showing an example with an 87% bundle reduction and reporting early beta results generally around 20% to 30%.
Bacon shows DOM Components used for Markdown, syntax highlighting, React Flow diagrams, image cropping, Three.js scenes, and rich text editing. He describes keeping individual components in a native screen while replacing other parts with native views. He says the feature is aimed at moving existing websites toward native, and advises against replacing an already native app with web content.
Takeaways
- Use web deployment to validate demand, then add native capabilities as users need them.
- Treat DOM Components as a gradual migration path, replacing high-value screens or components with native implementations over time.
- Plan for WebView startup delays when content must parse JavaScript on the device; native initial routes can reduce that delay.
- Check bundle contents with Expo Atlas and evaluate tree shaking to remove unused dependencies.
- Web libraries can help deliver complex features early, but assess their scrolling and performance behavior on mobile.
Mentioned in this talk
Search inside this talk
What was claimed 11
- builtEvan Bacon built Expo Router
“I’m Evan Bacon, the creator of Expo Router”
0:52inEvan Bacon on Universal React Native Apps, DOM & React Server ComponentsYouTube Verified2 sources· Talk
- featureExpo Router: File-based routing for React apps across web and native from a shared codebase
“the first file-based framework for building React apps that run on both web and native from a shared codebase”
YouTube Unverified1 source· Talk
- featureExpo DOM Components: Runs web code in a DOM component inside a React Native app, supporting incremental migration to native
“write `use dom` ... and then ... it renders verbatim”
YouTube Unverified1 source· Talk
- integrates withExpo DOM Components integrates with React Native
“this is running truly natively and has access to all of our native modules”
YouTube Unverified1 source· Talk
- feature
ChatGPT Atlas: Inspects bundles to show included modules and transformed output“we can see all the different bundles up here”
YouTube Unverified1 source· Talk
- uses
“we pull in a WebView, change the default export to be a WebView”
YouTube Unverified1 source· Talk
- metricExpo tree shaking: 87% bundle reduction in the shown example
“This example has an 87% bundle reduction”
YouTube Unverified1 source· Talk
- featureExpo tree shaking: Recursively removes unused dependency code from bundles across platforms
“we remove all the unused import and export code from the bundle”
YouTube Unverified1 source· Talk
- metricExpo tree shaking: Early beta testers generally found 20% to 30% bundle size reduction
“generally around a 20% to 30% bundle size reduction”
YouTube Unverified1 source· Talk
- metricExpo DOM Components: Available in an Expo canary build; expected release in SDK 52 the following month
“available in a canary build of Expo ... until SDK 52 next month”
YouTube Unverified1 source· Talk
- featureExpo DOM Components: Intended to help migrate existing websites to native; Bacon advises against moving an already native app back to web
“if you have an existing native app that's already native, you should not regress back into the web”
YouTube Unverified1 source· Talk
