TIBET

TIBET Essentials - Part 1

Welcome to Part 1 of our TIBET Essentials series.

This tutorial builds on the Hello World! app from the TIBET Quickstart Guide.

If you haven't completed the Hello World! quickstart application, start there.

In this guide we'll look closer at Hello World! with a focus on:

• live-patching as a means of increasing flow
• templated tags (which render via XML/XHTML)
• styling tags using CSS syntax for XML tags

Before we get into the details, let's talk a little about development flow.

Live Patching

One of TIBET's design priorities is to maximize development flow.

Flow happens when you're able to remain in-context, focused on your current task, insulated from constant tool and context switching overhead.

If your tools require you to context switch they'll interrupt your flow.

If your tools add to your context switching load, they'll damage flow.

For example, a full reload often requires you to re-navigate, re-enter data, or perform other application tasks to return you to the same contextual position.

Eliminating reloads is one of TIBET's primary enhancements to flow.

Instead of reloading, TIBET implements live patching.

TIBET's live patching is a powerful improvement on live reload.

TIBET never reloads your page / application. Instead TIBET patches source code, template, and style changes into your running app without altering context.

Where other platforms may require you to navigate, edit, and adjust to get back to the same state and context, TIBET never loses the context to begin with.

In the Quickstart Guide we edited the tag template for hello:app tags and TIBET automatically loaded the new template, processed it, and re-rendered all hello:app tags in the current UI. It didn't re-render the page.

How did TIBET know to load, patch, and re-render just hello:app tags?

Part of the answer lies in TIBET's unique approach to type-driven markup.

The App Tag, Part Deux

Tag-driven development isn't unique to TIBET (although we helped pioneer it).

Where TIBET differs from other approaches is that in TIBET all tags, even built-in XHTML tags, have backing TIBET types.

When TIBET renders your application's home page (home.xhtml) it detects the existence of our <hello:app/> tag and looks for an associated type to determine how to proceed.

Tag Types

As a convention-driven system, TIBET uses strict naming conventions to map tags to types. For <hello:app/> convention dictates a type name of APP.hello.app.

NOTE: App-specific resources use a root JavaScript namespace of `APP` in TIBET.
Library-based resources are rooted on the `TP` namespace.

By default, tag bundles are found in the ~app_tags directory, a directory designated by a TIBET virtual path.

In TIBET, paths beginning with ~ (tilde) refer to configuration variables rather than hard-coded paths.

In the case of our <hello:app/> that means the type for our hello:app tag would be found in ~app_tags/APP.hello.app/APP.hello.app.js:

/**
 * @type {APP.hello.app}
 * @synopsis The root application tag for the application. This type's template
 *     is responsible for the content you see while its methods are responsible
 *     for handling events which reach the application tag (this type).
 */

TP.ux.TemplatedTag.defineSubtype('APP.hello:app');

The single line of executable code here makes use of TIBET's defineSubtype method, creating our tag as a subtype of TP.ux.TemplatedTag.

As you may guess, the TemplatedTag in that name is why hello:app renders via a template, ~app_tags/APP.hello.app/APP.hello.app.xhtml in particular.

<h1 tibet:tag="hello:app">Hello World!</h1>

As we saw in the quickstart guide, editing a tag's template file automatically results in new content being rendered.

Now it's time to take the next step.

Tag Refactoring

In the quickstart guide we worked directly with the hello:app tag, altering it so it rendered an h1 tag containing our Hello World! message.

For a more reusable solution lets refactor our Hello World! <h1/> into a component, one we can add to our corporate tag library.

hello:world

We're going to create a new custom tag, a <hello:world/> tag, which will render 'Hello World!' anywhere we use it.

We'll use tibet type --dna templatedtag to do that:

$ tibet type hello:world --dna templatedtag

Running this command within our project will create a new tag bundle containing our tag template, backing type, stylesheet, and test file.

In addition, the new tag's bundle manifest will be added to our application manifest so it will always be considered by TIBET's various tools.

In response to changes to the app manifest, TIBET's live patching will automatically load our new hello:world tag type and its attendant template into our running application.

APP.hello.world.xhtml

To get our new tag to render the desired content, we need to edit the newly-created template file ~app_tags/APP.hello.world/APP.hello.world.xhtml.

Edit ~app_tags/APP.hello.world/APP.hello.world.xhtml to contain:

<h1 tibet:tag="hello:world">Hello World!</h1>

Note this is almost identical to our earlier edits for the hello:app tag but we've set the tibet:tag attribute to point to hello:world as the backing type.

Testing Our Template

Hey! Let's test!

One of the things our tibet type command does when creating a new type (or tag) is that it automatically generates a test file for the new type.

We can run the new test using tibet type:

$ tibet test
# Loading TIBET via PhantomJS 2.1.1 at July 15, 2017 at 16:05:16 MDT
# TIBET loaded in 4165 ms. Starting execution.
# TIBET starting test run
# 3 suite(s) found.
1..4
#
# tibet test APP --suite='APP suite'
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 suite'
ok - Is a templated tag.
# pass: 1 total, 1 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
#
# tibet test APP.hello.world.Type --suite='APP.hello:world suite'
ok - Is a TP.core.TemplatedTag tag.
# pass: 1 total, 1 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.
#
# PASS: 4 total, 4 pass, 0 fail, 0 error, 0 skip, 0 todo, 0 only.

