You or your company have a great idea for an app—and now you need to build it. So, what architecture do you use to support iOS, Android, Windows Phone 8, and future operating systems? How can you deal with all these platforms and still re-use your skills as web developer? The answer is a hybrid app, which allows developers to use part native code and part web code to create cross-platform apps. Greg Avola, a web developer who built a cross-platform app called Untappd, describes his experiences, demonstrates the tools he employed, shares lessons learned, and discusses the best practices he uses today. Learn how to take your mobile web application and turn it into native smartphone and tablet apps. Save time and resources while avoiding the extra effort of developing a feature for iOS and then having to write the same code for Android, Windows Phone, etc.

1.
W7
Session
4/15/2015
1:00
PM
"From Web Developer to Hybrid
App Developer"
Presented by:
Greg Avola
Untappd
Brought
to
you
by:
340
Corporate
Way,
Suite
300,
Orange
Park,
FL
32073
888-­‐268-­‐8770
·∙
904-­‐278-­‐0524
·∙
sqeinfo@sqe.com
·∙
www.sqe.com

2. Greg Avola
Untappd
Living in the craft beer haven of New York City, Greg Avola is the co-founder
and CTO of Untappd, a mobile beer check-in service. Some people enjoy
reading books, others enjoy watching movies, but Greg’s passion is to code.
Being able to combine his passion for development and craft beer allowed
Untappd to be born. To date Untappd has had more than 1.6 million users. In
NYC Greg works full-time for ABC News on the technology team, which is
responsible for ABCNews.com both on desktop and mobile.

3. From Web Developer to Hybrid App
Developer
Greg Avola | Mobile Dev + Test Conference 2015 - San Diego, CA
IT’S ALL ABOUT ME
@gregavola
Greg Avola
Live in NYC
Day-time Job: Web Developer at ABC News
(US)
Night-time Job: CTO, Co-Founder of
Untappd
I <3 Beer and Javascript

4. WHAT IS UNTAPPD?
A social discovery and sharing network for beer drinkers
WHAT IS UNTAPPD?
Users “check-in” to their beers, add their location, a photo, rating, comment and
then share it with their friends

5. WHAT IS UNTAPPD?
Using GPS, Untappd will find local and popular bars, beers and breweries nearby,
where ever you are!
GROWTH
Total Users
2,000,000+
Total Check-Ins
150,000,000+
Total Photos
25,00,000+
Check In Stats for January 2015
11,000+ beers per hour
2,000,000+ photos posted monthly

6. So how did we start?
Launched in September 2010
HTML5 based web app
Worked on iOS, Android, WebOS and BB6+
on day 1
Custom framework powered
by jQuery
Social Integration
UNTAPPD 1.0

7. GROWTH IS GOOD
0
4,500
9,000
13,500
18,000
November ’10 January ’11 March ’11 May ’11 July ’11 September ’11
Total Distinct Monthly Users
...but we had some
problems...

8. The majority of consumers don’t
understand “web apps”
We are web developers

9. Unable to take advantage
of device’s native features
OUR SOLUTION CHOICES

10. WHY PHONEGAP?
Open source and free
Able to use your existing skill sets without
hiring native developers
Easy command line interface to build, deploy
and test
Thriving developer community
Endless plugins to further extend your apps
abilities
BYOT - Bring Your Own Tools!
WHAT WE DID
Developed native applications using our
current skills
Used much of our existing web app
framework
Quickly deployed apps to multiple mobile
marketplaces
Tapped into native features like the Camera,
Contacts, Facebook Connect, etc.

11. So, how did it work?
MORE GROWTH!
0
40,000
80,000
120,000
160,000
November '10 February '11 May '11 August '11 November '11 February '12 May '12 August '12 November '12 February 13'
Total Distinct Monthly Users

12. MORE GROWTH!
25,000 new user sign up within first month
of app release
Increased user activity by 300% during
launch month
Featured in Top 50 Apps in the Social
Networks category
Yes, but how do I start?

13. Install Phonegap
Build your App
phonegap(create(sampleApp
phonegap(platform(ios
phonegap(build(ios

14. Let’s take a look, shall we?
But what about the UI?

15. UI Frameworks
UI Framework Considerations
Lightweight
Easy to Use
Javascript Framework Dependent
Type of DOM Manipulations
Documentation
Image Credit - https://bravurasolutions.com/blog/2012/11/the-right-technology-key-considerations-for-selection/

16. UI Platform for Hybrid Apps
Built on top of AngularJS (two-way binding)
Smooth Transitions!!!
Android + iOS Support
Incredible easily to model and customize
your applications
Demo

17. Keys to Success
Reuse Logic, tweak templates to match UI
Live and die by the DOM
Don’t over engineer your app
Avoid complex CSS
THANK YOU
AND ALWAYS DRINK SOCIALLY
UNTAPPD.COM
greg@untappd.com / @gregavola