Speed up your React Native Development with Storybook

Presented at the Boston React Native Meetup in 2017. This talk explores how Storybook transforms React Native development through component isolation and modular workflows.

Key Takeaways

• Storybook eliminates the “navigation dance” in development
  Component isolation allows developers to build and test UI elements independently, avoiding the constant app reloading and navigation through nested scenes that plague traditional development
• Modular workflows enable parallel development
  Teams can work concurrently on Redux concerns, layout, and individual components, breaking large features into manageable units that speed delivery and simplify code reviews
• A living component library emerges naturally
  Continuous story creation builds a comprehensive collection of reusable components, ensuring UI consistency and reducing redundant development efforts
• Setup takes less than an hour with immediate value
  Initial Storybook configuration and a single component story can be completed in under an hour, quickly demonstrating ROI and paving the way for modular development

The Challenge of Large React Native Apps

Growing React Native applications face a common scenario. Teams transitioning from traditional iOS development to React Native can leverage existing web developers, expanding their contributor pool dramatically. One team grew from three to over ten engineers capable of contributing to the mobile application. While this shift brings obvious benefits like targeting both iOS and Android and collaborative Git workflows with clean pull requests and continuous integration, it also introduces a significant challenge: working on deeply nested scenes.

As applications mature and expand, developers frequently need to navigate through three or four different full-screen scenes just to reach the specific UI component they need to modify. While hot module reloading is designed to help by updating changes instantly, it often falls short. HMR can put the application in an unpredictable “weird state,” forcing developers to repeatedly reload the app and perform the navigation dance to return to their working area. This constant interruption proves to be a significant annoyance, hindering productivity.

Introducing Storybook: A Solution for Isolation

Storybook addresses these development frictions as an interactive development environment specifically designed for building components in isolation. It functions as a testing harness for individual components and helps cultivate a comprehensive component library over time. Many developers, despite years of UI development, have never truly worked on components in complete isolation, always as part of a larger webpage or application.

Integrating Storybook into an existing React Native project is straightforward, requiring only the installation of the Storybook CLI and a simple command to set it up. Running npm run storybook starts a separate webpack server that delivers a distinct JavaScript file to the app, allowing it to load the Storybook testing framework.

Visualizing Components in Action

Storybook allows developers to explore and interact with components directly. The emulator running Storybook presents a clean web page listing all the stories written for various components, effectively serving as a live component library. Clicking on a story instantly updates the application, enabling quick inspection and interaction.

Practical examples include a hotel marker component with different props and an animated component demonstrating standalone animations. More complex components like the “Lola repeater,” which works differently on iOS and Android and whose behavior can be controlled by various props, showcase Storybook’s versatility. The integration with VS Code allows developers to browse and interact with stories directly within their editor, avoiding the need for a separate browser window that could be distracting. Storybook’s ability to control and display components on two different platforms simultaneously proves particularly useful for cross-platform development.

Revolutionizing the Development Workflow

Storybook not only streamlines individual component development but also profoundly transforms the entire development process. Previously, teams would assign an entire scene as a feature to a single developer, leading to large, monolithic tasks. With Storybook, the planning approach shifts dramatically. Teams now think in terms of components, meticulously separating work by concerns such as Redux handling, layout design, and core component building. This initial, slightly longer planning phase, which often involves philosophical discussions about component naming, proves totally worth it for the clarity and efficiency it brings.

To further parallelize work and prevent blockers, teams developed a clever placeholder component called “Skeletor”. When a scene requires a component that is not yet built, Skeletor acts as a temporary stand-in, allowing developers to continue working on the layout and other parts of the scene without waiting. Skeletor accepts the intended props, displaying them in a small window when clicked, ensuring the person connecting components has all the necessary information. Once the actual component is ready, replacing Skeletor is as simple as changing an import statement, instantly updating the scene.

Handling Redux Containers

Storybook also addresses challenges with Redux containers. Connected components often throw errors in Storybook because they require a Redux store. The solution is to wrap the component in a Provider and supply a simple, mock store. This technique allows developers to work on Redux containers even before the full Redux store is implemented, using a mock store that mimics the expected data structure.

The Tangible Benefits of Storybook Adoption

The adoption of Storybook has yielded significant speed improvements. What used to be one or two large, hard-to-review PRs for an entire feature has been broken down into seven or eight smaller, more manageable PRs, often contributed by different developers. This modular approach also means that not every PR requires a full QA review. Many are Storybook PRs that are part of a separate testing harness and can be merged with less overhead. When a component is ready for the product, its PR includes a Storybook link for easy demonstration and review.

Storybook enhances sprint planning and clarifies the contract between components, as they are developed and understood in isolation. Over time, the continuous creation of stories naturally builds a comprehensive and reusable component library, enabling developers to quickly find and integrate existing components into new features. PRs now feature detailed intent, component contract information, Storybook URLs, and visual previews, significantly aiding the review process.

Embracing Modularity: A Path to Quality

Storybook stories function as powerful testing, development, and showcase harnesses for components. Storybook inherently promotes modularity, a crucial aspect for maintaining a high-quality and maintainable codebase. It empowers teams to break down work efficiently by components, with excellent integration into development environments like VS Code. Beyond just components, stories can also be created for layouts and Redux containers, extending Storybook’s utility across various parts of the application.

Storybook simplifies the handling of native modules. Since it runs on a device, native modules function as expected, unlike in traditional Node-based tests. For complex components, developers can mock modules or set up the necessary environment within Storybook stories, similar to how they would for tests.

Getting Started with Storybook

For teams with existing, large applications, the benefits are so substantial that it is worth taking a day off feature work to set up Storybook. Developers don’t need to create stories for everything immediately. Starting small, perhaps with just one key component like a button, demonstrates immediate value. The initial setup time is minimal, often less than half an hour, allowing a team to get started in under an hour.

Looking ahead, static Storybook builds generated by CI servers and hosted online would allow developers to browse existing components without needing to run Storybook locally. This evolution would further streamline the development workflow and make component discovery even more accessible across teams.