The Ninja HTML5 editor in action
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.
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 (
<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.
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.
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.
Using Ninja’s Tag tool, you can easily create and lay out DOM structure (such as
<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.
Create DOM structure visually with layout hints.
You can control how, or if, objects snap to the drawing grid, to other objects, or to layout guides.
Snap align options
Creating bezier curves with the Pen tool
<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 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.
Applying material to canvas
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.
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.
Rotating an object in 3D
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.
Rotating the stage
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
background, and so forth. You can also optionally specify an easing algorithm to apply to the animation between two keyframes.
Timeline panel with keyframes
You can edit a component’s public properties in the Properties panel. The screenshot below displays the properties for the selected
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
valueproperty of an InputNumber component and the same property of an InputRange component.
Creating a data binding visually
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
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.