In a massive engineering overhaul, Meta has successfully transitioned Instagram Direct—one of the platform’s core messaging surfaces handling billions of messages daily—from the legacy Android View system to Jetpack Compose. Authored jointly by Meta Software Engineer Pavlo Stavytskyi and Google Developer Relations Engineer Rebecca Franks, the deep-dive technical case study highlights not just a modern UI rewrite, but the creation of an AI-native architecture. Through close collaboration between Meta and Google, the migration yielded a codebase that is 50 percent smaller while drastically improving both human and AI developer workflows, as well as core runtime performance metrics.

For years, the Instagram engineering team squeezed every possible micro-optimization out of the traditional Android View system. However, maintaining and expanding a heavily optimized legacy surface accumulates significant technical debt and engineering overhead. This challenge is magnified as modern development teams increasingly lean on declarative UI frameworks and AI coding assistants. By adopting Jetpack Compose, the team sought to modernize the user experience without regressions while simultaneously preparing the codebase to work seamlessly with modern AI workflows.

Modernizing the Codebase at Massive Scale

Artificial intelligence has rapidly transformed into a daily companion for software engineers across the tech industry. Applying AI tools to massive legacy codebases can yield immediate productivity gains, but Meta set a much more ambitious objective. Rather than retrofitting AI tools onto existing legacy code, the Instagram Direct team redesigned the underlying architecture to be AI-native by design, thereby multiplying the impact of AI far beyond what superficial code generation could ever achieve.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

Jetpack Compose was selected as the foundational pillar for this AI-native UI architecture due to its declarative nature. Declarative code is inherently more concise, predictable, and structurally straightforward for AI models to reason about, featuring fewer side effects, reduced implicit state, and clearer component boundaries. However, executing this migration at Instagram scale was an extraordinarily delicate undertaking. Hundreds of millions of people rely on Instagram Direct every day, meaning the transition had to be gradual, smooth, and entirely free of user disruption. To contextualize the immense scale, individual UI components within Direct can render in more than 160 distinct state permutations, and a single conversation screen manages upwards of 200 distinct message types.

When migrating a codebase of this magnitude, engineering teams often face the temptation to take shortcuts, such as embedding Compose UI components inside an existing View hierarchy. While such hybrid approaches are valid as brief intermediate steps during a phased rollout, they introduce long-term architectural hurdles. AI coding tools naturally gravitate toward paths of least resistance. When imperative and declarative UI code are mixed together, AI models frequently blend them incorrectly, inadvertently introducing subtle bugs, persistent technical debt, and performance regressions.

Building an AI-native UI Architecture

At Instagram’s scale, architectural abstractions are unavoidable to keep applications maintainable as they expand. A common pattern in legacy Android development involves modeling every list item type as a descendant of a custom base class that exposes standard lifecycle hooks like binding callbacks. In mixed-paradigm environments, developers often encounter scenarios where feature flags are read inside imperative contexts and subsequently captured inside Compose lambdas, creating subtle coupling across paradigms. Furthermore, mutable states can inadvertently live directly on the list item itself rather than within a centralized UI state, causing them to survive view recycling and data re-binding across rows, which ultimately leads to hard-to-reproduce rendering bugs.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

To construct a truly AI-friendly codebase, the Instagram team established practical architectural guardrails. List items could still be represented by custom abstractions, but all Compose rendering logic had to be cleanly encapsulated within constructors, stripping away direct access to mutable class members or external state. This structural design ensures that UI components behave equivalently to pure composable functions while still conforming to the application’s broader architectural framework.

Executing this migration concurrently with ongoing feature development required immense coordination. For a prolonged period, hundreds of UI components coexisted alongside their legacy counterparts, with both systems maintained in parallel. AI workflows played a pivotal role in accelerating the generation of massive volumes of code, enabling the Direct team to perform the migration in record time without stalling the broader engineering organization from shipping features to billions of global users. Engineers utilized a shared knowledge base of reusable skills and conventions, keeping workflows and best practices synchronized across the entire team.

The empirical results of the migration strongly validated this approach. Across migrated Instagram Direct surfaces, Jetpack Compose enabled the team to reduce the total amount of UI code by 50 percent. Internal data analysis comparing AI agent sessions working on Compose UI against identical tasks performed on Android Views revealed striking efficiency gains. Migrated Compose surfaces achieved a 35 percent reduction in AI agent execution time, required 32 percent fewer engineer-agent exchanges, and delivered a 33 percent reduction in token costs. Because AI models had to process significantly less code, output quality improved while resource consumption plummeted.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

