litejs

EXPERIMENTAL! Single-page application

@version    0.2.2
@date       2015-06-18
@stability  1 - Experimental

LiteJS

A small pure-JavaScript web framework for building fast single-page applications.

The main idea is to use a declarative programming as much as possible.

  • Built in templates, routes, views, translations

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

Haml-inspired template engine that uses CSS selectors syntax for describing elements and attributes.

ul
  li Item A
  li Item B

becomes

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Type selector, attribute selectors, ID selectors, and pseudo-classes are supported.

a#123.link.bold[href="#A"][title=go] link
button:disabled

becomes

<a id="123" class="link bold" href="#A" title="go">link</a>
<button disabled="disabled"></button>

Child combinators can be used and you can leave off the tag to get a div.

.my-class
  a>i text

becomes

<div class="my-class">
  <a><i>text</i></a>
</div>
ul
  @template row
    li.my-row
      a > b Row
  row
  row

becomes

<ul>
  <li class="my-row"><a><b>Row</b></a></li>
  <li class="my-row"><a><b>Row</b></a></li>
</ul>

Organize views into a hierarchy with built-in router.

View(name, element, parent, contentSelector)
  • name String - A name for a view that is also a route to the view. Accepts Level 1 URI Templates RFC 6570
  • element String or Function or DOM Node - View representation as DOM tree. String and Function will be transformed to DOM Node on first call.
  • parent String - Parent view name.
  • contentSelector String, optional - A selector to where a child Node will be attached.
// Optional path for views, default = ""
View.base = "/js/views/"
 
// Define starting point in DOM
View("body", document.body)
 
// Create first simple view
View("home", ".home", "body")
 
// Create another view
View("work", ".work", "body")
 
// Start
View.main = "home"
history.start(View.route)
 
// call manualy
View("home").show()

Copyright (c) 2013-2015 Lauri Rooden <lauri@rooden.ee>
The MIT License