node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

litejs

@version    18.0.0-rc.5
@date       2017-10-24

LiteJS

The best way to build fast and powerful web interfaces.

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

  • routed views with browser history management
  • reusable templates by custom element tags
  • asynchronous and dynamic code loading
  • translations with instant language switching - no page reload required
.. and more with no dependencies
  • date parsing and formating
  • string formating
  • keyboard shortcuts

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.

Get Started

Build your first LiteJS app with in 5 minute Quick Start Guide

npm install -g litejs
litejs init demo-project
cd demo-project
npm start

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>
  • Type selector, attribute selectors, ID selectors, and pseudo-classes are supported. Child combinators can be used and you can leave off the tag to get a div.

Built-in plugins

Plugins starts with @ in template files.

  • @child - Content will be put there.
  • @def [route,...] [route|file,...] - Define routes and required files for them.
  • @el [name] - Create a new custom element.
  • @view [route] [parent] - Organize views into a hierarchy with built-in router.
    • Accepts Level 1 URI Templates RFC 6570.
    • Views starting with # are hidden without a route.
@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.

  • &class: [name], [force] - Add a class to element.
  • &txt: [content] - Add plain text to element.
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 observable Object, List is a observable Array of Items.

Api

Defined global variables

  • El
  • View
  • Fn
// 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
 

External links

Licence

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