Advanced Cross-Platform Development

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

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