Adventures in Cross Platform TiConf EU 2014

A new version of my New York presentation with demo video showing a custom TabGroup implementation, other enhancments.

Transcript

1. JO
   DSPTTQMBUGPSN ADVENTURES ADVENTURES
2. Jason Kneen http://twitter/jasonkneen http://github.com/jasonkneen http://jasonified.com http://bouncingfish.com App Developer, TCE Certified “Titan”
3. Recent Work
4. Things I’ve learnt
5. Things I’ve learnt am still learning
6. • Breakdown pricing and specify target versions • Factor in time for platform, form factors, device specific issues • Include costs for App builds, beta distribution and Appstore submissions • Don’t get caught out with 3rd party dependancies I don’t give one price…
7. I love designers (honest) but…
8. Designers… • They use iPhones* • **They typically don’t understand mobile apps • **They typically don’t understand UI conventions • They think a “small change” is easy / free *mostly ** in my experience
9. “What size should the App “Avatar” be?” “Can we have a Quit button to exit the app in iOS?” “We’d like the app to launch when the phone is restarted” “Can you make Android use the TabGroup like iOS” “Can you tell me all the image sizes you need for Android?” “I’ve sent you the images in “/retina” and “/non-retina“ folders”
10. …I typically get this… Retina Dimensions No font details Designed for iOS References PSDs
11. Don’t split retina pixels!
12. • Explain OS differences (Navigation, TabGroups, back buttons) • Educate (Retina, DPs, Navigation) • Give examples / links to tools • Send them images folder structure to work with So now, I educate…
14. • Real devices • Beware of Samsung Crapware • hdpi, ldpi, etc • Multiple OSs • 4.0 and above I test on EVERYTHING* *well, simulator, emulator and about 8 devices.
15. • TestFlight (iOS only) • http://Installrapp.com • Watch those device limits! • Use the clients account! • Build and deploy early I deliver Over The Air…
16. • Client Appstore / Play Store accounts • iTunesConnect settings • Advise on review times for new / updated apps • Get Paid! When it’s time to publish…
17. Emulation
18. • Free, easy and cheap to license • Fast (VERY FAST) • Google APIs, Play support, simple “hack” • Great GPS, Mapping tools • Android first! I use GenyMotion…
19. Android development before Genymotion
20. Android development after Genymotion
21. • No rebuild required • Simulator, device, multiple devices • Makes cross-platform WAY easier • Avoids getting “locked in” to one OS • But, there be dragons! I use TiShadow (or Liveview)…
22. • 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…
23. Cross-platform development before Alloy
24. Cross-platform development after Alloy I’m <BatMan>!
25. • Test layouts on both platforms • app.tss for global classes • “reset” for Android • Platform specific overrides • Simple XML, <Button class=“wide green rounded”/> I use app.tss…
26. • Use dp (ti.ui.defaultunit) • Avoid fixed widths / heights, unless… • Top, Left, Bottom, Right is always there! • %age and fluid layouts • Dynamic buttons I build flexible layouts…
27. • Can be very granular • Long, NotLong, Landscape, Portrait • Keep it simple • Use retina images for xhdpi ! ! I keep density simple…
28. • Get 1024 x 1024 icons • Auto-generate icons (http:// ticons.fokkezb.nl/) • The CLI can generate density images from retina ones ! I use TiCons…
29. https://github.com/Ninjanetic/ios2android 'res-mdpi' => "0.5", 'res-hdpi' => "0.75", 'res-xhdpi' => "1", 'res-xxhdpi' => "1.5", 'res-xxxhdpi' => "2" *I resize Retina… *when I have to http://ticons.fokkezb.nl/
30. • 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…
31. • Reduce “over the bridge” calls (for iOS too!) • TableViews - classname (Android speed bump) • ListViews over TableViews • ImageViews vs Views • Reduce views, especially in tables / repeating elements I optimise Android…
32. • I my app is leaking, it’s leaking everywhere • iOS only • DDMS for Android specific leaks / memory usage ! I use Instruments… https://vimeo.com/29804284 “Rick Blalock: Your Apps are Leaking”
33. • Views = screens • Swipe between views (great for prototyping) • Simple view stack management • Super-fast and smooth animation on Android I use ScrollableViews…
34. • Simple “inheritance” for Alloy Controllers • Re-use controllers, views • Create cross-platform template wrappers I use base controllers…
35. • <require src=“controllerName”/> • Latest Alloy supports require/widgets with children • Create a wrapper template controller I build Alloy templates…
36. • 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…
37. Custom Tags Demo
39. “Module” attribute… • TitleControl - full implementation for iOS and Android • SplitWindow for Android Tablets • CheckBox, SlideMenu for both iOS/Android • AttributedString for iOS, falls back to HTML for Android • But be careful…
41. Thank you! http://twitter/jasonkneen http://github.com/jasonkneen http://jasonified.com http://bouncingfish.com
42. +BTPO
    ,OFFO http://twitter/jasonkneen http://github.com/jasonkneen http://jasonified.com http://bouncingfish.com