DailyJS

DailyJS

The JavaScript blog.


Tagmvc
Featured

frameworks libraries modules mvc

Mithril: A Tiny MVC Framework

Posted on .

Stephan Hoyer sent me an MVC framework called Mithril (GitHub: lhorie/mithril.js, License: MIT, npm: mithril) that's getting a lot of positive feedback due to its small size and great documentation.

Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser's URL.

What makes Mithril cool is the choices Leo has made: many MVC frameworks provide features that I don't need, but I always find I want routing, data syncing features, and something like React's virtual DOM.

There's a short sample on Mithril's homepage that shows most of these features:

var app = {};

app.PageList = function() {  
  return m.request({ method: 'GET', url: 'pages.json' });
};

app.controller = function() {  
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {
      pages().push(pages().shift());
    }
  }
};

app.view = function(ctrl) {  
  return [
    ctrl.pages().map(function(page) {
      return m('a', { href: page.url }, page.title);
    }),
    m('button', { onclick: ctrl.rotate }, 'Rotate links')
  ];
};

m.module(document.getElementById('example'), app);  

This example shows how to fetch data from a server and map it to the UI using a controller and a view. I like the way the app object is just a plain old object rather than a Mithril-specific construct, and the syntax for creating elements is succinct and easy to understand (m('button', ...)).

Mithril doesn't provide two-way data-binding, but Leo has an example that shows you how to implement it:

// A data store
var name = m.prop('');

// binding the data store in a view
m('input', { oninput: m.withAttr('value', name), value: name() });  

I took this from the m.request documentation which has loads of useful examples for working with web services.

Whether or not Mithril suits your requirements will depend on your project, but it has an excellent selection of features. There are testimonial tweets on the homepage where people are saying things about switching from AngularJS, which definitely grabbed my interest when I first saw the site.

Featured

mvc backbone mvvm

Kettle.js, Backbone.SuperModel, Mem.js

Posted on .

Kettle.js

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

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

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.

Featured

node modules mvc mvvm

Vue.js, beautify-with-words

Posted on .

Vue.js

Vue.js

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

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.

Featured

mvc angularjs

Choosing an MVC Framework, lrNotifier

Posted on .

Choosing a JavaScript MVC Framework

Deciding on a client-side MVC framework can be tough -- you don't want to invest too much time on something that isn't the right fit for your project. Craig McKeachie sent in his article, Choosing a JavaScript MVC Framework, which reviews the most popular libraries like AngularJS and Backbone.js. He takes into account things like the community following, maturity, and code size:

How many real-world production apps are using these frameworks and how many users do these apps have? How good is the documentation and how many examples/tutorials are available? Are the examples up to date? How stable is the API? Do other developers know or are getting to know this technology?

He notes that these frameworks actually fall into subcategories, so it's hard to directly compare each of them.

After looking at the projects by features it became clear to me that I wasn't really comparing "apples to apples." A more fair comparison might be to compare full frameworks like AngularJS and EmberJS with stacks that include great but less broad libraries like Backbone and KnockoutJS.

The article also introduces the main concepts used by these libraries, so if you're confused about data binding or models then this should get you started.

lrNotifier

lrNotifier (GitHub: lorenzofox3 / lr-notifier, License: MIT) by Laurent Renard is an AngularJS directive for showing notifications. Notifications can be split into channels, allowing you to control where info, debug, or error messages will be displayed.

app.controller('myCtrl', ['lrNotifier', function(notifier) {  
  var channel=notifier('channelName');

  channel.pushNotification({ message: 'hello channel', otherProp: 'other' });
  channel.info('a great message');
  channel.warn('a great message');
  channel.error('a great message');
}]);

Featured

browser mvc angularjs

AngularJS 1.2

Posted on .

RC3 for AngularJS 1.2 was announced recently, with the news that the official 1.2 release should be out next week. There's a full changelog at the AngularJS GitHub repository.

This release has some major changes: ngAnimate has been rewritten, $q gets a shorthand for error handlers (.catch), forms can now be addressed with $scope.ctrl.form instead of $scope.ctrl.form, and jQuery 1.10.x is supported.

Some annoyances have been fixed as well. $httpBackend can set headers with falsy values, $log no longer prints undefined in IE, and numberFilter will use toFixed() to ensure that large numbers are formatted as expected rather than using scientific notation. There are many more bug fixes documented in the changelog.

This release will introduce breaking changes. Promise unwrapping has been deprecated:

This is a feature that didn't prove to be wildly useful or popular, primarily because of the dichotomy between data access in templates (accessed as raw values) and controller code (accessed as promises).

Here's an interesting one: inputs cannot have a name of hasOwnProperty:

Before, inputs whose name was "hasOwnProperty" were quietly ignored and not added to the scope. Now a badname exception is thrown.

The biggest changes are due to the ngAnimate rewrite. The latest documentation for that is available here: lastSuccessfulBuild/ngAnimate.

The animate service will automatically apply two CSS classes to the animated element and these two CSS classes are designed to contain the start and end CSS styling. Both CSS transitions and keyframe animations are supported and can be used to play along with this naming structure.

JavaScript animations are also supported:

JavaScript-defined animations are created with a CSS-like class selector and a collection of events which are set to run a javascript callback function. When an animation is triggered, $animate will look for a matching animation which fits the element's CSS class attribute value and then run the matching animation event function.

From what I can tell the breaking changes sound sensible, so it looks like most projects will just need to verify the use of the animate service.