Generated Content by David Storey

Montage and Ninja are here

After leaving Opera last year, I hopped over the Atlantic to join Motorola Mobility in the Bay Area, to work on a top secret project. Many people asked Why Motorola? and What are you working on at a mobile company?. Well, finally, we revealed our project to the world last week.

Motorola had put together a team of top engineers from companies such as Apple, Adobe, Nokia, Opera, and others. The team is also scattered with people you might recognise for their contributions to the Web community, such as Simurai, Brandon Jones, Kris Kowal, Román Cortés, Jon Reid, and more. If you’re a member of the Flex, Flash or WebObjects communities, you’ll also recognise a number of familiar faces.

After a lot of hard work and much drinking of coffee, last week we released a MVC JavaScript framework called Montage, and a visual authoring tool called Ninja. Both have been released for free under a BSD licence on Github. we also released a number of smaller tools such as Screening, which is an automated testing tool (supporting WebDriver) for Montage apps. As a strong believer in eating our own dog food, both Ninja and Screening were built using Montage.

Montage framework

The Montage framework is designed with modern web technologies, such as ES5, HTML5, and CSS3. As such we made the trade-off of jettisoning support for legacy browsers that do not support features such as object.create. The advantage is that we can remove the cruft and use a modern architecture. We will however support any browser that does support the standards we rely on. Montage is still work in progress, and as such browser support is improving as the framework matures.

As well as the modern technologies built into the browser, we use various parts of CommonJS including Promises, Modules, and package.json. We also take advantage of Node.JS.

The main aim of Montage is to help developers be able to develop native quality applications using web technologies, as quickly and easily as possible. As such we support components using HTML5 templates, Two way data binding (to both objects and components) , serialization, extended event handling, an optimised component draw cycle (for efficiently repainting when updating the DOM), keyboard shortcut handling, gestures and composers, data converters, and much more.

I personally love how montage components use regular HTML, CSS, and JavaScript, so a designer can build the UI for an app or component using the technologies they likely already know, which the developer can then hook up to the controller and model layers. We use each technology for what it was designed for, rather than shoehorning everything into JavaScript. I also really love data bindings, as I can hook up a component to update the data in the model (or vice versa) or another component, without having to write any JavaScript in many cases. It just requires some configuration in the JSON serialisation file. Of course you can also use the JS API if you should so wish.

While Montage is far from done, we have had the advantage of building a number of real world apps using Montage, such as Ninja, so we’ve been able to see what works and what needed improved or optimised. This has allowed us to rapidly improve the framework as we go. We’re really looking forward to having designers and developers in the community use Montage, and collecting your feedback. As we’re open source, we’d also love to see your bug reports, and maybe even a pull request or two. If you build anything using Montage, be sure to let us know!

Ninja authoring

The Ninja authoring tool is currently in alpha. It is packaged as a Chrome extension. As I mentioned previously, it was written using the Montage framework.

What really excites me about Ninja is that as a member of the SVG community, we were always hoping that a tool such as Flash would come out for SVG. There were plenty of great apps for creating static SVG, but not much for dynamic SVG. Now with Ninja we have a tool that is potentially as powerful as tools like Flash but for developing apps and pages using web standards rather than swf. If we do this right, we could have a revolutionary tool on our hands. And the team building Ninja is second to none in their experience building such tools.

Ninja has a number of visual tools such as a pen, brush, canvas and WebGL drawing, 3D rotate and translate, colour panel, materials panel, animation, and so on, as well a code view, visual data binding, component panels, and a lot more.

For a good overview of what Ninja is capable of, check out these Ninja videos, or see the release notes.

I expect that Ninja will be a great tool for designers moving to HTML from the Flash world, as well as those that want to be able to visually design their app or site, while still working in the browser and having access to the source. I look forward to seeing how you put the tool to use.

How you can get involved

Montage and Ninja are new and still under active development. We’d love to get your feedback on what’s hot and what’s not, and what can be improved. If you develop anything with their project then be sure to let us know. We have a forum on the Tetsubo site, and you can find the Montage team on IRC at #montage on freenode.net. Feel free to file bugs on GitHub.

If you’d like to meet up in person, we’re having our first Montage meetup in the Bay Area on 2nd August, organised by Tom Ortega.

  1. codesnips reblogged this from dstorey
  2. dstorey posted this