Okay, this post is actually not about comparing these three frameworks. But to introduce my DropJS.
Though actually I can’t compare DropJS to the others, even if I want to… Because it just can’t. But it exists for reasons. For example: why not {single braces} instead of {{double braces}}; why lacking of a gentle escaping notation; why conventions, especially why conventions on strings and letter capitalization…
I had some thoughts on MVVM framework years ago and actually tried to implement DropJS years ago. Sadly I didn’t make it. One of the reasons is that the template style I used was not very friendly to parse (though I do remember I had written a parser successfully, then maybe it was because other reasons). As for Drop, it’s clear and simple. To make everything easier, I come up with an idea called “decorators”. It’s somewhat like the concept of “directives” in Angular based on my understanding (though not very good understanding), but written in a way of {handlebars}, single-brace {handlebars}. 😉
Some code:
<!-- AngularJS -->
<input type="text" ng-model="name" />
<h1>Hello {{name}}!</h1>
<!-- EmberJS -->
{{input type="text" value=name}}
<h1>Hello {{name}}!</h1>
<!-- DropJS -->
{%var name}
{%bind-value name}
<input type="text" />
<h1>Hello {name}!</h1>
I have to say that the code written in Drop is a little bit more than Angular and Ember. But actually {%var name} can be removed if {name} exists in the model. Or you can just write your own {%bind-value} decorator with the ability to define variables under the scope. Because even {%var} is just a normal decorator.
You may want to check out the source code of these decorators here lib/decorators.ts. Yup, Drop is written in TypeScript.
GitHub https://github.com/vilic/drop
Demo https://rawgit.com/vilic/drop/master/demo/index.html