TIBET

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 and xml files for well-formedness, and
• runs stylelint checks on your css 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 package
• tibet version to version your built application
• tibet 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 and tibet 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.