Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile design patterns

Mobile design patterns

Alexandra Marin

May 11, 2017
Tweet

More Decks by Alexandra Marin

Other Decks in Programming

Transcript

  1. Mobile
    design
    patterns
    Alexandra Marin @ ITAKE Unconference 2017
    @xmonodev
    crossplatform.io

    View Slide

  2. Hello!
    { }
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  3. Design code
    that runs
    cross-platform
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  4. Overview
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  5. The mobile
    problem
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  6. Target universal
    features
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  7. Enhance experience
    based on
    device capabilities
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  8. Platform-independent
    code with Xamarin
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  9. Platform-specific
    code with Xamarin
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  10. Case study #1:
    Different capabilities
    Case study #2:
    Different platform
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  11. Taking a
    selfie
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  12. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    Facade
    design pattern
    crossplatform.io

    View Slide

  13. //On platform
    if(deviceHasCamera)
    {
    //Take photo via Camera app
    //Apply resizing
    //Save it via File Manager
    }
    else
    {
    //Choose from gallery
    }
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  14. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    //Shared code
    camera.ReturnPhoto();
    crossplatform.io

    View Slide

  15. Save the
    date
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  16. Bridge
    design pattern
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    crossplatform.io

    View Slide

  17. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    //Shared code
    class MyCalendar
    {
    ICalendar calendar;
    void SaveTheDate()
    {
    calendar.AddEvent();
    }
    }
    crossplatform.io

    View Slide

  18. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    //iOS
    iOSCalendar : ICalendar
    {
    AddEvent()
    {
    //add event with
    //EventKit
    }
    }
    crossplatform.io

    View Slide

  19. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    //Android
    DroidCalendar : ICalendar
    {
    AddEvent()
    {
    //add event with
    //CalendarContract
    }
    }
    crossplatform.io

    View Slide

  20. Inversion
    of Control
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  21. Service
    locator
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf

    View Slide

  22. //Construct on platform
    Locator.RegisterType
    ();
    //Use in shared code
    Locator.Resolve();
    { }
    #mobile #designpatterns #itakeunconf
    { crossplatform.io }

    View Slide

  23. Dependency
    injection
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    { crossplatform.io }

    View Slide

  24. { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    //Construct on platform
    IoC.RegisterType
    ();
    //Gets injected in shared
    class constructor
    public SharedClass(ICalendar
    cameraHelper)
    { crossplatform.io }

    View Slide

  25. Summary
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    { crossplatform.io }
    crossplatform.io

    View Slide

  26. Ask Me Anything
    crossplatform.io
    or @xmonodev
    { crossplatform.io }
    #mobile #designpatterns #itakeunconf
    { crossplatform.io }
    crossplatform.io

    View Slide