RemoteCompose: другая парадигма SDUI в Jetpack Compose

// settings.gradle
repositories {
  maven {
    url = uri("https://androidx.dev/snapshots/builds/14511716/artifacts/repository")
  }
}

// JVM server - no Android dependencies
dependencies {
    implementation("androidx.compose.remote:remote-core:1.0.0-SNAPSHOT")
    implementation("androidx.compose.remote:remote-creation-compose:1.0.0-SNAPSHOT")
}

// Compose-based app
dependencies {
    implementation("androidx.compose.remote:remote-player-compose:1.0.0-SNAPSHOT")
    implementation("androidx.compose.remote:remote-tooling-preview:1.0.0-SNAPSHOT")
}

// View-based app
dependencies {
    implementation("androidx.compose.remote:remote-player-view:1.0.0-SNAPSHOT")
}

// On the server or creation side
val document = captureRemoteDocument(
    context = context,
    creationDisplayInfo = displayInfo,
    profile = profile
) {
    RemoteColumn(modifier = RemoteModifier.fillMaxSize()) {
        RemoteText("Dynamic Content")
        RemoteButton(onClick = { /* action */ }) {
            RemoteText("Click Me")
        }
    }

Результат? Это ByteArray, который можно отправить по сети. Преимущество этого подхода заключается в том, что на стороне создания пишется стандартный код Compose. Не нужно изучать новый DSL (Domain-Specific Language), поддерживать схему JSON или осваивать язык шаблонов. Если вы можете написать это на Compose, вы можете захватить это с помощью RemoteCompose.

Вы можете захватить обычный Compose, который будет фиксировать вызовы отрисовки (draw calls — которые очень статичны), но более типичным является использование специализированных API, которые отражают Compose, но предназначены для сериализации и удаленного воспроизведения, таких как RemoteColumn, RemoteButton, RemoteText и т.д.

Независимая от платформы отрисовка

Независимая от платформы отрисовка означает, что захваченный документ может передаваться по сети и отображаться на любом устройстве Android без необходимости использования исходного кода Compose. Клиентскому устройству не нужны ваши композабл функции, ваши модели представления или ваша бизнес-логика — ему нужны только байты документа и проигрыватель.

// On the client or player side
RemoteDocumentPlayer(
    document = remoteDocument.document,
    documentWidth = windowInfo.containerSize.width,
    documentHeight = windowInfo.containerSize.height,
    onAction = { actionId, value ->
        // Handle user interactions
    }
)

@Composable Content
        ↓
RemoteComposeCreationState (Tracks state and modifiers)
        ↓
CaptureComposeView (Virtual Display - no actual screen needed)
        ↓
RecordingCanvas (Intercepts every draw call)
        ↓
Operations (93+ operation types covering all drawing primitives)
        ↓
RemoteComposeBuffer (Efficient binary serialization)
        ↓
ByteArray (Network-ready, typically 10-100KB for complex UIs)

@Composable
fun DynamicScreen(document: CoreDocument) {
    RemoteDocumentPlayer(
        document = document,
        documentWidth = screenWidth,
        documentHeight = screenHeight,
        modifier = Modifier.fillMaxSize(),
        onNamedAction = { name, value, stateUpdater ->
            // Handle named actions from the document
            when (name) {
                "addToCart" -> cartManager.addItem(value)
                "navigate" -> navController.navigate(value)
                "trackEvent" -> analytics.logEvent(value)
            }
        },
        bitmapLoader = rememberBitmapLoader()  // For lazy image loading
    )
}

class LegacyActivity : AppCompatActivity() {
    private lateinit var player: RemoteComposePlayer

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        player = RemoteComposePlayer(this)
        setContentView(player)

        // Load document from network
        lifecycleScope.launch {
            val bytes = api.fetchDocument("home-screen")
            player.setDocument(bytes)
        }

        player.onNamedAction { name, value, stateUpdater ->
            // Handle actions
        }
    }
}

// These expressions are evaluated every frame
val opacity = FloatExpression("sin(time * 2) * 0.5 + 0.5")  // Pulsing effect
val rotation = FloatExpression("time * 90 % 360")           // Continuous rotation
val position = FloatExpression("lerp(0, 100, time / 2)")    // Linear interpolation

