Aviary iOS SDK Deep Dive: v3 Customizer app for OSX

Alongside version 3.0. 0 of our editor, Aviary is introducing the iOS SDK Customizer. It is an entirely new, simple way to customize the appearance of our iOS SDK. The Customizer is an OS X application that allows both developers and designers to experiment with and perfect their integration with instant visual feedback. Visual customization of our editor has always been an important part of the iOS SDK. We understand that partners want a seamless transition between their app's interface and ours. In previous versions of our editor, this customization was done completely at runtime. Developers would provide colors and images in code that would be used to customize the various UI elements of the editor.

Code
Code

This methodology had several drawbacks. First, the need to enter values at the code level meant that designers could not customize the editor themselves. Additionally, we received developer feedback that the old, key-based system for setting individual options was oftentimes confusing. It was not clear which keys would affect which elements of the UI. With the Customizer, we have solved both of these issues by removing the code level, key-based system from the SDK and moved all visual customization into the Customizer. Additionally, we have included a WYSIWYG preview section to the SDK Customizer so that setting a color for a particular UI element has instant feedback. Further, customization profiles can be exported, allowing designers to perform the visual customization themselves and then share the profile with a developer to include in their app.

Screen Shot 2013-04-16 at 6.17.38 PM
Screen Shot 2013-04-16 at 6.17.38 PM
Screen Shot 2013-04-16 at 6.17.51 PM
Screen Shot 2013-04-16 at 6.17.51 PM

In addition to easing integration, the customizer has allowed us to optimize the iOS SDK, making it leaner and faster. In previous versions of the SDK, visual customization was done by reading custom color and image values provided by developers and then drawing UI elements as the editor launched. Although we aggressively cached previously drawn UI, there was significant overhead associated with drawing the many elements that made up the SDK's interface. This manifested itself in the form of a slight pause before the editor or a given tool would launch, especially noticeable on older devices.

When beginning to work on v3.0.0 of the SDK, we approached building the gorgeous new UI with the same runtime configurability methodology. However, it quickly became apparent that the new design contained too many details that required customization and using our old method for customization rendered the SDK unacceptably slow. We decided that the only way to move forward with the new UI would be to pre-render all of the SDK's assets with the customized color scheme.

Re-building the SDK in this way had numerous advantages. First, it enabled us to more faithfully recreate our product team's vision for the new UI by allowing us to use assets cut by our designers in Photoshop. We were also able to remove almost all drawing using Core Graphics from the SDK, comprising several thousand lines of code. Removing this drawing improved both UI responsiveness and initial launch speed by reducing the CPU's load for rendering the UI. To illustrate how much more efficient the new customization scheme is, we have estimated that nearly 150 billion assets have been rendered on devices using v2 of the Editor in partner apps across our network. With the v3 of the Editor and the SDK Customizer, assets are never rendered on the device.

The entire team at Aviary hopes that the Customizer will make your lives easier and the new SDK, with its sleek new UI and improved performance, will delight your users. As always, we appreciate your questions and feedback, so please don't hesitate to get in touch: support@aviary.com.