adventures in cross platform connectjs / ticonnect 2014

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