Loading...

What is it?

bitASM is a JavaScript framework, that implements the Bit Design paradigm.

What for I can you use it?

By the default – for fun. Another option is to make a website with smell of old-school.

Should I know JavaScript to use bitASM?

Actually, it is not necessary. You can just define the right structure of HTML and include bitASM styles and script and here you go. See “Start with bitASM”.

Work with other frameworks

No, bitASM does not allow using other frameworks, even jQuery.

Going further:

How it works

BitASM takes all care about the routing and “memory” manipulations if you use a basic structure.

Basic structure

All data in bitASM app divided in parts:

  • Screen and ROM – your HTML document.
  • Code – bitASM JS and your app’s scripts
  • Data – asmDB.js

And, separately, your and bitASM css files.

Screens and routing

BitASM has a basic routing engine: window.location.hash is automatically mapped on screens. For this feature every screen should have a “scr-%url%” class. For example, url “/#/hello/screen” will be mapped to screen with a class “scr-hello-screen”. Slashes turn to dashes when searching for a screen element and vice versa.

Addresses

In its turn HTML is divided to the screen and ROM. The screen div contains data visible to user right now. ROM – memory div, where all the screens and other elements are stored. Each element should have necessary attribute “id” type of “addr0xXXXXXXXX”. Screen div always has address 0x00000000 and correspondingly, its id is “addr0x00000000”.

Types of elements and its memory mapping:

  • Screens – 0x00000001 - 0x09999999
  • Shared Elements – 0x10000000 - 0x19999999
  • Templates – 0x20000000 - 0x29999999
  • Sounds – 0x30000000 - 0x39999999
  • Custom Errors – 0x90000000 - 0x99999999

Addresses 0x40000000 – 0x89999999 are reserved for future. If you need this addresses – use them with caution.

Shareds

Shared elements called "shareds" are located in the addresses range 0x10000000 – 0x19999999. A shared is a simple piece of code that could be used in different screens. Implements code reusability and reduces the entropy.

Using:

<div class="shared shr-X"></div>

where X is a shared’s address.

Templates

BitASM contains simple, not so powerful but useful template engine. Templates are located in the addresses range 0x20000000 – 0x29999999. Variants of data transfer:

<div class="template tmpl-X" data-vars='{"var":"value"}'>%asmDB-path%</div>

The data-vars attribute provides a data transfer by simple JSON string. Also you can put in the div an asmDB path (see asmDB section).

Variables

Variables are passed to a template through the ways described above. In the template the placeholders are described as a “percent pattern”: %varname%


Templates

Repeats

<div class="repeat min-%min% max-%max%"> … </div>

Everything inside a tag with class “repeat” will be repeated by each element in an array passed through %asmDB-path%. Also repeats provide an additional variable %index% for the current item index.

Classes “min-X” and “max-Y” provides a selection from the data given to a repeat where min <= data > max. Default is min-0 and max-[arr.length]

IF-classes

There are two types of if-classes that could be used in templates.

  1. If-%var% and if-not-%var%. Use with Boolean values or to check the emptiness of the value.
  2. If-%var%-%val% and if-not-%var%-%val%. Use for comparing a variable with a specified value.

Using:

<li class="if-enabled"> … </li><li class="if-not-enabled"> … </li>

Templates

Subtemplates

Subtemplates are a way to use templates inside repeats. You can use it like a template:

<div class="subtemplate tmpl-X">%asmDB-path%</div>

Or just put a content of another template without any preprocessing: %template-X%. Where X is always template address code.

Force template

By default templates are processed at screen assembly. But you can force templates processing on the app startup, for example to make a lot of the same screens with a different data.

<div class="force-template"> … </div>

And put an element that uses a template inside this.


Pager

A powerful system for dividing a screen with a lot of data into several screens.

Just define a pager, define a screen inside and a template inside the screen and you will get a necessary number of screens at the outlet.

Using:

<div class="pager" data="%asmDB-path%" data-perpage="%itemsPerPage%">
    <div class="scr-some" id="addr0x000000XX">
        <div class="template tmpl-Y" data-vars="%JSON%"></div>
    </div>
</div>

Each new screen will have the id increased by 1.


Pager

Attention! Templates in the pager are not fully functional because they can contain another templates inside. You can pass data to template only by data-vars.

Variables

Pager provides additional variables:

  • %page% - current page index
  • %prevPage% - previous page index
  • %nextPage% - next page index. If next page is out of the array, value will be “last”
  • %min% - lower (inclusive) border for selection (use in repeats)
  • %max% - higher (non-inclusive) border for selection (use in repeats)

Start with bitASM

To start a bitASM app you just should use the boilerplate from repo. No backend code is needed.

BitASM template has following sections:

  • Usual html <head> section, where you are linking your styles and scripts
  • Commented mapping section is just a helper to find your addresses
  • <div class="screen" id="addr0x00000000"> is a screen block that shows current screen. By default is contains loading screen.
  • <div class="memory"> - everything inside this block will be hidden.

Restrictions

  • Your app should contain at least one screen besides 0x0 – it should have address 0x00000001 and will be shown after media content loading.
  • Each image and audio inside the body will be preloaded. If you are using images for templates – use ximg tag instead (See xImg). For audios just do not set preload attribute.

bitASM

Most useless framework you ever tried.

Download on github