gpui Tutorial

Summary

GPUI is a GPU-accelerated UI framework created by the makers of Zed, written in Rust. It's available on crates.io and licensed under the Apache license, making it usable by commercial projects.

This tutorial uses gpui 0.2.2. To add it to your project:

[dependencies]
gpui = "0.2.2"

Currently there is not a lot of official documentation, so this tutorial aims to take you through the basics of the framework to get started on your own project.

Sections

• 00 Prerequisites, to make sure you know Rust and have your machine set up properly.
• 01 Hello World, where we learn the basics of creating a gpui app.
• 02 Likes Counter, where we update state when clicking a button.
• 03 Button Component, where we refactor the button into a reusable component.
• 04 Action Keybindings, where we add keyboard shortcuts using actions. (WIP)

To understand the basic terms, see the dictionary. To read more on how I learned the framework, see resources.

Future Topics

• Elements -> make button its own element and compose the three elements, add a click handler and disabled property
• Conditional state -> make it so the button is disabled when reaching 10 likes.
• Actions and keybindings -> add cmd+l as an action for like, and map the click event to that same action.
• Menus -> define menus and map those to actions as well. Menu is disabled too when the action is not available.
• App Icon -> add the application icon as an asset so we have a real app.
• Shared state with Models -> add a dislike button (with cmd+d as keybinding), which is disabled when likes is 0.
• Icons -> turn like and dislike into icon buttons (introducing the svg element)
• Input Controls - give the user the opportunity to update the name
• Avatar -> using the img element

Missing

• RenderOnce vs Render - probably a part of the Elemnts tutorial
• lists (and uniform list)
• notify/observe with update from context
• emit/event
• async app context
• testing
• Window fit & feel -> see positioning, shadow examples
• Animation -> TBD
• Anchored elements

Outstanding Questions

• Is render once for sub-elements that are immutable? Asking...
• If the SharedString is basically an Arc<String>, how does the framework avoid core contention when ensuring atomicity of the reference counter? This article makes a good case that Arc<string> can be slower in some multithreaded scenarios.