DailyJS

The jsblocks Framework

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

browser mv* client-side frameworks

The jsblocks Framework

Posted by Alex R. Young on .
Featured

browser mv* client-side frameworks

The jsblocks Framework

Posted by Alex R. Young on .

Antonio Stoilkov sent in jsblocks (GitHub: astoilkov/jsblocks, License: MIT, npm: jsblocks), a new client-side framework that claims to have a rendering performance that is faster than React. It's a full-featured framework, and has some unique features. For example, it aims to improve the debugging experience of client-side apps, so rather than getting lost in confusing stack traces and DOM trees, it attempts to display very clear error information.

jsblocks debug examples

jsblocks is made of three main modules: blocks.query, blocks.mvc, and jsvalue. You can use all three libraries, or create builds with the ones you need. Here's what each library does:

  • blocks.query: The core library
  • blocks.mvc: The "Model View Collection" implementation
  • jsvalue: A utility library that works like Underscore or lodash

Models in jsblocks are used to represent values that are rendered in views. For example:

var User = App.Model({  
  init: function () {
  },
  firstName: blocks.observable(),
  lastName: blocks.observable(),
  fullName: blocks.observable(function() {
    return this.firstName() + ' ' + this.lastName();
  })
});

App.View('Profile', {  
  profile: User({
    firstName: 'John',
    lastName: 'Doe'
  })
});

Models use observables, so this example should make complete sense to those of you who are experienced with Knockout -- in some ways it reminds me of a blend of ideas from React, Backbone, and Knockout.

Collections are actually built out of observables, but the author suggests that they add an extra architectural layer to your application that can make it clearer. This definitely reminds me of Backbone.

Collections and models can also talk to the server -- both have a sync method:

var Products = App.Collection({  
  options: {
    create: {
      url: 'serviceURL/CreateProduct'
    }
  }
});

App.View('Products', function () {  
  products: Products(),

  init: function () {
    this.products.push({
      ProductName: 'Fish'
    });

    // sends AJAX request to the create.url with the new item
    this.products.sync();
  }
});

Models even support validation, so you can validate user input. Because jsblocks lets you work with data it also has a utility library for iterating and filtering data. This is the jsvalue library I mentioned earlier:

blocks  
  .range(1, 100)
  .map(function (value) {
    return value * 2;
  })
  .filter(function (value) {
    return value % 2 == 0 && value < 50;
  })
  .contains(0)
  .or()
  .contains(22);

Views support routing, and the routing implementation supports hash URLs and pushState history. Views can also be rendered on the server.

jsblocks has very quickly earned a big following -- it has over 1,500 stars on GitHub. I think the reason for this is it combines almost everything you need for modern web development: data modelling with validation, server sync and filtering, server-side view rendering, client-side view components and data binding, and client-side routing.

If you're a Backbone user and want to try something new then jsblocks may appeal to you. Equally, if you're a React user but struggle with dealing with data then jsblocks might make things easier for you.