Swedish developers Propellerhead Software know a lot about audio. They have been creating software synthesizers, samplers, and sequencers since the mid-‘90s that have been used by hobbyists and Billboard chart-topping producers alike. They have, in effect, mastered the difficult task of digitizing the hardware that is used to create digital music.
All of Propellerhead’s original software was written as Windows desktop applications. In 2012 they expanded to iOS. Using their existing code from their more complex music apps, they created the fun and intuitive looping music app called Figure. Now, a few years later, they brought Figure to Windows. You can check out their arrival announcement here.
Moving Figure to the Universal Windows Platform (UWP) meant more than just having a common experience across Windows 10 devices. It also meant maintaining one app experience across multiple platforms since their goal was to preserve an identical experience across both iOS and Windows 10. Meanwhile, under the hood, they were also maintaining one business logic across two apps. Windows 10 audio drivers ensured that the user experience would be highly responsive across devices while UWP’s XAML support made it easy for the developers at Propellerhead to rebuild their UI on a new platform.
UWP’s improved audio drivers
There is always going to be a degree of latency in any device. The goal with a good app, however, is to create the illusion for users that they are always getting an instantaneous response. “You want to get the latency between touch on the screen until you get audio out of the speaker to as low as possible,” said Magnus Berger, Propellerhead’s CTO—himself a hands-on developer.
Though it isn’t often mentioned, Windows 10 has actually made incredible improvements to the audio stack across all Windows 10 devices. Optimizations to the WDM drivers and WASAPI interface have improved performance off the bat. New variable audio buffer sizes in Windows 10 means you can shave additional latency time by using 5 millisecond or even 1 millisecond buffers for data transfers instead of the default 10 millisecond buffer when this makes sense. Thanks to these low latency features in the Windows 10 audio stack, users of the Figure app can progressively modify beats and tones to their musical loop and immediately hear the audio changes take effect—or at least get feedback that’s so close to immediate it doesn’t really matter.
According to Magnus, Propellerhead used an informal method for evaluating the low latency capabilities of Windows 10. After years of experience with audio hardware and software, and tons of time spent with a variety of device emulators, they tested the audio and touch capabilities of UWP by seeing if “it felt good” to them. Once they determined for themselves that UWP felt good, they knew it would also provide Figure’s users with the experience they wanted and needed.
XAML makes UI development easier
One of the side-benefits of porting Figure to UWP was the chance to use modern development tools like the XAML Designer. Prior to that, the Propellerhead developers had been writing their UIs in code. Because much of their code was already written in C++, they were able to take advantage of the fact that UWP apps can also be written in C++.
“The app was ported from iOS,” said Propellerhead’s CTO, “and all the audio parts were made in C++. So what we needed to do was to scrape out the entire user interface that was written in Objective-C and replace that with C++/CX and replace pretty much all the interface code with C++/CX and XAML. And that was a lot of fun to work with.”
Figure developers gained an immediate UI bonus by using XAML. XAML makes it easy to implement adaptive layouts, and consequently, Figure on Windows adapts to any screen size and aspect ratio used by Windows 10 devices. The various panel classes found in UWP, such as the Stack Panel, Grid, and Canvas, provide multiple effective strategies to size and position content when the display screen changes.
As for their unique look, Propellerhead was able to re-implement their iOS design simply by importing their assets, replicating their color palette, and recreating some base shapes. They also knew that getting the animations right was critical, which they did. Part of the challenge they had set for themselves was to recreate the Figure user interface using UWP so that it looked and behaved the same as it did in in iOS.
In the end, by using a combination of XAML styles and some code-behind, they were able to do exactly what they set out to do: create a great user experience that works identically in iOS and Windows.
Because sharing is caring
As mentioned previously, Figure is both a great music creation app as well as a great music sharing app. Users can upload their musical pieces to the cloud to share with other users. They can also download pieces that other people have created. Best of all, these pieces can be shared between Figure users on iOS and Windows.
Since their cloud services were already REST-based, Propellerhead found it easy to create a REST client in UWP that talked to the same sharing platform already being used by their iOS client base. They then used UWP’s built-in JSON support to serialize and deserialize their data. This not only allows different users to share their songs, but even allows a single user to share his or her songs between different devices and also across platforms.
“If you do something in Figure on iOS,” said Leo Nathorst-Böös, Product Manager at Propellerhead, “you can pick up that song on a Windows device, and they’ll sound identical. And that goes for the cloud sharing that people can do. The Windows version just plugs into that community.”
Wrapping up
In planning to port Figure to UWP, Propellerhead discovered that low latency audio in Windows ensured that their app would perform well across Windows 10 devices. Visual Studio’s XAML Designer, in turn, made it easy to implement their iOS interface and they were able to get it to the point where the user experience on iOS and Windows were the same. They were even able to share files between devices and platforms thanks to UWP’s convenient REST support.