Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kevin Whinnery: Best Practices for Cross-Platform Mobile Development

4,373 views

Published on

Kevin Whinnery, Appcelerator Evangelist, shares best practices for creating mobile apps for cross-device deployment. Titanium Mobile is not a "write once, run everywhere" technology solution. Because Titanium provides the platform-specific APIs necessary to create best of breed native applications, the way in which you approach user interface development on one platform might differ significantly for another platform. It is, however, very possible to "write once, adapt everywhere" - to provide rich native experiences while achieving maximum code reuse.

In this presentation, we will cover real world techniques for maximizing code reuse while leveraging platform-specific APIs in Titanium applications. Come with questions, and leave with multiple projects and code examples showing techniques Titanium developers use today to deliver sophisticated and performant cross-platform applications.

Published in: Technology, Education
  • Be the first to comment

Kevin Whinnery: Best Practices for Cross-Platform Mobile Development

  1. 1. Best Practices for Cross- Platform Mobile Apps Kevin Whinnery
  2. 2. Kevin WhinneryEngineer and Platform EvangelistAppcelerator since 2008Husband and father of three:Web developer and JavaScript slingerturned mobile and desktop hacker.http://kevinwhinnery.comhttp://twitter.com/kevinwhinneryhttp://github.com/kwhinnery
  3. 3. Agenda•  Cross-Platform UI Approaches•  Component-Oriented Applications•  Modular JavaScript Techniques•  Code Walkthrough
  4. 4. Cross-Platform in Titanium•  Cross-Platform !== “Write Once, Run Everywhere”•  Cross-Platform in Titanium means: •  100%* Non-visual code reuse •  Lots of UI code reuse, depending on design •  Best-in-class experience on every platform•  “Write Once, Adapt Everywhere”*** This isn’t always true, but we’re working in that direction** Term coined by Yehuda Katz, SproutCore, jQuery, and Rails contributor
  5. 5. Cross-Platform Interface Guidelines•  Maybe we’ll call this the C-PIG (pr. Sea Pig)?•  The best Titanium applications are conscious of their target platforms, and meet user expectations•  Cross-platform applications are useless unless they blend seamlessly with the best applications on a platform•  Take the time to learn the UI conventions of the platforms you’re targeting
  6. 6. Characteristics of iOS Interfaces•  Touch centric•  Gestures are central to hiding complexity•  Uniformity in UI conventions is encouraged with rich controls and well-defined interaction models•  HIG is required reading
  7. 7. Characteristics of Android Interfaces•  Touch and hardware interaction•  Activities are central elements•  Interfaces are less homogenous•  Android Interface Guidelines is required reading
  8. 8. Reconciling Cross-Platform UIs•  Focus on the primary task•  Sketch out an information architecture for apps on all platforms•  Based on those exercises, pick out the common components for re-use
  9. 9. Cross-Platform Approaches
  10. 10. Schools of Cross-Platform ThoughtPlatform Identity Brand Identity•  Immediately Familiar •  Evocative of emotions to platform users around the brand•  Self-evident navigation •  Able to create new, and interaction models engaging experience not seen before•  Polished look that makes an app feel like •  Not bound by platform it belongs on the UI conventions platform
  11. 11. Platform Identity: GetGlue
  12. 12. The Platform Identity Approach•  Different designs and interaction models for each app•  Individual UI components could be reused, the rest would be platform specific•  Common UI conventions and components are used•  Win for a developers: 100% non-visual code reuse, and 50% or better UI code reuse•  Tradeoff: Less reuse, more is done for you (UI controls)
  13. 13. Brand Identity: LNJF
  14. 14. The Brand Identity Approach•  UI is almost identical across platforms (immersive UI)•  Small differences: •  Android back button support •  Transitions – iOS: animated transitions, Android: new activities•  New UI conventions are created and must be learned•  Win for developers: 100% non-visual code re-use, 80-90% UI code re-use, strong branded experience•  Tradeoff: More reuse, less is done for you
  15. 15. Which Approach is Right For You?•  Depends on the primary goal of your app•  If speed, data interaction, and utility are core to your app, a platform identity approach may be better•  If emotional connection to brand and engagement are most important, a brand identity approach may be better
  16. 16. Component- OrientedApplications
  17. 17. Component-Oriented… What’s That?•  A large app is made up of 100s of smaller, self-contained pieces•  Really, just good OOP•  Regardless of your cross-platform approach, this style of thinking and programming is important
  18. 18. Advantages of a Component Arch.•  100 small pieces are easier to understand and debug than 20 very large pieces•  Easier to handle orientation changes•  Easier to adapt cross-platform•  Enhances reusability•  Decouples your application, making it more adaptable to changing requirements
  19. 19. Modular JavaScript Techniques
  20. 20. Classic Module Pattern•  Uses Ti.include to split modules into files•  Requires steps to avoid polluting the global scope (Namespaces)•  Can use constructor style or factory style
  21. 21. Classic Module Style: Example
  22. 22. CommonJS Module Pattern•  Uses require to split modules into files•  Secure by default – no self-calling function boilerplate or namespaces (strictly) required•  Can use constructor style or factory style
  23. 23. CommonJS Module Style: Example
  24. 24. Walkthrough:Platform Identity Style
  25. 25. Questions?
  26. 26. Thank You!

×