// Server-side: We can update card designs without app release
@Composable
fun ProductCard(product: Product) {
    Card(
        modifier = RemoteModifier
            .fillMaxWidth()
            .clickable { namedAction("viewProduct", product.id) }
    ) {
        Box {
            // Product image with gradient overlay
            AsyncImage(
                url = product.imageUrl,
                modifier = RemoteModifier.fillMaxWidth().aspectRatio(1.5f)
            )

            // Promotional badge - can be A/B tested server-side
            if (product.hasPromotion) {
                PromotionalBadge(
                    text = product.promotionText,
                    modifier = RemoteModifier.align(Alignment.TopEnd)
                )
            }

            // Price with sale styling
            PriceTag(
                originalPrice = product.originalPrice,
                salePrice = product.salePrice,
                modifier = RemoteModifier.align(Alignment.BottomStart)
            )
        }
    }
}

// Client-side: Just renders whatever the server sends
@Composable
fun ProductGrid(viewModel: ProductViewModel) {
    val documents by viewModel.productDocuments.collectAsState()

    LazyVerticalGrid(columns = GridCells.Fixed(2)) {
        items(documents) { document ->
            RemoteDocumentPlayer(
                document = document,
                onNamedAction = { name, value, _ ->
                    if (name == "viewProduct") {
                        navController.navigate("product/$value")
                    }
                }
            )
        }
    }
}

// Server-side: Two completely different checkout experiences
object CheckoutExperiments {

    fun getCheckoutDocument(user: User, cart: Cart): ByteArray {
        val variant = experimentService.getVariant(user.id, "checkout-flow")

        return when (variant) {
            "single-page" -> captureSinglePageCheckout(cart)
            "multi-step" -> captureMultiStepCheckout(cart)
            "express" -> captureExpressCheckout(cart)  // New variant added without app update
            else -> captureSinglePageCheckout(cart)
        }
    }

    private fun captureSinglePageCheckout(cart: Cart): ByteArray {
        return captureRemoteDocument(context, displayInfo, profile) {
            SinglePageCheckout(
                cart = cart,
                onPlaceOrder = { namedAction("placeOrder", cart.id) },
                onUpdateQuantity = { itemId, qty ->
                    namedAction("updateQuantity", "$itemId:$qty")
                }
            )
        }
    }

    private fun captureMultiStepCheckout(cart: Cart): ByteArray {
        return captureRemoteDocument(context, displayInfo, profile) {
            MultiStepCheckout(
                cart = cart,
                steps = listOf("Shipping", "Payment", "Review"),
                onComplete = { namedAction("placeOrder", cart.id) }
            )
        }
    }
}

// Client-side: Completely agnostic to which variant is shown
@Composable
fun CheckoutScreen(viewModel: CheckoutViewModel) {
    val document by viewModel.checkoutDocument.collectAsState()

    document?.let { doc ->
        RemoteDocumentPlayer(
            document = doc,
            onNamedAction = { name, value, stateUpdater ->
                when (name) {
                    "placeOrder" -> viewModel.placeOrder(value)
                    "updateQuantity" -> {
                        val (itemId, qty) = value.split(":")
                        viewModel.updateQuantity(itemId, qty.toInt())
                    }
                }
            }
        )
    }
}

// Server-side: Editorial team can update layout as story develops
class ArticleLayoutService {

    fun getArticleDocument(article: Article): ByteArray {
        return captureRemoteDocument(context, displayInfo, profile) {
            ArticleLayout(article)
        }
    }

    @Composable
    private fun ArticleLayout(article: Article) {
        Column(modifier = RemoteModifier.fillMaxSize().padding(16.dp)) {
            // Breaking news banner - can be added/removed instantly
            if (article.isBreaking) {
                BreakingNewsBanner(
                    modifier = RemoteModifier.fillMaxWidth()
                )
            }

            // Headline with dynamic styling
            Text(
                text = article.headline,
                style = if (article.isBreaking) {
                    HeadlineStyle.Breaking
                } else {
                    HeadlineStyle.Standard
                }
            )

            // Live updates indicator
            if (article.hasLiveUpdates) {
                LiveUpdatesIndicator(
                    lastUpdate = article.lastUpdate,
                    modifier = RemoteModifier.clickable {
                        namedAction("refreshArticle", article.id)
                    }
                )
            }

            // Rich content blocks - can include any Compose UI
            article.contentBlocks.forEach { block ->
                when (block) {
                    is TextBlock -> ArticleText(block)
                    is ImageBlock -> ArticleImage(block)
                    is VideoBlock -> VideoEmbed(block)
                    is LiveBlogBlock -> LiveBlogTimeline(block)
                    is InteractiveChartBlock -> DataVisualization(block)
                    is PullQuoteBlock -> PullQuote(block)
                }
            }

            // Related articles - layout can be A/B tested
            RelatedArticles(
                articles = article.relatedArticles,
                onArticleClick = { namedAction("openArticle", it.id) }
            )
        }
    }
}

