Save 37% off PRO during our Black Friday Sale! »

Advanced Cross-Platform Development

49345ea4af9a9432c1f4bf2cde34c736?s=47 Alco
October 18, 2014

Advanced Cross-Platform Development

This are the slides for my talk on Connect-JS 2014. Code repo at https://github.com/ricardoalcocer/ConnectJS2014

49345ea4af9a9432c1f4bf2cde34c736?s=128

Alco

October 18, 2014
Tweet

Transcript

  1. Advanced Cross-Platform Development Ricardo Alcocer | @ricardoalcocer

  2. Cross-Platform Development Fundamentals Ricardo Alcocer | @ricardoalcocer

  3. What you need to know before you build a cross-

    platform app Ricardo Alcocer | @ricardoalcocer
  4. $ whoami · Lead Developer Evangelist @ Appcelerator · Former

    independent Titanium trainer · Obsessed with native cross- platform development · Love knowledge transfer, hacking and tech startups · Author of Titanium Alloy in Action
  5. $ whoami · Lead Developer Evangelist @ Appcelerator · Former

    independent Titanium trainer · Obsessed with native cross- platform development · Love knowledge transfer, hacking and tech startups · Author of Titanium Alloy in Action
  6. Cross-platform Development: A very old problem

  7. Menus are in different places

  8. Buttons are written in different styles

  9. These two buttons are different by design

  10. Fast-forward to 2009

  11. iOS was nice and polished; Android was mostly monochromatic and

    plain
  12. Today Android has user interface guidelines

  13. Devices are not only for testing

  14. Be the #1 fan of the platforms you target

  15. When you strive for consistency, you achieve it through mediocrity

    — Phil Libin, CEO Evernote
  16. Evernote mobile app

  17. Cross-platform done right

  18. Can we achieve this with Appcelerator?

  19. Heck yeah! And with a single code base!

  20. It all begins with your "main app container"

  21. Cross-platform tabs

  22. Different container, code reused

  23. Multiple Windows in a single View file <Alloy> <Window platform="android">

    <ActionBar title="Home"/> </Window> <NavigationWindow platform="ios"> <Window> <TitleBar> <Items> <FlexSpace/> <Label>Home</Label> <FlexSpace/> </Items> </TitleBar> </Window> </NavigationWindow> </Alloy>
  24. Views in platform-specific folders

  25. Platform-specific styling ".loginLabel[platform=ios]":{ font:{ fontSize: 20 } } ".loginLabel[platform=ios]":{ font:{

    fontSize: 22 } }
  26. index.xml

  27. index.js

  28. Platform-specific home.xml

  29. Platform-specific containers

  30. Sample full app

  31. Know your target platforms Read the User Interface Guidelines

  32. Top 10 Tips for successful cross-platform development

  33. #10 Work with your design team

  34. #9 Beauty is relative to the platform

  35. #8 Code reuse is for code, not necessarily for UI

  36. #7 Tabs: Deep vs Shallow

  37. Tabs : Deep vs Shallow

  38. Tabs : Deep vs Shallow

  39. #6 Always think stateless

  40. #5 Know your target platforms Read the User Interface Guidelines

  41. #4 Don't fear modules

  42. #3 Emulate UI elements only when justified

  43. #2 Test often

  44. #1 Be your user!

  45. Questions?

  46. Thank you! Twitter: @ricardoalcocer SpeakerDeck: /ricardoalcocer Find the sample code

    at Github.com/ricardoalcocer Check out my book at http://bit.ly/alloybook 40%-off with coupon code tialloyapp