ManuelDeLeon
commented
8 years ago IMHO the most important similarities are:
- Small API footprint (there isn't that much to learn)
- Encouragement to create your apps with small components.
The biggest difference I see is that ViewModel is declarative and React is imperative. With ViewModel you use or create bindings that encapsulate the functionality you want. The functionality can be anything from changing the element, wrapping it, adding/removing attributes, etc. While you can do the same with React, it wouldn't be in the spirit of the library.
And of course with ViewModel you need less lines of code to accomplish the same tasks =)
Regarding the <li>: that's because you have to use Blaze's #each. ViewModel sits on top of Blaze so it doesn't try to reinvent the wheel:
<ul>
{{#each people}}
<li>{{name}}</li>
{{/each}}
</ul>It does have the disadvantage that it gets a little verbose for small things like:
<template name="people">
<ul>
{{#each people}}
{{> person}}
{{/each}}
</ul>
</template>Template.people.viewmodel({
selected: null
people: function() {
return People.find();
}
}, 'people');<template name="person">
<li data-bind="text: name, click: select" ></li>
</template>Template.person.viewmodel({
select: function() {
this.parent().selected(this._id());
}
});I'm working overtime on ViewModel v2 which will simplify things:
<template name="people">
<ul>
{{#each people}}
<li {{b "text: this.name, click: selected(this._id)" }} ></li>
{{/each}}
</ul>
</template>Template.people.viewmodel({
selected: null,
people: function() {
return People.find();
}
});I'm trying to get the best of React and Angular (avoiding $scope hell of course).
Another thing I'm working on is simplifying the way you share state and functions between templates/components. I'll give you the option of sharing a vm property with all descendants, the instances of the same template, and even between non related view models.
The best use case for the last one is a search box on the heading. You will be able to define a set of properties (in our example it would only be 'searchText') and name them (say "search"). Then when you define the heading view model you would tell it to use the shared properties of "search". The same wherever else you have a list that depends on the search box. You would tell that view model to use the shared properties of "search". That way both view models are sharing the same property. No coupling, no spaghetti.
On the horizon I plan to create a time travel debugging tool for ViewModel. The hardest part here is to create a decent UI for it because the core functionality is actually pretty trivial when you use view models. All it has are properties/state and methods/actions, that's it. To create the time travel, all I need to do is throw the state and actions into an array of immutable objects.
Another thing on the horizon is a nicer view model explorer.
That was a lot so let me know if you have questions :)
deanrad
fvpDev
Manuel, I've started using ReactJS a bit, and notice how it shares a pretty close philosophy to ViewModel (which of course comes from MVVM). Could you maybe point out a few differences between Viewmodel and React?
Similar
Different
data-bindtags are code-like command appearing in your markup, whereas JSX has markup appearing in your code.React can server-side render
One thing that I don't see a corresponding piece for in viewmodel is the abilty to, say, repeat
<li>for every item in a collection/list.