A lightweight MVC and templating tool
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md
build.sh
crisp-ui.js
crisp-ui.min.js
index.js
package-lock.json
package.json

README.md

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

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);
})