[{"data":1,"prerenderedAt":153},["ShallowReactive",2],{"term-j\u002Fjetpack-compose":3,"related-j\u002Fjetpack-compose":138},{"id":4,"title":5,"acronym":6,"body":7,"category":119,"description":120,"difficulty":121,"extension":122,"letter":123,"meta":124,"navigation":125,"path":126,"related":127,"seo":132,"sitemap":133,"stem":136,"subcategory":6,"__hash__":137},"terms\u002Fterms\u002Fj\u002Fjetpack-compose.md","Jetpack Compose",null,{"type":8,"value":9,"toc":113},"minimark",[10,15,19,23,26,30,102,106,109],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"Jetpack Compose is Android admitting that writing UI with XML layout files was miserable and switching to a declarative model like SwiftUI or React. You describe what a screen should look like for a given state, and Compose figures out how to draw it and redraw it when that state changes. Android developers who'd been jealous of React for years finally got their version.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Jetpack Compose is Google's modern declarative UI toolkit for Android, replacing the traditional XML-based View system. It uses Kotlin functions annotated with @Composable to describe UI, automatically recomposing, or re-rendering, only the parts of the UI tree affected by state changes, similar in philosophy to React and SwiftUI.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-kotlin shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@Composable\nfun Greeting(name: String) {\n    var count by remember { mutableStateOf(0) }\n    Column {\n        Text(\"Hello, $name! Count: $count\")\n        Button(onClick = { count++ }) {\n            Text(\"Increment\")\n        }\n    }\n}\n","kotlin","",[38,39,40,48,54,60,66,72,78,84,90,96],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,47],{},"@Composable\n",[41,49,51],{"class":43,"line":50},2,[41,52,53],{},"fun Greeting(name: String) {\n",[41,55,57],{"class":43,"line":56},3,[41,58,59],{},"    var count by remember { mutableStateOf(0) }\n",[41,61,63],{"class":43,"line":62},4,[41,64,65],{},"    Column {\n",[41,67,69],{"class":43,"line":68},5,[41,70,71],{},"        Text(\"Hello, $name! Count: $count\")\n",[41,73,75],{"class":43,"line":74},6,[41,76,77],{},"        Button(onClick = { count++ }) {\n",[41,79,81],{"class":43,"line":80},7,[41,82,83],{},"            Text(\"Increment\")\n",[41,85,87],{"class":43,"line":86},8,[41,88,89],{},"        }\n",[41,91,93],{"class":43,"line":92},9,[41,94,95],{},"    }\n",[41,97,99],{"class":43,"line":98},10,[41,100,101],{},"}\n",[11,103,105],{"id":104},"when-youll-hear-this","When You'll Hear This",[16,107,108],{},"\"We rewrote the settings screen in Jetpack Compose and cut the code in half compared to the old XML layout.\" \u002F \"Compose's recomposition can get expensive if you're not careful about what state a composable reads.\"",[110,111,112],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":50,"depth":50,"links":114},[115,116,117,118],{"id":13,"depth":50,"text":14},{"id":21,"depth":50,"text":22},{"id":28,"depth":50,"text":29},{"id":104,"depth":50,"text":105},"frontend","Jetpack Compose is Android admitting that writing UI with XML layout files was miserable and switching to a declarative model like SwiftUI or React.","intermediate","md","j",{},true,"\u002Fterms\u002Fj\u002Fjetpack-compose",[128,129,130,131],"Compose Multiplatform","SwiftUI","React","Kotlin",{"title":5,"description":120},{"changefreq":134,"priority":135},"weekly",0.7,"terms\u002Fj\u002Fjetpack-compose","vFPcW1vGkQXVQIOmfRU0LBhTa3zFE6SFqUhP4RjmOQs",[139,142,146,150],{"title":128,"path":140,"acronym":6,"category":119,"difficulty":121,"description":141},"\u002Fterms\u002Fc\u002Fcompose-multiplatform","Compose Multiplatform takes Android's Jetpack Compose UI toolkit and lets it paint pixels on iOS, desktop, and web too, not just Android.",{"title":131,"path":143,"acronym":6,"category":144,"difficulty":121,"description":145},"\u002Fterms\u002Fk\u002Fkotlin","general","Kotlin is like Java's cooler younger sibling who went to art school and came back with null safety and coroutines.",{"title":130,"path":147,"acronym":6,"category":119,"difficulty":148,"description":149},"\u002Fterms\u002Fr\u002Freact","beginner","React is a JavaScript library from Meta for building UIs out of components.",{"title":129,"path":151,"acronym":6,"category":144,"difficulty":121,"description":152},"\u002Fterms\u002Fs\u002Fswiftui","SwiftUI is Apple's answer to React — instead of manipulating views imperatively, you declare what the UI should look like given some state and SwiftUI figu...",1792528093977]