Meet Juvi

While working on a pet project I've created a small client-side library responsible (mostly) for a View part in MV* patterns and have named it juvi (without any specific reason, just to have short name being easy to remember).

It is young and unstable but still looked pretty good for me.

Juvi depends on another library - proto-js which is a modified fork of Axel Rauschmayer's code. The idea behind of proto-js is very interesting and it's not clear to me why it's not as popular as it should be. Currently I'm thinking about embedding proto-js code to juvi due to the fact it's small and it will be easier to manage juvi.

So, coming back to juvi.

Originally plan was to create something simple and extendable and to have the following features included out-of-the-box:

• extendability (must be a way to extend view to keep code DRY and organized)
• unified way to render view
• unified way to attach event handlers to DOM
• unified way to declare, render and attach to DOM children views
• simple and reliable way to close view on its own and children views and free resources

There is almost no magic inside view.js, just check the code (code can speak, certainly).

Probably, the most interesting part is handleEvent method. Here is an article describing the technique.

And one more note about children views.

Children views must be described in view instance as:

// code can be placed into init method

this.children = {
    $title: TitleView(somePropsObject),
    $items: this.items.map(function (it) { return ItemView.new(it); })
};

and DOM nodes as:

// code should be placed into populateNodes method

var el = this.el,
    $ = this.$;         // NB. not a jQuery!

this.nodes = {
    $title: $('[data-title]', el),
    $items: $('[data-items]', el)
};

Having such a definitions view will automatically render all children views and attach them to the specified DOM nodes:

• this.children.$title view will be attached to this.nodes.$title node
• this.children.$items views will be attached to this.nodes.$items node (keeping order)

There is no way to emit or listen for events per view because I'm trying to keep events flow organized in a Flux way. Here is the dispatcher.js - instance of pubsub.js.

And I almost forgot about this dependency - Promise. It's up to you to pick the one and include it in your project. Currently I'm using some parts of core.js library. Here is es6-promise polyfill suitable for pubsub too.

That's it.

The mantra stays the same.

Become a creator, not a consumer.