The JavaScript blog.


libraries HTML angularjs mvvm

HTMLjs, Building an Angular List

Posted on .


HTMLjs (GitHub: nhanaswigs / htmljs, License: MIT) by Nhan Nguyen is a data-binding and template rendering library. It supports browsers back to IE7. Rather than using declarative HTML, it's more JavaScript-driven. For example, given a simple input field, you could bind a validation handler to it like this:

var username = html.data('')  
  .required('Username is required.')
  .maxLength(15, 'Max length for username is 15 characters.');


I don't think declarative templates are a bad thing, but the detail most people consistently get wrong with Knockout is incorrectly binding prototype methods or values. This API circumvents that by relying on simpler markup. The author has provided lots of examples so you can get a feel for how it works without downloading it.

Building an Angular List: Using ng-repeat

Building an Angular List: Using ng-repeat is a tutorial by David Posin about how to use ng-repeat. It's a simple introductory tutorial, and David includes a screencast so you can see exactly how it works.

I noticed David uses the web-based Cloud9 IDE, so you can even follow along without installing anything if you're really new to Angular.


functional ui mvvm data-binding

Why Ramda?, Two-Way Data Binding Review

Posted on .

Why Ramda?

Scott Sauyet sent in Why Ramda?, a post that attempts to explain the Ramda library:

To those not used to functional programming, Ramda seems to serve no purpose whatsoever. Most of its major capabilities are already covered by libraries like Underscore and LoDash.

These folks are right. If you want to keep coding with the same imperative and object-oriented styles you've been using, Ramda does not have much to offer you.

However, it does offer a different style of coding, a style that's taken for granted in purely functional programming languages: Ramda makes it simple for you to build complex logic through functional composition. Note that any library with a compose function will allow you do functional composition; the real point here is: "makes it simple".

The article builds on the functional composition idea and leads up to the kind of data-focused programming that Ramda makes possible.

Two-Way Data Binding Review

Two-Way Data Binding by Nikita Vasilyev is a review of two-way data binding in Backbone, React, Angular, Meteor and plain JavaScript.

It highlights an issue that some libraries might have if they change fields at the wrong time:

The problem is that data flows from an input field to a model, and then back to the same input field, overriding the current value even if it's exactly the same.

React.js doesn't have Backbone's problem with moving the cursor position. Its virtual DOM, a layer between the actual DOM and React's state, prevents React from unnecessary DOM changes.

There's also an informative comment by Leo Horie about the effort required to learn each framework:

Something that strikes me about the framework versions is the amount of framework-specific knowledge required to get these examples working. It's one thing to say "here's a version in framework X", and it's quite another to actually write the code (from the standpoint of someone who's still considering framework options and who is not familiar with the lingo and caveats for any of them.)


mvc backbone mvvm

Kettle.js, Backbone.SuperModel, Mem.js

Posted on .


Kettle.js (GitHub: smelnikov / kettle, License: MIT) by Sergey Melnikov is an alternative approach to Backbone views that uses a declarative syntax to define elements, their bindings, and their associated events.

It supports two-way data binding, sub views, and can be extended to support custom Kettle elements.


Mem.js (GitHub: artyomtrityak / mem.js, License: MIT) by Artyom Trityak is a memory management library for Backbone. It allows you to save, retrieve, and destroy instances of Backbone classes:

var View = Backbone.View({});

// On set returns new stored function instance or object
var headerViewIns = Mem.set('headerView', View, { el: 'body' });  

It can remove and recreate instances with Mem.reset, and remove outdated objects with Mem.manage.


Backbone.SuperModel (GitHub: laoshanlung/backbone.supermodel, License: MIT, npm: backbone.supermodel) by Tan Nguyen is model class that offers support for nested collections. It supports dot notation for getters and setters, and an updated toJSON that reflects the nested structure. Relationships can be defined between models as well.

var wallet = {  
  money: {
    amount: 4000,
    currency: 'euro'
  name: 'Tan Nguyen'

var myStuff = new Backbone.Model();  
myStuff.set('wallet', wallet);  
myStuff.get('wallet').money.amount; // 4000  

The project includes tests and benchmarks, and examples can be found in the readme.


node modules mvc mvvm

Vue.js, beautify-with-words

Posted on .



Vue.js (GitHub: yyx990803 / vue, License: MIT) by Evan You is a MVVM library. It's based around instances of the Vue constructor, essentially view model objects, that provide bindings between DOM objects and data models.

It has an event-based API with key/value observing, HTML directives (like AngularJS), and text filters. There's a TodoMVC example that showcases some of the features. Most of the code is passed in as options to the Vue constructor, so it feels a little bit like Backbone.js views in that respect.

Vue.js is an interesting combination of features from Backbone.js, KnockoutJS, and AngularJS. Evan seems confident about its performance and features, but I think it'll be hard to convince people to seriously try it out given how popular Backbone and AngularJS have become.


beautify-with-words (GitHub: zertosh / beautify-with-words, License: MIT, npm: beautify-with-words) by Andres Suarez is a module based on UglifyJS that replaces variable names with words.

You can pass -b to beautify the output, which essentially means you can turn minified, obfuscated code into something not quite readable, but much easier to search and grep for patterns.