# ui-framework

Published articles for ui-framework.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## How We Rebuilt Settings in Zed

DevFeed: [How We Rebuilt Settings in Zed](<https://devfeed.tech/articles/how-we-rebuilt-settings-in-zed-13535.md>)

Original publisher: [Read original article](<https://zed.dev/blog/settings-ui>)

Author: Mikayla Maki, Danilo Leal, Ben Kunkle, Anthony Eid, Katie Geer

Published: 2025-12-12T00:00:00Z

Content type: article

Language: en

Sources: [Zed Industries - Blog](<https://devfeed.tech/sources/zed-industries-blog.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [Refactoring](<https://devfeed.tech/topics/refactoring.md>), [Rust](<https://devfeed.tech/topics/rust.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [code](<https://devfeed.tech/tags/code.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [refactoring](<https://devfeed.tech/tags/refactoring.md>), [rust](<https://devfeed.tech/tags/rust.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

Zed describes rebuilding its Settings Editor, including the design and implementation of a unified interface for project, server, and user settings. The work required refactoring how settings were modeled across the codebase and adding capabilities to the GPUI UI framework.

### Source excerpt

Behind-the-scenes peek at all the required work to expose a myriad of Zed's settings in a UI.

## How Gradio Connects Machine Learning UIs and APIs

DevFeed: [How Gradio Connects Machine Learning UIs and APIs](<https://devfeed.tech/articles/17-reasons-why-gradio-isn-t-just-another-ui-library-7568.md>)

Original publisher: [Read original article](<https://huggingface.co/blog/why-gradio-stands-out>)

Author: yuvraj sharma; Abubakar Abid

Published: 2025-04-16T00:00:00Z

Content type: article

Language: en

Sources: [Hugging Face - Blog](<https://devfeed.tech/sources/hugging-face-blog.md>)

Topics: [gradio](<https://devfeed.tech/topics/gradio.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [AI Development](<https://devfeed.tech/topics/ai-development.md>), [API](<https://devfeed.tech/topics/api.md>), [SDKs](<https://devfeed.tech/topics/sdks.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [development](<https://devfeed.tech/tags/development.md>), [framework](<https://devfeed.tech/tags/framework.md>), [gradio](<https://devfeed.tech/tags/gradio.md>), [production](<https://devfeed.tech/tags/production.md>), [python](<https://devfeed.tech/tags/python.md>), [rest-api](<https://devfeed.tech/tags/rest-api.md>), [sdks](<https://devfeed.tech/tags/sdks.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [tooling](<https://devfeed.tech/tags/tooling.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

This article explains how Gradio supports machine learning applications through interactive UIs and APIs. It describes automatic REST API and documentation generation, Python and JavaScript client libraries, cURL access, the API Recorder, and server-side rendering introduced in Gradio 5.0.

### Source excerpt

We're on a journey to advance and democratize artificial intelligence through open source and open science.

## HarmonyOS App Development 101

DevFeed: [HarmonyOS App Development 101](<https://devfeed.tech/articles/harmonyos-app-development-101-24549.md>)

Original publisher: [Read original article](<https://medium.com/snapp-mobile/harmonyos-app-development-101-a861590a45f3?source=rss----bcd96e620b02---4>)

Author: Jasper Morgan

Published: 2025-01-18T23:23:13Z

Content type: tutorial

Language: en

Sources: [Snapp Mobile - Medium](<https://devfeed.tech/sources/snapp-mobile-medium.md>)

Topics: [App](<https://devfeed.tech/topics/app.md>), [Development](<https://devfeed.tech/topics/development.md>), [ide](<https://devfeed.tech/topics/ide.md>), [huawei](<https://devfeed.tech/topics/huawei.md>), [SDK](<https://devfeed.tech/topics/sdk.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [jetbrains](<https://devfeed.tech/topics/jetbrains.md>), [Package Management](<https://devfeed.tech/topics/package-management.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [app](<https://devfeed.tech/tags/app.md>), [app-development](<https://devfeed.tech/tags/app-development.md>), [apps](<https://devfeed.tech/tags/apps.md>), [code-completion](<https://devfeed.tech/tags/code-completion.md>), [debug](<https://devfeed.tech/tags/debug.md>), [deployment](<https://devfeed.tech/tags/deployment.md>), [development](<https://devfeed.tech/tags/development.md>), [harmony-os](<https://devfeed.tech/tags/harmony-os.md>), [huawei](<https://devfeed.tech/tags/huawei.md>), [ide](<https://devfeed.tech/tags/ide.md>), [jetbrains](<https://devfeed.tech/tags/jetbrains.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [package-management](<https://devfeed.tech/tags/package-management.md>), [programming-languages](<https://devfeed.tech/tags/programming-languages.md>), [refactoring](<https://devfeed.tech/tags/refactoring.md>), [sdk](<https://devfeed.tech/tags/sdk.md>), [testing](<https://devfeed.tech/tags/testing.md>), [tools](<https://devfeed.tech/tags/tools.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

An overview of HarmonyOS Next app development, covering the Huawei-based DevEco Studio IDE, project configuration, SDK versions, modules, and common development features. The article also outlines programming languages, UI frameworks, build tools, package management, execution, debugging, testing, and profiling.

### Source excerpt

Huawei have taken a big step in moving away from the Android platform with the launch of new devices running HarmonyOS Next. This is a brand new operating system that had been design specifically for devices. This means it is lightweight, supports a range of device types, is modular and extensible. In this article we aim to give you an overview of what is available to developers wishing to build apps on this new platform. To that end, we will be looking at the following topics: The IDE Programming Languages UI Framework Build Tools Package Management Running code (devices/emulators) Debugging Testing Profiling Other cool stuff If you are curious about the Harmony platform, its Open Source foundations (OpenHarmony) and its global reach (Oniro), we have written about it here. The IDE The development environment for Harmony apps is currently a Huawei-based IDE which is based on the JetBrains IDE platform. The good news is that JetBrains offers a world-class IDE platform and it makes for a very solid development experience for Harmony apps. For those, wanting to keep to the Open Source side of Harmony (OpenHarmony and Oniro), you are out of luck right now. DevEco Studio is proprietary, albeit free to use software. Let's look at a couple of IDE features -- these should not surprise you but hopefully demonstrates that the platform is already in a good place (as far as IDEs go). Project Creation Creating a project will look familiar already for many. There are a few project templates to choose from to bootstrap your project. New Project Templates You will also then need to configure a couple of options -- a couple of notes on these (which could probably be expanded into a separate article). Firstly, the bundle name is used for app signing and identity. Secondly, an app supports a single SDK version. (The latest SDK version is 13, however version 11 is still widely used.) Thirdly we can specify the module name. The default ('entry') isn't very descriptive. If you have a singl

## Zed Weekly: #25

DevFeed: [Zed Weekly: #25](<https://devfeed.tech/articles/zed-weekly-25-13594.md>)

Original publisher: [Read original article](<https://zed.dev/blog/zed-weekly-25>)

Author: Nathan Sobo

Published: 2023-11-03T00:00:00Z

Content type: article

Language: en

Sources: [Zed Industries - Blog](<https://devfeed.tech/sources/zed-industries-blog.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Rust](<https://devfeed.tech/topics/rust.md>), [Software Engineering](<https://devfeed.tech/topics/software-engineering.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [framework](<https://devfeed.tech/tags/framework.md>), [rust](<https://devfeed.tech/tags/rust.md>), [software-development](<https://devfeed.tech/tags/software-development.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

Zed Weekly #25 examines the rewrite of Zed's UI framework and the upgrade to GPUI 2. It explains GPUI 2's state, model, view, context, and element abstractions, emphasizing improved ergonomics while retaining performance and reliability goals.

### Source excerpt

A closer look at GPUI 2, and thoughts on shredding code.

## Introducing runes

DevFeed: [Introducing runes](<https://devfeed.tech/articles/introducing-runes-3033.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/runes>)

Author: The Svelte team

Published: 2023-09-20T00:00:00Z

Content type: article

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [reactive](<https://devfeed.tech/topics/reactive.md>), [Compiler](<https://devfeed.tech/topics/compiler.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [compiler](<https://devfeed.tech/tags/compiler.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [reactive](<https://devfeed.tech/tags/reactive.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

This article introduces runes in Svelte 5, a new function-based syntax for declaring reactive state and extending fine-grained reactivity beyond component boundaries. The features are opt-in and intended to remain compatible with existing Svelte components, although the design is still a work in progress.

### Source excerpt

In 2019, Svelte 3 turned JavaScript into a reactive language. Svelte is a web UI framework that uses a compiler to turn declarative component code like this... App <script> let count = 0; function increment() { count += 1; } </script> <button on:click={increment}> clicks: {count} </button><script lang="ts"> let count = 0; function increment() { count += 1; } </script> <button on:click={increment}> clicks: {count} </button> ...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can 'see' where count is referenced, the generated code is highly efficient, and because we're hijacking syntax like let and = instead of using cumbersome APIs, you can write less code. A common piece of feedback we get is 'I wish I could write all my JavaScript like this'. When you're used to things inside components magically updating, going back to boring old procedural code feels like going from colour to black-and-white. Svelte 5 changes all that with runes, which unlock universal, fine-grained reactivity. Introducing runes Before we begin Even though we're changing how things work under the hood, Svelte 5 should be a drop-in replacement for almost everyone. The new features are opt-in -- your existing components will continue to work. We don't yet have a release date for Svelte 5. What we're showing you here is a work-in-progress that is likely to change! What are runes? rune /ro͞on/ noun A letter or mark used as a mystical or magic symbol. Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses let, =, the export keyword and the $: label to mean specific things, runes use function syntax to achieve the same things and more. For example, to declare a piece of reactive state, we can use the $state rune: App <script> let count = 0; let count = $state(0); function increment() { count += 1; } </script> <button on:click={increment}> clicks: {count} </button><script lang="ts"> let count = 0; let count = $state(0

## Maximizing Mobile Code Reuse with Compose Multiplatform and MOKO Libraries

DevFeed: [Maximizing Mobile Code Reuse with Compose Multiplatform and MOKO Libraries](<https://devfeed.tech/articles/maximizing-mobile-code-reuse-with-compose-multiplatform-and-moko-libraries-23908.md>)

Original publisher: [Read original article](<https://medium.com/icerock/maximizing-mobile-code-reuse-with-compose-multiplatform-and-moko-libraries-140a408b452a?source=rss----b74ae24564e---4>)

Author: Aleksey Mikhailov

Published: 2023-04-13T06:46:01Z

Content type: tutorial

Language: en

Sources: [IceRock Development - Medium](<https://devfeed.tech/sources/icerock-development-medium.md>)

Topics: [compose-multiplatform](<https://devfeed.tech/topics/compose-multiplatform.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [cross-platform](<https://devfeed.tech/topics/cross-platform.md>), [Kotlin Multiplatform](<https://devfeed.tech/topics/kotlin-multiplatform.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Android](<https://devfeed.tech/topics/android.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [interfaces](<https://devfeed.tech/topics/interfaces.md>), [Development](<https://devfeed.tech/topics/development.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [Code](<https://devfeed.tech/topics/code.md>), [App](<https://devfeed.tech/topics/app.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [biometric-authentication](<https://devfeed.tech/tags/biometric-authentication.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.md>), [geolocation](<https://devfeed.tech/tags/geolocation.md>), [interfaces](<https://devfeed.tech/tags/interfaces.md>), [ios](<https://devfeed.tech/tags/ios.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [kotlin-multiplatform-mobile](<https://devfeed.tech/tags/kotlin-multiplatform-mobile.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [multiplatform](<https://devfeed.tech/tags/multiplatform.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

This article explains how Compose Multiplatform can share Kotlin UI code across Android, iOS, Desktop, and experimental Web targets. It describes its declarative UI capabilities and limitations for non-UI mobile features, then presents MOKO Kotlin Multiplatform Mobile libraries as a way to address features such as permissions, geolocation, and biometric authentication.

### Source excerpt

Mobile application development can be a complex and time-consuming process, requiring developers to write separate code for each platform they want to target. To help streamline this process, JetBrains recently released Compose Multiplatform, a UI framework that allows developers to write UI for Android, iOS (Alpha), Desktop, Web (Experimental) in Kotlin common code. While Compose Multiplatform is a powerful tool for creating cross-platform user interfaces, it has some limitations when it comes to handling non-UI mobile features like permissions, geolocation, and biometric authentication. To address these limitations, developers can turn to the MOKO libraries, a set of Kotlin Multiplatform Mobile (KMM) libraries that are designed to work seamlessly with Compose Multiplatform. What Compose Multiplatform Allows You to Do Compose Multiplatform provides a powerful UI framework that enables developers to create consistent and responsive user interfaces across multiple platforms using Kotlin common code. This means that developers can write a single codebase that can be used to create UIs for both Android and iOS platforms. With Compose Multiplatform, developers can use a declarative approach to build UI components, making it easier to create complex UIs with less code. Compose Multiplatform also provides support for animations, theming, and custom layouts, making it a versatile and flexible tool for creating cross-platform UIs. Starts from Compose Multiplatform 1.4.0 all material ui that was developer for Android now available for iOS too. What Compose Multiplatform Does Not Do While Compose Multiplatform is a powerful tool for creating cross-platform user interfaces, it has some limitations when it comes to handling non-UI mobile features like permissions, geolocation, and biometric authentication. For example, Compose Multiplatform does not handle Android configuration changes. Additionally, Compose Multiplatform does not provide built-in support for requesting runtime

## Mobile Developers React to Jetpack Compose 1.0 - Touchlab

DevFeed: [Mobile Developers React to Jetpack Compose 1.0 - Touchlab](<https://devfeed.tech/articles/mobile-developers-react-to-jetpack-compose-1-0-touchlab-38231.md>)

Original publisher: [Read original article](<https://touchlab.co/jetpack-compose-stable-mobile-developers-reactions>)

Published: 2021-08-04T04:54:54Z

Content type: opinion

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Google](<https://devfeed.tech/topics/google.md>), [jetbrains](<https://devfeed.tech/topics/jetbrains.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [compose](<https://devfeed.tech/tags/compose.md>), [developers](<https://devfeed.tech/tags/developers.md>), [framework](<https://devfeed.tech/tags/framework.md>), [google](<https://devfeed.tech/tags/google.md>), [jetbrains](<https://devfeed.tech/tags/jetbrains.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-multiplatform](<https://devfeed.tech/tags/kotlin-multiplatform.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [release](<https://devfeed.tech/tags/release.md>), [stable](<https://devfeed.tech/tags/stable.md>), [touchlabshare](<https://devfeed.tech/tags/touchlabshare.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

Touchlab mobile developers share their reactions to the release of Jetpack Compose 1.0, the first stable version of Google and JetBrains' Kotlin-based UI framework for Android.

### Source excerpt

Touchlab mobile developers react to Google & Jetbrains released the first stable build of Jetpack Compose 1.0, the new Kotlin-based UI framework for Android.

## Using CSS-in-JS with Svelte

DevFeed: [Using CSS-in-JS with Svelte](<https://devfeed.tech/articles/using-css-in-js-with-svelte-3042.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/svelte-css-in-js>)

Author: Rich Harris

Published: 2018-12-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [CSS](<https://devfeed.tech/topics/css.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [performance](<https://devfeed.tech/tags/performance.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

### AI overview

This article explains how to use CSS-in-JS with Svelte when styles need to be shared across components or optimized at the application level. It demonstrates Emotion for generating scoped class names and cautions that runtime overhead and limited build-time extraction can affect performance.

### Source excerpt

CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished. That's why Svelte allows you to add CSS in a component's <style> tag. Co-locating your CSS with your markup means we can solve the biggest problems developers face when writing CSS without introducing new ones, all while providing a rather nice development experience. But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library. For example Here, we're using Emotion to generate scoped class names that can be used across multiple components: It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application! Note that you can mix-and-match -- you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.

## Toolbar Delight

DevFeed: [Toolbar Delight](<https://devfeed.tech/articles/toolbar-delight-22708.md>)

Original publisher: [Read original article](<https://medium.com/android-ui-patterns/toolbar-delight-8c5e4500b899?source=rss----75dfb6474397---4>)

Author: Juhani Lehtimäki

Published: 2017-09-27T17:06:38Z

Content type: tutorial

Language: en

Sources: [Android UI Patterns - Medium](<https://devfeed.tech/sources/android-ui-patterns-medium.md>)

Topics: [Android](<https://devfeed.tech/topics/android.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [implementation](<https://devfeed.tech/topics/implementation.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [arc](<https://devfeed.tech/tags/arc.md>), [components](<https://devfeed.tech/tags/components.md>), [containers](<https://devfeed.tech/tags/containers.md>), [design](<https://devfeed.tech/tags/design.md>), [feature](<https://devfeed.tech/tags/feature.md>), [layout](<https://devfeed.tech/tags/layout.md>), [toolbar](<https://devfeed.tech/tags/toolbar.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>), [ux](<https://devfeed.tech/tags/ux.md>)

### AI overview

This tutorial explains the design and implementation of a custom Android toolbar for the Social Steps app. It covers playful animations and state changes, scrolling behavior with AppBarLayout and CollapsingToolbarLayout, offset tracking, toolbar elevation, and a custom ToolbarArcBackground view.

### Source excerpt

In this article we explain how and why we did our Social Steps app custom toolbar from implementation point of view. Design Adding delightful details to your user interface is a great way to push your app above competition (assuming, of course, that all the important functionality exists and is well designed). Toolbar is a playground on Android. We decided to fully utilise it in playful but meaningful animations and state changes. The design for this feature, like for the rest of the Social Steps app, was done by Pierluigi Rufo. Pier has promissed to write about the design side in much more detail soon. Stay tuned! Implementation Android's UI framework is extremely powerful and flexible. If you take the time to learn what you can do with it you'll be adding a very powerful tool to your toolbox. Personally, I believe native Android UI being the most powerful prototyping tool currently available. Nearly everything your designer comes up with you can implement in matter of hours (or at least create an approximation of the intended feature). This flexibility extends to proper, scalable, implementations of production-ready features. In our Social Steps app the toolbar was the obvious place where to push the brand and user delight aspects of the app. To maintain scalability, scrolling containers are very commonplace in Android screens. So much so that Google introduces special components for developers to be able to add interesting and useful behaviour to the Android toolbar: AppBarLayout and CollapsingToolbarLayout. With the two above components and a small custom view it's possible to work magic on your toolbar design. Tracking scrolling eventshttps://medium.com/media/cbcccefeb5031bb6f4e8b840e61f1c66/href AppBarLayout.OnOffsetChangedListener This is the tool you can use to get a handle to events when user scrolls your main view (collapses your toolbar). This code is in my main Activity but it works as well in a Fragment if your toolbar is defined in one. appbarLayout.ad

## Building a Good UI Framework with XHP

DevFeed: [Building a Good UI Framework with XHP](<https://devfeed.tech/articles/building-a-good-ui-framework-with-xhp-22036.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/52824249342>)

Author: Codebeforethehorse

Published: 2013-06-12T23:23:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [Framework](<https://devfeed.tech/topics/framework.md>)

Tags: [building](<https://devfeed.tech/tags/building.md>), [component](<https://devfeed.tech/tags/component.md>), [framework](<https://devfeed.tech/tags/framework.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

### AI overview

The article explains how Facebook built a UI framework on XHP, focusing on attribute forwarding and composition. It describes forwarding valid attributes from custom components to their rendered nodes and recommends composing components instead of extending them further.

### Source excerpt

This is the article I wanted to write ever since I started this blog. XHP is a really powerful tool, but like any tool you need to know how to use it for it to be really effective. Facebook has built a very powerful UI framework on top of XHP, but we had to change the way we think about object patterns to do it. I'll get into that in a bit, but first I'm going to jump right into the most important feature of Facebook's UI library: attribute forwarding. Here's the problem, when you make your own XHP component, the element you return in your render method is exactly what will be sent down the wire. That means if you want to apply IDs, classes, onclicks, or any other attributes to an individual instance, you'll have to account for that in your class and set it on the returned node. Here's what I mean by that. class :ui:div extends :x:element { attribute :div; protected function render() { $root = <div />; $root->setAttributes(array( 'id' => $this->getAttribute('id'), 'class' => $this->getAttribute('class'), ... ); return $root; } } That's not a good pattern, so a good UI framework should do this for you. At Facebook, we call our UI core element :ui:base, and this is how we forward attributes: First, we set :ui:base::render() to be final and instead create an abstract method compose() that all extensions will need to override. Then we can get the attributes set on the instance being rendered and compare it with the attribute declaration on the returned node from compose(). We loop through the set attributes and forward them onto returned node (if valid). So our class ends up looking something like this: abstract class :ui:base extends :x:element { abstract protected function compose(); final public function addClass($class) { $this->setAttribute( 'class', trim($this->getAttribute('class').' '.$class) ); return $this; } final protected function render() { $root = $this->compose(); if ($root === null) { return <x:frag />; } if (:x:base::$ENABLE_VALIDATION) { if (!$root in