The first thing you need to know is that a Jasonette application is built from a JSON source file, which is just text in a particular format.
According to https://docs.jasonette.com/document/#jason the minimum Jason document requires $jason, head, and body sections. For head only the title is required (see https://docs.jasonette.com/document/#head). The body section may be empty. So the smallest Jasonette app looks like this:
{
"$jason": {
"head": {
"title": "hello"
},
"body": {
}
}
}
It will appear blank when you run an app with that source code because nothing in the head section is displayed. The word hello won't appear because it's only for people looking at your Jasonette source code.
Jasonette files are outlines
A quick refresher. Remember your Jasonette app is a JSON file, which is an outline form. Everything else is contained within the top level { } braces and within the "$jason", sort of like this:
{
"$jason": {
}
}
The head and body sections
The next level of the outline would be the head and body portions of the JSON file:
{
"$jason": {
"head": {
},
"body": {
}
}
}
The head
The head part of your Jasonette file sets up the rest of the application, including: actual program code (called actions), style information dictating how your application appears, data used by your application, and more.
Best practice: Use title and description
While the title and description aren't required, you should always include them. title is used by Jasonbase and description will help you remember why you wrote the app and what it does.
At this point your minimal app still shows nothing but at least you know at a glance what is does.
{
"$jason": {
"head": {
"title": "starter",
"description": "Minimal Jasonette app"
},
"body": {
}
}
}
The body
The body contains the client area, or the part people actually see and interact with. The body is in several parts, include the header. The simplest way to show some output is to put a title in the header, like this:
TODO: Finish
A more interesting Jasonette starter app
{
"$jason": {
"head": {
"title": "hello",
"description": "Display title in header portion of Jasonette body",
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"title": "hello, world."
}
}
}
}