DailyJS

DailyJS

The JavaScript blog.


Tagframeworks
Featured

libraries frameworks single-page-apps

Not Really Single Page Apps

Posted on .

Nobody actually makes single page apps in a single page anymore, do they? Some are saying they should really be called native web apps, which sounds fine to me. Anyway, coincidentally two readers sent me their own single page app libraries. They both build applications from separate files, but work in quite different ways.

Griffin.yo (jgauffin/griffin.yo, License: Apache 2.0) by Jonas Gauffin is a framework written in TypeScript that supports templates, view models, routing, and caching of server-side data.

Once views and models have been loaded they are cached in the browser (the cache is emptied if the browser is reloaded). Thus as long as the user continues to use the site as a SPA application everything is only loaded once from the server.

There's a blog post about Griffin.yo that introduces the main ideas, and the examples are written with TypeScript. It uses a project structure that is similar to many other web frameworks. I don't think there's a project generator, so follow the quick start guide if you want to try it out.

The other SPA project I was sent recently is Igaro App (GitHub: igaro/app, License: GPL). The author, Andrew Charnley, claims it's faster than AngularJS, and the current version is 1.0.0.

The thing that makes Igaro different is it's HTML-free. It avoids using DOM query selector methods to try to improve performance, and therefore has no template engine. Instead it uses routes to build pages, and standard CSS for styling and layout.

There's a DOM element creation API, so you can make elements in a way that reminds me of React:

model.managers.dom.mk('p', wrapper,_tr('Localized string'), 'myClassName');  

Objects created by Igaro are decorated with features for two-way parent-child event management, and dependency tracking. You can do this to arbitrary objects by using the bless method. Bless could be used to make widgets that work with Igaro apps.

In terms of ES6 support, Igaro makes heavy use of promises, which makes sense. Given the use of string fragments over templates, I expected to see ES6 template strings. I couldn't find any examples of template strings in Igaro, but given that it has a Grunt-based build system I don't think it would be too hard to add Babel to an Igaro project.

You can see examples in the documentation: all of the documentation pages are written with Igaro, and if you click the curly braces at the top of the page you'll see the raw JavaScript that's used to generate the page.

I think the paradigm shift to "native web apps" is the right way forward for single page web apps. Rather than the community settling into Angular or React it seems like we're making more libraries – and more creative libraries – than ever!

Featured

database ORM iojs frameworks ES6 node express

Node Roundup: io.js 2.2.1, firenze.js, Express Happiness

Posted on .

io.js 2.2.1

io.js 2.2.1 has been released. The notable change in this release is the switch back to this.client in the IncomingMessage constructor in the http core module. The original change broke compatibility with request, which is used by npm. The io.js contributors found out about it by running make test-npm. There's an interesting discussion about it in the io.js pull requests.

firenze.js

Fahad Ibnay Heylaal sent in firenze.js (GitHub: fahad19/firenze, License: MIT, npm: firenze), an ORM for SQL written in ES6. It's built with Babel so it should work with Node 0.10.x and 0.12.x.

The API is promise based:

var posts = new Posts();  
posts.find('first', {  
  conditions: { id: 1 }
}).then(function(post) {
  var title = post.get('title');
  var postObject = post.toObject();
  var title = postObject.title;
});

To define a schema, you first describe a collection (table) and then a model:

var Posts = db.createCollectionClass({  
  table: 'posts',
  modelClass: function () {
    return Post;
  }
});

var Post = db.createModelClass({ // or db.Model()  
  alias: 'Post',
  collectionClass: Posts,
  schema: {
    id: { type: 'integer' },
    title: { type: 'string' },
    body: { type: 'text' }
  }
});

But you can also use cool ES6 syntax like this:

class Post extends f.Model {  
  constructor(attributes = {}, extend = {}) {
    super(attributes, extend);
  }
}

The project has a lot more methods for querying and saving data -- take a look at the project's homepage to see the full documentation.

Express Happiness

