Build yourself a mobile development environment with Expo web

Presented at React Native Community Keynote #14. This talk explores how to build a comprehensive mobile development environment using Expo Web, inspired by game development tools.

Key Takeaways

• Expo Web enables blueprint-style development
  Displaying all application screens simultaneously on web provides comprehensive visibility and accelerates development compared to single-screen simulator workflows
• Design tokens bridge the design-code gap
  Direct manipulation of tokens in the web interface automatically updates the codebase, eliminating manual synchronization between design tools and code
• Game development tools inspire better workflows
  Doom’s map editor demonstrates how investing in visualization and operational efficiency transforms development speed and quality
• Redux state monitoring enhances debugging
  Real-time state visualization across all screens simultaneously reveals application-wide effects of state changes
• Version control integrates with design experimentation
  Design changes write directly to code files, allowing Git operations to manage design iterations alongside code changes

Building a Mobile Development Studio with Expo Web

Developing React Native applications can be incredibly efficient due to its core principles: code sharing between web and mobile, hot module reload (now Fast Refresh), and cross-platform compatibility for iOS and Android. However, despite these advancements, the fundamental development workflow has remained largely unchanged since 2016, often involving an editor and simulator side-by-side, which can become limiting for complex applications.

The Design-to-Code Gap

A significant challenge developers face is the operational gap between design and code. Tools like Figma are excellent for ideation, but synchronizing design changes from Figma to the codebase is tedious and often leads to re-work. Another common issue is the difficulty in visualizing the entire application’s structure. Working with one screen at a time in a simulator can obscure problems and make it challenging to maintain a consistent design across a large, complex app, especially when multiple teams are involved.

Lessons from Game Development

The concept of an improved development environment draws inspiration from the creation of the classic game Doom. A pivotal factor in Doom’s success was the development of a dedicated map editor, “Doom editing utilities”. This tool allowed designers to visualize, create, and modify game levels interactively and efficiently, a stark contrast to the time-consuming and error-prone process of manually coding levels in text files without real-time visual feedback.

Two key lessons emerge from this approach. First, investing in accelerating operations means recognizing inefficiencies in standard workflows and building tooling to expedite processes. Second, investing in visualization significantly enhances understanding when developers can see results directly, rather than needing to interpret code.

Leveraging Expo and Design System Tokens for a Modern Workflow

Applying these lessons to React Native, developers can gain a similar advantage by leveraging Expo and React Native web capabilities. By building a mobile application on the web, with the guarantee that it will work on mobile, the entire application can be “splayed out” like a blueprint, allowing developers to see all screens simultaneously.

Furthermore, design system tokens offer a powerful mechanism for bridging the design-to-code gap. These tokens are standardized, reusable variables that store visual design attributes such as colors, typography, and spacing. They act as a single source of truth for design specifications, ensuring consistency across components. By making it easy to control, play with, and commit these tokens to code, developers can create a design tool that allows for rapid design iteration directly within the codebase.

The Mobile Development Environment in Practice

This approach enables the creation of a powerful development environment that is built directly into the mobile project, ensuring it remains faithful to the codebase.

The application’s screens are laid out like a blueprint, similar to a Figma artboard, providing a comprehensive overview. The web-based application functions just like its mobile counterpart, allowing login, navigation, and interaction. This combination provides both high-level visibility and detailed functionality testing.

A side panel displays the Redux state, allowing developers to observe how the entire application reacts to state changes in real-time. This visibility across all screens simultaneously reveals state management issues that would be hidden when viewing screens individually.

The ability to directly manipulate design tokens within the web interface represents a critical advancement. Changes to colors, typography, and spacing are instantly reflected across the application and automatically written back to the codebase. This eliminates manual synchronization between design tools and code, bringing design contributions directly into the codebase.

Because changes are written to the codebase, developers can use Git commands like git checkout . to revert design experiments. This integration of design workflow with version control ensures that design iterations benefit from the same versioning and collaboration tools as code changes.

Technical Implementation Insights

The environment works by creating a new route within the existing Expo mobile application, allowing it to render as a web app. The screens are simply imported and hardcoded into a workspace container, often with a designing prop to alter navigation behavior for the development context.

Design tokens are stored in a simple JSON file, which makes them easy to manipulate programmatically. A separate “token server” (a small, dedicated server) handles POST requests from the web interface, reading the JSON file, updating token values, and writing the changes back. Fast Refresh then automatically picks up these file changes, instantly updating the application on both web and connected mobile simulators.

Benefits and Future Potential

This development environment offers significant operational efficiency by making the codebase the source of truth for design. It transforms design work into direct code contributions, reducing iterations to simple token manipulations.

Beyond current capabilities, there is potential for further tooling. Navigation route visualization could display connections between screens, greatly aiding understanding of complex app flows. Analytics integration with tools like Mixpanel could provide direct insights into user interaction within the development environment. Web-based visual regression testing would be easier and more reliable than mobile testing, assuming parity between versions. The blueprint view of the app significantly improves discussions with product managers, engineering directors, and executives by providing a comprehensive visual representation of the entire application.

Who Should Use This Approach

This approach is particularly beneficial for startups already using Expo due to the seamless integration. While more challenging, it can also be implemented by mature companies with vanilla React Native apps, though it may require more effort. Ultimately, it represents a smarter, faster way to build applications, emphasizing visualization and direct design contribution to the codebase.

This development environment represents a paradigm shift in React Native development. By applying lessons from game development tools and leveraging Expo Web capabilities, teams can create a unified environment where design and development converge, significantly accelerating the development process while maintaining code quality and consistency.