A thin framework for building UI for single page web apps. Templating syntax inspired by KnockoutJS.
LUI has two parts:
- Core (the minumum required to write your own components)
- Components (a set of UI components inspired from materializecss)
Out-of-the-box LUI gives:
- Modular components...
- ..including ability to write your own UI components and also inherit any component.
- HTML view with data binding (using KnockoutJS inspired templating engine and observables).
- All components can be used as custom elements in view markup by default.
- SystemJS support.
- CSS3 flexbox helper classes for faster, simpler layouting.
- node.js testability (with jsdom).
- Several ready-to-use components. Using them is optional of course.
-
Patterns: Team members may have different coding styles and JavaScript's flexibility has it's costs when a standard style isn't agreed upon. LUI sets a pattern for UI programming that you and team members would use.
-
Performance & footprint: Higher performance (especially on mobile) and lesser bloat compared to most libraries (including KnockoutJS or most DOM diff-patch libraries) without sacrificing maintainability or convinience of writing components.
-
One-way binding: Puts you in control of your application. Easier to debug.
Template (myform.ko)
<div style="positon:absolute; width:500px;">
<div class="hbox">
<input type="text" class="flex namefield form-control"
placeholder="Your name" data-bind="value: name" />
<li-button ref="submitBtn">Submit</li-button>
</div>
</div>
Component (App/Form.js)
/**
* A Form window
*/
var Li = require('lui/core/Box');
require('./myform.ko');
module.exports = Li.component('app-form', {
name: Li.Observable(''), //An observable..like KnockoutJS
constructor: function (config) {
this.super(arguments);
this.on({
"submitBtn": { //listen to events on button
click: function () {
//Update observable
this.name($('.namefield', this.el)[0].value);
console.log('Data submitted: ' + this.name());
this.submitBtn.disable();
}
}
});
}
});
Use the component in another template now:
<app-form></app-form>