Animating 2048 SVG Nodes in React, Preact, Inferno, Vue, Angular 2, and CycleJS
Ever wondered which front-end framework is smoothest to animate 2048 SVG nodes? Here are some GIFs.
Join the DZone community and get the full member experience.
Join For FreeEver wondered which front-end framework is smoothest to animate 2048 SVG nodes? Here are some GIFs.
Same dancing pythagorean tree fractal, same mid-2012 retina MacBook Pro. All recorded with LICEcap in a normal, everyday setting running Chrome, Spotify, Emacs, etc. Click on a GIF to see its code.
People have been asking why this test is important, why should they care, what’s the point. It’s fun and the demo looks pretty. Fundamentally, it’s a showcase of “jank” – how much jankiness is there between what you see on the screen and what you do with the mouse.
Many of the GIFs have live versions linked from their GitHub. Play with them. Maybe even clone the repo and run it locally. It’s fun.
Implementation: Jason Miller, creator of Preact - not shown with mouse movements :-(
Thanks to Jason, Dominic, and Evan for building the forks. You guys rock!
And thanks to Tero and Wayne for adding their own versions! So exciting! I hope we get more. Someone mentioned a raw JavaScript version without frameworks; that would be cool.
Let’s look at the code. For an in-depth explanation of how it works, go here.
React

Based on Jason’s and Evan’s tips, I added mouse event throttling to my demo to make it faster. Turns out my original tree wasn’t so slow because React is slow. It was slow because I was slamming the rendering engine with so many requests per refresh cycle.
I tried throttling to requestAnimationFrame
, but that didn’t work so good. Throttling to React’s redraw cycle was easy and works well.
|
Check if update is running, do update if not. This works because React’s engine is synchronous.
It might stop working when React Fiber is out. I think. ¯\(ツ)/¯
Preact
Not currently shown with mouse movements... :-(
Jason used the preact-compat
layer to make Preact pretend that it’s React. This might impact performance.
What I love about the Preact example is that it uses async rendering to look smoother. You can see the redraw cycle lag behind the mouse movement producing curious effects.
I like it.
Here’s how he did it: diff on GitHub
In package.json
, he added preact
, preact-compat
, and preact -compat clones for React libraries. I guess you need the latter so you don’t have to change your imports.
He changed the functional stateless Pythagoras
component into a stateful component to enable async rendering.
|
And enabled debounced asynchronous rendering:
|
My favorite part is that you can use Preact as a drop-in replacement for React and it just works and works well. Very promising for future performance optimizations in my current apps.
Inferno

You can use Inferno as a drop-in replacement for React, and at first, I did. Dominic says that impacts performance though, so he made a proper fork. You can see the diff on GitHub.
Dominic changed all react-scripts
references to inferno-scripts
, and it’s a good sign that such a thing exists. He also changed react
to inferno-beta36
, which means my CTO definitely won’t let me use it in production yet.
From there, the main changes are to the imports – React becomes Inferno – and he changed some class methods to bound fat arrow functions. I don’t know if that’s a stylistic choice or an Inferno requirement.
He also had to change a string-based ref into a callback ref. Inferno doesn’t do string-based refs for performance reasons, and we need them so we can use D3 to detect mouse position on SVG. It’s easier than doing it ourselves.
|
In the core Pythagoras
component, he added two Inferno-specific props: noNormalize
and hasNonKeyedChildren
.
According to this issue from 8 days ago, noNormalize
is a benchmark-focused flag that improves performance, and I can’t figure out what hasNonKeyedChildren
does. I assume both are performance optimizations for the Virtual DOM diffing algorithm.
Vue

This… this took a lot of work. Kudos to Evan and the original forker Phan An!
Vue doesn’t aim to mimic React’s API, so this is an almost complete rewrite. I’d show you the diff on GitHub, but it won’t let me do that. You can see the code though.
You can still recognize the core Pythagoras
component. Evan used transform-vue-jsx
to enable JSX inside Vue. So we know that’s something you can do.
The main App.vue
file though… I’m not used to reading that, so I can’t really explain the code. But it looks so familiar.
Let’s try.
It’s split into a <template>
, <script>
and <style>
section. Looks a bit like JSX or HTML, but template props are prefixed with a colon.
Looks like Vue took the put-it-all-together componentization cue from React but decided to split by language anyway. I don’t know if that’s good or bad. It looks cleaner, but in my experience, splitting those eventually becomes burdensome.
The App component still looks roughly like it used to, but it uses data()
to define default state, $refs
instead of this.refs
, a name
attribute instead of naming the class itself, a components
attribute to define children, and a methods
attribute to define class methods.
Curious...
Angular 2

I’ve never been a fan of Angular, but this looks pretty good. Although it did feel extremely janky on my machine.
I don’t know why. Maybe all that type checking from TypeScript adds runtime overhead after transpiling?
The code is a major rewrite, obviously. Tero had to port it all into TypeScript and I find that impressive. I sure wouldn’t!
I wonder how the language barrier affects reusability of random libraries you find online...
The code also looks like it has many more files. App
is split into app.module.ts
, app.component.ts
, app.component.html
, and app.component.css
. Same with Pythagoras
.
This implies Angular is sticking with the traditional one-language-per-file webdev separation… although when you look at an Angular html
file…
|
That’s some funny looking HTML.
I’m also not sure I understand the difference between a module and a component. It looks like the module declares certain imports, children components, and stuff. But each component still declares its own CSS and template imports.
Smells like a framework optimized for very large teams. I’ve never been a part of one of those, so I can’t say how good it is for the use-case it was designed for.
CycleJS

Now this… this was smooth on my machine. Maybe it just feels smooth because I looked at it right after the Angular version, but damn.
Wayne translated everything into TypeScript, but it doesn’t look like CycleJS requires that. Despite that, he was able to keep the same simple file structure as the original. I like that.
It’s hard for me to tell what he changed because of TypeScript and what’s different because of CycleJS. Looks like he’s not using classes to define CycleJS components. The structure looks more like the old school closure approach.
|
This would take some getting used to.
The part I really dislike is how Wayne specifies the DOM in CycleJS. The main App looks like this:
|
Looks a lot like using the React.createElement
approach and I find that hard to read. CycleJS does support JSX however, so I’m not sure why he’s not using it.
That said, the end result is phenomenal.
Edit on Dec 24th: as @spion pointed out, it turns out the CycleJS example only renders 2^10 rectangles. Half as much as the other examples, due to how .take
works. This has a huge effect on the jankiness.
Edit 2: fixed the code in a local copy, updated the gif, still smooth as hell. I’m impressed.
Conclusion
I have no idea which is fastest. They all look smooth to me. Maaaybe Vue is the smoothest. Or maybe Inferno. I like that Preact enables asynchronous rendering. That was cool to see.I’m biased against Angular, and found CycleJS hella impressive.
React is king in the “Good Enough And I Already Know How To Use It” department.
I don’t foresee migrating my code to Vue, Angular, or CycleJS any time soon. Too much work. Preact or Inferno as drop-ins? Waiting to see what React Fiber does.
My biggest takeaway from this experiment though: buy a new computer. When others made GIFs it looked smooth as hell!
If you want to learn more about drawing interactive pictures, building animations, and creating declarative data visualizations, you should pre-order my new React+D3v4 book. It’s coming out soon, and there will be a chapter on leveraging Preact and Inferno for speed optimization.
You should follow me on twitter, here.
Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments