TIBET Quickstart
Thank you for giving TIBET a try!
Over the next few minutes we'll create a classic Hello World! application.
Creating Hello World! in TIBET requires no code, just markup.
While most frameworks require code for the simplest of tasks, even Hello World!, TIBET development focuses on markup first, reducing reliance on code.
In this guide we'll take a high-level look at:
- creating / initializing a new project
- running your new project application
- tag-driven development with TIBET
- linting and testing an application
- building and deploying an application
tl;dr
The basic steps we'll follow are:
npm install -g tibet
tibet init
cd ~/tmp
tibet clone hello --dna electron
cd hello
tibet init
tibet start
vi ./src/tags/APP.hello.app/APP.hello.app.xhtml
tibet lint
tibet test
tibet build
tibet deploy
From zero to deployable app in minutes.
Let's dive in…
First Steps
Installation
Verify TIBET prerequisites, then:
npm install -g tibet
tibet init
tibet quickstart
With TIBET installed, the tibet
command becomes
available.
Use tibet quickstart
to get an overview of our process:
$ tibet quickstart
Welcome to TIBET!
The 'tibet clone' command is your first step in creating a TIBET project.
Before using 'clone', navigate to a directory to hold your project content
and select a name for your new project. The name will be used as a directory
name so it should be a valid directory name on your platform.
Type 'tibet clone {appname}', replacing {appname} with your project name:
$ tibet clone hello --dna electron
...
Application DNA 'electron' cloned to ./hello as 'hello'.
cd ./hello; tibet init; to continue developing.
With your new project in place you need to initialize it to install any code
dependencies specific to the template you cloned.
Navigate to your project and then type 'tibet init' to initialize it:
$ cd hello
$ tibet init
...
project initialized successfully.
All project DNA templates support using 'tibet start' to run them.
Electron projects will launch directly. TIBET Data Server (TDS) projects will
start their Express-based NodeJS server (using port 1407 by default):
$ tibet start
...
Congratulations! Your new TIBET project is running.
For Electron projects your application is now running and ready for expansion.
For TDS-based projects open the web address output by 'tibet start' for your
project in a supported HTML5 browser. All TIBET projects display launch text
directing you on how to take the next step in your TIBET journey.
For more info visit https://gettibet.app
We're going to follow quickstart
's steps to get our first project started.
Project Framing
tibet clone
The tibet clone
command creates a new TIBET project by cloning a template
directory, what we call 'dna', into a target directory. The simple form is
tibet clone <appname>
.
For this tutorial our <appname>
will be hello
.
Move to a suitable temporary or development directory:
$ cd ~/tmp
Create the hello
project using tibet clone hello
:
$ tibet clone hello --dna electron
...
Application DNA 'default' cloned to ./hello as 'hello'.
tibet init
The next step is to initialize our new project.
The tibet init
command ensures that all
dependencies in the project's package.json
file are loaded and ready.
NOTE: Because it depends on the specific DNA you choose, the public `npm` repository, and your download speed, this one-time operation can take a few moments.
Initialize the new project via tibet init
$ cd hello
$ tibet init
...
project initialized successfully.
Use `tibet lint` to check for coding standard violations
Use `tibet test` to test your application's core features
Use `tibet build` to build production packages for deployment
Use `tibet start` to run your application.
Once the project has initialized we've got a runnable TIBET application.
Application Launch
tibet start
The tibet start
command works for electron
, express
, and all other TIBET dna.
If you're running an Electron-based project it will launch the application directly.
If you're running an Express-based project tibet start
will start the server.
Start your application using the tibet start
command:
$ tibet start
,`
__,~//`
,///,_ .~////////'`
'///////, //////''`
'//, ///'`
'/_/'
`
//////////////////// /////////////////// ////
`//'````````````/// `//'``````````````` '''
/` // /'
/ // '/
,/____ /' ,/_____
/////////;;,,_ // ,//////////;,_
`'/,_ '/ `'///,_
`'/,_ / '//,
'/,/, '/_
`/, `/,
' `/
'/
/
[10:57:38.012] No build directory; built application package not available.
[10:57:38.015] Run `tibet build --minify` to create your app's production package.
[10:57:38.015] Loading a 'development' boot.profile.
[10:57:38.015] To use the Lama specify '--lama'.
[10:57:38.016] Using boot profile: development
[10:57:38.017] preloading utilities
[10:57:38.017] loading profile
[10:57:38.017] loading window
[10:57:38.018] loading menu
[10:57:38.019] loading updater
[10:57:38.097] loading watcher
[10:57:38.110] loading devtools
[10:57:38.234] Launching file:///Users/ss/temporary/examples/hello/index.html#?boot.package=development&boot.profile=development
[10:57:38.243] Application Started
The tibet start
command outputs the TIBET logo followed by information about
your application, the components being loaded, etc.
Once tibet start
completes your application is ready for development/expansion.
The TIBET Loader
TIBET uses a unique two-phase loader.
First the TIBET library loads, then your application code.
This LIB + APP load process is consistent across all TIBET projects.

By default TIBET shows you a boot screen including a progress bar. There are several configurable options and, of course, you can alter the UI to fit your needs.
Boot Complete
Once the application has booted successfully you should see the application's default home page content rendered in the window (your UI may vary somewhat from this image):

Congratulations! You're running your first TIBET application!
Let's take a moment and review our steps so far:
$ tibet clone hello --dna electron
$ cd hello
$ tibet init
$ tibet start
Three simple tibet
commands and we've got a running application ready for
development.
Turtles Tags All The Way Down
<turtle>
<turtle>
<turtle>...</turtle>
</turtle>
</turtle>
We often say TIBET is tags all the way down.
We're not kidding.
From the moment your application starts you're running a system whose focus is tags.
Tags and their associated types provide a consistent, reusable, structured way to assemble applications and reuse components across projects without code.
Pages vs Tags
The home page for a default TIBET application differs from many web applications
in that it normally contains a single tag in the <body>
, what we refer to as
the app tag:
...
<body>
<hello:app xmlns:hello="urn:app:hello"/>
</body>
...
One implication of TIBET organizing applications around an app tag is that all TIBET applications are composable.
We can take our <hello:app/>
tag and use it anywhere, not just as a standalone
application but as a reusable component.
The other implication is that we don't alter TIBET applications by editing pages, we alter them by editing tags.
Where The Tags Are
When we created our project TIBET processed our dna template
files and created a hello:app
application tag.
Our hello:app
tag's files are found in our application's tag directory.
TIBET refers to this location as ~app_tags
, a path you can view using tibet path
:
$ tibet path '~app_tags'
~app_tags => /Users/ss/temporary/examples/hello/public/src/tags
Tag Bundles
Each unique tag in our application resides in a tag-specific subdirectory which organizes all of the tag's resources in a sharable "bundle":
A listing of our new project's ~app_tags directory shows the following:
$ ls -C1 public/src/tags
...
APP.hello.app
...
Let's look at the tag bundle itself:
$ ls -C1 public/src/tags/APP.hello.app
...
APP.hello.app.css
APP.hello.app.js
APP.hello.app.xhtml
APP.hello.app.xml
APP.hello.app_test.js
...
Above, we see our application tag's type and unit test files along with an associated style sheet, xhtml template, and bundle package. If we were to open that template file in an editor we'd see the content that's currently displayed in our application home page.
Our first foray into TIBET development will be to alter that content.
Tag Authoring
The App Tag
When our application starts, the TIBET Tag
System processes the content of our home page and transforms our hello:app
tag to produce what we see as home page content.
By default TIBET tags are template-driven so for our hello:app
tag
we see the content of APP.hello.app.xhtml
, our tag's template
file.
Using external template files lets us run well-formed and validation checks on our application's markup, helping ensure quality.
Edit ~app_tags/APP.hello.app/APP.hello.app.xhtml
to contain:
<h1 tibet:tag="hello:app">Hello World!</h1>
There's our single line of markup to create Hello World!
Save your changes and TIBET will automatically re-render the tag.

