Hacker News Reader

Comment by rich_harris | Hacker News Reader

Thanks. Performance-wise, I haven't tested Ractive and React against each other, but that would be a test worth doing. Ractive is definitely built with performance in mind - it uses dependency tracking to ensure that the DOM is only updated when necessary.

As far as the style goes, I'm obviously biased, and I'd encourage people to try both to see what suits them best. For me, mustache syntax is very readable, even by non-devs (which makes collaboration and rapid prototyping very easy), and the Ractive API aims to be as easy as possible.

I find React's JSX to be a bit of a barrier (I'm aware that it's not essential to use JSX with React), but as I say it's a matter of personal preference.

Yes, it's currently about that size (27k gzipped) - one of my goals for future versions is to try and wrangle that down. It's not that big a library for the amount of functionality it contains, but smaller is always better.

View on HN

Hey there! I'm on the FB/IG React core team.

Syntax differences aside, seems to me that React is geared more towards interactive UI components and Ractive is oriented more towards reactive documents, kind of like Tangle[1]. Is this accurate?

The similarity seems to be in the philosophy of the implementation (manipulating a fast representation and rendering to the DOM). It's pretty cool to see that we both discovered the "secret" though :) Seems like we're validating each others' projects!

If you ever want to nerd out we hang out in #reactjs on freenode.

[1] http://worrydream.com/Tangle/

Hi! Yes, I was excited when React came out because it demonstrated that I wasn't the only one who felt that these problems hadn't been fully solved yet (though a part of me thought 'well I may as well give up now...'),

Yes, you could draw the Tangle comparison, though I think there's probably a fair amount of overlap - a couple of the Ractive examples are recreations of React/Angular demonstrations.

Looking forward to spending some more time with the React source code to try and learn your secrets!

I agree with React being geared more towards interactive UI components, but on the other hand you could use Ractive with WebComponents/Polymer instead of MDV to get all this powerful component lifecycle.

Still working on a solution that mix Backbone for core models + Polymer for view lifecycle and custom elements + Ractive for awesomeness updating.

The only concern I have is that some people do not like to use logicless.. I think React is powerful for letting you declare full javascript evaluations and expressions on your template code and giving you more flexible/productive way of writing.

Ractive does have a way of including JavaScript evaluations in the template which as far as I'm aware is unique: http://learn.ractivejs.org/#!/expressions/1

The JavaScript expression is parsed into an AST, and references to parts of the data model are extracted so they can be dependency tracked and evaluated against the right context. Quite hard to explain concisely but I think it does what you're after.

Hey Rich, this looks like it's a lot easier to get into than Angular or Backbone, as someone who doesn't have a lot of JS experience beyond jquery. However, I'm interested in connecting it to a server.

I really like the classic "Hello, {name}" example- how would I go about supplementing that so not only is the model constantly updated on the client JS side, but also on the server's database? Is there some place where I put a .ajax() call and Ractive.js handles the rest? (So the functionality would then be to display the name in the database, but whenever modified by the user, the database's value is also modified)

I'm also interested in hearing the recommended way to handle this situration.

At the moment, Ractive doesn't really have an opinion on the subject - it was initially developed with news interactives in mind, where very often there isn't a need to communicate to a backend.

Backbone et al are better at handling that side of things. The Ractive approach is to use an 'adaptor' - so you could create a Backbone Model or Backbone Collection adaptor that maps to a particular 'keypath' (such as 'user' or 'items'), and whenever the model changes, Ractive updates. With two-way binding, user interactions can also change the model.

This part of the library is underdeveloped and experimental at the moment, but that's the approach we'll most likely be taking.

You can use Ractive on the server however - you can use the same data on the server as on the client and call ractive.renderHTML(), which is useful for progressive enhancement.

It is my impression also that react is aimed at very large sites (like Facebook), and you need to have a strong grasp of various approaches to dom management to wield React well. Though in the hands of an expert React is the sharpest DOM management tool available and its not even close.

Ractive's approach appears to be much more suitable for use cases like a journalist interested in only learning barely enough javascript to get by.

>Though in the hands of an expert React is the sharpest DOM management tool available and its not even close.

Explain why in comparison to angular?

you will want to research and form your own opinion as there are very subtle nuances that have enormous consequences in maintaining large codebases, but here's a starting point: http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-Angu...

The main issue is that to do anything complicated in angular you need to start writing tricky[1] "link" functions; the React approach completely sidesteps this complexity. There are some tradeoffs you have to accept, like JSX, but they are easily worth it.

[1] tricky is of course relative; angular is easier to code than something like backbone+jquery or backbone+knockout.

Reply on news.ycombinator.com