mLearning: Tips and Techniques for Development and Implementation
November 14 & 15, 2013
201
Exploring Cross-platform Tools For Mobile Development: Lessons Learned
Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Exploring Cross-platform Tools for Mobile Development: Lessons Learned
Perry Bennett 2013 Nov 14
Overview
. What is Cross-platform Mobile Development?
. Pros and Cons of Cross-platform Tools
. Tools: Adobe AIR, PhoneGap, Titanium SDK, Corona SDK, Unity, and Responsive Web Design
Session 201 – Exploring Cross-platform Tools For Mobile Page 1 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Native Hybrid Web
http://applaudservices.com/wp-content/uploads/2013/02/various-mobile-devices.gif 3
Have We Been Here Before?
http://www.paulirish.com/2010/high-res-browser-icons/ 4
Session 201 – Exploring Cross-platform Tools For Mobile Page 2 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
http://www.androidauthority.com/samsungs-26-screens-226746/ 5
Pros: Reusable Code Base
http://http://en.wikipedia.org/wiki/File:Recycle001.svg 6
Session 201 – Exploring Cross-platform Tools For Mobile Page 3 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros: Maintenance
http://www.techradar.com/news/phone-and-communications/mobile- 7 phones/android-4-1-vs-windows-phone-8-vs-ios-6-1086326
Pros: Cost Effective
http://blogs.disney.com/oh-my-disney/2013/06/13/dreams-do-come-true/ 8
Session 201 – Exploring Cross-platform Tools For Mobile Page 4 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros: Utilize Existing Skills
http://akraya.com/wp-content/uploads/2013/07/web- trifecta_html5_css3_js-strict.png
http://www.swfgeek.net/blog/wp-content/uploads/2010/08/as3logo.jpg 9
Pros: Flexibility
http://www.tapscape.com/iphone-vs-android-why-apple-has-stumbled-while- 10 android-grows/
Session 201 – Exploring Cross-platform Tools For Mobile Page 5 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Cons: Proprietary / Limited API’s
http://www.coronalabs.com/products/corona-sdk/corona-is-10x-faster/ 11
Cons: Performance Issues
http://www.brighthand.com/shared/picture.asp?f=23359 12
Session 201 – Exploring Cross-platform Tools For Mobile Page 6 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Cons: Framework Specific Code
http://www.sdncentral.com/companies/vyatta-and-brocade-glove-or-square-peg-in- 13 a-round-hole/2012/11/
Cons: Inconsistent UI Patterns
http://developer.android.com/design/patterns/pure-android.html 14
Session 201 – Exploring Cross-platform Tools For Mobile Page 7 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Computing Setup: Mac vs. PC
Mobile OS Development Mac PC
Android P PP
Blackberry P P
iOS P O
Windows Phone O P
15
Overview of Adobe AIR
. Deliver Standalone Flash Applications Outside of the Browser
. Can Be Created Using HTML, JavaScript, Flash, or Flex
. Port Existing Desktop Flash Apps to Mobile Devices
http://www.softicons.com/free-icons/application-icons/adobe-cs3-icons-by-adam- betts/adobe-air-icon 16
Session 201 – Exploring Cross-platform Tools For Mobile Page 8 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros and Cons of Adobe AIR
Pros Cons
Existing ActionScript / Flex Skills Apps Not Consistent Across Platforms
Can Port App to Many Platforms Performance May Not Be Optimal
Native Extensions to Utilize Device Features
17
App: QR Scanner
18
Session 201 – Exploring Cross-platform Tools For Mobile Page 9 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
App: QR Scanner Cont.
19
Overview of PhoneGap
. Free and Open Source Framework
. PhoneGap vs. Apache Cordova
. Utilize HTML, CSS, and JavaScript to Create Native Application
. Webview Within Native Application
http://phonegap.com/uploads/artwork/Build-Bot.png 20
Session 201 – Exploring Cross-platform Tools For Mobile Page 10 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Overview of PhoneGap Cont.
http://phonegap.com/uploads/artwork/Build-Diagram-3.png 21
App: Pocket Guide
22
Session 201 – Exploring Cross-platform Tools For Mobile Page 11 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros and Cons of PhoneGap
Pros Cons
Existing Web Design Skills Webview Within a Native Application
APIs That Tie Into Native Device Features Mobile Browser Inconsistencies
Compile to Many Native Platforms
PhoneGap Build Compiles Apps Without SDKs
23
Overview of Titanium SDK
. Uses JavaScript to Deploy Native, Mobile Web and Hybrid Applications
. Open Source SDK
. Modules Can Extend the Base Functionality
https://my.appcelerator.com/auth/signup 24
Session 201 – Exploring Cross-platform Tools For Mobile Page 12 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Overview of Titanium SDK Cont.
http://www.appcelerator.com.s3.amazonaws.com/web/infographics/sdk-interaction.png 25
Pros and Cons of Titanium SDK
Pros Cons
Lots of Developer Resources / Community Inconsistent Behavior Across Devices
Rapid Prototyping Difficult to Debug Apps
Web Oriented Development Performance With Graphic Intensive Apps
26
Session 201 – Exploring Cross-platform Tools For Mobile Page 13 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Overview of Unity
. Cross-platform 3D / 2D Game Engine
. Can Be Used Through Web Browser, Standalone Desktop, and Mobile
https://www.unity3d.com 27
App: Flight Simulator
28
Session 201 – Exploring Cross-platform Tools For Mobile Page 14 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros and Cons of Unity
Pros Cons
Pretty Consistent Across Various Platforms Unity GUI System
Flexible Scripting Options Source Control / Versioning
Great Documentation / Examples
Asset Store
29
Overview of Corona SDK
. Cross-platform 2D Game Engine
. Built For Mobile, Uses the Scripting Language LUA
. Deploy to iOS, Android, Windows, Nook, Kindle
http://forums.coronalabs.com/topic/35293-unofficial-high-resolution-corona-sdk- logos-for-credits/ 30
Session 201 – Exploring Cross-platform Tools For Mobile Page 15 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
App: mLearning Framework
31
Pros and Cons of Corona SDK
Pros Cons
Pretty Consistent Across Various Platforms No Official IDE for Graphic / Text Layout
LUA Scripting is Quick to Learn Evolving API’s Can Break Older Code
Great Documentation / 3rd Party Tools No Offline Builds
Active Community
32
Session 201 – Exploring Cross-platform Tools For Mobile Page 16 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Overview of Responsive Web Design
. A Technique to Have Websites Adjust to Varying Screen Sizes
. Uses Standard Web Development Languages
. Apps Are Viewed Through the Desktop / Mobile Web Browser
http://www.desiznworld.com/2013/09/responsive-web-design.html 33
Responsive Web Design Examples
http://www.mediaqueries.es 34
Session 201 – Exploring Cross-platform Tools For Mobile Page 17 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Pros and Cons of RWD
Pros Cons
One Code Base Adapts to Any Type of Screen More Time Consuming to Develop
Utilize Existing Web Development Skills Ample Testing for Desktop and Mobile Browsers
Users Don’t Need to Install Apps on Devices Harder to Visualize Final Design
35
Cross-platform Tool Pricing
. Adobe Creative Cloud - $49.99 per month Adobe AIR . Adobe Flash CC - $19.99 per month . Free + Any Text Editor That Supports Web Adobe PhoneGap Development Languages (Free - $) . Titanium – Free . Appcelerator Platform (Public Cloud) – Appcelerator Titanium SDK Contact Company . Appcelerator Platform (Virtual Private Cloud) – Contact Company . Unity / Mobile Add-ons – Free Unity Technologies Unity . Unity Pro - $1,500 . Mobile Add-ons Pro - $1,500 each . Starter – Free Corona Labs Corona SDK . Basic / Pro - $192 / $588 annually . Enterprise - $948 / $2,388 annually . Any Text Editor That Supports Web Responsive Web Design Development Languages (Free - $)
36
Session 201 – Exploring Cross-platform Tools For Mobile Page 18 Development: Lessons Learned – Perry Bennett mLearning: Tips and Techniques for Development and Implementation — November 14 & 15, 2013
Summary
. What is Cross-platform Mobile Development?
. Pros and Cons of Cross-platform Tools
. Tools: Adobe AIR, PhoneGap, Titanium SDK, Corona SDK, Unity, and Responsive Web Design
Thank You!
. Perry Bennett, Multimedia Developer
. www.thevisualstation.com
38
Session 201 – Exploring Cross-platform Tools For Mobile Page 19 Development: Lessons Learned – Perry Bennett