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.