Modern HTML rendering engines and emerging standards make it possible to create a new class of rich experiences that could previously be achieved only with native development toolkits—but developers need better Web development frameworks and authoring tools in order to take advantage of the possibilities.

Three new open-source software projects developed at Motorola Mobility hope to address the problem. We—Tim Statler, Zachary Cohen, and Kris Kowal—have had the pleasure of working on a new content creation tool called Ninja, a JavaScript development framework called Montage, and a testing automation tool called Screening. In this article, we will describe all three pieces of software, and we've included code examples to illustrate some of the functionality. But first—a high-level overview.

The Ninja authoring tool is a Google Chrome app for designing keyframe-based animation with HTML5, including 3D scenes and vector graphics. These scenes can incorporate components built on the Montage framework (see below), and the editor itself is built using Montage. Ninja includes a familiar set of drawing and layout tools, such as the Pen and Brush tools for creating graphics, shape primitives, and the Tag tool for creating page structure ( <div> or <img> tags, for instance). Graphics you create in Ninja can be rendered in the browser with either the Canvas 2D API or WebGL. Designers can add Montage components to their projects and use the visual data binding feature to easily synchronize property values between components. Finally, Ninja produces high-quality code output that can be easily be maintained, even outside of the Ninja tool.

Montage bridges the gap between developing native applications and Web sites. With Montage, developers can create rich mobile (or “stationary”) applications using many of the foundations in existing native application frameworks. With Montage, developers can create reusable user interface components and modules, bind properties among components and controllers, and synchronize DOM queries and updates to ensure a smooth user experience, especially on resource-constrained devices.

Modularity is a key theme of the project. User interface components are modeled as individual Web pages and Montage uses the CommonJS module system, popularized by NodeJS. Even the HTML of a component (the “template”) is loaded as a module.

Instead of using a template language like Mustache, developers can craft user interface components as stand-alone Web pages. An application is merely a component’s template opened directly in a Web browser. The template contains a DOM skeleton and may require some CSS, but it comes to life with the inclusion of a component object model, distinct but connected to the document object model. This is a JSON formatted block or file that describes how to dress up the DOM with connections among components.

Montage also comes with a NodeJS application that translates a developer-optimized experience into a user-optimized experience. The Montage Optimizer, called “Mop,” cleans up an application with its deeply intertwined dependencies into a single optimized script. All other modules are translated into scripts that can be lazily injected, and modules that are not needed to render the initial view of the application can be preloaded in bundles or distributed among multiple downloads. As a result, developers can release Montage applications with restrictive Content Security Policies. Alternately, “Mop” can automatically generate an AppCache Manifest and also supports a “shared resource” deployment mode, where multiple applications can share overlapping cached dependencies.

Screening completes the toolset, providing an interface for creating, editing, and manipulating application test scripts. Screening is built with Montage for the front end and NodeJS for the server, and it integrates with WebDriver implementations for Chrome, Opera, FireFox, and Internet Explorer to script the browser.

Ninja

Without a great authoring tool, creating visually-compelling content for the Web has been limited to advanced developers familiar with technologies like HTML5, CSS3 animations, WebGL, and the Canvas 2D API. Ninja provides tools that visually expose these advanced features so that a larger audience of graphic designers can take advantage of them.

Ninja also creates high-quality markup and code that’s easily maintained outside of the tool. For example, an animation you create with Ninja’s keyframe-based Timeline panel is exported as easily understandable CSS rules, not as a mass of hard to read JavaScript.

Workspace

Installed as a Chrome Extension, Ninja provides a native-quality experience for Web designers and developers. A stage area provides a surface for drawing shapes and laying out DOM structure. You can read and write files on your local disk via the Ninja Local Cloud, a small native application that runs on your system. A tabbed document interface lets you easily switch between files, and collapsible and dockable panels keep your workspace tidy. You can create and edit objects in 2D or 3D space, and use the Property inspector to change an object’s properties.

Layout

Using Ninja’s Tag tool, you can easily create and lay out DOM structure (such as <div> or <article> elements) on the stage area. You can snap align objects to the document grid or to other objects in 2D or 3D space. For example, in the following screenshot a layout guide is displayed as the <div> on the right is being created, showing the middle point of the <div> on the left.

You can control how, or if, objects snap to the drawing grid, to other objects, or to layout guides.

Drawing

Ninja provides common drawing tools, such as the Pen tool for creating bezier curves, a Brush tool, and Rectangle and Oval tools. Graphics you create can be rendered in the browser using either the Canvas 2D API, or WebGL. In either case, Ninja creates all the required HTML, CSS, and JavaScript (if necessary) to render the content you create.

