Shopify's Shift from React Native to AI-driven Native

Shopify is strategically shifting its app migration strategy from a brownfield (incremental integration) to a greenfield (complete rebuild) approach, largely due to advancements in AI. Previously, brownfield development was favored to avoid disrupting continuous feature shipments, but the advent of large language models (LLMs) and AI agents has made a greenfield strategy viable. This new approach was demonstrated by successfully rebuilding the Shopify app in a mere 12 weeks with AI assistance.

The firm had been deliberating between a gradual migration to native code and an immediate, complete rebuild. However, the promising results from AI-driven prototypes, particularly with agents, solidified their decision to pursue a greenfield strategy.

To manage AI-driven code migration effectively, Shopify developed a system called 'Helix.' This system employs a gradual, loop-based approach to ensure the quality of AI-generated code, rather than relying on a single, perfect output. Helix integrates checkpoints, visual reviews, and human sign-off as critical stages.

Its design specifically addresses the challenge of preventing unmaintainable code, a common concern with LLM outputs, by ensuring that imperfect attempts cannot proceed until they meet predefined quality standards.

A key architectural change implemented by Shopify involves completely decoupling core business logic from the user interface, allowing it to run headlessly on desktop environments. This separation is crucial because mobile simulators are too slow, hindering the efficiency of feedback loops for AI agents.

By making the business logic accessible to agents via a command-line interface (CLI), Shopify enables them to iterate on code in milliseconds instead of minutes, bypassing the delays associated with traditional simulators.

These updates allow developers to implement immediate fixes and minor changes without requiring a full app re-submission to app stores, which can be a lengthy process.

Native development often faces challenges with app store delays and slow user adoption of updates, making rapid bug fixes difficult. OTA updates bypass these issues, enabling developers to deploy critical patches instantaneously.

This capability is vital for maintaining app stability and user experience, especially given the complexities of managing different app versions across a user base. Without OTA updates, versioning issues can lead to substantial support costs for non-React Native applications.

While OTA updates are a boon for developers, both Apple and Google technically discourage their use for shipping major new features. This stance is primarily because they prefer all significant features to undergo their rigorous review processes, ensuring platform consistency and security. Despite this, the use of OTA for specific purposes is well-established.

Developers effectively utilize OTA updates for small bug fixes, minor user interface tweaks, and temporary feature flagging. This allows for immediate, low-impact changes without the necessity of navigating the app store submission and review cycle.

It provides essential tooling that significantly enhances the developer experience.

Expo addresses critical pain points in React Native development, such as simplifying developer build signing and managing complex native configurations, which can otherwise be substantial hurdles. Its comprehensive suite of tools helps streamline the development workflow.

Shopify's reported struggles with React Native are, in part, attributed to their failure to effectively utilize Expo. This suggests that the platform's full potential and ease of use are best realized when paired with robust tooling like Expo.

The common perception that React Native apps are significantly larger than native apps has been challenged by recent findings. Shopify, upon migrating to native, observed a negligible saving of just 1 megabyte in app size, a stark contrast to expectations.

It turns out that the React Native runtime itself is not particularly large. Instead, the primary contributors to app bloat are typically media assets and localization files, which are independent of the underlying framework. The belief in substantial size or performance gains from rewriting an app in native code is often a 'second-system effect,' where perceived benefits outweigh actual improvements, rather than a fundamental flaw of the technology.

The lower barrier to entry for React Native often attracts less experienced teams, contributing to this perceived disparity.

This doesn't imply that React Native itself is an inferior technology; rather, its popularity and accessibility mean it's adopted by a broader range of skill levels. The technology can be powerful in the hands of experienced teams, but its 'foot guns' (features that are easy to misuse) can lead to issues when wielded by less competent developers.

The speaker posits that the average React Native developer is less skilled than the average native developer, asserting this as a fact without argument. This perspective suggests that problems often attributed to React Native are, in fact, due to the skill level of the development team rather than inherent flaws in the framework.

Shopify's technical decisions are frequently shaped by abrupt interventions from its founder, Toby Lütke. This phenomenon, dubbed 'founder mode,' often occurs when team members identify a need for change but are hesitant to initiate it themselves, prompting Lütke to step in and make the decisive call if he aligns with the premise.

