Facebook Retrofits a 2007 Apple Tool for Prototyping iOS Apps
The preferred tool of many Facebook developers for prototyping how they want their applications to appear on an iPhone is an Apple tool called Quartz Composer. Whether Apple cares remains a mystery. Ostensibly, Quartz Composer is a rapid application development tool — or rather, it was. It’s still supplied by Apple for free as part of Xcode, but for most of the last eight years it was supported primarily by volunteer developers.
That is, until Facebook came to the tool’s rescue. Now a RAD tool, whose existence Apple just barely acknowledges, may have already become the leading prototyping tool for Facebook apps on iOS. This week, Facebook is releasing a new series of updates to what it calls Origami, a resource library that contains new graphical elements that Apple — perhaps unfortunately (at least for Apple) — had earlier dubbed “patches.”
Thus, out of sheer necessity, Facebook is patching an Apple product.
Facebook Picks up Where Apple Left Off
The key reason modern developers like Quartz Composer is because it helps them build nice prototypes of mobile apps … or rather, it should. You see, Quartz Composer is a Mac OS tool. Its purpose, as Apple explained back around 2007, was to enable programmers to build what Apple (and only Apple) would call “dynamic motion compositions.” These graphical elements could be manipulated on screen, and those manipulations would produce code without the developer having to write it manually.
All too soon, dynamic motion something-or-others fell out of favor with a community more adept with building Web apps using JavaScript and libraries like jQuery and Sencha Ext JS. When that happened, Mac OS developers prototyped using other tools — such as Sketch — and Quartz Composer appeared to languish. One day, when a developer reported a Quartz Composer bug, an Apple engineer responded by saying Quartz Composer was “deprecated already.”
That came as a shock to mobile developers who recently had been taking a cue from Facebook.
Back in April 2013, Facebook developer Julie Zhuo publicly admitted that she and her colleagues had discovered Quartz Composer’s virtues as a prototyping tool. Ignoring Quartz Composer’s ability to generate code, they found it was great for making objects behave on-screen the way developers want them to behave in their final release.
“When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve,” wrote Zhou. “And that leads to better feedback, and better iterations, and ultimately a better end product.”
In Quartz Composer lingo, “patches” are represented on-screen in a way similar to database schemas. Their properties are connected to one another by way of wires that you literally draw, and these connections trigger events.
Facebook was building its own custom patches. Late in 2013, it released those patches to the developer community as Origami. They represent the basic controls you’d expect to find in an iPhone app, such as a toolbar, a platform for scrolling text and buttons. (Yes, Quartz Composer needed new patches to explain buttons.) Most importantly, it provided a frame for running prototypes shaped like an iPhone.
For example, suppose you need a way to demonstrate to a design team how you want the graphical elements to flow in an animated page. Perhaps, when the app is started, the main panel zooms gently into view from the center, and a series of icons swing over from the left, one after the other, as if they were tied by a common rope. Quartz Composer provides the environment for objects that represent panels and icons to enter the display using such an orchestration. Those objects aren’t linked to functionality yet, but that’s not the point: you want to demonstrate how it will look. Origami presents patches that make those objects into familiar things that iPhone users expect to see.
This way, a tool meant to generate RAD applications for Mac OS can be used to produce mobile app prototypes for iOS.
Origami 2.0 Picks up After Quartz Composer Drops Out
What mobile app developers lacked — until now — was a way to actually run those prototypes on iOS itself. Tuesday, Facebook announced its release of a kind of runtime platform called Origami Live for iOS. Downloadable from the App Store, it allows developers, for the first time, to test prototypes, rendered in Quartz Composer with Origami, on an actual iPhone.
“You can quickly try new ideas — using multitouch, device sensors, etc. — and fine-tune them with ease, without writing any code,” states a post to Facebook’s corporate blog by product designer Brandon Walkin. “Then, with your device in hand, your team members or users can try out a high-fidelity prototype that looks and feels like a final product.”
Just as importantly, Facebook is also releasing a version 2.0 of Origami that effectively assumes the job for which Quartz Composer was originally built: to generate code — only this time for iOS, Android, and Web apps. Ironically, prototype documents created in Sketch can now be linked to Origami prototypes by way of a Facebook-designed plug-in.
So now there’s a clear “next step”: Developers who prototype mobile apps using Origami 2.0 can now use the frameworks generated by that process in the background, to attach client-side functionality and build functional apps.
One gets the impression that, before too long, developers will be able to prototype Facebook Platform mobile apps using not only Origami patches, but tools other than Quartz Composer altogether. If Apple didn’t notice the developers who had been using its own Quartz Composer, will it notice when they’ve gone?
Feature image via Flickr Creative Commons.
