Building Multi-Platform Native Apps with MVVM and C#

Building Multi-Platform Native Apps with MVVM and C#

279b474d14f72e4daa1fc76e6f3c929f?s=128

Greg Shackles

June 21, 2014
Tweet

Transcript

  1. Building Multi-Platform Native Apps with MVVM and C# Greg Shackles

    Senior Software Engineer Olo @gshackles greg@gregshackles.com github.com/gshackles
  2. gonemobile.io @GoneMobileCast

  3. Google Apple RIM Microsoft Symbian 52.5% Android 41.4% Apple 3.3%

    Microsoft 2.5% RIM Source: comScore US Market Share: April 2014
  4. Write Once, Run Anywhere

  5. Write Once, Run Anywhere BUSTED

  6. Xamarin: C# All The Things! * * and F# too!

  7. Xamarin: C# All The Things! * * and F# too!

    •100% Native
  8. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs
  9. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc
  10. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc •Improved API
  11. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc •Improved API •Shared code across platforms
  12. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc •Improved API •Shared code across platforms •Garbage collection
  13. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc •Improved API •Shared code across platforms •Garbage collection •Visual Studio / Xamarin Studio
  14. Xamarin: C# All The Things! * * and F# too!

    •100% Native •Full access to platform SDKs •BCL, Async, LINQ, etc •Improved API •Shared code across platforms •Garbage collection •Visual Studio / Xamarin Studio •Frequent Releases
  15. MVVM

  16. MVVM View

  17. MVVM View Model

  18. MVVM View View Model Model

  19. MVVM View Binder View Model Model

  20. MVVM Click Me View Binder View Model Model

  21. MVVM Click Me 1. action View Binder View Model Model

  22. MVVM Click Me 1. action 2. event handling View Binder

    View Model Model
  23. MVVM Click Me 1. action 2. event handling 3. command

    View Binder View Model Model
  24. MVVM Click Me 1. action 2. event handling 3. command

    4. access data View Binder View Model Model
  25. MVVM Click Me 1. action 2. event handling 3. command

    4. access data 5. notify change View Binder View Model Model
  26. MVVM Click Me 1. action 2. event handling 3. command

    4. access data 5. notify change 6. get changed data View Binder View Model Model
  27. MVVM Click Me Hello World! 1. action 2. event handling

    3. command 4. access data 5. notify change 6. get changed data 7. update UI View Binder View Model Model
  28. MvvmCross

  29. MvvmCross

  30. MvvmCross: Highlights

  31. • Shared behavior, not presentation MvvmCross: Highlights

  32. • Shared behavior, not presentation • Bind all the platforms!

    MvvmCross: Highlights
  33. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options MvvmCross: Highlights
  34. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options • Convention over configuration MvvmCross: Highlights
  35. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options • Convention over configuration • Pluggable architecture MvvmCross: Highlights
  36. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options • Convention over configuration • Pluggable architecture • PCL MvvmCross: Highlights
  37. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options • Convention over configuration • Pluggable architecture • PCL • Inversion of Control MvvmCross: Highlights
  38. • Shared behavior, not presentation • Bind all the platforms!

    • Powerful binding options • Convention over configuration • Pluggable architecture • PCL • Inversion of Control • Testable MvvmCross: Highlights
  39. MvvmCross: Resources

  40. •Source: github.com/slodge/MvvmCross MvvmCross: Resources

  41. •Source: github.com/slodge/MvvmCross •Stuart’s Blog: slodge.blogspot.com MvvmCross: Resources

  42. •Source: github.com/slodge/MvvmCross •Stuart’s Blog: slodge.blogspot.com •N+1: mvvmcross.wordpress.com MvvmCross: Resources

  43. •Source: github.com/slodge/MvvmCross •Stuart’s Blog: slodge.blogspot.com •N+1: mvvmcross.wordpress.com •Chat: jabbr.net/#/rooms/mvvmcross MvvmCross:

    Resources
  44. Presenters

  45. • Customize view presentation Presenters

  46. • Customize view presentation • Platform-specific Presenters

  47. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters
  48. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters •Tabs / Panorama
  49. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters •Tabs / Panorama •Split View / Master-Detail
  50. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters •Tabs / Panorama •Split View / Master-Detail •Fragments
  51. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters •Tabs / Panorama •Split View / Master-Detail •Fragments •Modals
  52. • Customize view presentation • Platform-specific • Still retain View

    Model logic Presenters •Tabs / Panorama •Split View / Master-Detail •Fragments •Modals •Hamburger menu
  53. Presenters

  54. Presenters

  55. Presenters

  56. Presenters

  57. Plugins

  58. Plugins • Accelerometer • Download Cache • Email • File

    • Json • Localization • Location • Messenger • Phone Call • Picture Chooser • SQLite • Visibility • Web Browser • Many More!
  59. Xamarin.Forms Shared C# App Logic Shared C# User Interface Code

  60. None
  61. Pages Content MasterDetail Navigation Tabbed Carousel

  62. Pages Layouts Content MasterDetail Navigation Tabbed Carousel Stack Absolute Relative

    Grid Content Scroll Frame
  63. Controls

  64. Controls • ActivityIndicator • BoxView • Button • DatePicker •

    Editor • EntryImage • Label • ListView • Map • OpenGLView • PickerProgressBar • SearchBar • SliderStepper • TableView • TimePicker • WebView • EntryCell • ImageCell • SwitchCell • TextCell • ViewCell
  65. None