KissApp: Minimal JavaScript Application Toolkit

KissApp (Keep It Simple Stupid Applications) is a minimal application toolkit inspired by AngularJS and EmberJS. Its goal is to provide developers with an application framework that is quick to develop, deploy and easy to maintain. One of the primary focus is to integrate with existing libraries for infinite extensibility.

This software is still under heavy development, and is available for preview. Contributions are welcome.

Features

Current features

These are currently implemented features:

• jQuery 3.x included
• MVVM architecture
• Views and services automatic dependency resolution and injection
• Router service
• Template engine service
• Template compiler
• Template engine extensibility (plugins)
• Project compiler
• Run a complete application from a single JS file

Upcoming features

These are features actively under deployment:

• Project bootstrapper
• More template plugins
• Integrated webserver

Planned features

These features are part of the roadmap, but are not being worked on at this time:

• Way more template plugins

Installation

A universal installation method (that works on Windows, Mac OS X, Linux, …, and always provides the latest version) is to use npm:

$ npm install kissapp

node.js version

Although older and newer node.js versions may work, all development is done on node.js 4.2.6. As such, only 4.2 and newer is currently officially supported.

Unstable version

You can also instead of the latest the latest unreleased development version directly from the develop branch on GitLab. It is a work-in-progress of a future stable release so the experience might be not as smooth.

With npm:

$ npm install 'https://gitlab.com/overridelogic/kissapp/repository/archive.tar.gz?ref=develop'

Examples

You can see a working example by looking at the example/ folder.

Bootstrapping

To bootstrap, simply create a new application object:

var app = new KissApp('my-new-app');

Writing a template

Templates are HTML with custom attributes, defined by the loaded plugins:

<p kt-html="var_with_text"></p>
<input type="text" kt-value="store_input_in_this_var">
<button kt-bind="click call_this_func_on_click">Submit</button>

Compiling templates

The templates can be compiled using the template compiler:

$ bin/kissapp-template.js \
    my_template_1 path/to/template1.html \
    my_template_2 path/to/template2.html \
    > compiled_templates.js

Creating a service

Services are objects than can be injected into other services or views:

app.service('foo-service', [],
function(){
    // my service constructor
    this.foo = 'bar';
});

Services can be injected in other services:

app.service('log-service', ['foo-service'],
function(fooService){
    this.logFoo = function(){
        console.log(fooService.foo);
    };
});

Creating a view

A view is an object than can be assigned a route and a template:

app.view('home-view', ['$router', '$template', 'foo-service'],
function($router, $template){
    // set the route for this view
    $router.set(this, '/home');

    // set the template for this view
    $template.set(this, 'my_template_1');

    // catch some event
    this.on('my-event', function(){
        console.log('my-event is here!');
    });

    // assign some vars
    this.set('var_with_text', 'Hello there!');

    // send some event
    this.emit('my-event', 'hello');
});

Compiling an application

An application can be compiled in a single file (excepting for the external resources like CSS, etc.):

$ bin/kissapp-compiler my-new-app 'The title of my new app' \
    my_app_code.js my_service_code.js compiled_templates.js \
    > compiled_app.js

Related projects

Dependencies

Under the hood, KissApp uses these amazing libraries:

• jQuery — A fast, small, and feature-rich JavaScript library

Alternatives

• AngularJS — Superheroic JavaScript MVW Framework
• EmberJS — A framework for creating ambitious web applications

About the project

Change log

See CHANGELOG.

Licence

MIT License: see LICENSE.

Authors

Francis Lacroix @netcoder1 created IOdiags while at OverrideLogic.