React vs Blaze UI test

react
1

I was pretty upset by the Blaze announcement… and I didn’t like the jsx syntax - at all.

Then I did some test. I wrote a small component (about 200 lines) in Blaze and in React.
(I’m not using fancy ui frameworks, just plain meteor/react/blaze and svg)

Here is the result (the top one is React):

Things are getting better, I hope this is a positive note in these gloomy forum days. (cfr. podcast by @joshowens & @benstr)

4 Likes
2

Perhaps im dense, what’s supposed to be going on in that video?

3

My bad. :smile:

It’s a proof of concept for an interactive timeline. I searched around for some js-timeline plugins, but none were flexible enough. I have some experience with svg userinterfaces, so I tried it myself. And its pretty simple really.

  • The top is a ‘draggable’ timeline
  • The dots are events on several documents (creation / modification / etc.)
  • When a small ‘event dot’ is hovered, it displays a popup with some extra info.
4

Hey @batist,

can you share the code of this test? It seems very weird to me to see such a big difference between blaze and react.

Thanks!

1 Like
5

Yes, you might be right, I refactored a bit to give you a demo, seems to be going smoother now (I can’t see a difference) altough sometimes it seem to get stuck in Blaze…

http://document-timeline.meteor.com/

6

Now I can’t see a difference either… And I started switching to React because of your test :sweat_smile:
Switching is not a bad thing but is there a way to add some serious stress to make differences more obvious?

7

Will you update your original comment with the correction as to not mislead anyone please?

8

I suspect that a big part of React’s performance advantage is that it forces you to do things more or less “correctly”, whereas Blaze (at least pre-Meteor Guide) makes it easier to shoot yourself in the foot.

I mean, I’ve certainly had front-end performance issues with Telescope, but it’s hard to say if they’re due to Blaze itself, or poor coding on my part…

1 Like
10

@laurentpayot @aadams I increased the number of documents to show (to 97), there is clear difference now. :slight_smile:

However, I must say I find the Blaze code much easier to understand & maintain!

2 Likes
11

Thanks @batist it’s now more obvious :+1:. Also note that this demo is only working on Chrome (Ubuntu Chromium here) and not on Firefox…

12

Yeah, I see the diff too, focus on the dots, the movement of the timeline once dragged left and right is smoother on react, whereas on blaze, it has a delay. I don’t know if it’s a bad thing or a good thing. :confused:

13

hey @laurentpayot, firefox should be working now (although both are pretty slow on my mac…)

issue: I was setting r in style instead of using an attributes.

1 Like
14

Thanks @batist, the difference is even more obvious on Firefox :+1: