Breaking through the Browser Barrier (With Expo)

Rate this content
Bookmark

With over 1.13 billion websites worldwide, itʼs clear that cross-platform development is popular. However, with 60.74% of people preferring mobile devices over desktops for internet access, providing a polished UX can be challenging when using only websites.

In this talk, Iʼll demonstrate how developers can use Expo to bring their web-only products closer to their users. Starting with a fictional web-only product, Iʼll incrementally reuse the code and run it on iOS and Android using both the existing web code and platform-native elements. Depending on our demo readiness during the conference, this may include a new experimental feature of the Expo Router called DOM Routes that helps developers in this process.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

Rosebud is a journaling app designed to support mental health. Initially developed as a progressive web app, it transitioned to a Native app using Expo.

After transitioning to a Native app, Rosebud generated over $20,000 in revenue within 14 days and significantly improved user retention and upgrade conversion rates.

DOM components are a feature in Expo that allow developers to use web components in a Native app with minimal changes, facilitating easier migration from web to Native.

Cedric van Poethe works on the DevTooling team at Expo and presented about breaking through the browser barrier at a React conference.

Rosebud switched to Native to address distribution issues, user engagement challenges, and customer feedback preferring a Native app. This transition led to increased revenue and customer retention.

Expo provides tools and frameworks to ease the transition from web to Native apps, allowing developers to reuse React components and business logic.

Yes, DOM components can interact with native APIs by passing functions that can trigger actions like haptic feedback or push notifications on the native side.

No, Expo DOM components are specific to the Expo framework and are not available for use in non-Expo React Native apps.

While DOM components allow for quick migration to Native, they may introduce performance trade-offs such as slower load times compared to fully native components.

Yes, DOM components can be used in greenfield projects, especially if the team is more familiar with web development, providing a quicker path to app development.

Cedric van Putten
Cedric van Putten
27 min
25 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Cedric van Poethe from Expo talks about breaking through the browser barrier and shares the success story of Rosebud, an app that transitioned from a web app to a Native app using Expo. Chris Bader explains the concept of the browser barrier, the limitations of web-only growth, and the benefits of transitioning from web to Native. The Talk discusses using DOM components to make web apps work natively, implementing a basic navigational pattern using the tabs navigator in Expo, and using Expo Atlas to inspect the bundle and see the HTML elements bundled inside the app. It also explores using DOM components strategically in React Native apps and highlights examples of apps using DOM components. The Talk mentions the similarities between DOM components and RSC in terms of API design, and recommends a step-by-step migration approach for large apps. It also discusses interacting with native APIs from DOM components and the benefits of using React Native for greenfield projects.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Cross-Platform Component Libraries for Web and Native with React
React Advanced 2021React Advanced 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Replacing Shell Scripts with Cross-Platform TypeScript
TypeScript Congress 2023TypeScript Congress 2023
8 min
Replacing Shell Scripts with Cross-Platform TypeScript
The speaker discusses the benefits of replacing shell scripts with TypeScript, highlighting the limitations of shell scripts and the advantages of TypeScript such as cross-platform compatibility and better tooling. Deno is presented as the ideal platform for single file scripting, with its built-in support for TypeScript, automatic dependency installation, and sandboxing. The dax library is mentioned as a useful tool for scripting, providing a cross-platform shell and other APIs. Overall, the Talk emphasizes the power and flexibility of using TypeScript and Deno for scripting purposes.
React Native Everywhere
React Summit 2022React Summit 2022
22 min
React Native Everywhere
React Native Everywhere enables code sharing and platform individuality, responsive composition and navigation are key focus areas, the React Bangalore community has played a role in the development of React Native design systems, React Native URL Router provides a native feel with drag-from-edge navigation, collaboration with Software Mansion has been beneficial, and token-based centralization is important for consistent adaptation of design systems.
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
React Summit US 2023React Summit US 2023
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
Watch video: Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.
Go From Zero To Hero: Be Cross-Platform Devs With React Native
React Summit 2023React Summit 2023
10 min
Go From Zero To Hero: Be Cross-Platform Devs With React Native
Watch video: Go From Zero To Hero: Be Cross-Platform Devs With React Native
Cross-platform development allows you to build apps compatible with multiple devices or operating systems, reusing 50 to 80 percent of your code. React Native has a wide range of third-party libraries for using APIs. Code examples cover React Native standalone case and with content management system, exploring built-in core components and third-party library APIs. Content management systems simplify content editing and asset swapping, allowing real-time editing and easy asset uploads. The importance of knowing built-in APIs for mastering cross-platform technologies and building scalable, easy-to-maintain applications is highlighted.

Workshops on related topic

Bringing Your Web App to Native With Capacitor
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more
Bringing your React Web App to native with Capacitor
React Summit 2022React Summit 2022
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.
Building for Web & Mobile with Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Building for Web & Mobile with Expo
Workshop
Josh Justice
Josh Justice
We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.
In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!
What's included1. Setting up drawer and stack navigators with React Navigation, including responsiveness2. Configuring React Navigation with URLs3. Setting up React Native Paper including styling the React Navigation drawer and headers4. Setting up a custom color theme that supports dark mode5. Configuring favicons/app icons and metadata6. What to do when you can’t or don’t want to provide the same functionality on web and mobile
Prerequisites- Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/