# Finished in 4357 ms w/TSH exec time of 192 ms.

As we can see, there's a 4th test suite now, the APP.hello:world suite, thanks to the tibet type command.

So far so good.

hello:app

Once we have our <hello:world/> tag ready we can change our <hello:app/> template ~app_tags/APP.hello.app/APP.hello.app.xhtml and tell it to render our new custom tag instead of the hard-coded h1 content.

In the example below we use more than one, just for fun :).

NOTE: we change the root tag to a div here for simplicity.

Edit APP.hello.app.xhtml to use our new tag:

<div tibet:tag="hello:app">
    <hello:world/>
    <hello:world/>
    <hello:world/>
    <hello:world/>
    <hello:world/>
</div>

Save your changes and you should again see Hello World! a lot :).

With that simple update we get our first real glimpse of how TIBET differs from many other frameworks:

• tooling supports your development out-of-the-box,
• templates are xhtml files with valid xhtml and xml,
• ui-centric tasks often require no code of any kind.

Recap

Using the tibet type command (with a --dna templatedtag option) we created a new custom tag. We then updated that reusable component to produce Hello World!.

With our new tag ready, we updated our application's main tag template to display Hello World! multiple times, again without any code.

Imagine doing the same sequence with a common application header, a common footer, navigation, menus, etc. and you start to glimpse the real power of TIBET's tag system in modularizing the development process.

Tag Styling

With our new hello:world tag up and running the obvious question is how do we style it?

Tag CSS

For larger applications keeping all the rules in one file isn't best practice. A single app-wide CSS file becomes a source of change conflicts and other maintenance problems.

A better approach is to keep common rules in app.css but factor tag-specific styling into separate files for easy maintenance, rolling them up for production.

TIBET's command line tools manage all that work for you.

The tibet type command creates tag-specific stylesheet files for each tag.

The tibet resource, tibet rollup, and tibet build commands work together to handle inlining, bundling, and building deployment packages.

Default CSS

Let's take a look at the default hello:world style sheet.

Open ~app_tags/APP.hello.world/APP.hello.world.css in your favorite editor:

/**
 * @overview 'APP.hello.world' styles.
 */

@namespace url("http://www.w3.org/1999/xhtml");
@namespace tibet url(http://www.technicalpursuit.com/1999/tibet);
@namespace hello url(urn:tibet:hello);

/**
 * If your template/compute process transforms <hello:app/> tags
 * from namespaced XML into XHTML with a tibet:tag attribute so they render in
 * the page similar to <div tibet:tag="hello:app"/> place your
 * style in rules with the following root form:
 */
*[tibet|tag="hello:world"] {
    /* style here for xhtml converted tags */
}

/**
 * If you don't transform from XML form (tags in the page remain in their
 * <hello:app/> form) comment out the prior block and use rules
 * with the following root form:
 */
hello|world {
}

If you haven't used CSS with namespaced XML this may look a little foreign.

Don't panic, it's mostly comments :).

Let's focus on the lines of code.

Lines 1-3

@namespace url("http://www.w3.org/1999/xhtml");
@namespace tibet url(http://www.technicalpursuit.com/1999/tibet);
@namespace hello url(urn:tibet:hello);

The first three lines of code declare the default, tibet, and hello namespaces that will be referenced in the rules that apply to our tag either as element names or attributes.

Lines 4-5

*[tibet|tag="hello:world"] {
}

If your tag replaces XML (hello:app) with a native XHTML element (h1) you can use this form, which relies on the tibet:tag attribute. Note however, any : in an attribute name must be replaced with a vertical bar | when styling XML in CSS hence the tibet|tag value in the attribute selector.

Lines 6-7

hello|world {
}

If your custom tag doesn't convert from its original XML form but instead is going to be styled as XML you'll rely on rules of this form. Again, because : is special in CSS when you deal with XML namespaces you have to replace the : with a vertical bar |.

Simplified CSS

Since our hello:world tag becomes an XHTML h1 we can simplify quite a bit.

Edit ~app_tags/APP.hello.world/APP.hello.world.css file to contain:

/**
 * @overview 'APP.hello.world' styles.
 */

@namespace tibet url(http://www.technicalpursuit.com/1999/tibet);

*[tibet|tag="hello:world"] {
    margin-left: 1em;
    color: green;
}

Save this set of changes and our UI should now appear as:

You've completed Hello World! TIBET-style.

Congratulations!

Summary

In the quickstart guide we covered cloning, initializing, and running a new TIBET application.

We also did an initial edit to our new application to display 'Hello World!' without resorting to JavaScript or TypeScript coding.

In this guide we've looked at how we can refactor functionality into custom XML tags that we can consume and style without any additional code.

There's a lot more in store…

Continue your exploration via TIBET Essentials - Part 2.