Hello World! is complete and we wrote no JavaScript and didn't reload.
As it should be.
Clean Code
Your coding standard is the one your tools enforce.
While having a coding standard is a necessary first step in building with quality, without tooling to enforce your standards your project code will inevitably degrade.
tibet lint
is just one the tools TIBET
provides to help you write quality applications.
Running tibet lint
:
- runs
eslint
on your JavaScript, - checks
xhtml
andxml
files for well-formedness, and - runs
stylelint
checks on yourcss
files.
Imagine that we'd absent-mindedly forgotten the final >
in our hello:app
markup.
In our templating-error case we'd see the following:
tibet lint
Error in /Users/ss/temporary/examples/hello/src/tags/APP.hello.app/APP.hello.app.xhtml: Error: Unclosed root tag
Line: 1
Column: 0
Char:
checked 1 of 187 total files
(7 filtered, 179 unchanged)
1 errors, 0 warnings in 1 files.
Repair our markup error and we'll run clean:
tibet lint
checked 79 of 186 total files
(6 filtered, 0 unchanged)
0 errors, 0 warnings. Clean!
tibet lint
uses your project's package files (used by TIBET's loader et. al.) to determine which files to process. This makes it easy to avoid linting third-party code which won't conform to your particular coding standards.
Test Ready
Now is a good time to mention testing.
All TIBET projects start out with a handful of pre-built tests which provide a starting point for you to work in a test-driven, or at least test-backed, fashion.
The tibet test
command launches your
application in headless mode, loads any test suites associated with your
application, and runs them automatically.
Let's run it now:
$ tibet test
# Loading TIBET v6.0.0
# TIBET live in 5848ms
# TIBET starting test run
# 2 suite(s) found.
1..3
#
# tibet test APP --suite='APP'
ok - Has a namespace.
ok - Has an application type.
# pass: 2 total, 2 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
#
# tibet test APP.hello.app.Type --suite='APP.hello:app'
ok - Is a templated tag.
# pass: 1 total, 1 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
#
# PASS: 3 total, 3 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
Here we can see that TIBET has already generated some baseline tests for our application and its initial tag, helping ensure we start our work from a green test state.
With TIBET you can author tests for anything from an individual function to your entire application via the test command.
tibet build
During development you typically run a 'development' version of your application that makes it easier to work dynamically with full source-level debugging.
For production you'll want a built version, a version that condenses and potentially obfuscates your project code for optimum performance.
You can create a built version of your app using tibet build
:
$ tibet build
Delegating to 'tibet make build'
building app...
checking for lint...
checked 1 of 205 total files
(20 filtered, 181 unchanged)
0 errors, 0 warnings. Clean!
verifying packages...
verifying ~app_cfg/main.xml@production
scanning for unresolved/unlisted files...
no unresolved files found in project.
processing resources...
generating resources...
# Loading TIBET v6.0.0
# TIBET live in 3371ms
undefined
filtering 0 computed and 0 specified resources...
found 0 imported resources...
building 0 concrete resources...
writing package resource entries...
rolling up assets...
writing 23092 chars to ~app_build/app_production.js
linking build targets...
skipping link for missing file '~lib_build/tibet_production.js'
skipping link for missing file '~lib_build/tibet_production.min.js'
skipping link for missing file '~lib_build/tibet_production.min.js.gz'
skipping link for missing file '~lib_build/tibet_production.min.js.br'
skipping link for missing file '~app_build/app_production.min.js'
skipping link for missing file '~app_build/app_production.min.js.gz'
skipping link for missing file '~app_build/app_production.min.js.br'
build assets linked successfully.
building project documentation...
building site documentation...
processing faq
processing index
Task complete: 7152ms.
With TIBET there's no need to rely on additional packagers, loaders, servers, or
other ad-hoc components. Everything is handled by the TIBET ecosystem.
Releasing
TIBET supports releasing your application using:
tibet build --release
to built a production packagetibet version
to version your built applicationtibet deploy
to push your application to S3 et. al.
Deployment typically takes just a few minutes and your TIBET Desktop application is pre-configured to automatically check for new versions.
We won't get into the details here since first-time configuration can take a little effort.
Just know that TIBET's command line tools cover the entire development lifecycle.
Summary
This guide covers TIBET concepts and commands you'll use with every project.
In particular:
- We created a project using
tibet clone
andtibet init
. - We launched our application via
tibet start
to support development. - We altered a tag template to display a simple 'Hello World!' message.
- We linted, tested, and built the resulting Hello World! application.
- We discussed building, versioning, and deploying via the TIBET CLI.
There's a lot more to TIBET but we've touched on some of the primary
ways TIBET development differs from typical JavaScript platforms.
TIBET provides:
- a desktop-ready full stack development platform,
- a heavy emphasis on developing via tags and types,
- a dramatic reduction in boilerplate code,
- elimination of compiler and reload delays,
- tooling to support the entire development lifecycle.
Next Steps
We think you're going to love working with TIBET!
Continue your exploration via TIBET Essentials - Part 1.