// Client-side: Renders whatever layout the server sends
@Composable
fun ArticleScreen(articleId: String, viewModel: ArticleViewModel) {
    val document by viewModel.articleDocument.collectAsState()
    val refreshing by viewModel.isRefreshing.collectAsState()

    SwipeRefresh(
        state = rememberSwipeRefreshState(refreshing),
        onRefresh = { viewModel.refresh() }
    ) {
        document?.let { doc ->
            RemoteDocumentPlayer(
                document = doc,
                onNamedAction = { name, value, _ ->
                    when (name) {
                        "openArticle" -> navController.navigate("article/$value")
                        "refreshArticle" -> viewModel.refresh()
                        "playVideo" -> videoPlayer.play(value)
                    }
                }
            )
        }
    }
}

// Traditional approach - all code ships, even unused variations
@Composable
fun HomeScreen() {
    when {
        featureFlags.newHomeV3 -> NewHomeLayoutV3()  // Ships always
        featureFlags.newHomeV2 -> NewHomeLayoutV2()  // Ships always
        else -> OldHomeLayout()                       // Ships always
    }
}

// Server-side: Only the active variation exists on the server
class HomeScreenService {
    fun getHomeDocument(user: User): ByteArray {
        return when (featureFlags.getHomeVariant(user)) {
            "v3" -> captureHomeV3(user)
            "v2" -> captureHomeV2(user)
            else -> captureHomeDefault(user)
        }
    }
}

// Client-side: No conditional code, no dead code
@Composable
fun HomeScreen(document: CoreDocument) {
    RemoteDocumentPlayer(document = document)
    // That's it. No feature flags, no conditionals.
}

// Server-side: Complete control over who sees what
class FeedLayoutService {

    fun getFeedDocument(user: User, posts: List<Post>): ByteArray {
        val variant = rolloutService.getFeedVariant(user)

        return captureRemoteDocument(context, displayInfo, profile) {
            when (variant) {
                FeedVariant.NEW_DESIGN -> NewFeedLayout(posts)
                FeedVariant.NEW_DESIGN_COMPACT -> NewFeedCompactLayout(posts)
                FeedVariant.CLASSIC -> ClassicFeedLayout(posts)
            }
        }
    }
}

// Rollout service controls the percentage
class RolloutService {
    fun getFeedVariant(user: User): FeedVariant {
        // 5% get new design, 5% get compact variant, 90% get classic
        return when {
            user.id.hashCode() % 100 < 5 -> FeedVariant.NEW_DESIGN
            user.id.hashCode() % 100 < 10 -> FeedVariant.NEW_DESIGN_COMPACT
            else -> FeedVariant.CLASSIC
        }
    }

    // Instant rollback if issues are detected
    fun emergencyRollback() {
        // All users immediately get classic layout
        // No app update needed
    }
}

// Server-side: Same data, different presentations
class WorkoutSummaryService {

    fun getPhoneDocument(workout: Workout): ByteArray {
        return captureRemoteDocument(context, phoneDisplayInfo, profile) {
            PhoneWorkoutSummary(workout)  // Full detailed view
        }
    }

    fun getWatchDocument(workout: Workout): ByteArray {
        return captureRemoteDocument(context, watchDisplayInfo, profile) {
            WatchWorkoutSummary(workout)  // Glanceable summary
        }
    }

    @Composable
    private fun PhoneWorkoutSummary(workout: Workout) {
        Column {
            WorkoutHeader(workout)
            HeartRateChart(workout.heartRateData)
            PaceChart(workout.paceData)
            SplitsTable(workout.splits)
            MapView(workout.route)
            ShareButton { namedAction("share", workout.id) }
        }
    }

    @Composable
    private fun WatchWorkoutSummary(workout: Workout) {
        // Optimized for small screen
        Column(modifier = RemoteModifier.fillMaxSize()) {
            Text(workout.type, style = WatchTypography.Title)
            Row {
                StatBox("Duration", workout.duration)
                StatBox("Distance", workout.distance)
            }
            MiniHeartRateIndicator(workout.avgHeartRate)
        }
    }
}

// Traditional approach: Ship all variations weeks in advance
// Problem: All promotional code ships weeks early
// Risk: Date logic bugs could show promotions early
@Composable
fun HomeScreen() {
    val today = LocalDate.now()
    when {
        today == BlackFriday -> BlackFridayHome()           // Must ship by Oct 15
        today in BlackFridayWeek -> BlackFridayWeekHome()   // Must ship by Oct 15
        today == CyberMonday -> CyberMondayHome()           // Must ship by Oct 15
        else -> RegularHome()
    }
}

// Remote approach: Deploy each promotion on the exact day
// Benefit: Each promotion deploys on the exact minute needed
// Flexibility: Can react to competitor moves in real-time
class HomeScreenService {
    fun getHomeDocument(user: User): ByteArray {
        val promotion = promotionService.getCurrentPromotion()

        return captureRemoteDocument(context, displayInfo, profile) {
            when (promotion) {
                is BlackFridayPromotion -> BlackFridayHome(promotion)
                is CyberMondayPromotion -> CyberMondayHome(promotion)
                is FlashSale -> FlashSaleHome(promotion)  // Can add new types anytime
                else -> RegularHome()
            }
        }
    }
}

// Creation side: Define interactive widget
@Composable
fun QuantitySelector(initialQuantity: Int) {
    var quantity by rememberRemoteState("quantity", initialQuantity)

    Row(
        modifier = RemoteModifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        IconButton(
            onClick = {
                if (quantity > 1) {
                    quantity--
                    namedAction("quantityChanged", quantity.toString())
                }
            }
        ) {
            Icon(Icons.Minus)
        }

        Text(
            text = quantity.toString(),
            style = MaterialTheme.typography.headlineMedium
        )

        IconButton(
            onClick = {
                quantity++
                namedAction("quantityChanged", quantity.toString())
            }
        ) {
            Icon(Icons.Plus)
        }
    }
}

// Player side: Handle state updates
RemoteDocumentPlayer(
    document = document,
    onNamedAction = { name, value, stateUpdater ->
        when (name) {
            "quantityChanged" -> {
                // Update cart
                cartManager.setQuantity(itemId, value.toInt())

                // Optionally update remote state directly
                stateUpdater.updateState { state ->
                    state["quantity"] = RcInt(value.toInt())
                }
            }
        }
    }
)

// Server side: Define animated elements
@Composable
fun PulsingNotificationBadge(count: Int) {
    // Scale pulses between 0.9 and 1.1 over 1 second
    val scale = FloatExpression("0.9 + 0.2 * sin(time * 6.28)")

    // Opacity pulses between 0.7 and 1.0
    val opacity = FloatExpression("0.7 + 0.3 * sin(time * 6.28)")

    Box(
        modifier = RemoteModifier
            .scale(scale)
            .alpha(opacity)
            .background(Color.Red, CircleShape)
            .size(24.dp)
    ) {
        Text(
            text = count.toString(),
            color = Color.White,
            modifier = RemoteModifier.align(Alignment.Center)
        )
    }
}

// The player automatically:
// 1. Tracks elapsed time since document load
// 2. Evaluates expressions each frame
// 3. Updates visual properties
// No client animation code needed

// Document triggers actions for various purposes
@Composable
fun ProductDetailPage(product: Product) {
    Column {
        // Analytics tracking
        LaunchedEffect(Unit) {
            namedAction("analytics", "product_viewed:${product.id}")
        }

        ProductImage(product.imageUrl)

        // Navigation action
        TextButton(onClick = { namedAction("navigate", "/reviews/${product.id}") }) {
            Text("See all reviews")
        }

        // Cart action with data
        Button(onClick = { namedAction("addToCart", product.id) }) {
            Text("Add to Cart")
        }

        // State update action
        var isFavorite by rememberRemoteState("favorite", product.isFavorite)
        IconButton(
            onClick = {
                isFavorite = !isFavorite
                namedAction("toggleFavorite", "${product.id}:$isFavorite")
            }
        ) {
            Icon(if (isFavorite) Icons.Filled.Favorite else Icons.Outlined.Favorite)
        }
    }
}

