Is all of Photopea static besides things have to do with the account management? How do you go about hosting the site? I'm always curious to hear about these things from people who obviously know what they're doing.
Yes, Photopea is only one HTML, one CSS and many JS files. It is about 1.5 MB in total. I pay 40 USD a year for the hosting + 12 USD a year for the .com domain.
Have you tried moving particularly hot portions of code to WebAssembly yet?
Obviously in Photopea's case this would generally require rewriting portions of the code in C/C++/Rust, and potentially doing a few iterations of looking at the generated WASM and tweaking the input to produce the best (maintainable) results... so a bit of a long-term project :)
Whenever you get to this, I'm sure a lot of people would appreciate a benchmark post with
speedup percentages etc.
And WASM is so new that maybe sharing some of the approaches you used, the JS you started with, and the C/C++/Rust/etc you ended up with, might also attract folks looking for assistance with their own image-processing-related projects. (This being said... translation: I, like lots of others, am extremely interested in the bits of code that make Photopea so efficient, which you worked hard to perfect and have every right to not share :D)
Hi, thanks! I think the JS that I write is quite efficient and I don't expect the WASM version of the same features to be faster. But I do plan to write something in WASM and see for myself (you don't have to write in C, you can write WAST and convert it to WASM :D).
I do everything with Javascript. I never liked using native tools / compilers for programming (there are too many of them with too complex configurations). I use only a text editor and a browser for development :)
WASM builds of two C libraries are used in Photopea: Harfbuzz (177 kB) and Fribidi (32 kB). But their authors were kind enough to give me WASM files directly, so I did not have to compile anything.
Just noticed this comment after asking about WebAssembly elsewhere.
Wow, that's amazing.
I did some headscratching with WebAssembly a little while back while figuring out what approach to take for a small thing I wanted to make reasonably cross-platform. My terribly nonscientific back-of-the-envelope benchmark was to time reading/writing an array. Initially JavaScript won squarely over WASM, but then I realized I wasn't using -O3 (woops) and the WebAssembly got about 1.75x faster than it appeared my JS code ever would.
In my very limited experience the most significant difference at the end of the day seems to be that the source language isn't JavaScript. All tooling seems to have grown some element of "????" sadly, and all languages bring their own warts. Once I figured out a working [webassembly generation] workflow, it felt pretty solid, like it wasn't about to fall over too easily. Clang support seems to be just about perfect at this point, if you haven't tried it within the past few months.
My personal first medium/long-term step will be to get a good grip on reading WebAssembly S-expressions, so I can help keep the loop as closed as possible in terms of understanding what my source is generating. (And maybe follow the occasional reverse engineering white rabbit.)
Next will be conquering my love of interpreted languages that don't have a compile step (let alone a long one ;) ), haha. JavaScript indeed can't be beat for rapid iteration! (Particularly if you use live-reload in testing...)
