munawwar / lithium-ui

A thin framework for building UI

Lithium UI

A thin framework for building UI for single page web apps. Templating syntax inspired by KnockoutJS.

LUI has two parts:

1. Core (the minumum required to write your own components)
2. Components (a set of UI components inspired from materializecss)

What's in the package?

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.

Why use Lithium UI?

• 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.

Teaser

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>

Tutorial

1. Hello world
2. Writing components
3. Data-Binding