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
🎯 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 will be great when its a bit more mature and has had alot of people designing re-usable widgets and has a reusable component system like react and vue components are everywhere, to quickly compose ui's with little experience . I think they should setup a shared app location for people to publish components and apps open source apps built with it , to grow it into an eco system gui tool for faster mass adoption .
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.
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".
@@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.
@@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.
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)
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)
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.
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)
code folding is genius!
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!
so what
I would love to see a deep dive talk on the architecture of this on a lower level
Really want that automatic code folding feature on zoom in other editors!
Incredible best-of-all-worlds technology and amazing delivery.
Not afraid to say what we are all thinking about the web.
Stunning. All the best with that.
This is fantastic, I'd love to see this more progressing
IDE code zoom feature is amazing. How could I live without it?
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.
really cool project! looking forward to using it!
This is insanely impressive
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!
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
I gasped audibly on the code folding. I need it!
Russel Crowe knows how to code too?
When did Actor Russell Crowe become a developer?
Very inspiring!
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
wut, that's an actual structural language inside rust macro, did rust-analyzer able to at least parse the macros ?
this seems very awesome! great work!
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
at 54:00 they sure should have shown the screen...
Amazing
That zoom code folding bit is great! Zed devs...?
Not a fan of the speaker's views on accessibility, but bravo on the demo! This is seriously impressive work.
🎯 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
go needs to step up their game. Rust is coming out with a bunch of cool UI frameworks
The BMW has a framebuffer
🔥🔥🔥🔥🔥🔨🔨 23:54 45:10
This will be great when its a bit more mature and has had alot of people designing re-usable widgets and has a reusable component system like react and vue components are everywhere, to quickly compose ui's with little experience . I think they should setup a shared app location for people to publish components and apps open source apps built with it , to grow it into an eco system gui tool for faster mass adoption .
Is this presentation in the codebase, or in another public repo?
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.
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.
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.
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)
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.
hahaha 21:47
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.
😭our designer wrote these shaders
"""not a coder""" bro if you're writing shaders it doesn't matter what your title is lol
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.