5 ms·

Can anyone speak to the difference in approach between Blaze and React? Or are they doing essentially the same thing? At first glance, this seems much better i

Can anyone speak to the difference in approach between Blaze and React? Or are they doing essentially the same thing? At first glance, this seems much better in terms of programmer productivity, given that it uses logicless templates rather than embedding HTML inside JS code. But I'd be curious if it's less performant.

heck0045 13y ago
They are trying to solve the same problem: gatekeepers to any mutable data that affects your DOM -- but they do it in pretty different ways: (1) under the hood, Blaze tracks the DOM changes and applies them directly whereas React diffs the resultant HTML and applies the difference. (2) Blaze uses declarative templates for injecting HTML; React requires HTML to be built using virtual DOM elements in javascript. Here is one of the React core developers (Pete Hunt) on React integration with Meteor: http://www.youtube.com/watch?v=qqVbr_LaCIo http://www.youtube.com/watch?v=qqVbr_LaCIo (note this is before Blaze) Regarding performance: https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj_po https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj...
colbyh 13y ago
Looking through the Blaze wiki I'd say that Blaze is more concerned with calculating updates based on changes in data (either by user action or networked bindings) and React is more concerned with managing the entire lifecycle of an element. React will probably be easier to reason about down the line (despite the initial learning curve), while Blaze will "just work".
avital 13y ago
Hi, I work on Blaze. React and Blaze both compile templates or components into an intermediate representation for their HTML structure (React's JSDOM; Blaze's HTMLJS). A lot of the difference in how they decide what DOM changes are necessary. React re-renders components when data changes and diffs the resulting JSDOM. The diff algorithm is fast and has simple hooks to make it faster by letting you compare state and component properties. Blaze doesn't diff the resulting DOM structure. Instead, Blaze diffs the data the components depend on. That data comes from reactive functions built on top of Deps, our dependency tracking system. When the component first renders, dependencies are tracked between data sources and rendered DOM elements (dependencies are automatically cleaned up when the component is taken off the page). Therefore when data changes, Blaze can directly update the relevant elements. There is some overhead in Deps, our dependency tracking system, but Deps has been intentionally designed for supporting this efficiently (eg batching updates in a "flush" stage). As for performance, our benchmarks have generally found that React outperforms Blaze when many elements change and Blaze outperforms React when few elements change (which is more common for typical operations on many web apps). We also have plans to improve performance on initial rendering. There are some other difference worth noting: While a later version of Blaze will support easy APIs for re-useable components, React already has one. And the React component model is well-thought out, complete and in production use whereas the Blaze component model at the moment is only the implementation behind templates. Happy to hear any other perspectives.
- TylerE 13y ago
  I have to say I'm pretty excited, since it now looks like there is a non-hacky way to use jade templates, which as far as I'm concerned are a big win. Any more details to shed on that aspect?
- rtfeldman 13y ago
  Not to detract from the positivity of sweet new tech, but it's worth noting that "React outperforms Blaze when many elements change and Blaze outperforms React when few elements change" is the same as "React outperforms Blaze in cases where the user is capable of noticing a performance difference", which reduces to "React outperforms Blaze." Nevertheless, seriously appreciate the detailed and informative response. :)
  - imslavko 13y ago
    Does it mean that, theoretically, Blaze will still outperform React on a long series of small quick updates conducted by a lot of disconnected events?
  - myhf 13y ago
    I'll have to see how each one handles a big grid of rotating colored circles with numbers on them in order to make an informed decision.
  - ZeroGravitas 13y ago
    That might be true, but it doesn't automatically follow. Java often gets dinged for startup time that it might make up for on longer runs and browser vendors seem to be sniping that their rivals are focussing on long term benchmarks at the expense of realistic workloads.