// Host app handles all actions uniformly
RemoteDocumentPlayer(
    document = document,
    onNamedAction = { name, value, stateUpdater ->
        when (name) {
            "analytics" -> {
                val (event, id) = value.split(":")
                analytics.logEvent(event, mapOf("productId" to id))
            }
            "navigate" -> navController.navigate(value)
            "addToCart" -> {
                cartManager.add(value)
                // Update UI to show confirmation
                stateUpdater.updateState { state ->
                    state["cartCount"] = RcInt((state["cartCount"] as? RcInt)?.value?.plus(1) ?: 1)
                }
            }
            "toggleFavorite" -> {
                val (id, isFavorite) = value.split(":")
                favoritesManager.setFavorite(id, isFavorite.toBoolean())
            }
        }
    }
)

// Navigation: Local Compose (fast, reliable)
@Composable
fun AppNavigation() {
    NavHost(navController, startDestination = "home") {
        composable("home") { HomeScreen() }
        composable("product/{id}") { ProductScreen(it.arguments?.getString("id")) }
        composable("cart") { CartScreen() }
        composable("checkout") { CheckoutScreen() }
    }
}

// Home screen: Remote (marketing can update freely)
@Composable
fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()) {
    val document by viewModel.homeDocument.collectAsState()

    when (val state = document) {
        is Loading -> LoadingIndicator()
        is Success -> RemoteDocumentPlayer(
            document = state.document,
            onNamedAction = { name, value, _ -> handleAction(name, value) }
        )
        is Error -> LocalFallbackHome()  // Graceful degradation
    }
}

// Product screen: Hybrid (shell is local, content is remote)
@Composable
fun ProductScreen(productId: String, viewModel: ProductViewModel = hiltViewModel()) {
    val product by viewModel.product.collectAsState()
    val contentDocument by viewModel.contentDocument.collectAsState()

    Scaffold(
        topBar = { ProductTopBar(product) },  // Local: consistent navigation
        bottomBar = { AddToCartBar(product) } // Local: critical purchase flow
    ) { padding ->
        // Remote: Rich product content, can be A/B tested
        contentDocument?.let { doc ->
            RemoteDocumentPlayer(
                document = doc,
                modifier = Modifier.padding(padding)
            )
        }
    }
}

class DocumentRepository @Inject constructor(
    private val api: DocumentApi,
    private val cache: DocumentCache,
    private val connectivity: ConnectivityManager
) {
    suspend fun getDocument(key: String): CoreDocument {
        // Try cache first
        cache.get(key)?.let { cached ->
            // Return cached immediately, refresh in background
            refreshInBackground(key)
            return cached
        }

        // No cache, must fetch
        return if (connectivity.isConnected) {
            fetchAndCache(key)
        } else {
            throw OfflineException("No cached document and no connectivity")
        }
    }

    private suspend fun fetchAndCache(key: String): CoreDocument {
        val bytes = api.fetchDocument(key)
        val document = RemoteComposeBuffer.deserialize(bytes)
        cache.store(key, document, ttl = 1.hours)
        return document
    }

    private fun refreshInBackground(key: String) {
        scope.launch {
            try {
                fetchAndCache(key)
            } catch (e: Exception) {
                // Silent failure, cached version is still valid
                Log.w(TAG, "Background refresh failed", e)
            }
        }
    }
}

class DocumentPreloader @Inject constructor(
    private val repository: DocumentRepository
) {
    // Preload when user enters a screen
    fun preloadForScreen(screen: Screen) {
        val keysToPreload = when (screen) {
            is HomeScreen -> listOf("featured", "categories", "promotions")
            is CategoryScreen -> screen.subcategories.map { "category_${it.id}" }
            is ProductScreen -> listOf("reviews_${screen.productId}", "related_${screen.productId}")
            else -> emptyList()
        }

        keysToPreload.forEach { key ->
            scope.launch {
                try {
                    repository.getDocument(key)  // Caches for later
                } catch (e: Exception) {
                    // Preload failure is not critical
                }
            }
        }
    }
}

// Usage in navigation
navController.addOnDestinationChangedListener { _, destination, arguments ->
    preloader.preloadForScreen(destination.toScreen(arguments))
}