Lütke has a history of such impactful decisions, notably forcing a company-wide pivot to Ruby on Rails in the past. More recently, he reversed this stance due to the advent of React server components, indicating a willingness to adapt based on technological advancements.

These founder-led architectural pivots are characteristic of Shopify's development culture, where critical strategic directions are often resolved by top-level intervention, especially when teams face architectural stagnation.

This outcome significantly challenges the conventional belief that such migrations are inherently complex and time-consuming.

The AI agent operated in a loop, utilizing computer vision and interaction to manage the migration process. While the AI occasionally opted for SwiftUI over UIKit, the resulting native applications demonstrated marked improvements in navigation and data loading performance.

This rapid and largely automated porting process highlights the transformative potential of AI in streamlining development tasks that were previously considered non-trivial and resource-intensive. The efficiency achieved far exceeded initial expectations, suggesting a new paradigm for cross-platform migration.

Despite SwiftUI's modern appeal, its list implementation is identified as a significant performance drawback, described by the speaker as 'hell.' The experience of scrolling in SwiftUI lists felt considerably worse than expected, with performance issues that previously led to app crashes.

One contributing factor to this slowdown is the automatic indexing of files within local folders, which impacts the responsiveness of the user interface. This issue highlights a gap between SwiftUI's promise and its practical performance in certain critical UI components.

A notable limitation is that the back gesture is restricted to the left fourth of the screen, and developers are unable to customize the size of this 'gutter.' This inflexibility can hinder efforts to create a more fluid and intuitive user experience.

Interestingly, Apple's own internal applications do not always adhere to the native navigation stack. This suggests that even Apple recognizes the need for greater flexibility to maintain optimal user experience, sometimes opting for custom solutions over standard native components.

Such limitations force developers to work within predefined boundaries, which can be challenging when aiming for highly customized or unique user interfaces. The inability to adjust fundamental interaction zones like the navigation gesture gutter exemplifies these rigid constraints.

This success demonstrates that AI models are capable of handling logic synchronization from a main React Native branch to a native build almost seamlessly.

The speaker questions why professional teams at large companies like Shopify seem to struggle with similar tasks, suggesting that their choice of AI models might be a factor. Specifically, it's implied that over-reliance on models like Claude and insufficient use of OpenAI models could hinder effective porting.

This robust porting capability indicates a paradigm shift, where AI agents can translate intricate cross-platform codebases into native equivalents while preserving the original intent and functionality. This capability undermines the traditional assumption that such migrations necessitate extensive manual effort or are prone to failure.

Legend List demonstrates superior performance through its JavaScript-based virtualizer, which is engineered to be exceptionally efficient within the JS layer. This design allows it to operate seamlessly and quickly, regardless of the underlying platform.

In contrast, most competing list libraries rely heavily on native code for list management, which can introduce performance bottlenecks and reduce cross-platform flexibility. Legend List's pure JavaScript core logic also significantly enhances portability between React Native and Web environments.

This approach highlights a key technical advantage: by virtualizing UI components purely in JavaScript, developers can achieve high performance while maintaining broad compatibility and ease of porting across different platforms.

Historically, bridging this gap often relied on high-level native engineering expertise, particularly from companies like Meta.

However, AI agents are now capable of handling coding tasks that once demanded deep native knowledge, making such specialized expertise less critical. This shift means that the inherent advantages of native code are becoming more accessible to a broader range of developers through automated tools.

As AI assistants become more sophisticated, the distinction between native and JavaScript performance or development complexity diminishes, leveling the playing field. This transformation reduces the traditional reliance on elite native developers to optimize performance, as many tasks can now be offloaded to AI.

The goal was to leverage a familiar skillset to build for different environments, rather than to create identical codebases across all platforms.

In this context, AI-driven development further simplifies the process. It enables developers to work within this 'learn once, understand everywhere' paradigm with greater ease, irrespective of the underlying platform. AI tools can assist in adapting React concepts to specific native implementations, thereby making the framework even more accessible and powerful for cross-platform development.