Express Happiness (GitHub: andreas-trad/express-happiness, License: WTFPL, npm: express-happiness) by Andreas Trantidis is a framework built on Express that offers the following features:

  • A JSON route tree
  • Strictly defined, centralised error handling
  • Route permissions
  • Parameter validation
  • Automatic REST API documentation generation
  • Data mocking

Validation is automatic, which means each parameter a route receives is defined in terms of the type. The route tree looks like what you might expect: a list of paths with HTTP verbs that map to RESTful methods. Routes can also be dynamic so you can include parameters.

Because the error handling is all in one place it's a lot easier to manage than a basic Express application. You can easily define error handlers for 404, 500, and any other error codes, and the framework will send the right thing back to the client.

The validation performed by Express Happiness is done through validator, which is a popular and well-maintained validation module.

Featured

browser mv* client-side frameworks

The jsblocks Framework

Posted 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.

Featured

frameworks node ES6 iojs

Nodal: An ES6 API Server

Posted on .

Sometimes I feel like client-side developers are adopting ES6 faster than server-side developers. I certainly have projects where the client uses ES6 and the Node server code is more ES5, mainly because I don't really want to use a transpiler on the server, although I sometimes do like to use Harmony flags.

Alternatively, I could use io.js. Keith Horwood recently sent in a new module that aims to provide an API server and web framework that takes advantage of ES6 features. It's called Nodal (GitHub: keithwhor/nodal, License: MIT, npm: nodal) and currently runs on io.js.

Nodal includes support for models, controllers, templates, migrations, routing, and query composition. It has a command-line tool for creating RESTful resources, and it's designed to work with PostgreSQL.

The example code makes heavy use of new language features like const and classes. The result is very Rails/Django-like. Here's a snippet of a model class:

module.exports = (function() {  
  'use strict';

  const Nodal = require('nodal');

  class Person extends Nodal.Model {
    __preInitialize__() {}
    __postInitialize__() {}
  }

  Person.prototype.schema = Nodal.my.Schema.models.Person;

  Person.prototype.externalInterface = [
    'id',
    'name',
    'age',
    'created_at'
  ];

  return Person;
})();

It doesn't have the same kind of auto-loading magic that you see in Rails -- notice the Nodal module is loaded explicitly. It still feels like idiomatic JavaScript rather than using ES6 to pretend to be something else.

Nodal doesn't use an external ORM, it actually has its own models backed by any-db-postgres. That means Keith is developing features like model relationships. I've tried to develop my own ORM before, and the ORMs I've used before have been very mixed in terms of quality and consistency between releases, so I don't envy the work he has ahead. However, the idea of a RESTful web framework that takes advantage of ES6 for code organisation and clarity is interesting, so let's see what he does with it!

Featured

frameworks libraries react

The Maple.js Framework

Posted on .

One thing Polymer developers advocate is the idea of WebComponents. Adam Timberlake sent in an ambitious React-based framework called Maple.js (GitHub: Wildhoney/Maple.js, License: MIT, npm: maple.js) that helps you to organise React projects by using WebComponents in a very Polymer-inspired way. That means you can use React with a more Polymer-style component approach, including HTML imports, custom elements, and ES6 modules.

Given the typical Flux architecture where components reside in their respective components directory, we continue that trend in Maple, where one component can register one or many custom elements – but each HTML document can only have one template element.

Because each document only has a single template element, it means that any associated stylesheets are "namespaced" to that component. This means CSS doesn't bleed over to other components. This level of encapsulation is important because components work best when they're highly self-contained. I'm not sure if Adam is advocating using standard CSS over React-Style -- the stylesheets in JavaScript approach has some advantages, but I believe Maple's approach will be more accessible to Polymer developers.

During development you can use a dynamically transpiled and JSX-parsed app, but Mapleify should be used for generating the production build. This is similar to Polymer's vulcanize tool.

Maple solves several problems that React users have to solve when starting from scratch, so I think it's worth trying, particularly if you like Polymer. There's a getting started with Maple video where Adam demonstrates how to build an app. There's also a demo application on Heroku.