Makepad: Designing modern UIs with Rust - Rik Arends - RustNL 2023
HTML-код
- Опубликовано: 30 май 2023
- Makepad: Designing modern UIs with Rust
by Rik Arends
RustNL 2023, Amsterdam, May 10 2023, 2023.rustnl.org/
github.com/makepad/makepad
/ rikarends 
Наука
code folding is genius!
I would love to see a deep dive talk on the architecture of this on a lower level
I'm sure the guy who got him to recompile his IDE was planted in the audience for technical theatrics. Well played!
Hey, SPOILERS!
BTW - that code folding is amazing. I want it!
Incredible best-of-all-worlds technology and amazing delivery.
Not afraid to say what we are all thinking about the web.
Really want that automatic code folding feature on zoom in other editors!
IDE code zoom feature is amazing. How could I live without it?
Stunning. All the best with that.
This is fantastic, I'd love to see this more progressing
Amazing
really cool project! looking forward to using it!
this seems very awesome! great work!
This is insanely impressive
Very impressed
Looking forward to webgpu support
It's already implemented using the WebGPU API, and he said the WGPU will be implemented in the future
Every once in a while I start to think I'm not as dumb as I thought and then this guy comes along and I realize I'm even dumber than I thought!
Same.
Very inspiring!
5 seconds into the demo I started screaming and have not stopped since.
This is truly an emacs ^2 of all time.
We are all gonna make it, bros!
I gasped audibly on the code folding. I need it!
at 54:00 they sure should have shown the screen...
Russel Crowe knows how to code too?
How do i get started with makepad? cant seem to find any straightforward beginner guides?
I want to start developing my app with this framework, it looks amazing :D
🔥🔥🔥🔥🔥🔨🔨 23:54 45:10
damn, if u can embed apps into the slides does that mean u can make a gui os like experience on the web?
precicely
Laggy as hell. Did you see when he compiled to Wasm
Is this presentation in the codebase, or in another public repo?
go needs to step up their game. Rust is coming out with a bunch of cool UI frameworks
Not a fan of the speaker's views on accessibility, but bravo on the demo! This is seriously impressive work.
wut, that's an actual structural language inside rust macro, did rust-analyzer able to at least parse the macros ?
The BMW has a framebuffer
When did Actor Russell Crowe become a developer?
I thought the modern UI for Rust was called VSCode?
Okay I'll see myself out.
Jokes aside this looks amazing. I'll have to try it out one of these days.
hahaha 21:47
ouf flashing light warning at 6:00!
How is this DSL example different from Dart/Flutter?
From looking at the source (and brief comments in the presentation), makepad's doesn't use an interpreter/vm and writes back native rust structures to the AST during macro processing (its all rust code in the end) and then rust uses LLVM-IR to translate to native code for the specific target, same as Dart/Flutter when compiling a release (dart relies on LLVM-IR). During the presentation, he also mentioned the live IDE views were just recompiling the target on the fly for code change events. Dart/flutter debug mode does use a byte-code VM to hot reload changes and provide other debugging features.
Hmm... this is incredible, but I am a bit intimidated by pixel shaders... Evidently their designer was able to write the pixel shaders and he's supposedly not a programmer... So basically he's probably a better programmer than me lol.
Web devs: compiling react on the server then doing hydration so the first time load of the website takes .1s
Rust on the web: if you wait 5minutes to download all the wasm binaries it will run at 120fps (which is unseen on the web to be fair)
their stuff is instant for me
500kb is not unreasonable for the web. And you clearly haven't seen the web part of the showcase if you think it actually does run at 120fps (it doesn't because browsers at are bad at WASM still)
Can this UI target wgpu?
He said it will be implemented in the future
@@TheGameMakeGuy There's no manual. I've read the source. It's GLES only, for now.
UI is more than just pretty graphics. It is, and I'd argue most importantly, also about accessibility which seems to be missing here. I don't get why we create UI libraries that does not consider accessibility to be a first-class citizen.
And accessibility is more than just "screen readers".
What is accessibility?
@@alskoy Accessibility is in general terms is making experience for a wide range of people.
For example, for people with color deficiencies, you would create accessible controls that doesn't rely on color to represent state and important live regions.
Keyboard navigation is another form of accessibility that is useful for people who don't have the ability or the desire to use pointing devices to navigate a UI.
Some of these problems are required to be supported by an underlying system (e.g. through a UI library), others are domain-specific and is often handled at application level.
Accessibility is about providing universal access for all kinds of people.
@@alskoy High contrast options, dynamically scaleable text, clear and obvious UX that doesn't prohibit those with cognitive dysfunctions from using the tool, operability not requiring two functioning hands, i.e. through required complex keyboard shortcuts or keyboard+mouse combinations, etc.
So, maybe it isn't complete? Maybe such features can be implemented using this tool?
@@Jianju69 I sure hope so. The problem I have is that it's second thought, not built with it in mind. How's it going to look when defining these things in the UI library? How do you avoid adding a ton of complexity onto the developer?
A good example of accessibility API done right (not perfect) is Swift and iOS/macOS ecosystem. By default its controls provides good accessibility, but even if you want to create custom UI, it's very easy to implement accessibility for it that fits the rest of the model.
I can't see that being easily done with what I've seen in the examples in this video, but I could be wrong? And no, I don't think "AI" is magically going to provide good accessibility for you in the nearest future.
🎯 Key Takeaways for quick navigation:
00:12 🚀 *Makepad is a startup aiming to build a UI stack in Rust, inspired by past experiences with web-based IDEs like Cloud9 IDE.*
01:50 💡 *Challenges in using HTML for UI include limitations in innovation, such as animated code folding, prompting exploration of alternatives like WebGL.*
05:12 ⚡ *Makepad utilizes Rust for its speed and performance, enabling complex operations like fractal zooming and real-time UI updates at 120Hz.*
07:11 🎨 *Makepad aims to unify programming and design with a dual-view code editor and visual designer, facilitating seamless interaction between code and design.*
10:08 📱 *Makepad supports Multi-Device UI development by composing multiple UIs from the same codebase, optimizing for specific device experiences rather than generic responsiveness.*
11:50 🎭 *The visual designer in Makepad enables visually designing UI components, offering a familiar design process similar to tools like Figma.*
14:11 💻 *Makepad includes an IDE for live editing Rust code, featuring animated code folding and seamless integration with the visual designer for UI development.*
20:16 🔄 *Makepad's event flow architecture in Rust utilizes a pull-based approach to handle UI events without the need for closures, enhancing performance and maintainability.*
23:36 🔄 *Functional flow systems suggest regenerating UI when data changes, simplifying UI development.*
24:43 🎨 *Using unique IDs and convenience APIs in Makepad for UI development, different from template approaches.*
25:38 📈 *Makepad's UI is mostly incremental, scaling better than pure immediate mode GUIs.*
26:07 💻 *Efficient event handling in Makepad through cheap queries and borrow checker optimization.*
27:44 🛠️ *Makepad's orchestration code for the synthesizer is concise, highlighting efficiency.*
28:28 🔄 *Makepad supports data binding for binding UI elements directly to Rust structs.*
30:00 🌐 *Future Makepad releases will support various platforms, including Windows, Linux, Mac, web, and Android.*
32:16 📱 *Makepad supports Android development with streamlined build tools, aiming for easy integration with Cargo.*
34:25 💡 *WebAssembly's limitations highlighted, with Rust providing more control over resource management.*
35:39 🖥️ *Rust enables accessing multiple targets efficiently, utilizing available compute power effectively.*
42:37 🎨 *Makepad's unique approach to shader styling in UI development, inheriting shaders for ergonomic styling.*
46:49 🛠️ *Makepad's focus on minimizing compile times for efficient development and lightweight applications.*
47:47 📦 *Rik emphasizes lightweightness and minimizing dependencies in UI development to avoid unpleasant experiences like long compile times and CI wait times.*
48:44 🎤 *Rik concludes his talk and opens the floor for questions.*
48:58 💬 *Accessibility support in Makepad is complex, but Rik expresses confidence that future advancements in AI might handle screen reading tasks efficiently.*
50:22 📱 *Makepad is designed to run efficiently on iOS using Metal APIs, with Android requiring more effort due to additional setup.*
52:21 💻 *Rik explains the process of stripping down the Android SDK to minimize its size, making development with Makepad more manageable.*
Made with HARPA AI
this is all really great, but I'm not sure if it runs so well because you did a good job, or because Apple did a good job and your MacBook pro runs it perfectly at 120fps while other platforms be closer to 60 or not run at all. (a fair spoon of scepticism considering how powerful Apple Silicon and Unified memory are nowadays)
If the Pi manages 60 FPS, it's pretty certain he's managing far more than that on other platforms...
I tried this in my old Mac mini 2018. Still it's smooth
You saw how slow it was in the browser. It's just the power of not relying on JavaScript and browser engines.
😭our designer wrote these shaders
"""not a coder""" bro if you're writing shaders it doesn't matter what your title is lol
13 And no man hath ascended up to heaven, but he that came down from heaven, even the Son of man which is in heaven.
14 And as Moses lifted up the serpent in the wilderness, even so must the Son of man be lifted up:
15 That whosoever believeth in him should not perish, but have eternal life.
16 For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.
17 For God sent not his Son into the world to condemn the world; but that the world through him might be saved.
18 He that believeth on him is not condemned: but he that believeth not is condemned already, because he hath not believed in the name of the only begotten Son of God.
19 And this is the condemnation, that light is come into the world, and men loved darkness rather than light, because their deeds were evil.
20 For every one that doeth evil hateth the light, neither cometh to the light, lest his deeds should be reproved.
21 But he that doeth truth cometh to the light, that his deeds may be made manifest, that they are wrought in God.
(Jn.3:13-21)