Adventures in cross platform ConnectJS / TiConnect 2014
•
3 recomendaciones•1,038 vistas
My Talk from Ti Connect / ConnectJS on cross-platform adventures with Titanium and iOS and Android.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (15)
Similar a Adventures in cross platform ConnectJS / TiConnect 2014
Similar a Adventures in cross platform ConnectJS / TiConnect 2014 (20)
Último
Último (20)
Adventures in cross platform ConnectJS / TiConnect 2014
- 1. Adventures in cross-platform Jason Kneen
- 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
- 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)
- 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
- 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