Rules to Better Xamarin (mobile)

​​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you use Xamarin.Forms?

    ​Xamarin has evolved beyond simply being an abstraction of the platform native APIs for iOS, Android, and UWP. Where previously you could write shared business logic in C# but would have had to have written your UI in either Xamarin.Android or Xamarin.iOS, now you can write cross-platform UI code in Xamarin.Forms. Theoretically, it is possible to write your code only once and share 100% of the code you write across all target platforms, and at least 96% - see Adam Cogan's blog post​.
    xamarin-platform-bad.png
    Figure: Bad Example - Xamarin project targeting a single platform

    It is possible to implement beautiful and complex UI designs in Xamarin.Forms, especially given the rich ecosystem of plugins and templates available (see rule: Do you know where to find the best Xamarin resources?). Using drawing APIs like SkiaSharp or the new shapes and path APIs built into Xamarin.Forms (Note: this is an experimental feature) there is no UI that you can't implement cross-platform. Even so, 100% of the platform native APIs are exposed in Xamarin, so if you wanted to you could still implement any UI natively on each platform and call it using your shared code with a custom renderer.

    xamarin-platform-good.png
    Figure: Good Example - cross-platform mobile app targeting iOS and Android with a shared codebase
    Read more about Do you use Xamarin.Forms?
  2. Do you know how to build for the right platforms?

    Picking the right development environment is important, and which platforms you want to target will influence that decision.
    dev-environments.png
    Figure: The platforms you can target with each development environment – in most situations a Mac works best

    Note: More platforms are coming in 2021 when Xamarin.Forms evolves into MAUI, see: Introducing .NET Multi-platform App UI.

    If you want to develop for Android, wearOS, or Tizen, you can use Visual Studio on either Windows or macOS. If you want to target UWP, you must use Windows. If you want to develop for iOS, tvOS, macOS, or watchOS, you can now develop using Windows or Mac (using Hot Restart on Windows) but must use a Mac to publish your app to the App Store. If you want to target all these platforms you will need access to both Windows and Mac.​

    Tip: If you use a Mac you can run Windows through virtualization, using VMware Fusion, Parallels or VirtualBox. If you use Windows, there are cloud-based Mac services you can use for your Apple OS builds. 

  3. Do you use the MVVM Pattern?

    Xamarin follows the MVVM design pattern (see: Do you use the MVVM pattern in your Silverlight and WPF Projects?). MVVM was originally developed for WPF but is the dominant paradigm in Xamarin development (at least until 2021 when Xamarin.Forms evolves into MAUI, which will make the MVU pattern a first-class citizen. See: Introducing .NET Multi-platform App UI.​)

    MVVM allows for loose coupling between data, business logic, and UI. In Xamarin, UI is usually defined in XAML (although you can declaratively define your UI in C# code too). Your UI is called a 'view' - a view can be a page or a UI element, although UI elements that are not complete pages are more often referred to as controls

    mvvm-bad.png
    Figure: Bad Example - Logic and properties are in the code behind, which decreases maintainability and leads to antipatterns like async void
    mvvm-good.png
    Figure: Good Example - Values are bound to properties of the ViewModel, and actions are bound to Commands in the ViewModel​

    Xamarin supports MVVM out of the box, but there are several MVVM frameworks available that enhance this functionality. For example, some MVVM frameworks support "convention over configuration", allowing you to just code your View and ViewModel and let the framework hook them up for you. Some include:

  4. Do you use design time data?

    The XAML previewer in Visual Studio is a useful tool for designing your Xamarin UI. One limitation is that often your controls are bound to properties in your ViewModel (see rule: Do you use the MVVM pattern?​), meaning that you can't see what your UI will look like with the data loaded, without building and running your app.​

    design-time-bad.png
    Figure: Bad example - screenshot of XAML previewer with blank controls​

    A simple solution to this problem is to use design-time data. By importing the relevant namespaces into your XAML file, you can specify placeholder data that the previewer interprets to show how your UI will render with data loaded.
     
    These are the namespaces to import, and the declaration to use them:

     xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    design-time-good.png
    Figure: Good example - screenshot of XAML previewer with design-time data

    If your Xamarin and Visual Studio versions are up to date these namespaces will automatically be included in any new XAML file.​

  5. Do you use Hot Reload?

    Developing mobile apps presents unique challenges compared to web or desktop development. One of the problems is that when using MVVM or using dynamic data on a page, you need to run your app to populate the data and see what your UI will actually look like.
    hot-reload-bad.png
    Figure: Bad Example - rebuilding your app every time to see small UI changes

    This problem is partially solved by Design Time Data (see rule: Do you use design time data?), but this still doesn't show you how things change as you interact with them.

    ​To get around this problem use Hot Reload. This lets you make changes to your XAML while debugging your app - as soon as you save your UI will update, without having to stop and rebuild your app.

    hot-reload-good.png
    Figure: Good example - hot reload enable screenshot Windows

    Tip: This works on the iOS simulator, the Android emulator, and physical iOS and Android devices.

    Read more about Do you use Hot Reload?
  6. Do you use know how to consistently style your app?

    ​Branding is important in any product, and especially a mobile app. Xamarin offers several ways to define and ensure consistent styling throughout your app:

    • ​Resource Dictionaries
    • CSS
    • Visual
    xamarin-style-bad.png
    Figure: Bad Example - same styling defined and repeated multiple times​
    xamarin-style-good.png
    Figure: Good Example - Styles defined once in resource dictionary and applied to controls

    Resource Dictionaries and CSS provide similar capabilities, but Resource Dictionaries are the best way to style your Xamarin applications. CSS in Xamarin is not full, web-standards compliant CSS, but rather an alternative way to write Xamarin styles than Resource Dictionaries. CSS in Xamarin does not currently support the full range of properties available, but it may be more comfortable for those familiar with web development.

    Visual offers a much more granular level control over the look and feel of your application. However, this increase in granularity comes with a proportionally increased level of complexity. Rather than providing a style, you need to define a custom renderer for every control you want to define the look of.

    Visual is suitable for large teams with a design heavy focus, where branding is of paramount importance. The advantage of Visual is that you can specify it at individual control level, at page level, or at whole of app-level to ensure your entire app is consistent.

  7. Do you know the best way to manage assets in Xamarin?

    ​mFractor is the b​est tool for managing assets in your Xamarin project: https://www.mfractor.com/products/mfractor-professional

    This Visual Studio extension (now for Windows and Mac) is valuable for Xamarin work, it provides time-saving​ short cuts for several things, including (but not limited to):

    • Model and viewmodel creation
    • Intellisense between views and viewmodels
    • Importing of assets (images, fonts, etc)

    Importing images is the 'killer feature' - with one click you can import images into all the required folders. Without it, you need to create individual image assets for each device resolution and manually copy them to the corresponding folder for iOS and Android, and then update the manifest XML files. Using mFractor saves 30-60 minutes for every image imported into a project.

  8. Do you optimise your Android builds and start-up times?

    ​Whereas iOS enforces AOT (ahead of time) compilation, Android supports (and uses by default) JIT (just in time) compilation, but AOT can be enabled on Android to improve performance.​​​

    Xamarin also provides several other options for optimizing Android builds and improving performance. Additionally, you can use Android's new bundle format (rather than apk) so that smaller builds can be targeted to individual hardware specifications.​

    android-startup.png
    Figure: Using the d8 compiler and r8 code shrinker can improve your Android app performance, and enabling startup tracing can help you identify performance issues

    For more information, see: https://devblogs.microsoft.com/xamarin/optimize-xamarin-android-builds/

  9. Do you conduct cross-platform UI Tests?

    Any changes you make to your app risk breaking existing functionality. Having a suite of automated tests that you can run prior to any release reduces the risk of releasing a product with new features that don't work, or that breaks existing features. It also means that you can run these tests as part of your CI/CD pipeline, or with a dedicated testing infrastructure such as Xamarin Test Cloud in Visual Studio App Center, which runs your tests on real devices.​​

    ​Xamarin comes with a built-in UI testing framework, Xamarin.UITest​. This allows you to write UI tests that ensure your app's UI behaves as expected. UI tests in Xamarin.Forms follow the Page Object Pattern (POP), see: https://channel9.msdn.com/Events/Xamarin/Xamarin-Developer-Summit-2019/Page-Object-Pattern-and-UITest-Best-Practices

  10. Do you know where to find the best Xamarin resources?

    The following is a list of resources for learning, staying up to date with, and using Xamarin.​​​

    General

    Awesome Xamarin Forms is a curated list on GitHub of a bunch of resources for Xamarin. This includes controls, effects, behaviors, tools, and more. It's a good 'one-stop-shop' for everything Xamarin. https://github.com/jsuarezruiz/awesome-xamarin-forms.

    Weekly Xamarin is a weekly newsletter sent every Friday or Saturday. It's a community-curated list of all the latest Xamarin news, blog posts, and podcasts. http://weeklyxamarin.com.

    Learning

    The best video courses for learning Xamarin are Asfend Yar Hamid's real-world app series on Udemyhttps://www.udemy.com/user/asfendyar/

    The best book for learning Xamarin is Xamarin.Forms Projects by Daniel Hindrikes and Johan Karlsson: https://www.packtpub.com/product/xamarin-forms-projects-second-edition/9781839210051.

    Events

    SSW hosts a Xamarin Hack Day every year: https://xamarinhackday.com.

    ​Controls

    Xamarin has a thriving and passionate community and ecosystem. Many Xamarin developers have made awesome controls available either as open-source libraries, NuGet packages, or both. A lot of these can be found at the Awesome Xamarin GitHub page linked above. Additionally, a number of commercial options are available.

    Xamarin Community Toolkit: This is a community-driven set of controls, effects, behaviors, and extensions that make add a lot of functionality you are likely to reuse in your projects. https://github.com/xamarin/XamarinCommunityToolkit.

    SyncFusion:  SyncFusion provides a set of beautiful controls and templates for a range of use cases and scenarios. There is also a community license, which allows you to use it free for anything earning less than $1m a year. https://www.syncfusion.com/xamarin-ui-controls.

    Telerik: Progress has made their Telerik UI available for Xamarin.Forms. Telerik provides a range of controls focused on enterprise and business applications. https://www.telerik.com/xamarin-ui​.

    Live Streams​

    The best Xamarin stream is Kym Philpott's weekly stream on Twitchhttps://www.twitch.tv/kymphillpotts.

    There is a strong community of Xamarin streamers regularly producing awesome content. A curated list can be found here: https://aka.ms/xamstreamers.