For solo platform developers interested in multi platform development… Three multi-platform demos: – Reuse data source (local JSON) – Data modeling (Obj C, Java, C#) – UI components that play nice with orientation change & mobile/tablet/desktop. Awesome custom font! Purpose: – Think multi-platform, not just one! (Discoverability, Multi-channel, Multi-device users) – Highlight the UI components that react responsively. (Responsive/Adaptive design) – Bespoke design – increase uniqueness by adding custom fonts to your app! (like CSS3 @font-face did for websites)

1. Multi Platform App Dev
David Douglas
@deadlyfingers

2. 3x IDEs
• Xcode 5
• Android Studio
• Visual Studio 2013

3. 3x Languages
• Objective C / Swift
• Java
• C#

4. 3x UX Design Guidelines
• iOS 7+ (Flat design)
• Android L (Material Design)
• Windows 8 (Flat design)

5. 3x Platform Design Patterns
• iOS
• Android
• Windows

6. iOS MVC Design Pattern
• Model
– Model.h (+.m)
• View
– ViewController.xib
• Controller
– ViewController.h (+.m)

7. Android MV? Design Pattern
• Model
– Model.java
• View
– activity_my.xml
• Controller / Adapter
– MyActivity.java
– Adapter.java

8. Windows MVVM Design Pattern
• Model
– Model.cs
• View
– MainPage.xaml
– MainPage.cs
• ViewModel
– ViewModel.cs

9. 3x “Awesome” Apps Demos
• Reuse data source (local JSON)
• Data modeling (Obj C, Java, C#)
• UI components that play nice with
orientation change &
mobile/tablet/desktop.
• Custom font

10. Data Source
• Font Awesome Glyphs
• JSON file generated with Ruby script
(watir)

11. iOS App (demo)
• iPhone
• iPad

12. iOS App
• CocoaPods
• JSONModel
• Custom Font (Info.plist)
• Collection View
• Storyboard (shared)

13. Android App (demo)
• Phone
• Tablet

14. Android App
• Android Studio and Gradle
• GSON from JSON file in ‘src/main/assets’
• Generate Getters & Setters [Cmd]+[N]
• GridView
• Custom ArrayAdapter

15. Windows App (demo)
• Phone
• Tablet / Surface
• Desktop PC
Visual Studio 2013

16. Windows App
• Universal Apps - Shared Assets
(W8+WP8)
• NuGet Package Manager
• Newtonsoft.JSON
• GridView
• {Binding}

17. Summary of similarities
Lib Management CocoaPods Gradle NuGet
JSON JSONModel GSON Newtonsoft.JSON
Grid Layout UICollectionView GridView GridView
Grid Objects UICollectionViewDataSourc
e
ArrayAdapter {Binding}
App start ViewController.m MainActivity.java MainPage.xaml
∟
MainPage.xaml.cs

18. Taking it further…
• Theming
• Navigation to Detail View
• Azure Mobile Services
- Add user identity - eg. My favorites
- Push future updates over Cloud!

19. Theming

20. iOS Status Bar appearance
Info.plist
App Delegate
View Controller

21. View Controller
iOS Navigtaion Bar appearance

22. Android L (API 21) Theme
res/values-v21/styles.xml

23. Android AppCompat styles
res/drawable/actionbar_background.xml
res/values/styles.xml

24. Page.xaml
Page.xaml.cs
WindowsPhone Status Bar

25. Custom Fonts

26. Info.plist
View Controller
iOS UIFont

27. Activity.java
Android Typeface

28. Page.xaml
Page.xaml.cs
Windows FontFamily

29. Native Design
Apple
developer.apple.com/design
Android
www.google.co.uk/design
Windows
http://design.windows.com

30. Native Development
Apple
http://tinyurl.com/iosdesignpattterns
Android
http://tinyurl.com/android-mvvm
Windows
http://tinyurl.com/windows-mvvm

31. Thank you
Questions? @deadlyfingers