Cross-browser fixes, Windows support for Mop and much more

It’s been over two months since the last update, and a whole lot has improved. To cover it all would result in an extremely long post, so this is just a summary.

Montage v0.14.6 was released a month ago. The biggest change that may affect your applications is the removal of the internal “url” module. Instead use a URL module on npm, such as url.

Mop now supports Windows and the dependencies have been simplified by replacing JSDom with minidom.

The Flow with elastic scrolling

The Flow has gained elastic scrolling, which you can see in action in this Nyan Cat demo. The selection of iterations in the Flow has been fixed. The Repetition, which powers the Flow, now supports selection when it contains no components along with other improvements. The RangeController, which powers the Repetition, has gained a content parameter in its constructor.

Loading resources correctly is surprisingly challenging, and we’ve fixed a number issues in this area. The cross-domain checks in Image have been re-added, stylesheet urls in the template are now rebased, but we’ve stopped trying to rebase images with no src or empty src. We don’t wait for inline styles to load, because they’re already there. Cached images are now handled and the
DocumentResources get prepopulated.

Some browser compatibility issues have been fixed: DOM content replacement and issues with innerHTML for IE, removing the use of Components.interfaces for Firefox and stop using NodeParent interface on DocumentFragments for IE and Safari. Mouse events on Android are tricky too, but they are now handled correctly.

The Overlay gained didShowOverlay and didHideOverlay delegate methods.

Collections now has a shiny new collection to play with, the Deque! The improvements to equals and compare have been backported. Giving unsupported arguments
now throw errors. LruSet maxLength has been renamed to capacity and direct clones of an array have been fixed. If you’re modifying change listeners in a change listener, you’re now covered. Thanks to Chris Barrick for fixing the length property of the Heap and SortedArraySet.

The Popcorn demo has been tidied up to serve as a better example app.

Hopefully this gives you an idea of what we’ve been up to over the past couple of months. To see what’s been occupying the rest of our time, sign up for the Montage Studio beta!


Montage v0.14.6, Digit v0.5.1, Collections v1.0.3, Minit v0.5.4, Mr v0.15.4, Mop 0.15.0 and introducing Jasminum v0.0.4.

See Montage Studio in action at the MontageJS Silicon Valley meetup on April 17

The Silicon Valley MontageJS user group is holding a meeting on Thursday, April 17. Join us at the Montage Studio office in Sunnyvale. Meet the amazing team behind MontageJS and be among the first to discover what we’ve been secretly developing at Montage Studio. You can look forward to dinner, drinks, networking, and a live technical demo. We’re going to show you how to build MontageJS applications faster with Montage Studio, a new cloud-based application authoring environment from the MontageJS team.

The meetup starts at 6:30PM. The technical demo will run from 7:30–8:00PM. To RSVP, please visit the event page at If you can’t make it this time, but you’d like to be kept in the loop about upcoming events, consider joining the Montage Developers of Silicon Valley meetup group. We’re looking forward to seeing you.

Repetition improvements and more

Just a few changes last week. The repetition has had a bit of work, the selection management was fixed, the content changed to object and an optimization was generalized for the Flow which reduces the number of bindings fired. And sometimes instead of a binding, you can just use the same object. That's what was done for the AbstractSelect. The ability to block a component from drawing has been added which can be used to avoid a flickering UI when waiting for async operations to complete.

In Collections, the behavior of Object.equals for NaN was fixed which means that NaN can be removed from a collection. In general the constructor functions on Object (such as Object.has(thing, "a")) will call the eponymous method of the first argument if it exists (i.e. thing.has("a")), rather than requiring it to be on the prototype chain, so Crockford-style instances will work properly and for the improvement of performance.

If you haven't seen it already, check out the blog post we published last week on building a 3D app with Montage.

Build 3D applications with the WebGL-based MontageJS 3D component

We updated and converted this blog post into a tutorial on building 3D applications with MontageJS and moved it to our docs section. Please visit that document for an up-to-date version of this tutorial.

WebGL, the standard that defines JavaScript APIs for performing hardware-accelerated 3D rendering in the HTML Canvas element, is gaining considerable momentum. It looks like 2014 will be the year that WebGL enters the mainstream, emerging from laboratory prototypes and demos to take its rightful place in real-world applications.

WebGL’s low-level APIs are well-suited for graphics programmers, but set a high barrier to entry for conventional frontend web developers. Using WebGL to build interactive 3D experiences for the web currently requires intensive programming and a great deal of specialized expertise. To help simplify WebGL adoption for web designers, the MontageJS team is very excited to share a new WebGL-based component for the MontageJS framework. The component will make it easier for frontend web developers to integrate interactive 3D experiences.

The new 3D scene view component for MontageJS offers a unique kind of abstraction layer for WebGL, one that truly elevates 3D graphics to the status of a first class citizen on the web. It aims to make the individual elements of a 3D scene just as easy to manipulate as conventional HTML elements in the page DOM. If your browser has WebGL enabled, you can see a full version of the demo here.


The component provides a bridge between WebGL and the MontageJS data binding system, extending the model/view/controller paradigm to the world of 3D graphics. The bridge makes it easy to integrate a 3D scene that serves as a view, reacting to changes in an underlying data model. The component gives developers the ability to manipulate individual parts of a 3D scene in WebGL using CSS, making it exceptionally easy to accomplish with a syntax that is already widely known. The component will even let you animate elements of a 3D scene using the exact same method that you would use to perform CSS transitions.

This tutorial demonstrates how to use the component to build interactive 3D applications with MontageJS. It will describe how to load a 3D model, expose model nodes to the MontageJS binding system, manipulate model nodes with CSS, and make model nodes respond to user interaction. Just like MontageJS, the new 3D scene view component is open source software: we publish the source code on GitHub under the BSD license. You can download it yourself and follow along with the steps in this tutorial.

Continue reading

The month in Montage

It's been over a month since the last update and a lot has happened!

Three patch versions of Montage 0.13 have been released that fix several issues with require, the KeyComposer and an uneeded warning. Full details are in the Montage v0.13.12 changelog, and of course it's available to install from npm.

Plenty of pull requests have been merged into Montage master and so I've skipped some of them here to save some time.

When using a Loader the console would display an unnecessary warning which has now been fixed, The NumberField now correctly handles floating point numbers in step. Thanks to @evax who implemented getPreventDefault in MutableEvent. The Overlay is now not shown if it can't be the active target and the Esc key now correctly dismisses the Overlay the second time. Now that :iteration is availabe objectAtCurrentIteration has been deprecated. The generation of new data-montage-ids when merging templates has been improved along with using the metadata to label objects if available. A nasty Safari bug with uuids was fixed (although it seems there are still some problems with UUIDs and events). A bug that occured occasionally in the PressComposer was fixed.

In Digit a new transparent skin was added that can be easily customized by chaging the color CSS property. This is along with the Button–glass variation that makes borderless icon buttons easier. As in the Repetition, objectAtCurrentIteration was deperecated in BigList. The tab/focus support was improved and support was added for using an <a> element with Button. Improvement of the JSDocs continues.

Joey has been updated to the latest Q-IO that fixes host negotiation decision tracking and ranged HTTP requests for files, and the "binary" now supports priviledge descalation with the -u UIDargument. Minit was updated to take advantage of this new release.

Another thanks to @evax for noticing a typo in Mop, which was then fixed.

And, of course, you can now RSVP to be the first to find out about some exciting new things we've been up to.


Montage v0.13.12, Minit v0.4.3, FRB v0.2.17, Mousse v0.3.0, Mr v0.15.1, Joey v1.4.0.