My Talk from Ti Connect / ConnectJS on cross-platform adventures with Titanium and iOS and Android.

1. Adventures in cross-platform
Jason Kneen

2. ADVENTURESADVENTURES
in cross-platform

3. Jason Kneen
App Developer, TCE Certified “Titan”
http://bouncingfish.com
http://twitter/jasonkneen
http://github.com/jasonkneen
http://jasonified.com

5. Apps

6. My Work
StoneHenge
Audio Tour
The Great British
Bee Count SportsBlog

7. The Great British Bee Count
• Find, photograph identify Bees
• iOS and Android
• Ti Alloy
• Custom UI
• Featured on BBC SpringWatch

8. Things I’ve learnt

9. Things I’ve learnt
am still
learning

10. Clients

11. “We’d like an app like Instagram, can
you give me a cost?”
“It’s like Twitter but location
based”
“It’s basically our
web site, in an
app”
“We need to wrap
a flash app in a
native wrapper”

12. I break down costs

13. I break down costs…
• Split pricing by function, platform
• Factor in time for platform, form
factors, device specific issues
• Include costs for App builds, beta
distribution and Appstore
submissions (and resubmissions)
•Watch out for 3rd party dependancies
(APIs etc)

14. Working with designers

15. Working with Designers…
•They (mostly) use Apple devices
•They (usually) don’t understand mobile
•They (usually) don’t get platform UI
conventions / differences
•They (all) think a “small change” is
easy / free

16. “We’d like the iOS TabGroup on Android”
“What size should the App Avatar be?”
“Can we have a Quit
button to exit the
app in iOS?”
“That’s just a 5 minute
job right?”
“Can you tell me all the image
sizes you need for Android?”
“I’ve put the images in
“/retina” and “/non-retina“
folders” “I’ve sent you a layered-
PSD with the images”

17. Retina Dimensions
References PSDs
Designed for iOS No font details
I typically get this.

18. You can’t split retina pixels!

19. Solution?

20. Working with designers…
• Explain OS differences
(Navigation, TabGroups, back
buttons, ActionBar)
• Inform (Retina, DPs, Densities)
• Give examples / links to tools
• Send them the images folder
structure to work with

22. Testing

24. Testing on Android…
• HDPI, LDPI,
different devices etc.
• Multiple versions
• “Crapware” (HTC,
Samsung)
• I buy devices, and
develop ONLY for
Android 4.0+

25. iOS isn’t
fragmented right?

26. Testing on iOS…
@2x
• iPhone 3.5” Retina
• iPhone 3.5” Non-
Retina
• iPhone 4”
• iPhone 4.7”
• iPhone 5.5”
• iPad
• iPad Retina
• iPad Mini
• iPad Mini Retina
@3x

27. Deployment

28. I deliver Over The Air…
• http://Installrapp.com
•Watch those device limits!
• Use the clients account!
• Build and deploy early
• Simple / easy to update

29. When it’s time to publish…
• Use client Appstore / Play Store
accounts
• iTunesConnect settings
• Advise on review times for new /
updated apps
• Get Paid!
•Get Paid!

30. Google Play limitations
• Google Play limited to 50mb
• Expansion files support larger apps
• Titanium now supports OBB files
http://github.com/jasonkneen/
TiExpansionFiles

31. Emulation

32. Using the Android SDK Emulator

33. I use GenyMotion…
• Free, easy and cheap to license
• Fast (VERY FAST)
• Google APIs, Play support, simple
“hack”
• Great GPS, Mapping tools
• Android first

34. I use TiShadow (or Liveview)…
• No (full) rebuild required
• Simulator, device, multiple devices at the same
time
• Makes cross-platform SO easy
• Avoid getting “locked in” to one OS
• But, there be dragons!

35. Cross-platform development before Alloy

36. I use Alloy…
• Separation of logic & UI
• selectors and conditional code
or platform, FormFactor
• Only includes the platform
specific assets, styles, code in
your builds
• uses CommonJS
• Makes cross-platform WAY easier

