MVVM Light Toolkit to wrap MVVM Pattern for Xamarin iOS

Developing Native mobile applications across different platforms at once is both time and efforts intensive. A common development platform is essential to minimize the efforts instead of a distinctive programming language; Objective C for iOS, C# for Windows and Java for Android. Xamarin is the prominent application development platform that offers up to 75% of C# code to re-use across Android, iOS & Windows and enables quick turnkey.

Model-View-ViewModel (MVVM) is the preferable design pattern to separate the user interface & business logic concerns. It contributes in making code sharable across major platforms. The advantage of writing business logic in ViewModel and communicating View via Model results in separating the components. MVVM Light Toolkit is one of the most established frameworks for MVVM. It helps in bringing the pattern over Xamarin development framework to make code sharable across multiple mobile platforms and accelerates the deployment process.

Following are the elements of the MVVM Light Toolkit:

1. View: A front-end user interface, such as Android, iOS or Windows
2. ViewModel: An entity which exposes the data and its properties
3. ViewModel Locator: A key element of MVVM Light that registers custom ViewModels and services like Navigation service and Dialogue service
   • Navigation Service: This helps to navigate to the different ViewModels irrespective of platform-specific code
   • Dialogue Service: This helps to provide custom dialogues or alerts without writing the platform-specific code

Let’s take a walk through how MVVM Light Toolkit ropes in MVVM pattern for the Xamarin iOS framework.

The first step while developing Xamarin apps is to consume Portable Class Library (PCL), which holds the business logic code in the form of ViewModels. The PCL helps in re-using the sharable code across other platforms.

MVVM light toolkit provides specific libraries to implement MVVM pattern in app development environment. From NuGet, these libraries have to be added to support the PCL functionality. The libraries also help in building the dependency injection for specific services. After the initial step of consuming the PCL, defining of UI in View, and properties, methods, & business logic in ViewModels have to be done. After these two layers are defined, a link has to be established between View and ViewModels through data binding procedure defined in Model.

MVVM Light features include Design Mode, Standard MVVM Light Scaffolding, RelayCommand, DispatcherHelper, SimpleIoC, Navigation Service, and DialogService. These exceptional features of MVVM toolkit helps in implementing the MVVM pattern over Xamarin iOS platform. Thus, leading to development of truly native iOS apps, which are easy to maintain, test, and upgrade.

Case Study - Xamarin and MVVM based Smart Social Club on Mobile for Parents to rediscover fun with Children

A Leading Children Education and Entertainment organization has extended their web based play-and-learn educational services to mobile platform. Xamarin.iOS and Xamarin.Android framework was leveraged to develop iOS & Android apps to offer engaging fun-based children activities to parent subscribers. Implementation of MVVM pattern through MVVM Light in Xamarin framework made it possible to reuse code up to 80% across Android and iOS platforms. The organization managed to reach over 5000 Parent subscribers through Xamarin based Mobile App solution with quick time-to-market and reduced the development costs as well. The mobile app helped the parents to rediscover the fun with their children through 1000s of challenging and innovative games.

Sample - Implementation of Navigation Service using the MVVM Light with Xamarin iOS Framework

Navigation service helps in navigating between different ViewModels irrespective of platform-specific code. iOS framework has a built-in navigation journal, which has the Navigation controller and a Back button in a navigation bar. In few cases, the navigation needs to be triggered from the ViewModel layer. As multiple platforms share this layer, an abstract way to make this navigation work easily is by using INavigationService interface. This element of MVVM Light is simple & compatible for many navigation scenarios and can be extended for complex ones. This element is typically used along with SimpleIoc element to inject into the re-usable code such as viewmodels.

In the code snippet, Initialize and Configure functions are used to initialize and configure the NavigationController and viewmodel while implementing MVVM Navigation Service. NavigateTo function helped in establishing the simple navigation to a page. The page has been navigated to Dashboard page. The GoBack function helped in navigating to previous page.

Read what Xamarin Consultants say about Xamarin App Development