[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7547":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":29,"discoverSource":30},7547,"redwood","cashapp\u002Fredwood","cashapp","Multiplatform reactive UI for Android, iOS, and web using Kotlin and Jetpack Compose","https:\u002F\u002Fcashapp.github.io\u002Fredwood\u002F0.x\u002Fdocs\u002F",null,"Kotlin",2021,97,26,116,0,2,3,1,59.27,"Apache License 2.0",false,"trunk",true,[],"2026-06-12 04:00:34","# Redwood\n\nRedwood is a library for building reactive Android, iOS, and web UIs using Kotlin.\n\n**This project is no longer under active development.**\n\n### Reactive UIs\n\nAndroid and iOS UI frameworks model the user interface as a ‘mutable view tree’ or document object\nmodel (DOM). To build an application using the mutable view tree abstraction, the programmer\nperforms two discrete steps:\n\n * **Build the static view tree.** In Android the conventional tool for this is layout XML, though\n   we've done some cool work with [Contour][contour] to build view trees with Kotlin lambdas.\n\n * **Make it dance.** The view tree should change in response to user actions (like pushing buttons)\n   and external events (like data loading). The program mutates the view tree to represent the\n   current application state. Some mutations change the on-screen UI instantly; others animate\n   smoothly from the old state to the new state.\n\n[React][react_js] popularized a new programming model, reactive UIs. With reactive UIs, the\nprogrammer writes a `render()` function that accepts the application state and returns a view tree.\nThe framework calls this function with the initial application state and again each time the\napplication state changes. The framework analyzes the differences between pairs of view trees and\nupdates the display, including animating transitions where appropriate.\n\nIn React the view tree returned by the render function is called a _virtual DOM_, and it has an\non-screen counterpart called the _real DOM_. The virtual DOM is a tree of simple JavaScript value\nobjects; the real DOM is a tree of live browser HTML components. Creating and traversing thousands\nof virtual DOM objects is fast; creating thousands of HTML components is not! Therefore, the virtual\nDOM optimization is the magic that makes React work.\n\n\n### Compose\n\n[Jetpack Compose][compose] is an implementation of the reactive UI model for Android. It uses an\nimplementation trick to further optimize the reactive programming model. It is implemented in two\ncomplementary modules:\n\n * **The Compose compiler** is a Kotlin compiler plugin that supports partial re-evaluation of a\n   function. The programmer still writes render functions to transform application state into a view\n   tree. The compiler rewrites this function to track which inputs yield which outputs. When the\n   input application state changes, it evaluates only what is necessary to generate the\n   corresponding view tree changes.\n\n * **Compose UI** is a new set of Android UI components designed to work with the Compose compiler.\n   It addresses longstanding technical debt with Android's view system.\n\nA Kotlin function that is rewritten by the Compose compiler is called a _composable function_.\nPartial re-evaluation of a composable function is called _recomposing_.\n\nNote that the Compose compiler can be used without Compose UI. For example, [compose-server-side]\nrenders HTML components on a server that are sent to a browser over a WebSocket.\n\n\n### Design Systems\n\nIn Cash App we use a design system. It specifies our UI in detail and names its elements:\n\n * Names for our standard colors, fonts, icons, dimensions\n * Named text blocks, specified using the names above\n * Named controls, such as our standard checkboxes, buttons, and dialogs\n\nThe design system helps with collaboration between programmers and designers. It also increases\nuniformity within the application and across platforms.\n\n\n### What Is Redwood?\n\nRedwood integrates the Compose compiler, a design system, and a set of platform-specific displays.\nEach Redwood project is implemented in three parts:\n\n * **A design system.** Redwood includes a sample design system called ‘Sunspot’. Most\n   applications should customize this to match their product needs.\n\n * **Displays for UI platforms.** The display draws the pixels of the design system on-screen.\n   Displays can be implemented for any UI platform. Redwood includes sample displays for Sunspot\n   for Android, iOS, and web.\n\n * **Composable Functions.** This is client logic that accepts application state and returns\n   elements of the design system. These have similar responsibilities to presenters in an MVP\n   system.\n\n\n### Why Redwood?\n\nWe're eager to start writing reactive UIs! But we're reluctant to continue duplicating code across\niOS, Android, and web platforms. In particular, we don't like how supporting multiple platforms\nreduces our overall agility.\n\nWe'd like to shortcut the slow native UI development process. Iterating on UIs for Android requires\na slow compile step and a slow `adb install` step. With Redwood, we hope to use the web as our\ndevelopment target while we iterate on composable function changes.\n\nWe want the option to change application behavior without waiting for users to update their apps.\nWith Kotlin\u002FJS we may be able to update our composable functions at application launch time, and run\nthem in a JavaScript VM. We may even be able to use [WebAssembly][webassembly] to accomplish this\nwith little performance penalty.\n\n\n**Redwood is a library, not a framework.** It is designed to be adopted incrementally, and to\nbe low-risk to integrate in an existing Android project. Using Redwood in an iOS or web\napplication is riskier! We've had good experiences with [Kotlin Multiplatform Mobile][kmm], and\nexpect a similar outcome with Redwood.\n\n\n### Code Sample\n\nWe start by expressing our design system as a set of Kotlin data classes. Redwood will use these\nclasses to generate type-safe APIs for the displays and composable functions.\n\n```kotlin\n@Widget(1)\ndata class Text(\n  @Property(1) val text: String?,\n  @Property(2) @Default(\"\\\"black\\\"\") val color: String,\n)\n\n@Widget(2)\ndata class Button(\n  @Property(1) val text: String?,\n  @Property(2) @Default(\"true\") val enabled: Boolean,\n  @Property(3) val onClick: () -> Unit,\n)\n```\n\nDisplays implement the design system using native UI components.\n\n```kotlin\nclass AndroidText(\n  override val value: TextView,\n) : Text\u003CView> {\n  override fun text(text: String?) {\n    value.text = text\n  }\n\n  override fun color(color: String) {\n    value.setTextColor(Color.parseColor(color))\n  }\n}\n```\n\nComposable functions render application state into the design system. These will make use of Compose\nAPI features like `remember()`.\n\n```kotlin\n@Composable\nfun Counter(value: Int = 0) {\n  var count by remember { mutableStateOf(value) }\n\n  Button(\"-1\", onClick = { count-- })\n  Text(count.toString())\n  Button(\"+1\", onClick = { count++ })\n}\n```\n\n\n[compose-server-side]: https:\u002F\u002Fgithub.com\u002FShikaSD\u002Fcompose-server-side\n[compose]: https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\n[contour]: https:\u002F\u002Fgithub.com\u002Fcashapp\u002Fcontour\n[kmm]: https:\u002F\u002Fkotlinlang.org\u002Flp\u002Fmobile\u002F\n[react_js]: https:\u002F\u002Freactjs.org\u002F\n[webassembly]: https:\u002F\u002Fwebassembly.org\u002F\n","Redwood 是一个使用 Kotlin 和 Jetpack Compose 构建跨平台（Android、iOS 和 Web）响应式用户界面的库。其核心功能在于通过定义渲染函数将应用状态转换为视图树，从而实现界面的动态更新。技术上，Redwood 采用了类似 React 的虚拟 DOM 概念来优化性能，并结合了 Jetpack Compose 的编译器插件特性，使得只有当输入的应用状态发生变化时，才会重新计算必要的视图部分，从而提高了效率。该项目适合需要在多个平台上保持一致用户体验且对界面响应速度有较高要求的应用场景。需要注意的是，官方已声明 Redwood 不再处于活跃开发状态。","2026-06-11 03:12:58","top_language"]