37. I’m <BatMan/>!
Cross-platform development after Alloy

38. Platforms & Screens

39. I use app.tss…

40. I use app.tss…
• Build layouts on both platforms first
• app.tss for global classes
• “reset” for Android
• Platform specific overrides
• Simple XML, <Button class=“wide green rounded”/>

41. Yep, if you don’t count
Top, Bottom, Left, Right

42. I build flexible layouts…
• Every screen has a Top, Left,
Bottom, and Right
• Avoid fixed widths / heights
• Ti.UI.SIZE & Ti.UI.FILL
• Use dp (ti.ui.defaultunit)
• %age and fluid layouts
• Dynamic buttons

43. I keep density simple…
• Can be very granular
• Long, NotLong, Landscape,
Portrait
• Keep it simple
• Use retina images for xhdpi
(3x retina === xxhdpi)

44. I use TiCons…
• Create a base 1024 x 1024 icon
• Auto-generate icons (http://
ticons.fokkezb.nl/)
• The CLI can generate density
images from retina ones
• icons, assets, splash screens
• Updated for iPhone 6 / 3x

45. I create density assets from
Retina images…*
'res-mdpi' => "0.5",
'res-hdpi' => "0.75",
'res-xhdpi' => "1",
'res-xxhdpi' => "1.5",
'res-xxxhdpi' => "2"
*when I have to
http://ticons.fokkezb.nl/

46. I use 9-Patch images…
• iOS style stretchable images
on Android
• Splash screens
• Android version of leftCap,
topCap
• Editor built-in to Android
SDK
• http://9patch.fokkezb.nl/

47. I optimise the $h!t out of Android…
• Reduce “over the bridge” calls
• TableViews - classname (Android speed bump)
• or better still, use ListViews
• ImageViews vs Views
• Reduce views, especially in tables / repeating
elements and especially nested views

48. I use Instruments…
• If my app is leaking, it’s leaking
on everything
• Instruments is iOS only
• DDMS for Android specific
leaks / memory usage
“Rick Blalock: Your Apps are Leaking”
https://vimeo.com/29804284

49. I use ScrollableViews…
• Views = screens
• Swipe between views (great for prototyping)
• Simple view stack management
• Super-fast and smooth animation on Android
• Useful when building UI layouts with apps

50. I use base controllers…
• Simple “inheritance” for Alloy Controllers
• Re-use controllers, views
• Create cross-platform template wrappers

51. I also use Alloy templates…
• <require src=“controllerName”/>
• Alloy supports require/widgets with children
• Create a wrapper template controller

52. I create/override Alloy tags…
• Little-known feature of Alloy
• <View module=“modulename”/>
• Override Alloy Tags to provide per-platform support
• Create your own tags!
• Not a replacement for Widgets, just different

53. I create/override Alloy tags…
A two-way slide menu in Alloy

54. I create/override Alloy tags…
• Just drop into the XML
• Specify Left/Right Menu
• Works!

55. Custom Tag Demo

56. “Module” attribute…
• TitleControl - full implementation for iOS and
Android
• TabGroup - iOS style TabGroup for Android
• CheckBox, SlideMenu for both iOS/Android
• AttributedString for iOS, falls back to HTML for
Android
• But be careful…and tidy up after you

58. In summary…
• Separate costs, use client dev accounts, get paid
• Help designers - you’re they’re only hope
• Test on real devices - buy everything!
• Create flexible layouts, use constants, device info
• Use Genymotion!
• Deliver apps over-the-air
• Use Alloy, templates, create or re-write Alloy tags
• Test your apps for memory leaks

59. One more thing…
• TiDev.io
• News, Articles
• Tips / Advice
• twitter.com/tidevio

61. Thank you!
http://bouncingfish.com
http://twitter/jasonkneen
http://github.com/jasonkneen
http://jasonified.com