adventures in cross platform connectjs / ticonnect 2014
DESCRIPTION
My Talk from Ti Connect / ConnectJS on cross-platform adventures with Titanium and iOS and Android.TRANSCRIPT
Adventures in cross-platformJason Kneen
in cross-platformADVENTURES
ADVENTURES
Jason Kneen
http://twitter/jasonkneen
http://github.com/jasonkneen
http://jasonified.com
http://bouncingfish.com
App Developer, TCE Certified “Titan”
Apps
My Work
StoneHenge Audio Tour
The Great British Bee Count SportsBlog
The Great British Bee Count
• Find, photograph identify Bees
• iOS and Android
• Ti Alloy
• Custom UI
• Featured on BBC SpringWatch
Things I’ve learnt
Things I’ve learnt
am stilllearning
Clients
“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”
“We’d like an app like Instagram, can you give me a cost?”
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)
I break down costs…
Working with designers
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
“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?”
“We’d like the iOS TabGroup on Android”
“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”
I typically get this.
Retina Dimensions
No font detailsDesigned for iOS
References PSDs
You can’t split retina pixels!
Solution?
• 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
Working with designers…
Testing
• HDPI, LDPI, different devices etc.
• Multiple versions
• “Crapware” (HTC, Samsung)
• I buy devices, and develop ONLY for Android 4.0+
Testing on Android…
iOS isn’t fragmented right?
@2x
• iPhone 3.5” Retina
• iPhone 3.5” Non-Retina
• iPhone 4”
• iPhone 4.7”
• iPhone 5.5”
Testing on iOS…
• iPad
• iPad Retina
• iPad Mini
• iPad Mini Retina
@3x
Deployment
• http://Installrapp.com
• Watch those device limits!
• Use the clients account!
• Build and deploy early
• Simple / easy to update
I deliver Over The Air…
• Use client Appstore / Play Store accounts
• iTunesConnect settings
• Advise on review times for new / updated apps
• Get Paid!
•Get Paid!
When it’s time to publish…
• Google Play limited to 50mb
• Expansion files support larger apps
• Titanium now supports OBB fileshttp://github.com/jasonkneen/TiExpansionFiles
Google Play limitations
Emulation
Using the Android SDK Emulator
• Free, easy and cheap to license
• Fast (VERY FAST)
• Google APIs, Play support, simple “hack”
• Great GPS, Mapping tools
• Android first
I use GenyMotion…
• 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!
I use TiShadow (or Liveview)…
Cross-platform development before 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
I use Alloy…
Cross-platform development after Alloy
I’m <BatMan/>!
Platforms & Screens
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”/>
I use app.tss…
Yep, if you don’t countTop, Bottom, Left, Right
• 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
I build flexible layouts…
• Can be very granular
• Long, NotLong, Landscape, Portrait
• Keep it simple
• Use retina images for xhdpi(3x retina === xxhdpi)
I keep density simple…
• 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
I use TiCons…
'res-mdpi' => "0.5", 'res-hdpi' => "0.75",
'res-xhdpi' => "1", 'res-xxhdpi' => "1.5", 'res-xxxhdpi' => "2"
I create density assets from Retina images…*
*when I have to
http://ticons.fokkezb.nl/
• iOS style stretchable images on Android
• Splash screens
• Android version of leftCap, topCap
• Editor built-in to Android SDK
• http://9patch.fokkezb.nl/
I use 9-Patch images…
• 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
I optimise the $h!t out of Android…
• If my app is leaking, it’s leaking on everything
• Instruments is iOS only
• DDMS for Android specific leaks / memory usage
I use Instruments…
https://vimeo.com/29804284“Rick Blalock: Your Apps are Leaking”
• 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
I use ScrollableViews…
• Simple “inheritance” for Alloy Controllers
• Re-use controllers, views
• Create cross-platform template wrappers
I use base controllers…
• <require src=“controllerName”/>
• Alloy supports require/widgets with children
• Create a wrapper template controller
I also use Alloy templates…
• 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
I create/override Alloy tags…
I create/override Alloy tags…A two-way slide menu in Alloy
I create/override Alloy tags…
• Just drop into the XML
• Specify Left/Right Menu
• Works!
Custom Tag Demo
“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
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
One more thing…
• TiDev.io
• News, Articles
• Tips / Advice
• twitter.com/tidevio
Thank you!
http://twitter/jasonkneen http://github.com/jasonkneen
http://jasonified.com
http://bouncingfish.com