◄►
About Why? Docs
Home

Meta-OS: For Developers

A quick walkthrough, from client to server
Meta-OS provides multi-site templating, multi-player streaming files, platform variations, widgets and instantaneous navigation. It has a tiny footprint.
There are no new syntax rules or languages for developers to learn. It's HTML, JS & CSS.
With Meta-OS you can create first. All the boring work like inheritance, configuration and initialisation is taken care of.
In these example pages, you can see how an apps are made of components, styles and actions, all handled in a few lines of code.

Distro

data
html
vanilla
app.html
media
Apps
Font
Image
source
browser
common
lib
server
config.json
server.js
More easily deployed on your server - with few dependencies, it is 20 times smaller than any other framework.

Instantaneous start time (~1sec) with no build steps required and inperceptably fast code compression.

Automatically rolls logs, renews Let's Encrypt certificates, and restarts on error.

It works well inside Nginx, and with MongoDB installed you also gain the ability to serve files, events, articles, tasks, accounts, places, and stocks, with access to each granted on per-user/group basis.

When will Meta-OS be libre software?

The clientside Meta-OS code is open source by virtue of the nature of the Web.
Meta-OS will be license-free public domain software (not just FOSS or copyleft) as soon as we can afford to release and support it.
Right now we rely on having a platform a decade ahead of the competition for income.
To speed up the process, you can donate Litecoin to this address:
LZRavQFNrtHqXT81H2oxoY9eKQshppXqrt
Gift Bitcoin to this address:
1BdbESYXCtW4Z1xvS7HWfJWMrMMqMYYcyS

Tiny Templating

HTML5 was designed to be extensible, and is widely understood. TiTe overloads it for component creation, templating shortcuts and also to supercharge widgets. For efficiency we parse our HTML with regular expressions, one of many impossible things this framework does.
Traditionally, server-side templating was used to insert variables and iterators, and it includes logic:
and client-side methods were used to progressively enchance elements:
Instead of combining the two methods, JSX takes templates away from HTML-only coders and forces them to learn a hybrid scripting language.
Angular stamps its ugly "ng" tags over templates instead of extending HTML, and encourages the use of three more hybrid scripting languages.
Neither of them are useable on the client!
TiTe is smarter:

So we use one or two familiar languages (HTML and optionally JavaScript) instead of four MORE alien ones! (JSX, TypeScript, Dart & Angular)

Markup


Tags like <doctype> and <meta> are taken care of by html/shell.html

Homepage <html> attributes become site-wide accessible constants. Special attributes include noscript (render server-side for noscript users & SEO), tmpl_require (load additional JS modules), tmpl_style_buts (set page theme), inherit (override inheritance), api_both (2-way API data injection)

Headers, sidebars and footers are automatically inherited from parent folders.

Certain shortcuts are available <SCRIPT> and <STYLE> can be placed in templates without concern - they are magically extracted, combined, minified and served in the right order.
Originally, Web pages were a mix of HTML, CSS and Javascript. Now they can be again if you prefer, without a penalty!

The overloaded <tt> tag allows for unbeatable interface flexibility...

Extending HTML5 with TiTe

Certain tags are extracted or transformed into standard HTML; all are optional.
<TOP> is where the navigation goes.
<MAIN> is for the main page content.
<SIDE> is where sidebar (desktop) or additional (mobile) content goes.
<BOT> contains the footer.

<STYLE> is where CSS specific to the page goes - but it will go into the global stylesheet.
<SCRIPT> is where JavaScript specific to the page goes.
*NB* this MUST be UPPERCASE (so that one can, if needed, add scripts to a template which are not extracted, by using lowercase)

Super Tags


<tt> is used for buttons, sliders, dropdowns, textareas and other widgets.
<rollup> is an animated implementation of HTML5's <details> & <summary> tags.
<list> will iterate through an object, array, integer, or expression.
<if> and <else> allow logic derived from properties. Use sparingly inside list; for speed, use list's filter attribute instead.
<area> generates scroll-areas that can switch between drag, hover-scroll, and traditional scrollbar modes.
<e s="color:#fff" c="db">hi</e> is shorthand for <span style="color:#fff" class="db">hi</span>.
<group> injects its properties into child buttons.


Attributes


HTML5 attributes like pattern are auto-backported. New attributes include noise to trigger audio, bonus for a visual effect, trigger and target for data-binding.

class

Default CSS has similar definitions to the Tachyons CSS framework, making it easy to guess classNames.
So: <i class="dib fl tac"> is equivalent to <i style="display:inline-block; float:left; text-align:center">
If a className contains vardim, these attributes determine that element's dimensions:
weq (width), heq (height), xeq (left), yeq (top), ceq (className) eg: Other classes trigger other behaviours: fonty and fonto convert prose into multicoloured embossed text (canvas or CSS); cansel and nosel enable and disable text-selection within an element.

special attributes

sdn (insert style="display:none")

TiTe Buttons

To eliminate labourious recoding of interface elements and attaching events, <tt> is used. Want to swap out a dropdown select for a slider, datepicker or another widget? Would you rather change one line of code, or find, install and configure a plugin?
Here's the code for the button below it:
TT ▼

