Open Apereo 2014 Presentation from Oakland University on uMobile Developments with PhoneGap and Native Android and iOS Solutions

1. uMobile,
I’m Mobile,
We’re All Mobile!
Dave Derderian - Java Developer Analyst
Steve Wiggins - Student Java Developer
Andrew Clissold - Student Java Developer / iOS Guy

2. Welcome to OU
Oakland University is located in Rochester, Michigan
20,000+ students
5,000+ faculty/staff

3. Coming Up...
● Why Go Mobile?
● OU’s Strengths & Weaknesses
● Mobile Options
○ uMobile
○ Native Solution
■ Native App Benefits

4. Why Go Mobile?
Source: http://money.cnn.com/2014/02/28/technology/mobile/mobile-apps-internet/

5. Why Go Mobile?
● OU mobile traffic is growing
● Traffic from 2013–2014:
o Android 127% growth
o iOS (iPhone/iPad) 78% growth
o Desktop -5% Growth

6. Why Go Mobile?
From OU’s Google Analytics:
● iOS 64%
● Android 35%
● Windows .5%
● Blackberry .2%
Over 12,500 iOS and 5,000 for
Android downloads at OU
Due to these stats we are only
targeting iPhones, iPads, and
Android devices

7. Why Go Mobile?
U.S. 2013 smartphone sales
● Android 79% up 15%
● iOS 14% down
4%
● Microsoft 3% up 1%
● Blackberry 3% down 2%
Source: new smartphone sales in 2013 http://www.gartner.com/newsroom/id/2573415

9. Oakland’s Strengths
● Heavy adopters of open-source
● Flexible development staff
● Student developer program
● Good knowledge base in Java
and web development
● Close collaboration with Unicon
● Leadership backing for mobile
development

10. Oakland’s Weaknesses
● Limited Objective-C
knowledge base
● Minimal mobile skillset
● Small full-time staff

11. Mobile Options
In the beginning…
uPortal was mobile-first
before mobile-first was cool
● This is uPortal 2 in a cell
phone web browser

12. Mobile Options
● Mobile Web
o Responsive design!
● Native App
o Runs quickly
o Fluid interaction
o Work with native SDKs
● Build Once! Deploy Anywhere!
o HTML5 / JS with Native Wrapper
 Titanium by Appcelerator
 PhoneGap by Adobe

13. Responsive
Web
PhoneGap
Titanium
Native
Mobile Options

14. ● uPortal Web themes
○ mUniversality
■ jQuery Mobile
■ uPortal 3.2+ support
■ Complex design (Gradients, Beveling, 3D design elements)
○ Respondr
■ Bootstrap 3
■ uPortal 4.1+ support
■ Flat design
Mobile Options

15. Mobile Options
● Respondr
○ Mobile-first
ideology
○ Responsive
design
○ Consistent user
experience

16. Mobile Options
● Respondr
o More views created with less code
o Bootstrap is incredibly popular and
widely supported

17. Mobile Options
● Respondr’s awesome!
● But it still won’t replace mobile apps
● It’s important to have an App Store / Play
Store presence

18. Why Mobile Apps?
● Extending the University
brand into another
medium
● Bring a product into app
stores where customers
are already looking for
apps

19. Why Mobile Apps?
● Native apps perform better
than other solutions and
customers demand this
● If you don’t claim your
institution’s app space,
someone else will!

20. uMobile
uMobile is a new open source initiative to bring
campus applications, content, and data to mobile
devices. The project provides a native app for
iPhone and Android devices, as well as browser-
based content for other smartphones.
uMobile enables a single code base to provide
both browser-based and native-app functionality,
allowing institutions to produce mobile applications
in a familiar environment.
http://apereo.org/umobile

21. uMobile
● Why uMobile?
o It was open source and the licensing was friendly
o We could contribute our code to Apereo, no legacy
to support!
o We could easily integrate with existing components
CAS, uPortal and portlets
o Support vendor diversity in our environment
o Consistent user experience

