Skip to content

Quick Start

Lauri Rooden edited this page Mar 11, 2019 · 10 revisions

This guide will show you how to build a simple app using LiteJS from scratch.

  1. Install LiteJS.
  2. Create a new application.
  3. Write a new UI component.
  4. Declare a new page.

    At this point you will have a fully working single-page application with two pages,
    no compiler/transpiler/builder has been needed.

  5. Minify and combine UI files.

1. Install LiteJS

Install LiteJS as a global package using npm to get command line utility. Although not necessary, it makes using LiteJS easier.

npm install -g litejs
  • You can call litejs to find out more about commands.

2. Create a new application

litejs init demo-project

This command will create a new directory demo-project and set up a new LiteJS application inside of it:

demo-project
├── app                  // backend code
│   └── index.js
├── node_modules         // Only one dependency
│   └── litejs
├── package.json
├── README.md
└── ui                   // ui code
    ├── app.css
    ├── app.js
    ├── dev.html
    └── view
        └── main.view

Start the server

cd demo-project
node app

Then, load http://localhost:8080/dev.html in a browser to see the result.

  • Hit Ctrl-C in your terminal to stop the server.

3. Write a new UI component

For quick start lets add components to ui/view/main.view file. Later it is easy to split components into separated files and let LiteJS to load only needed files.

diff --git a/ui/view/main.view b/ui/view/main.view
index c12b21d..92bd722 100644
--- a/ui/view/main.view
+++ b/ui/view/main.view
@@ -1,4 +1,14 @@
 
+/  An end-of-line comment starts with a slash
+/ ╭─────────────────╼ plugin `el` declares a new reusable element tag
+/ │   ╭─────────────╼ custom element tag name for later use
+/╭┤ ╭─┴╮
+@el menu
+       nav.menu
+               ul
+                       li>a[href="#"] Home
+
 @view home #body
+       menu
        p Hello World

Now you have a reusable menu ready for every page.

4. Declare a new page

diff --git a/ui/view/main.view b/ui/view/main.view
index 92bd722..2f6d1e6 100644
--- a/ui/view/main.view
+++ b/ui/view/main.view
@@ -7,8 +7,18 @@
        nav.menu
                ul
                        li>a[href="#"] Home
+                       li>a[href="#about"] About
 
 @view home #body
        menu
        p Hello World
 
+/  ╭────────────────╼ plugin `view` declares a new routed view
+/  │     ╭──────────╼ route, this view is accessible from #about or `/about` url
+/  │     │     ╭────╼ parent view route where this view will be mounted
+/╭─┴╮ ╭──┴╮ ╭──┴╮
+@view about #body
+       menu
+       p About page
+

5. Minify and combine UI files

To speed up your new UI even more, use LiteJS build tool to minify and combine html, js and css files.

npm run build
  • a build script was added to package.json by litejs init

Read more about writing UI and backend.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.