Data analysis also uncovered critical insights regarding how different UI frameworks handle complex or fragile code. Meta tracks code health using an internal risk score that evaluates overall code quality and the statistical likelihood of a change triggering production incidents. As files accumulate higher risk scores, AI agent sessions naturally become less resource-efficient. When a file’s accumulated risk score doubles, UI implementations built with legacy Android Views experience a 30 percent reduction in AI agent resource efficiency per landed character. In stark contrast, when utilizing Jetpack Compose UI under identical circumstances, the efficiency reduction is limited to just 9 percent.

Performance Optimizations and Runtime Efficiency

Because Instagram Direct is one of the most heavily used surfaces in the application, users expect it to remain exceptionally fast and responsive at all times. Adopting Jetpack Compose constituted a major UI rewrite, and the primary directive from leadership was to preserve the existing high-performance standard with zero regressions. Years of prior iteration had pushed the legacy View-based implementation to an elite performance tier, requiring the new Compose-based architecture to match or exceed those benchmarks.

Instagram tracks hundreds of distinct performance metrics in production, allowing engineers to run rigorous A/B tests comparing the migrated Compose UI against legacy implementations. A common pitfall during large-scale migrations is evaluating performance based on small, isolated groups of migrated components. Such early samples often paint an incomplete picture, yielding false negatives because small migrations cannot capture the holistic efficiency of an uninterrupted composition tree. The engineering team discovered that the more of a surface is migrated end-to-end without bridging interruptions, the clearer and more dramatic the performance advantages become.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

Core screens in Instagram Direct rely heavily on long lists of varied item types, historically implemented using RecyclerView. While custom abstractions kept the architecture scalable, it remained fundamentally tethered to the lifecycle limitations of the legacy View system. The team’s primary undertaking involved migrating hundreds of individual list items to Compose within the existing RecyclerView architecture, deploying them to production in small, independent groups via A/B tests.

To break free from legacy View dependencies entirely, the team invested in replacing the RecyclerView core with its native Compose counterpart, LazyColumn. This required designing Compose UI components that could be abstracted away from their container framework, maintaining compatibility with both RecyclerView and LazyColumn simultaneously. Utilizing feature flags, engineers could seamlessly switch between the two underlying list architectures at runtime to evaluate production performance.

The unprecedented scale and sensitivity of Instagram posed unique challenges for Jetpack Compose, necessitating a deeply hands-on engineering partnership between Google and Meta. Working closely together, engineers from both companies analyzed telemetry data to design brand-new Compose capabilities capable of outperforming legacy benchmarks. Two major architectural additions emerged from this joint effort: pausable composition enabled by LazyLayoutCacheWindows and advanced visibility tracking.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

Pausable Composition and Advanced Caching

Pausable composition, which is enabled by default in Compose 1.10, allows expensive lazy-list items to be composed incrementally across multiple animation frames, effectively eliminating UI stutters and input jank. When paired with the LazyLayoutCacheWindow API introduced in Compose 1.9, scrolling smoothness is dramatically improved. Internal testing at Meta demonstrated that combining pausable composition with a one-viewport LazyLayoutCacheWindow reduced large frame drops per minute by approximately 13 percent compared to standard Compose implementations. The cache window feature on its own accounted for an 8 percent reduction against the same baseline.

Deploying a LazyLayoutCacheWindow allows applications to prepare and retain off-screen items within a precise pixel-based or fractional band surrounding the current viewport, ensuring lightning-fast flings during rapid scrolling. The Instagram team fine-tuned cache window fractional parameters specifically for Direct’s distinct content structure and item sizing. Because optimal configuration values vary depending on unique UI parameters, finding the ideal balance requires careful experimentation tailored to each application’s specific design patterns.

Additionally, the introduction of the onVisibilityChanged API in Compose 1.9.0 provided large-scale surfaces with a native, standardized mechanism for determining when a composable element is actively visible on screen. Within Instagram Direct, these precise visibility signals are deployed across hundreds of files to power product quality analytics and impression logging, replacing custom, hand-rolled tracking implementations previously maintained by the team.

How Instagram Direct engineers built AI-native UI architecture with Jetpack Compose and reduced token cost per agent session by 33%

Startup performance across the broader application also received an unexpected boost. The Jetpack Compose runtime carries a one-time warmup cost during application launch. Because messaging serves as a high-traffic surface frequently accessed early in user sessions, other features across Instagram that rely on Compose benefited from immediate initialization readiness. Furthermore, startup performance within Instagram Direct itself was aggressively optimized through the implementation of Baseline Profiles, which pre-compile hot execution paths at installation time to ensure Compose renders fluidly from the very first app launch.

The successful migration of Instagram Direct demonstrates how Jetpack Compose can serve as a robust foundation for building AI-first application architectures at massive consumer scale. By combining declarative UI principles with targeted performance optimizations and deep cross-company engineering partnerships, Meta and Google have not only future-proofed one of the world’s largest messaging platforms but also delivered powerful architectural advancements to the broader Android developer ecosystem.

Leave a Reply

Your email address will not be published. Required fields are marked *