Built with Ionic 2: The Design Conference Brisbane App

Attendees of The Design Conference Brisbane got a cool bonus this year: a personal concierge in the form of an Ionic 2 app.

Software developer Phillip Hartin teamed with UI designer and curator Matthew Haynes to develop the app. The app’s aim was to break the perceived barrier between the audience and the presenter, providing a platform to seamlessly interact and engage with each other, opening the floor for discussion, education, creativity and a world-class event environment.

“We have taken a little bit of creative liberty in designing an option for attendees to rate each presenter privately, so we have real-time stats on what people enjoyed most,” says Haynes, who played professional baseball with the Cleveland Indians for four years before studying graphic design and starting his own agency in Australia (launching July 2016). “This told us what people thought of our event, while helping us determine who was voted ‘people’s choice’ for best talk overall.”

Users could tweet a question during a talk directly from the app, and the app automatically appended the event’s hashtag, which was picked up by other software, allowing Haynes and Hartin to collate questions for the Q&A sessions and be presented on the big screens. Their decision to use Twitter as the backbone of their approach resulted in the event trending in the top three hashtags in Australia for two days. In addition to the public tweets, over 2,500 individual ratings, with private feedback for the speakers were collected, showing that speakers had a 4.3/5 rating on average, making the app an important analytical tool for the event.

Hartin, who has a PhD in computer science from Ulster University, UK, started building mobile apps in 2012, as he began his graduate research. His first project was a context-aware reminder app that used the devices onboard sensors, such as accelerometers and light sensors, and also used native features, such as alarm schedulers and notification managers. He began development with Cordova but ran into obstacles.

“The state of Cordova was very different back then, and what began as fast development quickly became a string of spaghetti code, mixed with various templating libraries (handlebars and backbone), and plugins whose status shifted with the tide” he says. “It was hard to understand and even harder to debug.”

Hartin eventually ditched Cordova in favor of native Android and iOS, but four years later, he took notice of Ionic. He was developing The Design Conference app on iOS natively, when a quick Google search regarding action sheets led him to the Ionic 2 documentation site.

“I was immediately impressed with the quality of both the documentation and how the native UI components were rendered on each device,” he says. “I decided in that moment to drop what I had done natively and take the plunge, and I’m so happy I did. Ionic v2 has completely changed my opinion on the merits of hybrid development. I did look at other hybrid frameworks, but for my criteria, Ionic always came out on top.”

To build The Design Conference app, Hartin says he experimented with every UI component available, until he found a set that complemented the website’s experience on a mobile screen.

“That’s the biggest obstacle in mobile UI development,” Hartin says. “How do we break down all this great content into a four-inch screen and not clutter the UI and overload the user with info?”

Haynes suggested a list-orientated approach.

“I made heavy use of ionic-list, which I must say is the business!” exclaims Hartin. “Ionic v2’s use of Angular2 directives such as ngFor and ngIF drastically aid the speed of development and templating.”

The main schedule list in the app is actually a list of ion-item-sliding components, composed of a button with nested divs that are custom styled to produce the unique effects that the app has.

“When I noticed that ion-slides were included in Beta.6, I jumped at the chance to use it, and we found the perfect place on our sponsors screen, which appears on first launch,” says Hartin. “A little bit of custom styling, and I was very pleased with the finished effect. Regarding navigation, Ionic provides factory methods to present, push and pop views from the stack, which makes navigation a breeze!”

Hartin used many of the native plugins bundled with Ionic, like LocalStorage, SQLStorage, Geolocation, Splashscreen, and Whitelist. He used Eddy Verbruggen’s Social Sharing Plugin by to handle the Twitter integration.

“This plugin is great,” says Hartin. “For iOS, Twitter integration is baked into the OS, so the plugin ties directly to that, whereas in Android, you have to check if the app is installed first and then handle that accordingly. Eddy’s library provides factory methods to perform handle these scenarios and facilitates the actual posting to Twitter.”

Hartin and Haynes had two storage options, LocalStorage and SQLStorage.

“Despite looking straightforward, the data model is quite complex in this app, with plenty of has_one, has_many relationships between the objects,” explains Hartin. “Flattening this structure down for SQLStorage was a bit of a pain, and performing joins in order to rebuild objects and their nested properties for the purposes of the UI was also an unforeseen overhead.”

LocalStorage came to Hartin’s rescue.

“Once the object arrays have been re-built, I store a copy of them in LocalStorage and use them for all subsequent calls, which speeds everything up, but I rely on SQLStorage in the event that Local is cleared during low memory,” he explains. “From a native programming background, I am an advocate of Realm, easily the best mobile database out there, completely smashes SQLite and Core Data in all regards. As I understand they are working on a Cordova version as part of their Realm JS tree. When this goes live, hybrid will be unstoppable!”

Haynes had already envisaged Web-Mobile transition, but for iOS-Android differentiation, the team had to take into consideration the range of screen sizes across the market.

“Thanks to Ionic serve, rapid testing and prototyping can be done in the chrome dev tools,” says Hartin. “Also worth noting is the ability to deploy code and test on the device, with livereload and console output on the computer. That was a huge draw for me.”

Haynes and Hartin had been hoping that writing an API wouldn’t create too many hiccups for the app. Fortunately, web developer Zann St. Pierre built the main site in a way that the API worked right off the bat.

“Without the solid object-oriented data-model that Zann designed, I would have faced many more hurdles,” says Hartin.

Haynes and Hartin plan to incorporate Ionic into their digital and development strategy going forward.

“The productivity gains are huge,” says Hartin. “It was so refreshing to not have to support two native codebases, each with their own idiosyncrasies. Switching your brain from Obj-C mode to Java mode and back again on a daily basis as an independent developer can be tiring. Then testing…Ugh. You never really get up to full speed when writing two codebases by yourself. With Ionic, each morning I am at full speed within a minute.”

In fact, for their second collaboration, a mobile guide for the FirstCoat festival, Haynes and Hartin chose Ionic v2 again. The app was accepted on both the iOS and Android app stores in under 48 hours.

“As a relative novice in JavaScript and Angular prior to this project, the Ionic forums were in invaluable resource for me,” says Hartin. “I’d like to say thanks to the Ionic developers and the JS gurus on there who helped me out on numerous occasions.”