The Canvas 2D API is a JavaScript API for drawing shapes, creating fills and strokes within an HTML <canvas> element. Ninja provides tooling on top of the <canvas> element to let you visually create the desired graphics. When you publish your project, Ninja includes the required Canvas 2D API calls to recreate the artwork you created in the tool.

WebGL

WebGL is an HTML5 technology for rendering hardware accelerated 3D and 2D graphics to a <canvas> element. WebGL elements can be mixed and composited with other HTML content, and WebGL supports shaders (applications that run on the GPU), a realistic lighting model, and many more features.

Ninja includes a library of preset materials you can use in your projects. A material is a wrapper for a WebGL shader that exposes properties for modifying the shader’s behavior. You can apply a material “fill” or “stroke” to any WebGL-enabled shape in Ninja.

You can also customize a material’s properties on a per-element basis, or change the material’s base definition to affect all elements that use that material.

3D

Authoring content in a 3D context presents its own challenges, and Ninja provides several features that simplify the process. These include “dynamic working planes,” snapping and alignment in 3D, and a 3D grid that orients you and displays the current working plane.

The CSS3 Transform specification includes support for perspectives, rotations, and transforms of DOM element in a 3D space. Ninja provides tools that let you visually apply these transformations to selected DOM elements. You can also rotate the stage in 3D dimensions to easily align objects in 3D.

You can rotate and translate objects using, respectively, the 3D Object Rotate and 3D Object Translate tools. In the screenshot below the blue rectangle is being operated on by the 3D Object Rotate tool.

The 3D Stage Rotate tool lets you rotate the 3D world in which objects on the stage exist. For example, in the screenshot below, the stage has been rotated about the stage’s Y axis. From this perspective, it’s clear that the blue rectangle intersects the X/Y plane, represented by the red grid. The grid also represents the current working plane. As you rotate the stage, the working plane changes to the plane whose surface is oriented the most toward the user. The drawing and layout tools always operate on the current working plane.

Timeline and animation

The Timeline panel in Ninja lets you visually create CSS3 animations, and it also helps organize elements on the stage. When you create a new object on the stage, such as a shape or <div> , Ninja automatically adds it to a new layer in the Timeline. The order of the layers in the Timeline mirrors the order that the elements appear in the HTML document. You can re-order the layers to change the visual stacking order of elements on the stage.

To animate an element in the Timeline, you add keyframes to the element’s Timeline layer. At each keyframe, you can assign unique values to any of the object’s animatable CSS3 properties, such as left , top , background , and so forth. You can also optionally specify an easing algorithm to apply to the animation between two keyframes.

The output of any animation you create is pure CSS and requires no JavaScript to run. This is important for two reasons–CSS is easier to maintain than JavaScript, and CSS3 animations can take advantage of hardware acceleration in today’s modern Web browsers. JavaScript-based animation cannot.

Components

The Components panel lets you add Montage components and other JavaScript widgets to your application.

You can edit a component’s public properties in the Properties panel. The screenshot below displays the properties for the selected InputNumber component.

When you publish an application from Ninja that uses a Montage component, Ninja adds the required Montage bootstrapping script and JSON component serialization to the exported files.

Visual data binding

Montage supports data binding between components, which lets you easily keep the value of a property in one object synchronized with the property of another object. The Binding tool in Ninja lets designers visually create data bindings between Montage components. For example, the screenshot below shows a data binding being established with the Binding tool between the value property of an InputNumber component and the same property of an InputRange component.

Code editor

Ninja integrates the CodeMirror code editor, allowing you to create and edit HTML, JavaScript, CSS, JSON, and other common file types. It supports auto-completion, syntax highlighting, and other features common to native code editors.

Presets

Ninja includes a growing library of preset CSS styles, animations, and transitions that you can apply to objects on the stage.

High quality code output

Often authoring tools make the designer’s job easier but generate verbose code that is difficult to maintain. One of the main areas of focus in Ninja has been high-quality output comparable to that created manually by HTML and CSS experts. This enables designers to more easily share their output and collaborate with developers. For instance, an animation you create in the Timeline panel that animates an element creates a CSS style rule, like that shown below, not a lot of obtuse JavaScript code.

@-webkit-keyframes myCanvas { 0% { top: 33px; left: 81px; width: 161px; height: 161px; } 100% { top: 37px; left: 939px; width: 223px; height: 269px; -webkit-animation: ease-out; } }

Ninja provides designers with a set of visual tools that expose all the capabilities of HTML5 and CSS3. What previously was left to expert coders to create, such as canvas-based CSS3 animations and WebGL shaders, is now possible with a visual tool and great automation.