Keep It Super Simple - Minimalist Javascript Framework
This is a minimalistic framework : all you need is to know javascript. For less than 5kb, you can associate html templates to js functions easily, without any weird annotations nor complex architecture.
One HTML template + One Javscript File = One component.
First, create index.html, which will be your main entry point in the application.
<!doctype html>
<html>
<body>
{{component}}
<script src="path/to/kiss.js"></script>
</body>
</html>Then, create index.js :
// We associate the 'component' variable to the MyComponent, by passing the absolute path.
this.component = Kiss.component('./MyComponent');Now, we can make our HTML part of the component MyComponent.html:
<h1>{{foo}}</h1>And its Javascript counterpart MyComponent.js:
// We can associate the 'foo' variable to a string.
this.foo = 'Hello world!';
// And 'this' contains the reference to DOM component.
this.style.color = 'red';Et voilà! This is super simple!
Sometimes you will need to do loops. Here is how to:
{{components}}this.components = [];
for(var i = 0; i <= 10; i++) {
this.components.push(Kiss.component('./MyComponent'));
}When you need to update your component, just:
this.update();or
this.component = Kiss.component('./MyComponent');
this.component.update();You can also get reference of HTML elements inside templates:
<div kiss:id="foo"></div>this.foo.innerHTML = 'bar';You can pass default parameters to components:
Kiss.component('./MyComponent', {foo: 'bar'});You may need to access singleton components, for creating services:
var userService = Kiss.singleton('./UserService');
userService.dispatchEvent(new Event('my-event'));var userService = Kiss.singleton('./UserService');
userService.addEventListener('my-event', ... );Styling is currently made inside templates as follow:
<h1>Title</h1>
<style scoped>
MyComponent > h1 {
color: red;
}
</style>Erhm, sorry, this is not available yet but it is totally under considération.