base on An experimental Rust native UI framework <div align="center"> # Xilem **An experimental Rust architecture for reactive UI** [](https://xi.zulipchat.com/#narrow/stream/354396-xilem) [](https://deps.rs/repo/github/linebender/xilem) [](#license) [](https://github.com/linebender/xilem/actions) [](https://crates.io/crates/xilem) [](https://docs.rs/xilem) </div> This repo contains an experimental architecture, implemented with a toy UI. At a very high level, it combines ideas from Flutter, SwiftUI, and Elm. Like all of these, it uses lightweight view objects, diffing them to provide minimal updates to a retained UI. Like SwiftUI, it is strongly typed. ## Community [](https://xi.zulipchat.com/#narrow/stream/354396-xilem) Discussion of Xilem development happens in the [Xi Zulip](https://xi.zulipchat.com/), specifically the [#xilem channel](https://xi.zulipchat.com/#narrow/stream/354396-xilem). All public content can be read without logging in ## Project structure This diagram gives an idea what the Xilem project is built on:  On a very coarse level, Xilem is built directly on top of xilem_core and Masonry, both of which are crates in this repository. Then Masonry is built on top of: - **winit** for window creation. - **Vello and wgpu** for 2D graphics. - **Parley** for [the text stack](https://github.com/linebender/parley#the-Parley-text-stack). - **AccessKit** for plugging into accessibility APIs. ## Architecture See [ARCHITECTURE.md](./ARCHITECTURE.md) for details. <!--- TODO: This needs a serious refactor. This section should not be in the main README. --> ### Overall program flow > **Warning:** > > This README is a bit out of date. To understand more of what's going on, please read the blog post, [Xilem: an architecture for UI in Rust]. Like Elm, the app logic contains *centralized state.* On each cycle (meaning, roughly, on each high-level UI interaction such as a button click), the framework calls a closure, giving it mutable access to the app state, and the return value is a *view tree.* This view tree is fairly short-lived; it is used to render the UI, possibly dispatch some events, and be used as a reference for *diffing* by the next cycle, at which point it is dropped. We'll use the standard counter example. Here the state is a single integer, and the view tree is a column containing two buttons. ```rust fn app_logic(data: &mut u32) -> impl View<u32, (), Element = impl Widget> { Column::new(( Button::new(format!("count: {}", data), |data| *data += 1), Button::new("reset", |data| *data = 0), )) } ``` These are all just vanilla data structures. The next step is diffing or reconciling against a previous version, now a standard technique. The result is an *element tree.* Each node type in the view tree has a corresponding element as an associated type. The `build` method on a view node creates the element, and the `rebuild` method diffs against the previous version (for example, if the string changes) and updates the element. There's also an associated state tree, not actually needed in this simple example, but would be used for memoization. The closures are the interesting part. When they're run, they take a mutable reference to the app data. ### Components A major goal is to support React-like components, where modules that build UI for some fragment of the overall app state are composed together. ```rust struct AppData { count: u32, } fn count_button(count: u32) -> impl View<u32, (), Element = impl Widget> { Button::new(format!("count: {}", count), |data| *data += 1) } fn app_logic(data: &mut AppData) -> impl View<AppData, (), Element = impl Widget> { Adapt::new(|data: &mut AppData, thunk| thunk.call(&mut data.count), count_button(data.count)) } ``` This adapt node is very similar to a lens (quite familiar to existing Druid users), and is also very similar to the [Html.map] node in Elm. Note that in this case the data presented to the child component to render, and the mutable app state available in callbacks is the same, but that is not necessarily the case. ### Memoization In the simplest case, the app builds the entire view tree, which is diffed against the previous tree, only to find that most of it hasn't changed. When a subtree is a pure function of some data, as is the case for the button above, it makes sense to *memoize.* The data is compared to the previous version, and only when it's changed is the view tree build. The signature of the memoize node is nearly identical to [Html.lazy] in Elm: ```rust fn app_logic(data: &mut AppData) -> impl View<AppData, (), Element = impl Widget> { Memoize::new(data.count, |count| { Button::new(format!("count: {}", count), |data: &mut AppData| { data.count += 1 }) }), } ``` The current code uses a `PartialEq` bound, but in practice I think it might be much more useful to use pointer equality on `Rc` and `Arc`. The combination of memoization with pointer equality and an adapt node that calls [Rc::make_mut] on the parent type is actually a powerful form of change tracking, similar in scope to Adapton, self-adjusting computation, or the types of binding objects used in SwiftUI. If a piece of data is rendered in two different places, it automatically propagates the change to both of those, without having to do any explicit management of the dependency graph. I anticipate it will also be possible to do dirty tracking manually - the app logic can set a dirty flag when a subtree needs re-rendering. ### Optional type erasure By default, view nodes are strongly typed. The type of a container includes the types of its children (through the `ViewTuple` trait), so for a large tree the type can become quite large. In addition, such types don't make for easy dynamic reconfiguration of the UI. SwiftUI has exactly this issue, and provides [AnyView] as the solution. Ours is more or less identical. The type erasure of View nodes is not an easy trick, as the trait has two associated types and the `rebuild` method takes the previous view as a `&Self` typed parameter. Nonetheless, it is possible. (As far as I know, Olivier Faure was the first to demonstrate this technique, in [Panoramix], but I'm happy to be further enlightened) ## Prerequisites ### Linux and BSD You need to have installed `pkg-config`, `clang`, and the development packages of `wayland`, `libxkbcommon`, `libxcb`, and `vulkan-loader`. Most distributions have `pkg-config` installed by default. To install the remaining packages on Fedora, run: ```sh sudo dnf install clang wayland-devel libxkbcommon-x11-devel libxcb-devel vulkan-loader-devel ``` To install the remaining packages on Debian or Ubuntu, run: ```sh sudo apt-get install clang libwayland-dev libxkbcommon-x11-dev libvulkan-dev ``` ## Minimum supported Rust Version (MSRV) This version of Xilem has been verified to compile with **Rust 1.82** and later. Future versions of Xilem might increase the Rust version requirement. It will not be treated as a breaking change and as such can even happen with small patch releases. <details> <summary>Click here if compiling fails.</summary> As time has passed, some of Xilem's dependencies could have released versions with a higher Rust requirement. If you encounter a compilation issue due to a dependency and don't want to upgrade your Rust toolchain, then you could downgrade the dependency. ```sh # Use the problematic dependency's name and version cargo update -p package_name --precise 0.1.1 ``` </details> ## License Licensed under the Apache License, Version 2.0 ([LICENSE](LICENSE) or <http://www.apache.org/licenses/LICENSE-2.0>) Some files used for examples are under different licenses: - The font file (`RobotoFlex-Subset.ttf`) in `xilem/resources/fonts/roboto_flex/` is licensed solely as documented in that folder (and is not licensed under the Apache License, Version 2.0). - The data file (`status.csv`) in `xilem/resources/data/http_cats_status/` is licensed solely as documented in that folder (and is not licensed under the Apache License, Version 2.0). ## Contribution Contributions are welcome by pull request. The [Rust code of conduct] applies. Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be licensed as above, without any additional terms or conditions. [Html.lazy]: https://guide.elm-lang.org/optimization/lazy.html [Html map]: https://package.elm-lang.org/packages/elm/html/latest/Html#map [Rc::make_mut]: https://doc.rust-lang.org/std/rc/struct.Rc.html#method.make_mut [AnyView]: https://developer.apple.com/documentation/swiftui/anyview [Panoramix]: https://github.com/PoignardAzur/panoramix [Xilem: an architecture for UI in Rust]: https://raphlinus.github.io/rust/gui/2022/05/07/ui-architecture.html [xkbcommon]: https://github.com/xkbcommon/libxkbcommon [rust code of conduct]: https://www.rust-lang.org/policies/code-of-conduct ", Assign "at most 3 tags" to the expected json: {"id":"785","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"