<tt> buttons can have the following attributes:
genus [radio / text / slider / multi / springup...]
sliders can also have attributes min, max
links - <a href> for buttons
help - verbose explanation of widget function (displayed in the help system)
on (no value required) - indicate a button is on
group - for related buttons
label - adds a label next to the button
options - for radios, dropdowns etc: list of options
labels - for radios, dropdowns etc: list of labels
key - keyboard shortcut for button
(hard), target - the variable to sync with this button's value (hard attribute saves to localStorage also)
sigil - use canvas vectorgraphic instead of text
bonus - zoom-in effect on klik
positive (add to class) - green or happy-coloured button
danger (add to class) - red or cautious-coloured button
sheen (add to class) - shine effect on hover
The id attribute you know and love; rollup makes it target the tt_info rollup, and genus is set to make the button behave like a checkbox.

Another example. The options are tab-separated:
This last one abbreviates class, and shows off the overridden alt attribute:
33

Form Field Inputs

There are in-built fallbacks for important new input types - where possible, these exceed the native implementations, so you may prefer to use them. Choices include textarea, input (text, date, number etc.) and info.

Example Inputs

Email:

pattern prevents invalid data, badhelp is the error message presented if the pattern regexp fails, and the phi class sets a golden ratio proportion between the label and the textfield.
allow limits the input to digits, dots and minus signs, gut (GUess Type) ensures the type of value will be a number rather than a string, and help is by default printed below the input, but can be used by the in-built help system instead.
Rich Text:

change unifies onInput, onChange & onKeyDown events.
placeholder support for editable content is unique to Meta-OS.

Generated Buttons

In Javascript, buttons are created and rendered similarly: The templator uses the tite.but function to transform tt tags into standard HTML.
Button states are stored in window.opz.
why opz?
Apps are made of ops, and opz are easier to grep than ops.
You did click on the question...

There's a lot more going on - examine browser/tite/buts.js

JavaScript


Meta-OS libraries are inside three folders:
source/browser/ es3*
source/common/ isomorphic
source/server/ es6
3-party plug-ins have an isomorphic home too:
source/lib/
*let, const, arrow functions, optional chaining, and for-as loops are supported, but most clientside ES6 is restricted to keep the transpiler small.
For full clientside ES6, disable uglify-js implosion or swap it out for the billion-times-slower uglify-es.

Invocation


source/common/bios.js is the first lib loaded by both server and client. It contains many methods used throughout the codebase.
server.js is the node.js server and lives in the main folder with config.json.

To run code just on a specific page, add that <SCRIPT> to the template. It will run after the rest of the page (and associated code) has initialized. It also fires on each pushState.
Add site-wide code inside <SCRIPT scope="sitewide"> tags. This will run before page-specific code.
Run code before the page renders with <SCRIPT scope="asap"> tags. This is useful for injecting data into the templator.

Scripts that outgrow their templates should be moved into source/

TiTe CSS

Add to sitewide CSS by adding <STYLE> tags to any page.

If a page is deleted, CSS specific to it will be deleted too, so there will be no orphan CSS on the site.

Prefixes & Minifying ▼
Browser prefixes like -moz- and -webkit- are added automatically.
Ditto with alternative rule names for eg. display:flex - just use the W3C syntax in your code.
You can prepend CSS selectors to all rules within blocks - eg. <STYLE prefix=".super-class">. This is very useful when creating themes.
Mark CSS to be minified by giving it an ID - eg. <STYLE id="MinMe">. Minified CSS is around 6 times smaller than normal - but it can only be delivered to JavaScript-enabled clients.


Since all CSS is loaded together, you can instantly see if you have CSS conflicts that would normally go undetected.

Add a css.html template containing a suite of the elements the site uses to test all the CSS in one place. The STYLE tags in this file will be extracted and added to the global CSS, but the HTML will not be visible in production environments.

html/vanilla/css.html is inherited by all sites.

APIs

The same APIs can run in 3 scenarios:
• before server-side rendering.
• before client-side rendering.
• on the client, as an update.

2 arguments are passed: the object to populate and a callback function. eg: Clever use of closures means the callback function is aware of the sob object and does not need it passed.

Server-Side

As in the previous example, per-request server objects keep most of their properties private and only pass public vars objects to templates.

Client-Side

Ensure a page has API-supplied vars for template rendering, clientside OR serverside, by adding an attribute to the HTML element: To save CPU, server-side rendering starts off disabled. You should enable it for all searchable pages by adding a noscript attribute to the HTML element.

Server

server.js + source/server/clerk.js form the bulk of the server.
To simplify bouncing objects around callbacks, eg: req and res are not usually passed as separate arguments. A single temporary per-request object is used, with ask (req) and give (res) properties.

Other useful properties of this object include:
vars - variables to be passed to the templater
file - the filename of the response, used to determine Content-Type, and ensure downloadable files are sensibly named.
mysite - the domain name of the site being visited.
mod - the Last-Modified date.

Already intelligently-handled:

Caching + Gzipping
Partial downloads
Etag + Content-Length
Server-Side Events (source/server/mong/ssee.js)
Proxying (source/server/utilities/proxy.js) with cookies
Minifying (source/server/imploder.js)
binary file uploads (source/server/fylz.js)
API calls (source/server/api.js)
And we roll logs and renew SSL certs for you, so no need to cron!

Media Content

Files in the media folder are split by type into subfolders.
Images go in the Image subfolder, fonts in the Font subfolder etc.
Unrecognized files go in the Mixed subfolder.
These subfolders need not form part of the URL.
So the server will look for <a href="/Sprites/bub.png">awesome</a> inside the media/Image/Sprites/ folder.