- vjeux 13y ago
  If you use `shouldComponentUpdate`, then React outperforms Blaze on the circle benchmark for both single and large number of updates. See Andrey Popp JSFiddles: https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj_po https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj... React by default is fairly fast but what makes it stand out is that it gives the tools to make the bottlenecks faster without having to drop the nice abstraction.

heck0045 13y ago

They are trying to solve the same problem: gatekeepers to any mutable data that affects your DOM -- but they do it in pretty different ways: (1) under the hood, Blaze tracks the DOM changes and applies them directly whereas React diffs the resultant HTML and applies the difference. (2) Blaze uses declarative templates for injecting HTML; React requires HTML to be built using virtual DOM elements in javascript. Here is one of the React core developers (Pete Hunt) on React integration with Meteor: http://www.youtube.com/watch?v=qqVbr_LaCIo http://www.youtube.com/watch?v=qqVbr_LaCIo (note this is before Blaze) Regarding performance: https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj_po https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj...

colbyh 13y ago

Looking through the Blaze wiki I'd say that Blaze is more concerned with calculating updates based on changes in data (either by user action or networked bindings) and React is more concerned with managing the entire lifecycle of an element. React will probably be easier to reason about down the line (despite the initial learning curve), while Blaze will "just work".

avital 13y ago

Hi, I work on Blaze. React and Blaze both compile templates or components into an intermediate representation for their HTML structure (React's JSDOM; Blaze's HTMLJS). A lot of the difference in how they decide what DOM changes are necessary. React re-renders components when data changes and diffs the resulting JSDOM. The diff algorithm is fast and has simple hooks to make it faster by letting you compare state and component properties. Blaze doesn't diff the resulting DOM structure. Instead, Blaze diffs the data the components depend on. That data comes from reactive functions built on top of Deps, our dependency tracking system. When the component first renders, dependencies are tracked between data sources and rendered DOM elements (dependencies are automatically cleaned up when the component is taken off the page). Therefore when data changes, Blaze can directly update the relevant elements. There is some overhead in Deps, our dependency tracking system, but Deps has been intentionally designed for supporting this efficiently (eg batching updates in a "flush" stage). As for performance, our benchmarks have generally found that React outperforms Blaze when many elements change and Blaze outperforms React when few elements change (which is more common for typical operations on many web apps). We also have plans to improve performance on initial rendering. There are some other difference worth noting: While a later version of Blaze will support easy APIs for re-useable components, React already has one. And the React component model is well-thought out, complete and in production use whereas the Blaze component model at the moment is only the implementation behind templates. Happy to hear any other perspectives.

TylerE 13y ago
I have to say I'm pretty excited, since it now looks like there is a non-hacky way to use jade templates, which as far as I'm concerned are a big win. Any more details to shed on that aspect?
rtfeldman 13y ago
Not to detract from the positivity of sweet new tech, but it's worth noting that "React outperforms Blaze when many elements change and Blaze outperforms React when few elements change" is the same as "React outperforms Blaze in cases where the user is capable of noticing a performance difference", which reduces to "React outperforms Blaze." Nevertheless, seriously appreciate the detailed and informative response. :)
- imslavko 13y ago
  Does it mean that, theoretically, Blaze will still outperform React on a long series of small quick updates conducted by a lot of disconnected events?
- myhf 13y ago
  I'll have to see how each one handles a big grid of rotating colored circles with numbers on them in order to make an informed decision.
- ZeroGravitas 13y ago
  That might be true, but it doesn't automatically follow. Java often gets dinged for startup time that it might make up for on longer runs and browser vendors seem to be sniping that their rivals are focussing on long term benchmarks at the expense of realistic workloads.
vjeux 13y ago
If you use `shouldComponentUpdate`, then React outperforms Blaze on the circle benchmark for both single and large number of updates. See Andrey Popp JSFiddles: https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj_po https://groups.google.com/forum/#!topic/meteor-core/-px_AGhj... React by default is fairly fast but what makes it stand out is that it gives the tools to make the bottlenecks faster without having to drop the nice abstraction.