Is there any way for a beginner to figure out documentation?

I'm trying to learn Rust. Just make a simple page with a canvas, draw some stuff on it, read user input and build on that.

Why do they make it near impossible for someone like me, with not a lot of programming experience, to start? Why use all these frameworks, deployment methods (like NPM or Webpack) when I am trying to learn the language itself. No bloat, no anything, just Rust with pure JS and WASM, the language I'm trying to learn and understand in combination with these.

A simple paint example (web-sys: A Simple Paint Program - The `wasm-bindgen` Guide) now has a ton of stuff they're never gonna go over and I have no idea where to find references or even try to start and reverse engineer it..

Any tips on how to begin to grasp such a simple thing, since they're not explaining the basics themselves? Am I aiming too high?

Well, the first reason is probably that the JS and Wasm are not "the language itself" - they're something external, something that should be learned either before starting Rust or independently from it. It'd probably be easier to start with console application, since that would not pull anything you don't learn.

2 Likes

How can I find some documentation to the syntax used in this example?

If your goal is just "make a simple page with a canvas, draw some stuff on it", I would suggest you drop Rust and pick JavaScript for it. You can also try PIXI.js or two.js which are designed to serve the purposes of drawing on canvas, and they also provide guides with some steady learning curve.

For web programming on Rust, I don't think it's a mature ecosystem to start with, especially for beginners. It's sometimes still hard for people like me who has 1 year for Rust and years for JavaScript.

4 Likes

The problem you describe is not the fault or Rust the language. It is typical of web development in general. As I found out when, as a long time user or C, C++ and other languages, I tackled some web development. All of a sudden I was waist deep in React, Webpack, and so on.

If you really want to show away all that garbage and just use raw Rust, WASM and JS you can start with something simple like this: Making really tiny WebAssembly graphics demos - Cliffle

As Cliff says there:

In this post, I’ll show how to create a simple web graphics demo using none of those tools β€” just hand-written Rust, JavaScript, and HTML. There will be no libraries between our code and the platform. It’s the web equivalent of bare metal programming!

Thing is, when you have done that and understood it, you will end up realising why you need all that heavy duty framework and build system stuff. Crafting it all by hand is very tedious and error prone.

5 Likes

Great!

Given the current state of Rust wasm libraries, I would not recommend this as a first project.

I am currently building a WebGL app in Rust/wasm via web_sys / js_sys. I would not recommend it. I ended up learning more about wasm, chrome, JS runtime than I ever wanted to know.

The setup for callbacks are clunky (and I'm almost certain unsafe, as it takes refs that are not 'static), auto completion is hit / miss, debugging wasm in chrome dev tools is sub optimal; sooner or later, something in wasm_bindgen / web_sys is going to break and you'll have to learn all types of inner details.

1 Like

You must understand that Rust is not a native web programming language by any means. While the browser may be the natural entry platform for today's (and even yesterday's) would-be programmers, and you can pretty much start writing JS and get something on screen in minutes, to Rust the browser is a weird, foreign environment, requiring bleeding-edge tech (WASM) and separate build steps to deploy on. The comfort zone of Rust – the environment requiring the least effort to write for – is natively compiled operating system applications, in particular command-line ones.

3 Likes

Do you speak any javascript? Or any rust. Well, I am a long time, permanent beginner myself for both, so I may be qualified to answer.

A "kids"plain..
If you use the web platform, Mozilla MDN is a very awesome resource, but they now sell a "premium" access and their content is now harder to navigate, but all is still there access in the "search" bar.
If you use the web you need at this time to use at least some javascript with your wasm. The wasm runs around in a sandbox can not get out very easy. So to access the browser API's you need to make a way to call into javascript. I think the term is "bindings". But it is just some words in a text file.
So there are these web API's and the MDN link can tell you all about them. One of these web API's is called wasm.
First you have a webpage. HTML. Make it simple at first. If you read the MDN page for wasm you will find some easy and complex examples. The rust example I find complex because it brings in this wasm-bindgen, ( I think it means it generates binding for wasm) and wasm-pack (because wasm-bindgen ) is too hard to use directly.
So enough kidding.

I learn better when I see something "nifty" that works and there are code samples short enough for me to kind of understand.

If you can read a few pages of code I found one very easy to understand example of how to put 3 vertices onto a webgl canvas (draw a triangle). This example has a simple index.html with a about 100 lines that is mostly short javascript functions and some code that makes it so the wasm and javascript can talk. The rust lib.rs file is about 200 lines but most of it is just the same kind of stuff. You will notice it just calls the javascript imported functions. And if you know already some javascript you might already know about requestanimationframe() and be able to figure out how to mix it into the code.
I have parsed it with my brain a bit and if you need help understanding any part of it, just ask.
Do you have any webgl experience? That might help if you do.

Or if you like a more complicated example, but the parts are all easy and you do not really need to know any webgl. Look at egui. (it also runs native) This demo page shows what it can do. That is a lot of code, but there are small parts inside that are easy understand. If you look at this example of a fractal clock and the code that draws it. You will notice the "depth" slider. Put it as high as possible and see the "Painted line count" On my simple system, I can get 65535 lines without going too slow. Maybe you can just use egui paint and start with that to "learn" You will need then of course to learn the egui paint api if you do anything complicated.

Thank you very much for this answer. The examples are great too! I can use these a lot with the given documentation to try and figure out simple stuff, and hopefully add onto that!