litejs

@version    17.6.0
@date       2017-06-21

LiteJS

The best way to build fast and powerful web interfaces.

Weighing in at just 26KB (11KB gzipped), it includes everything you need to build a modern web application:

.. and more with no dependencies - date parsing and formating [date-format-lite](https://github.com/litejs/date-format-lite) - string formating - keyboard shortcuts - JSON Pointer [RFC 6901] and JSON Merge Patch [RFC 7396] implementation

See a working example with a source code in 80 lines.

It also supports SVG elements, so it is possible to build full SVG single-page applications.
See a example with a source code in 60 lines.

Overview

In short - an application consists of a presentation layer (UI) and a data layer (Model).

Presentation layer

Most template engines translates its own custom syntax to HTML string and then let browsers to parse HTML into a DOM.

HTML is a markup language for building DOM tree from a string.

LiteJS have a DOM-aware template engine, that bypasses HTML string part and turns templates directly to DOM nodes.

Declare elements and attributes with clear, well-indented CSS selectors.

a#123.link.bold[href="#A"] My link
ul
	li Item A
	li Item B
.footer>button:disabled[title=go] Click

becomes

<a id="123" class="link bold" href="#A">My link</a>
<ul>
	<li>Item A</li>
	<li>Item B</li>
</ul>
<div class="footer">
	<button disabled="disabled" title="go">Click</button>
</div>

Built-in plugins

Plugins starts with @ in template files.

@el menu
	ul
		@el row
			li.my-row
				i.icon
				b
					@child
		row.first
			a[href="#home"] Home
		row.last
			a[href="#page/about"] About
	hr

@el footer
	.footer
		hr
		i Bye

@view home #body
	menu
	h1 Home
	footer

@view page/{pageName} #body
	menu
	h1 Welcome to {route.pageName} page!
	section Hello World!
	footer

See it in action

Built-in bindings

Bindings starts with & in template files after declaring selector. Bindings are piece of JavaScript that will be run on rendering. Bindings ties together UI and Model.

a[href="#x"]
    &class: "is-selected", Math.random() > .5
    // :: is for one-time binding
    &txt:: this.href

Data layer

To detect and respond to changes LiteJS uses observables.

Item is a cached by id and observable Object.

List is a cached by name and observable Array of Items, that can be merged, sorted, filtered, paged and loaded asynchronously.

Api

Defined global variables

// Optional path for views, default = ""
View.base = "/js/views/"

// Define starting point in DOM
View("body", document.body)

// Default view
View.main = "home"

// El.data is a root scope for elements, make View visible for templates
El.data.View = View

Licence

Copyright (c) 2013-2016 Lauri Rooden <[email protected]>
The MIT License

Since 2013 to 2015