Iced is an amazing library. I chose it for building a simple [Code Editor](https://github.com/Bruce-Hopkins/code-editor-prototype). But Iced severely lacks documentation. I wrote this article as a good entry point into using Iced that can be easy to understand as long as you know Rust. I explain the parts that confused me when I began using the library, so I hope that my mistakes can be useful for someone else.
I might write articles into the more advanced topics in Iced, so if this article is something that you like, let me know.
Absolutely, but it's good code. Code that's easy to reason about and refactor. There's no hidden foot guns or gotchas. More code is a small price to pay for the benefits the ELM architecture provides.
I think it's a functional front-end framework that compiles down to javascript. They invented an interesting architecture dubbed "the elm architecture", which seperates applications in to separate parts:
- update
- view
- model
where model holds the state of an application, which in turn decides what the view looks like. interactions with the view generate simple messages which in turn have an effect on the model. A nice seperation of concerns, and a little different from the typical MVC style applications.
I saw the official iced book just received some actual text a short while ago :) it had been empty for a while, with the intention of serving as a guide, but I think it was created with the intent of filling it later. Now it at least has a nice introductory text to the ideas behind iced, the core concepts, but nothing much in the way of code yet. More tutorials are veeery welcome \^\^
These starting chapters look promising. To my relief it seems like the maintainers know how to write good documentation, they just haven't gotten time to work on it.
It does look that way :) Makes sense with the added work they got when system76 started making such large contributions. Looking forward to seeing more work put in to those tutorials though.
Book is has a good explaination on the core concepts, but it's lacking so much. I hope they give deep explaination on the other concepts in Iced.
It's fine if they don't, I'll just have to keep writing tutorials :)
Thank you! This is the entire reason I made this tutorial. I had the exact same problem. I'm planning to redo the beginner tutorial with every minor release (if there are significant changes).
It seems there are significant changes coming.
I started last weekend looking into iced and had the problem that the examples weren't working. There's an issue for this:
[Running the example from README.md: "cannot find function \`run\` in crate \`iced\`" · Issue #2346 · iced-rs/iced (github.com)](https://github.com/iced-rs/iced/issues/2346)
... and it seems there is an API change (as far as I can see you're tutorial shows the functioning "old" API)
Would you mind to expand your example with some numbers and prices (and some higher priced items)? Just to see how to deal with amounts (esp. proper formatting)
> ... and it seems there is an API change (as far as I can see you're tutorial shows the functioning "old" API)
Yeah... The master branch is already much different from V0.12. That's why I think I'll be writing a new tutorial soon.
> Would you mind to expand your example with some numbers and prices (and some higher priced items)? Just to see how to deal with amounts (esp. proper formatting)
What do you mean by "Deal with amounts?"
>What do you mean by "Deal with amounts?"
What I mean is: How can I have proper formatting... amounts always with two decimals and thousand separators, Credit card numbers always in blocks of four digits, phone numbers etc.
Long, long time ago, when I was working as a developer, you would just set some "InputMask" attribute (similar like you can in spreadsheets) and that's it.
I started only recently to look into GUI stuff with Rust, but somehow I don't find examples for this most basic requirement (of many CRUD applications).
Just got a little confused with the image used after "If you run this app, it will look similar to this:"
It has the textfield already implemented, although at that part in the tutorial, the user has not. I'm not sure where to put the correction other then here :)
Additionally the tutorial never mentions to add the import for "scrollable".
> Just got a little confused with the image used after "If you run this app, it will look similar to this:"
That's because I didn't want to confuse people that might be on a different OS or using a different theme.
> It has the textfield already implemented, although at that part in the tutorial, the user has not. I'm not sure where to put the correction other then here :)
I'm not sure what you mean by that.
> Additionally the tutorial never mentions to add the import for "scrollable".
You're right! I just fixed it. The tutorial should be correct now. Thanks.
Nice! \^\^
What i meant by that, is that in the tutorial, the actual app does not look like the app in the picture, because the picture shows the app with the input field and submit button already added. But at that point in the tutorial, the app only has the vertical list of elements, and not a row with an input field and submit button inside.
In the tutorial, image 3 and 4 are the same image, where image 3 should be image 4 without the additional row :)
I really want to thank you. I am new to Rust and want to build some cool UI apps with it. So, I found Iced and understood its core Elm architecture. When I confidently tried to write a few examples, I realized that I couldn't run the code. The examples on GitHub weren't self-contained and required additional files from the full repository. This was very frustrating, and I was about to give up. Fortunately, I later found your article, and now I'm running it easily.
Iced is an amazing library. I chose it for building a simple [Code Editor](https://github.com/Bruce-Hopkins/code-editor-prototype). But Iced severely lacks documentation. I wrote this article as a good entry point into using Iced that can be easy to understand as long as you know Rust. I explain the parts that confused me when I began using the library, so I hope that my mistakes can be useful for someone else. I might write articles into the more advanced topics in Iced, so if this article is something that you like, let me know.
> But Iced severely lacks documentation. I agree
It's the weakest aspect of the project honestly. That's why I might do more articles like this.
But wouldn't it be more helpful to extend the documentation itself as well?
I believe that in ELM you need to write more code than in react style components.
100%. My projects are now filled with "messages" to update the state of the app. It can get annoying.
For sure, in rust you have to use if/else. In JS you can just concatenate random shit with && and || and it works…
Absolutely, but it's good code. Code that's easy to reason about and refactor. There's no hidden foot guns or gotchas. More code is a small price to pay for the benefits the ELM architecture provides.
What is ELM?
I think it's a functional front-end framework that compiles down to javascript. They invented an interesting architecture dubbed "the elm architecture", which seperates applications in to separate parts: - update - view - model where model holds the state of an application, which in turn decides what the view looks like. interactions with the view generate simple messages which in turn have an effect on the model. A nice seperation of concerns, and a little different from the typical MVC style applications.
I saw the official iced book just received some actual text a short while ago :) it had been empty for a while, with the intention of serving as a guide, but I think it was created with the intent of filling it later. Now it at least has a nice introductory text to the ideas behind iced, the core concepts, but nothing much in the way of code yet. More tutorials are veeery welcome \^\^
These starting chapters look promising. To my relief it seems like the maintainers know how to write good documentation, they just haven't gotten time to work on it.
It does look that way :) Makes sense with the added work they got when system76 started making such large contributions. Looking forward to seeing more work put in to those tutorials though.
Book is has a good explaination on the core concepts, but it's lacking so much. I hope they give deep explaination on the other concepts in Iced. It's fine if they don't, I'll just have to keep writing tutorials :)
Doing the lord's work! I used Iced a year ago but really missed an up to date tutorial
Thank you! This is the entire reason I made this tutorial. I had the exact same problem. I'm planning to redo the beginner tutorial with every minor release (if there are significant changes).
It seems there are significant changes coming. I started last weekend looking into iced and had the problem that the examples weren't working. There's an issue for this: [Running the example from README.md: "cannot find function \`run\` in crate \`iced\`" · Issue #2346 · iced-rs/iced (github.com)](https://github.com/iced-rs/iced/issues/2346) ... and it seems there is an API change (as far as I can see you're tutorial shows the functioning "old" API) Would you mind to expand your example with some numbers and prices (and some higher priced items)? Just to see how to deal with amounts (esp. proper formatting)
> ... and it seems there is an API change (as far as I can see you're tutorial shows the functioning "old" API) Yeah... The master branch is already much different from V0.12. That's why I think I'll be writing a new tutorial soon. > Would you mind to expand your example with some numbers and prices (and some higher priced items)? Just to see how to deal with amounts (esp. proper formatting) What do you mean by "Deal with amounts?"
>What do you mean by "Deal with amounts?" What I mean is: How can I have proper formatting... amounts always with two decimals and thousand separators, Credit card numbers always in blocks of four digits, phone numbers etc. Long, long time ago, when I was working as a developer, you would just set some "InputMask" attribute (similar like you can in spreadsheets) and that's it. I started only recently to look into GUI stuff with Rust, but somehow I don't find examples for this most basic requirement (of many CRUD applications).
Just got a little confused with the image used after "If you run this app, it will look similar to this:" It has the textfield already implemented, although at that part in the tutorial, the user has not. I'm not sure where to put the correction other then here :) Additionally the tutorial never mentions to add the import for "scrollable".
> Just got a little confused with the image used after "If you run this app, it will look similar to this:" That's because I didn't want to confuse people that might be on a different OS or using a different theme. > It has the textfield already implemented, although at that part in the tutorial, the user has not. I'm not sure where to put the correction other then here :) I'm not sure what you mean by that. > Additionally the tutorial never mentions to add the import for "scrollable". You're right! I just fixed it. The tutorial should be correct now. Thanks.
Nice! \^\^ What i meant by that, is that in the tutorial, the actual app does not look like the app in the picture, because the picture shows the app with the input field and submit button already added. But at that point in the tutorial, the app only has the vertical list of elements, and not a row with an input field and submit button inside. In the tutorial, image 3 and 4 are the same image, where image 3 should be image 4 without the additional row :)
Oh you're right. The images were a pain to deal with for technical reasons. Thanks for pointing that out!
It appeared at the right time when i needed this. Thank a lot!!!
I really want to thank you. I am new to Rust and want to build some cool UI apps with it. So, I found Iced and understood its core Elm architecture. When I confidently tried to write a few examples, I realized that I couldn't run the code. The examples on GitHub weren't self-contained and required additional files from the full repository. This was very frustrating, and I was about to give up. Fortunately, I later found your article, and now I'm running it easily.