Crisp UI

This is a lightweight MVC and templating tool that gets out of your way and lets you do things the way you want. It's dubbed a "tool" and not a "framework", because it doesn't enforce particular workflows or structures.

Usage

Install via NPM:

npm install crisp-ui

Or clone this repo and use the crisp.js or crisp.min.js files

To use the Crisp UI features, require it like this:

require('crisp-ui');

Routing

The router uses the Express-style routing patterns. Params and queries are accesible through the Crisp.Router namespace.

Crisp.Router.route('/pages/:page', () => {
    console.log('You are on page ' + Crisp.Router.params.page + '!');
});

Views

The View class, which is accessible through the Crisp.View namespace, can be used in a number of ways.

Creating a view

The bare minimum for creating a view, so it can be instantiated and stored in memory, is this:

class MyView extends Crisp.View {
    constructor(params) {
        super(params);
    
        this.fetch();
    }
}

Using templates

You can plug in any templating engine you like, or use the one built into Crisp UI

class MyView extends Crisp.View {
    constructor(params) {
        super(params);
        
        // Option 1: Require an external template
        this.template = require('./MyTemplate.js');
    
        this.fetch();
    }
    
    // Option 2: Use the template directly
    template() {
        // Using The built-in Crisp UI templates
        return _.h1({class: 'my-element'}, this.model.title);
        
        // Using EJS
        return ejs.render('<h1><%= title %></h1>', this.model);
    }
}

Instantiating

You can instantiate a View in 3 ways:

// Providing the model directly
new MyView({
    model: { title: 'Hello!' }
});

// Using a URL to fetch the model from
new MyView({
    modelUrl: '/api/data'
});

// Using a custom function
new MyView({
    modelFunction: (resolve) => {
        let data = { title: 'Hello!' };

        resolve(data);
    }
});

Templating

Crisp UI comes with its own optional templating system, which is function based, meaning that you can assign behaviour to your elements as you create them. It extends the browser built-in createElement function and includes a few extra conveniences.

All templating logic exists within the Crisp.Elements namespace, but you can use the _ character as a shortcut.

Creating an element

All HTML5 elements are represented with a dedicated function. The first parameter is an optional object containing the element attributes. Any other argument is assumed to be child content. It can be just a string or other templating logic.

const _ = Crisp.Elements;

_.button({class: 'my-button'},
    'My button',
    _.span({class: 'my-icon'})
)

Assigning behaviour

An advantage of rendering elements using functions is that you can assign behaviour to the elements right as you create them.

const _ = Crisp.Elements;

// Separated handler example
_.button({class: 'my-button'},
    'My button',
    _.span({class: 'my-icon'})
).click(onClickMyButton);

// In-line handler example 
_.button({class: 'my-button'},
    'My button',
    _.span({class: 'my-icon'})
).click((e) => {
    console.log('Clicked a button', e.currentTarget);
})