Three weeks ago we announced the launch of our first tickets-only app for iOS and Android. Simply called T!ckets, the hybrid (non-native) app was developed with the Ionic Framework and AngularJS.
When we started building the app, our development team had no experience with Angular or Ionic. All of our hands-on learnings came from a variety of resources, including the Ionic Docs, Ionic Forums, Stack Overflow and definitely NOT the AngularJS Docs.
During the course of our two-month development there was one resource we thought was missing: a discussion of practical challenges and solutions for a real-live launched app. There are plenty of codepens and jsfiddles that answer specific questions - and we are thankful to those who built them - but we were always looking for more context. As a result, we're writing this post to describe the challenges we faced as new hybrid app developers and to provide our solutions within the context of our app. We hope other developers will find this resource to be helpful!
The Most Powerful Mobile Tickets Application
In January of 2016 the RateYourSeats.com team decided to build a tickets-only app for iOS and Android. While our previous mobile app allowed fans to buy tickets, research their seats and contribute photos and reviews, we wanted to build a more powerful application that made it easier and more fun to buy tickets. We knew we wanted the app to be available in both major app marketplaces, and we knew that we didn't want any limitations in terms of features or performance.
Native or Hybrid?
After deciding that we were going to commit resources to a new mobile app, we had to make a fairly large decision: Would this be a hybrid or native application?
Photo source: appmachine.com
No Native Experience
The flagship RateYourSeats app was launched more than two years ago, and the programmer who built the (native) iOS app was off launching his own app-centric start-up company ( Branch). That left us with exactly zero in-house knowledge of how to develop native applications. If we wanted the built-in performance and features of a native app, we were either going to have to teach ourselves or hire iOS and Android developers.
Hybrid App Limitations - User Experience or Performance?
While we lacked native development expertise, we had a fair amount of web(view) experience. This opened up the possibility of leveraging our existing expertise into a hybrid app.
Unfortunately, our initial research revealed a bevy of warnings about hybrid apps: Here's Why HTML Apps Don't Work, Hybrid vs Native - The Answer is Clear, HTML5 vs Native: The Debate Is Over. Each of these articles (and dozens of others) tout native as the be-all, end-all. They cite slick animations, built-in components and user familiarity among the reasons why native apps are better than hybrid.
As we analyzed these warnings more carefully, we noticed a pattern emerge: The judgments levied against hybrid apps were focused on user experience and expectations rather than performance limitations. Once we identified this distinction, we knew that we could develop an amazing, non-native app.
Wait, Isn't User Experience Important?
Yes, of course it is! But it also can be faked or hacked much more easily than hacking over global performance limitations.
The Choice to Use Ionic
To overcome the user experience shortcomings of a hybrid app, we knew we needed to build with a strong framework. In this sense, a framework is simply a collection of HTML, CSS and JS that help you build mobile apps.
Failing With PhoneGap
PhoneGap was the first framework we encountered - and as we do with most things - we dove right in. Within 25 minutes we were able to open up an app on an Android phone that said "Hello Cordova" and then easily change the message and the splash screen. This was enough proof-of-concept for us - we knew we were in business.
Unfortunately, when it was time to demo the PhoneGap app to the rest of the development team the app proof-of-concept would not work. It worked dozens of times before - but in the bright lights of a meeting room in downtown Indianapolis, it failed miserably. With utter embarrassment fresh in mind, PhoneGap was scratched off the list and we started searching for a different framework.
Finding Ionic on YouTube
In the course of watching nearly every YouTube video about "developing a hybrid application", the Ionic Framework stood out. Without knowing what was going on under the hood, we were attracted to its beauty and simplicity. It was especially beautiful when you compare it to jQuery Mobile, which we were considering using with PhoneGap.
Committing to a Programming Language or Framework
Beauty aside, when hopping in bed with a new programming language or framework, we think it's important to answer the following questions:
1) How much am I going to have to learn?
2) How hard is it going to be to learn?
3) How is the documentation/community support?
For Ionic itself, you really don't have to learn much of anything - that much was clear to us from the get-go. If you want to, you can basically be a WYSIWYG developer by using Ionic Creator and/or copying code from their docs.
Develop a Kittens App in Five Minutes
With just basic HTML knowledge, you can build a (static) multi-view hybrid app with animations and working navigation in just minutes. Need proof? Install Ionic on your computer*, install one of their starter apps, add some placekittens, upload to Ionic View and install Ionic View on your phone. You'll have a working app with pictures of kittens on your phone in less than five minutes.
*Ionic installation was painful for us, but we won't cover it in this post - feel free to ask us for help in the comments
Adding Angular For Interactivity and Features
Of course, you probably don't want to build a static app with pictures of kittens - we certainly didn't. The T!ckets app was not only going to be dynamic, it was going to have some never-seen-before interactions. This meant we were going to need to learn AngularJS - described by some as " Amazing...and hard as hell".
But how about the documentation for AngularJS - it must be incredible, right? Wrong. It's notoriously terrible (perhaps contributing to its difficulty). We referenced their official docs maybe two or three times while building our app.
Sticking With Ionic, Despite AngularJS
So, if Ionic is easy, but AngularJS is hard and has poor documentation, why did we stick with it?
The beautiful thing about Ionic and AngularJS right now is that both have a lot of momentum. We were able to reference an incredible array of YouTube videos (try "learn angularjs"), stackoverflow threads and the Ionic forums. Dozens of other programmers are asking the same questions right now - and getting a lot of quality responses.
Without any global performance limitations and with a strong community to help support our development, we built the T!ckets app in about ten weeks. The app was submitted to the App Store and Google Play on a Friday evening. And we were live in both marketplaces about 80 hours later. Please continue reading to learn about our detailed experiences from those ten weeks and 80 hours.
Continue Reading
Parts 2 and 3 of this post describe practical solutions for common challenges
Part 2: Solutions For Horizontal Lists, List Performance, Animations and Profiling
Part 3: The AngularJS Mindset and Solutions For Ionic Gestures, Layered Touches and Custom Browsers
----
We'd love to hear your feedback on this post and your experience developing hybrid mobile applications! Please use the comments or send us an email to communicate with us.
Finally, please download the T!ckets app! Not only is it the best way to search, compare and buy tickets - on your phone - it will really help to contextualize this post. The app is available in the App Store and on Google Play.
