It’s the redraws, stupid

For quite a while I’ve had a React vs Bindinator comparison on the bindinator site. It compares the way the screen redraws in React’s simple To Do example (it’s the bottom example on the reactjs.org home page) vs the equivalent Bindinator example. The results are not favorable to React. But hey, the React code is more than twice as long, and kludgier.

The resulting comparison is visual and makes its point immediatelyâ€¦

React’s “To Do” example, with Chrome’s redraw paint flashing switched on. Look how the completely static H2 is being redrawn despite the fact that it not only doesn’t change and is above the stuff that is changingâ€”it can’t change.

Bindinator’s “To Do (Simple)” example. The original b8r To Do example was dumbed down to match the functionality of the React demo.

I tried to do a similar thing for Angular vs Bindinator but couldn’t find a similar tutorial. (The official Angular tutorial is way more complicated and didn’t have a live demo when I looked; it still doesn’t seem to have one.) So, I ended up going pretty deep into the weeds on fairly complex issues with Angular that is certainly not as simple as just showing horribly inefficient screen redraws.

But, tonight as I was thinking about Angular for another reason, I found this tutorial on Sitepoint. Now, the tutorial implements an Angular “service” for the To Do, and also implements some tests. All in all, it’s horrifically more complex than either the React or bindinator tutorials. Almost hilariously, the tutorial requires you to use Angular-CLI, a tool to generate scaffolding because boilerplate.

And it has a live demo.

If a picture is worth a thousand words, how much is this gif worth?

Now, this isn’t being helped by the fact that animated transitions which could be accomplished with CSS animation appear to be implemented by brute force, but even so.

Incidentally, the actual b8r To Do example is rather more sophisticated, and includes the ability to prioritise items and change their state, and undo support. It’s 82 lines of code including HTML, javascript, and a little CSS. (It uses b8r’s default CSS.)

So, my basic point is that you can accomplish a task using bindinator with fewer lines of code, that are easier to read and understand, that runs more efficiently, than other leading frameworks.

Also see: You have ruined Javascript.