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.
Multi Platform App Dev 
David Douglas 
@deadlyfingers
3x IDEs 
• Xcode 5 
• Android Studio 
• Visual Studio 2013
3x Languages 
• Objective C / Swift 
• Java 
• C#
3x UX Design Guidelines 
• iOS 7+ (Flat design) 
• Android L (Material Design) 
• Windows 8 (Flat design)
3x Platform Design Patterns 
• iOS 
• Android 
• Windows
iOS MVC Design Pattern 
• Model 
– Model.h (+.m) 
• View 
– ViewController.xib 
• Controller 
– ViewController.h (+.m)
Android MV? Design Pattern 
• Model 
– Model.java 
• View 
– activity_my.xml 
• Controller / Adapter 
– MyActivity.java 
–...
Windows MVVM Design Pattern 
• Model 
– Model.cs 
• View 
– MainPage.xaml 
– MainPage.cs 
• ViewModel 
– ViewModel.cs
3x “Awesome” Apps Demos 
• Reuse data source (local JSON) 
• Data modeling (Obj C, Java, C#) 
• UI components that play ni...
Data Source 
• Font Awesome Glyphs 
• JSON file generated with Ruby script 
(watir)
iOS App (demo) 
• iPhone 
• iPad
iOS App 
• CocoaPods 
• JSONModel 
• Custom Font (Info.plist) 
• Collection View 
• Storyboard (shared)
Android App (demo) 
• Phone 
• Tablet
Android App 
• Android Studio and Gradle 
• GSON from JSON file in ‘src/main/assets’ 
• Generate Getters & Setters [Cmd]+[...
Windows App (demo) 
• Phone 
• Tablet / Surface 
• Desktop PC 
Visual Studio 2013
Windows App 
• Universal Apps - Shared Assets 
(W8+WP8) 
• NuGet Package Manager 
• Newtonsoft.JSON 
• GridView 
• {Bindin...
Summary of similarities 
Lib Management CocoaPods Gradle NuGet 
JSON JSONModel GSON Newtonsoft.JSON 
Grid Layout UICollect...
Taking it further… 
• Theming 
• Navigation to Detail View 
• Azure Mobile Services 
- Add user identity - eg. My favorite...
Theming
iOS Status Bar appearance 
Info.plist 
App Delegate 
View Controller
View Controller 
iOS Navigtaion Bar appearance
Android L (API 21) Theme 
res/values-v21/styles.xml
Android AppCompat styles 
res/drawable/actionbar_background.xml 
res/values/styles.xml
Page.xaml 
Page.xaml.cs 
WindowsPhone Status Bar
Custom Fonts
Info.plist 
View Controller 
iOS UIFont
Activity.java 
Android Typeface
Page.xaml 
Page.xaml.cs 
Windows FontFamily
Native Design 
Apple 
developer.apple.com/design 
Android 
www.google.co.uk/design 
Windows 
http://design.windows.com
Native Development 
Apple 
http://tinyurl.com/iosdesignpattterns 
Android 
http://tinyurl.com/android-mvvm 
Windows 
http:...
Thank you 
Questions? @deadlyfingers
Upcoming SlideShare
Loading in …5
×

Pretty 'Awesome' apps (demo at Mobilise Meetup)

709 views

Published on

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)

  • Be the first to comment

Pretty 'Awesome' apps (demo at Mobilise Meetup)

  1. 1. Multi Platform App Dev David Douglas @deadlyfingers
  2. 2. 3x IDEs • Xcode 5 • Android Studio • Visual Studio 2013
  3. 3. 3x Languages • Objective C / Swift • Java • C#
  4. 4. 3x UX Design Guidelines • iOS 7+ (Flat design) • Android L (Material Design) • Windows 8 (Flat design)
  5. 5. 3x Platform Design Patterns • iOS • Android • Windows
  6. 6. iOS MVC Design Pattern • Model – Model.h (+.m) • View – ViewController.xib • Controller – ViewController.h (+.m)
  7. 7. Android MV? Design Pattern • Model – Model.java • View – activity_my.xml • Controller / Adapter – MyActivity.java – Adapter.java
  8. 8. Windows MVVM Design Pattern • Model – Model.cs • View – MainPage.xaml – MainPage.cs • ViewModel – ViewModel.cs
  9. 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. 10. Data Source • Font Awesome Glyphs • JSON file generated with Ruby script (watir)
  11. 11. iOS App (demo) • iPhone • iPad
  12. 12. iOS App • CocoaPods • JSONModel • Custom Font (Info.plist) • Collection View • Storyboard (shared)
  13. 13. Android App (demo) • Phone • Tablet
  14. 14. Android App • Android Studio and Gradle • GSON from JSON file in ‘src/main/assets’ • Generate Getters & Setters [Cmd]+[N] • GridView • Custom ArrayAdapter
  15. 15. Windows App (demo) • Phone • Tablet / Surface • Desktop PC Visual Studio 2013
  16. 16. Windows App • Universal Apps - Shared Assets (W8+WP8) • NuGet Package Manager • Newtonsoft.JSON • GridView • {Binding}
  17. 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. 18. Taking it further… • Theming • Navigation to Detail View • Azure Mobile Services - Add user identity - eg. My favorites - Push future updates over Cloud!
  19. 19. Theming
  20. 20. iOS Status Bar appearance Info.plist App Delegate View Controller
  21. 21. View Controller iOS Navigtaion Bar appearance
  22. 22. Android L (API 21) Theme res/values-v21/styles.xml
  23. 23. Android AppCompat styles res/drawable/actionbar_background.xml res/values/styles.xml
  24. 24. Page.xaml Page.xaml.cs WindowsPhone Status Bar
  25. 25. Custom Fonts
  26. 26. Info.plist View Controller iOS UIFont
  27. 27. Activity.java Android Typeface
  28. 28. Page.xaml Page.xaml.cs Windows FontFamily
  29. 29. Native Design Apple developer.apple.com/design Android www.google.co.uk/design Windows http://design.windows.com
  30. 30. Native Development Apple http://tinyurl.com/iosdesignpattterns Android http://tinyurl.com/android-mvvm Windows http://tinyurl.com/windows-mvvm
  31. 31. Thank you Questions? @deadlyfingers

×