Breaking through the Browser Barrier (With Expo)

This talk is confirmed. The time of the talk will be announced soon.
The recording will be published after editing. Multipass and Full ticket holders have early access.
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 Conference 2024, check out the latest edition of this React Conference.

 Cedric van Putten
Cedric van Putten
Video transcription, chapters and summary will be available later.

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 Conference 2021React Advanced Conference 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/