Here's the source markup for this app:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:j='http://www.jitsu.org/schemas/2006'>
<body>
My first application:
<j:App>
Hello World!
</j:App>
</body>
</html>
On any of the quick tours, to view the full source markup just click on the Source Markup tab above. Highlights from the markup are shown in this "markup notes" section.
The simplest "Hello World" Jitsu application is shown running above.
This application consists of the text "Hello World" placed within a <j:App> tag:
<j:App>
Hello World
</j:App>
Anything within the <j:App> ... <j:/App> is going to get compiled by the Jitsu page compiler.
The Jitsu page compiler takes each source markup file and splits it into two output files: a Generated HTML file that contains everything outside the App, and a Generated JavaScript file for everything within the app. Then, in your browser, the Jitsu runtime executes the generated JavaScript to run the app.
Its true that nobody likes to have to run a compile step every time they make an edit.
So we worked hard to make sure your dev cycle is unchanged. i.e.
That's it! Compilation happens transparently in the background when you reload a page that has changed.
We achieve this using Puny , a tiny web server we ship with Jitsu that you run on your local box. When you hit a page in a project that's changed, Puny automatically runs the Jitsu compiler. If the compiler spots problems, Puny shows you error messages right in your browser window.
We think compiling buys you a lot. Browsers have gotten better, but they're still poor execution environments for large-scale apps, with very basic garbage collection algorithms. Compiling helps address this.
We�ve focused heavily on optimizing as much as possible at compile time. So you don't pay a penality for a lot of the power we offer, like rich controls and databinding.
Jitsu source documents start with the following two namespace declarations:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:j="http://www.jitsu.org/schemas/2006">
Jitsu relies on Xml namespaces to process source markup. Source markup must be well-formed Xml, and all HTML elements must be associated with the XHTML "http://www.w3.org/1999/xhtml" namespace.
Jitsu-specific elements and attributes are tagged with the "http://www.jitsu.org/schemas/2006" Jitsu namespace - usually with the "j:" prefix.
The <j:App> tag denotes the root of a Jitsu application on a page. You place Jitsu-specific controls, animations, and datasets etc. within the <j:App> tag. This represents the dynamic portion of the page's content.
The markup placed within a <j:App> tag can be either standard XHTML text and tags or Jitsu tags. There are some restrictions on this markup - see below.
You can place markup outside of a <j:App> tag on the page - in this example, we've added the text "My first application:" at the top of the page:
<body>
My first application:
<j:App>
Hello World
</j:App>
</body>
Any source markup that is outside of the <j:App> tag is passed as-is by the Jitsu Page Compiler into the HTML output file. If you have static content, server directives, server-generated content or even <?php ... ?> statements you could place these outside the Jitsu application on a page.
To compile the "Hello World" application output you see above, a lot of work is going on behind the scenes.
The compiler moves everything outside a <j:App> into the Generated HTML file. Everything within the <j:App> tag ends is compiled into a JavaScript representation placed in the Generated JavaScript file.
You can view the generated files for any of the Quick Tours by clicking on the "Generated HTML" or "Generated JavaScript" buttons above.
Lets look at the files in more details:
The Generated HTML file is pure HTML - all Jitsu-specific tags (and everything inside the Jitsu <j:App> tag) is stripped from the Generated HTML file.
The generated HTML file has a few extra <script> and <link> tags added by the Jitsu Page Compiler: a <script> tag to load the Jitsu runtime ("jitsu.core.js"), a <script> tag to load the generated JavaScript, and other script/link tags to load related resources.
An "init" function in the script kicks the whole show off.
The Generated HTML file for the Hello World sample looks something like:
<html>
<head>
<script src="jitsu.core.js"></script>
<script src="basic_helloworld.html.js"></script>
<script>function init() { AppControl.init(); }</script>
</head>
<body onload="init();">
My first application: <div id="App0"/>
</body>
</html>
Notice that the <j:App> tag (and the content within the tag) has been replaced by a single empty <div id="App0"/> tag - this is the tag that will hold the Jitsu app at runtime.
The Generated JavaScript file contains a JavaScript representation of the Jitsu app.
If you look at the generated JavaScript for the Hello World example, you'll see a collection of JavaScript statements, including the function:
// Function to initialize <App>'(line 9)
function initializeApp0(target, resourceOwner, data) {
target.setInitialValues(
"childControls", new SitedList(' Hello World! '));
};
This is where the "Hello World" ended up - its now JavaScript code in the Generated Javascript for the page.
When you point your browser at the Generated HTML file, it loads the Generated JavaScript file and the Jitsu Runtime. The Jitsu Runtime executes the Generated JavaScript code, which renders the app - constructing the contents of the App's <div> tag on the fly. The Final HTML the user sees includes both the static HTML that you included in the source markup and the rendered app. Click on the "Final HTML" button near the top of each quick tour to see this final markup.
See The Jitsu Approach for more details of the page compilation process.
Though this may seem like a lot of work, the benefits of the compiled approach become apparent once you start building Jitsu apps.
Outside of a <j:App> tag, you may use any browser-tricks and markup techniques you wish. Inside a <j:App> tag, certain restrictions apply.
Jitsu applications consist of text, XHTML elements and Jitsu elements. Inside a <j:App>, keep in mind that:
<html xmlns="http://www.w3.org/1999/xhtml" ...
The HTML form elements continue to work, but they don't have any of the added benefits of Waxform, features like databinding, animation, validation, etc.
<j:App>
<?php ... ?> <!-- this won't work: -->
</j:App>
<j:App>
<!-- neither will this: -->
<xlst:template>...</xlst:template>
</j:App>
The page compiler knows about XHTML and Jitsu tags. It doesn't know how to handle XSLT, PHP or other Xml tags inside a <j:App>.
There are also special considerations regarding <script> tags in Jitsu:
<j:App>
<!-- this won't work -->
<script>document.write("<div id='t1'/>");</script>
<!-- neither does this-->
<script>document.getElementById('t1').innerHTML='hello';</script>
</j:App>
Instead of doing this, create a custom Jitsu control which generates dynamic output - see the Lister quick tour.