Hi Rich,
This looks promising. Can you comment on similarities/differences between Ractive and facebook's React.js in terms of style and performance?
Also, looks like the github minified version is 72k, is that correct?
This looks promising. Can you comment on similarities/differences between Ractive and facebook's React.js in terms of style and performance?
Also, looks like the github minified version is 72k, is that correct?
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.
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.
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!
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.
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.
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)
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.
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.
Explain why in comparison to angular?
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.