zlacker

Keeping Figma Fast: perf-testing the WASM editor

submitted by imslav+(OP) on 2023-08-30 16:01:46 | 287 points 95 comments
[view article] [source] [go to bottom]

NOTE: showing posts with links only show all posts
◧◩◪
7. inssei+s21[view] [source] [discussion] 2023-08-30 19:59:22
>>fidotr+qW
Woah I had never connected the dots - I had used https://github.com/evanw/glfx.js for a realtime photo editor and then wrote https://github.com/inssein/jsfx to render the same without WebGL for printing.
◧◩
10. preomm+m41[view] [source] [discussion] 2023-08-30 20:07:45
>>drewda+5T
It would not.

1. Wasm based UI libraries exist already, checkout makepad [0] for example.

2. Web app standards are way higher than when flash was around. I highly doubt there would be any serious discussion that would also involve vue/react as alternatives. Almost as ridiculous as asking about using unity ui vs react.

3. Flash was world class media design tool for animation and production design. People were using it to create tv shows. Figma is nowhere close in terms of alternatives like illustrator, adobe ae, etc. So it's value as a runtime for 'cool' effects would be very limited. Which is the only reason to not use html/js because otherwise there's all kinds of small usability issues (like things not scrolling right, or not working with mobile). Figma's biggest value is it's collaborative features which is really important for ui design. I think devs (and other non-designers) overvalue Figma's importance because of lack of famliarity. It's kind of like if people thought you could use google docs or notion as an ide. After all they're both text editors right, even if jetbrains or vscode is better, it's maybe 10-20% better? But of course devs know that they're world's apart, like comparing apples to oranges.

[0] https://makepad.nl/makepad/examples/ironfish/src/index.html

◧◩
19. imslav+9g1[view] [source] [discussion] 2023-08-30 20:54:06
>>titzer+lF
Thank you for your comment!

WASM gave Figma a lot of speed by default for a lot of perf-sensitive code like rendering, layouts, applying styles and materializing component instances, our GUI code is mostly React and CSS.

WASM engine performance has not been a problem for us, instead we are constantly looking forward improvements in the devex department: debugging, profiling and modularization.

One of the largest challenges of the platform we face today is the heap size limit. While Chrome supports up to 4GB today, that's not yet the case for all browsers. And even with that, we are still discovering bugs in the toolchain (see this recent issue filed by one of our engineers) https://github.com/emscripten-core/emscripten/issues/20137

The challenge of the perf-testing at scale in our company is helping developers to detect perf regressions when they don't expect them - accidental algorithmic errors, misused caches, over-rendering React components, dangerously inefficient CSS directives, etc.

20. skhame+xi1[view] [source] 2023-08-30 21:04:34
>>imslav+(OP)
Evan Wallace (former CTO) was a WASM pioneer IMO, he has plenty of excellent explorations and works shared on GitHub. I don't know Evan, but I've greatly appreciated stumbling into his works when exploring SharedArrayBuffer and what was once bleeding edge browser performance.

https://github.com/evanw

◧◩◪
21. jjcm+0j1[view] [source] [discussion] 2023-08-30 21:06:55
>>bsder+931
PM over here at Figma - would love to know where you're experiencing lag / where you're seeing useless animations.

Overall we're pretty minimal when it comes to animations in product (i.e. here's a quick 22s recording of navigating between screens/opening properties panels in product today: https://video.non.io/video-2940009905.mp4) as we really want to convey that the app is snappy/performant. Definitely keen on diving in if you're experiencing otherwise. Happy to chat here or my email is jake@figma.com.

Regarding platform specific performance - it shouldn't affect things as long as you have GPU acceleration enabled. The majority of us over here at Figma are using OSX FWIW.

27. mdtroo+8r1[view] [source] 2023-08-30 21:53:11
>>imslav+(OP)
I want to write only: https://penpot.app/
◧◩
35. imslav+px1[view] [source] [discussion] 2023-08-30 22:34:11
>>skhame+xi1
Absolutely! Evan and the early team laid a strong foundation when Figma was ported to WASM + WebGL. It happened before my time at Figma, but check out these earlier posts from Evan and Jamie on the transition, perf testing, and graphs back from 2017-2018:

https://www.figma.com/blog/webassembly-cut-figmas-load-time-... https://www.figma.com/blog/figma-faster/

