Mjt: an In-browser Web Framework

Template-Driven Webapps in Javascript

Mjt is a Javascript application framework that runs entirely in a web browser, based on a HTML templating engine. It was built for the Freebase service, but it can be used for many other web services. It is distributed as open source.

If you can get your data from a JSON-aware web service, creating a Mjt application is the quickest way to get that data displayed in a browser with complete control of the HTML formatting. You can run the application from your local filesystem or share it on any web server as static files. No server-side support is necessary - all the work takes place in the browser using Javascript.

Mjt is particularly useful with "JSONP" services that return JSON values and accept a callback= parameter, such as the Freebase service and the Yahoo JSON API. With these services you can use mjt to build "mash-ups" that incorporate data from services on multiple hosts.

Examples

The list of examples continues to grow. Most of them use Freebase data sources but there are examples using Yahoo image search and the Google feed API as well.

For a step-by-step introduction to the Mjt template language, as well as an example of Mjt in action, start with the intro tour.

Will Moffat's blog is a great source for mjt examples, tutorials, and techniques.

New in Mjt 0.6

Mjt is now split up into separate files. All source files are available in the dist/src directory. The source files that provide roughly the same set of functionality as Mjt 0.5 are concatenated and run through JsMin to create mjt.js. Other source code can be included from the source directory.

Due to the remodularizing, there are some deprecated interfaces in this release.

mjt.mqlread(...) use mjt.freebase.MqlRead(...)
new mjt.BlobGetTask(...) use mjt.freebase.TransGet(...)
mjt.imgurl(...) use mjt.freebase.imgurl(...)

The old names should still work but will generate deprecation warnings in the firebug console.

Much of the code now has documentation strings though there is much more to be done.

There are some very simple unit tests for the internals. There didn't seem to be any decent Javascript testing frameworks for asynchronous code. If you are interested in using this one, it's called tsetse.

The task system has been completely rewritten and is much cleaner and more powerful. It has also been separated out from the template runtime and template compiler.

Not coincidentally, there are many new mjt.Task types, including support for POST using XMLHttpRequest (include xhr.js). Support for the freebase.com mqlwrite and upload services services can be found in freebasexhr.js. Note that XMLHttpRequest has cross-domain limitations, and you will have to set up a proxy in order to use third-party web services this way.

MqlRead now has built-in support for MQL cursors. Pager.js hides the cursor behind an abstract ResultList - the result list can be arbitrarily sliced to create asynchronous requests for any chunk of the list.

Example apps for the new functionality should be coming soon...

Usage

Here's a very simple mjt page. If you visit it at examples-minimal you should see that the $mjt.VERSION string has been substituted:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://mjtemplate.org/dist/mjt-0.6/mjt.js"></script>
<title>a minimal mjt example</title>
</head>
<body onload="mjt.run()" style="display:none">
    running mjt version $mjt.VERSION
</body></html>

Process

Mjt has three main tasks:

The primary mechanism for fetching data is the dynamic <script src=""> tag. This has the advantage that it can be used to fetch data from services on other hosts. The disadvantage is that those services must support a callback= query argument. XMLHttpRequest support is in the works for more flexible network requests.

The template language is primarily based on Kid, a popular python-based templating language. The templates are described in HTML but with some non-standard attributes that describe the templating process. A RelaxNG compact schema for the extended attributes can be found in mjt.rnc.

Templates are compiled from the extended HTML into Javascript functions. These template functions format Javascript data structures into HTML, which is then inserted into the current page. Template substitution may be explicitly directed from Javascript, or automatically triggered as data arrives from external sources.

Download

You can copy mjt.js to your own web server or reference it directly from this site.

A minimized version of mjt.js is available as:

http://mjtemplate.org/dist/mjt-0.6/mjt.js

The commented source code can be found at:

http://mjtemplate.org/dist/mjt-0.6/src/

Older versions can be found at http://mjtemplate.org/dist/

The "latest" version is now deprecated - please link to .../mjt-0.6/mjt.js explicitly. Mjt 0.7 will probably contain incompatible API changes.

The Mjt source code repository is currently firewalled, but will move to Google code in the near future.

Support

Mailing list TBA. For now, subscribe to developers@freebase.com or watch blog.freebase.com

Related Work

The template language is closely modeled on kid, which has its own history.

Genshi is a more recent template language inspired by kid but with some interesting generalizations and extensions.

The first version of mjt compiled templates on the server side using a hacked up version of kid. Genshi2js is a recent open source project taking the same approach based on the genshi codebase.

Trimpath JST is another pure Javascript based templating system. It is entirely string-based; the template is stored as a string in a <textarea> node, and substitution is string-based. String based templating is more error-prone than markup-aware templating, though it is also simpler and occasionally more flexible.

JSONT is a template system for JSON objects, inspired by XSLT. Transformation rules are chosen by matching patterns against the current path. Like Trimpath JST it does string-based substitution.

Exhibit is a Javascript library for presenting graph-structured data. It serves much the same purpose as mjt. Mjt tries to make it possible to generate arbitrary well-formed HTML but provides very little canned behavior, while Exhibit provides a number of sophisticated (but less flexible) behaviors as part of the library.

ZParse is a very flexible Javascript templating system which allows you to extend the text parsing rules.

XIndesk Jtemplate, JSTemplate, and JSLT are other Javascript template libraries.

Implementing mjt would not have been possible without Firebug.

License

Mjt is distributed under a two-clause BSD open source license:

Copyright (c) 2007, Metaweb Technologies, Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY METAWEB TECHNOLOGIES "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL METAWEB TECHNOLOGIES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.