22. uMobile
● Options
○ Appcelerator’s Titanium Studio
○ PhoneGap
○ Native Android & iOS Apps

23. uMobile
Titanium Studio
● Build using JS only
● No Java/Objective-C required
● Must learn new APIs
● Custom Eclipse-based IDE
● Extra frameworks optional
● Closed-off
● Build Once - Deploy Anywhere
● SLOW - abstraction layer
● NOT NATIVE
PhoneGap
● HTML / CSS / JS
● No Java/Objective-C required
● Must learn new APIs
● IDE of choice
● Requires extra JS Frameworks
● Open-source (Apache Cordova)
● Build Once - Deploy Anywhere
● SLOW - abstraction layer
● NOT NATIVE

24. uMobile
Titanium Studio

25. uMobile
● Was in production—twice
○ 1st version was non-uMobile without rich content
○ 2nd version version using uMobile with rich content
● Talk of deprecation
● Support is expensive
Titanium Studio

26. uMobile
● PhoneGap is a mobile development framework
purchased by Adobe in 2011
● Enables apps to be built using web technologies instead
of device-specific languages such as Objective-C
● The underlying software for PhoneGap is Apache
Cordova
● Apache Cordova is open source

27. uMobile
PhoneGap

28. uMobile
● Build once deploy anywhere
● Better suited for a smaller staff with limited resources
● Third party plugin support issues
○ Plugins written in native OS languages
PhoneGap

29. uMobile
● Build once deploy anywhere too good to be true
o Avoiding native SDKs → increased development time
o Documentation subpar compared to to Google’s/Apple’s
● 64-bit plugin roadblock
● Multiple levels of abstraction and large payloads = slow
● Debugging is a PAIN
o Especially on iOS devices
PhoneGap Issues

30. Native to Save the Day!!

31. Native Solution
● Simplistic at first
○ Students demanding more now
● Easy to configure (change links and
compile)
● Works with CAS
Download Now!
Android

32. Native Solution
● Uses the Android SDK directly
● Built off of existing uMobile APIs
● Uses portal’s mobile web portlet views
● No middle abstraction layer like
Titanium/PhoneGap
● Easily customizable by changing
URLs
● NATIVE
Android

33. Native Solution
● Native iOS SDK / Objective-C
● Very fluid
● Single codebase for all iOS devices
● Custom CAS login
Download Now!
iOS

34. Native Solution
● Uses the iOS SDK directly
● Built off of existing uMobile
● Uses portal’s mobile web portlet views
● No middle abstraction layer like
Titanium/PhoneGap
● Easily customizable by changing
URLs
● NATIVE
iOS

35. Native App Benefits
● Conventions expected by users
● Apple/Google frameworks have
unparalleled developer adoption
o Abundant online help
● Android Studio/Eclipse/Xcode!

36. Native App Benefits
● Autolayout
● Fast

37. Native App Benefits
● Future possibilities
o Split-screen on iPad
o Integration with
RESTful portlets
o Push notifications
o Integrated uPortal
Search

38. Native App Cost
● Apps have additional cost over
mobile web sites
o Developer subscription cost
o Apple Hardware (for iOS)
● Staffing Resources Increased?
o We have found that Native app
development takes a lot less time
than “build once deploy anywhere”
apps

39. Get Involved!
● Important links
○ Apereo uMobile apereo.org/umobile
○ Join the mailing list: apereo.org/umobile/community

40. ● Today:
o 10:00 AM—MORPHEUS
 Mobile Optimized Responsive Portal for Higher Education Using Sass
o 10:00 AM—Skinning uPortal with Respondr
o 1:00 PM—uMobile - where are we and what next?
● Tomorrow:
o 11:00 AM—Next Generation Portal: Redesigning the
portlet from a user-focused, responsive, mobile-first
perspective
o 5:30 PM–7:00 PM—Check out Respondr
Get Involved!

41. Questions?
Thank You!
Dave Derderian dmderde2@oakland.edu
Steve Wiggins scwiggin@oakland.edu
Andrew Clissold ajclisso@oakland.edu