◧◩◪
48. fhub+oL1[view] [source] [discussion] 2023-08-31 00:16:54
>>no_wiz+GK1
"I cofounded Figma in 2012 with Dylan Field and worked on Figma as CTO for the better part of a decade, leaving in 2021"

From https://madebyevan.com/figma/

◧◩◪
50. aswan+MO1[view] [source] [discussion] 2023-08-31 00:45:15
>>culi+Ha1
No, but there is atom (https://www.figma.com/blog/feed/atom.xml) and jsonfeed (https://www.figma.com/blog/feed/feed.json)
◧◩
60. satvik+s82[view] [source] [discussion] 2023-08-31 04:06:08
>>drewda+5T
You'd likely get something like Flutter. It's actually gotten quite good these days with their web version, 300 ms to load a counter app, and 150 ms with WASM enabled.

There's a great post by Ian Hickson, the project lead of Flutter, about how we might have more WASM based web apps while keeping the DOM for content based websites:

> This document proposes to enable browsers to render web pages that are served not as HTML files, but as Wasm files, skipping the need for HTML, JS, and CSS parsing in the rendering of the page, by having the WebGPU, ARIA, and WebHID APIs exposed directly to Wasm.

>>34612696

◧◩
69. jilles+Hh2[view] [source] [discussion] 2023-08-31 05:43:17
>>drewda+5T
There are multiple ui frameworks now starting to target wasm. I'm keeping an eye on Jetbrain's multi platform compose, which is extending Google's Jetpack Compose for Android to IOS (alpha releas available with 1.5 released a few days ago), Desktop, and Wasm (experimental support available but a work in progress).

That will take a while to come together. Key blockers are removal of the feature flags currently needed to enable things like garbage collection in Firefox and Chrome and the completion of Kotlin 2.0 and it's new compiler (K2) which is currently available via a feature flag in the Kotlin 1.9 stable release. My estimation is that we're about 6 months away from those blockers being resolved. IOS support is likely to transition to beta around the same time. From there to being stable and well supported is probably another year or so.

But a lot of stuff works right now already. However, it's not suitable for production usage because of the early development status the various bits and pieces you need and the need for toggling browser feature flags.

There are some nice examples of IOS support in the recent release notes for compose web: https://blog.jetbrains.com/kotlin/2023/08/compose-multiplatf...

They don't really mention Wasm there as this mostly focuses on the IOS support. They had a lot of presentations about that at kotlin conf and the compose web channel in the kotlin slack is very active.

Basically, anyone currently doing mobile development that is used to modern UI frameworks for that, will soon be able to target browsers effortlessly without compromising on their UI frameworks. Compose is one of the frameworks. But there are others. I've seen some nice kotlin-js frameworks targeting canvas and vector graphics. Doodle is a nice example: https://nacular.github.io/doodle/. I have not used that yet but it looks quite slick. A lot of kotlin-js stuff will transition to wasm once the compiler stabilizes.

Web developers seem to be mostly unable to see beyond their comfort zone of DOM/CSS/JS. There are alternative ways of doing UI/UX that are common outside of browsers. Applying that in a browser is transitioning from impossible (a few years ago) to being hard but very feasible (the last few years) to being easy, very common, and widely supported across different developer ecosystems (the next few years). Not a matter of if but when.

◧◩
84. et-al+VT3[view] [source] [discussion] 2023-08-31 15:50:29
>>lopken+ui3
To be fair, Excalidraw and Figma are vasty different in terms of scope.

Is your GPU doing any work? What are the results from here? https://pmndrs.github.io/detect-gpu/

◧◩◪◨⬒
93. modele+fL7[view] [source] [discussion] 2023-09-01 17:41:03
>>Keyfra+rB1
If you think the web is bad, check out what Apple is planning for their AR headset. The future is apparently a platform so locked down that as a developer you can't directly access the primary input device (eye tracking) at all, you can only pick from a palette of predefined UI behaviors. You can't have access to the cameras to do any custom computer vision; hope you like the primitives Apple deigns to provide to you. And you can't even write your own shaders to render custom graphics; you'll have a preset material model and you'll like it. https://twitter.com/Tojiro/status/1667028702734209025

Honestly I guess it's similar in capabilities to the early web before the introduction of JavaScript, where all custom code had to run on the server. Maybe Apple's plan is to increase capabilities over time the same way the web did. I kind of don't think so, though.

[go to top]