How we do cross platform mobile app development at Nintex

Maintaining your business presence or mobile apps on different platforms is challenging. A lot of companies hire platform specific developers, form one team for each platform which work in their own silos, each responsible to maintain their respective platform, having different implementation, different code paths and different kind of design. Each team may or may not have face similar functional/UI issues.

At Nintex, we build and ship native mobile apps across iOS, Android and Windows platforms to support access to workflows and forms securely from wherever you are on your mobile devices. Here we have followed a slightly different approach where we design and implement any feature once and then we port the implementation to other platforms. Therefore we have feature based mobile developers which design and implement each feature across Android, iOS and Windows platform.

This has work really good for us, breaking the silos and help us achieve design and code path consistency across multiple platforms.

This often lead us concluding that if we have functional bug in one platform, chances are we have that bug in other platforms as well.

The crux of the idea is that we follow Model-View-ViewModel (MVVM) pattern across all platforms. So we have similar classes for model, view and view-model, contracts, repositories, helpers etc. across Windows, iOS and Android. By similar classes I mean, similar name, code path and structure yet they are written in their own platform specific languages. So if we have a view model with a method on one platform, we will have it across all.

MVVM
MVVM

As an example, consider following sample snippet of a view model from Android and iOS and you will see the point here.

ViewModel in Android (Java)
ViewModel in Android
ViewModel in iOS (Obj-C)

However view, which comprises of UI and code, can be platform specific. e.g.
In Android, View = XML Layout + Activity
In iOS, View = Storyboard + ViewController
In Windows, View = XAML + Code behind

Each view has reference to its view model (initialized through IoC or passed by its parent) where all user interactions are done through events or binding or listeners etc. depending on platform. For instance, in iOS we leverage KVO to observe value change in ViewModel to reflect update to View/UI and stuff like button click is simply routed back to ViewModel method either via simple method call or some mechanism. So our views are just there to render UI widgets/components/layout.

The advantage of this approach is, first, it gives us shared design and code consistency, second, it gives opportunity to open a cross platform conversation and knowledge across team, third, it improve code testability by decoupling UI logic from View (ViewControllers/Activity/CodeBehind) to ViewModel, fourth, it makes relatively easy for us to follow SOLID principles.

However, we have came across challenges with platform specific components like showing alerts/notification, http clients, retrieving geolocation etc. The way we handle it is by injecting contract (interface/protocol) to ViewModel class which has platform specific implementation however code structure remains same in ViewModel across all platforms.

If you are interested to see some sample yet naive MVVM implementation:
MVVM implementation in Android
MVVM implementation in Windows Store and Windows Phone

How do you develop cross platform native apps? It would be interesting to know… is it C++ shared/wrapped code? Do you use Xamarin? You prefer each platform specific team working in their own silos?

PS: This post is revised version of my original blog post at Nintex Labs

Session: Code Sharing between Windows Phone/Store Apps

Today, I got opportunity to interact with developers at Microsoft Innovation Center Karachi to demonstrate code sharing between Windows Phone and Windows Store apps.

Slide deck can also be download from OneDrive

Code has been published to github code repository

Sharing Code between Windows Store/Phone Apps using MVVM and PCL

I recently published an article on CodeProject.com about how developers can share their code base across Windows Phone and Windows Store apps using Model-View-ViewModel (MVVM) pattern and Portable Class Libraries (PCL).

If you are windows developer with experience of implementing MVVM or want to implement MVVM, I would request you to read the article and I would be happy to listen to your feedback.

Sharing Code Between Windows Phone and Windows Store Apps using MVVM and PCL

Excerpt from article:

As the business wants to expand its reach to different form factors and devices, a large number of developers build native apps across different platforms. One particular scenario is when developers wants to target Windows Phone and Windows Store platform. Unlike Android, developers have to create different projects inside Visual Studio for Windows Store and Windows Phone apps.

This article explains how developers can utilize the Model-View-ViewModel (MVVM) and .NET portable class libraries to create a common shared business logic across both platforms. We would not be able to cover MVVM introduction in this article, so I expect readers would already know about it, if you don’t know what MVVM is, I would recommend to read some intro articles first on MVVM before continuing further.

The App

For the sake of simplicity and learning, we are going to create a simple contact form app on both phone and tablet, which would look something like sketch below:

The Design

The design goal here is to move all the core business model, view-models, helpers and repositories in a separate portable class library which can be referenced by UI/View projects. The connection of view with view-models would be through data binding and commands etc.

One point worth mentioning here is that helpers and repositories from PCL would further communicate with external portable libraries like e.g. Http Client to perform network operation across both platform using same PCL dll. Now in real world you may not be able to achieve this 100% but it would work in many scenarios.

Implementation

So let’s start coding! we would create a simple yet naive approach of achieving the design above. Continue reading…

Implementing Model-View-ViewModel (MVVM) in Windows Phone

Model-View-ViewModel (MVVM) is a solid presentation model and the best benefit of this design is that it lets you decouple UI and logic which makes you unit test your logic easily. You will find a lot of stuff over the internet about MVVM but I am going to quickly introduce you using a diagram:

Source: Implementing MVVM (Microsoft Patterns & Practices)

The View in case of Windows Phone is the UI page (.xaml) and code behind (.cs/.vb). Model is plain data model. ViewModel contains presentation logic which may encapsulates models, have some logic around it, interact with repositories etc. View and ViewModel are connected via Binding or Commands etc. I will cover those as we code it.

In this post, I am going to share a very naive way of implementing MVVM to develop your apps on Windows Phone but more or less we can implement MVVM same way to develop Windows Store apps. In fact in my upcoming post I would love to write about how we can share code between Windows Phone and Windows Store apps by implementing MVVM + Portable Libraries + Dependency Injection.

Microsoft XAML based solutions supports MVVM as most of basic components required to implement MVVM are baked in as part of framework e.g. DataContext and Binding, INotifyPropertyChanged, Commands etc. I will get back to these terms as we go through code.

So here is something we are going to develop. A simple app with contact page allow user to fill in name, email, select a category, add details to it and submit it. We would add some basic validation here as well.

Contact Form Sketch

So let’s jump to code and start learning MVVM by writing code.

We will start by creating model first. I am gonna add a Category class which we would use to create a collection to populate categories.

Now there are couple of things here that needs explanation. INotifyPropertyChanged and OnPropertyChanged being called in setters. INotifyPropertyChanged is an interface that ships with framework and the class implements it is able to notify their view/clients that a property value has changed. So once we bind our view with ViewModel/Model then we need a mechanism to inform View/UI that a value has been updated. What happens is that when we change value of a property in model it send raises property change event, which is why we are calling “OnPropertyChanged” method, to let view know that a property value has change and therefore please update your UI. And that’s the major purpose of INotifyPropertyChanged interface and we need to implement it in all Models or ViewModels which we intend to bind.

Now let’s create a view model. ViewModels are usually one per view, page in this case. So we are going to create ContactPageViewModel

We have an ObservableCollection<Category> which we would use to populate category list. The ObservableCollection is part of framework and it automatically notifies UI when an item has been added, deleted etc. We also have another property “SelectedCategory” which we would use to populate the selected property by the user. We have Name/Email for user data, Inquiry string for details and IsValid property that we would use for required validation.

Let’s talk about view now. Now here is a part that is kind of easier on Windows Platform such as Windows Store and Windows Phone in contrast to Android and iOS.

So binding a property of control is simple we use special XAML syntax “{Binding PropertyName, Mode = OneWay/TwoWay/OneTime}”. The mode here specify that whether binding would be one way i.e. from Model -> UI or TwoWay i.e. UI -> Model and vice versa. The other important thing to notice is Command. Commands are way to connect view events with ViewModel. In this case, we have registered submit button with SubmitCommand on ViewModel which would eventually call OnSubmit action.

BUT the potential of MVVM can be observed with how validation is handled. What I have done is that submit button will only be enable when IsValid property is true. And who is updating IsValid property? RequiredFieldValidator.
That’s why we have registered TextChanged event in UI which triggers source to update on every key stroke which update the ViewModel property which internally raises PropertyChanged event and that event is being handled by validator which sets IsValid to true all required fields are being populated.

And you just made a simple implementation of MVVM on Windows Phone. Please note that the above code is not production optimized. Also there are different ways to implement MVVM and this is just one way to do it. Also MVVM may not fit to very simple 1-2 pages app however the more complex the app the more likely it is that MVVM is the right fit for your app.

Sample code can be forked or downloaded from Github: https://github.com/adilmughal/DemoMvvm.WP

Windows Phone 8 Online Sessions

Get a chance to hear directly from Microsoft Technical Evangelist – Windows Phone. Mohamed Yamama is delivering a series of sessions starting 17th December. This is the readiness you need to enhance your capabilities on Windows Phone 8 Platform.

MEA Windows Phone Online Sessions – Introduction to WP8 Development

Speaker: Mohamed Yamama – Technical Evangelist – Windows Phone

Language: English

URL: download Lync client for joining the online sessions. Lync Meeting – http://bit.ly/X9UXgH [Click on this to join the call on date/time as below]

Date: 17th December 2012 – Mondays

Time: 4:00 PM – 5:00 PM [Pakistan Standard Time] [UTC+5]

Following is the schedule of sessions

  1. [12/17/2012] Introducing Windows Phone 8 Development
  2. [12/24/2012] Designing WP8 Applications
  3. [01/07/2013] Building WP8 Applications    
  4. [01/14/2013] Async    
  5. [01/21/2013] Using Speech   
  6. [01/28/2013] Files and Storage + WP8 Store    
  7. [02/04/2013] WP8 Application Lifecycle   
  8. [02/11/2013] WP8 Background Agents   
  9. [02/18/2013] Local Database   
  10. [02/25/2013] Tiles and Push Notifications   
  11. [03/04/2013] Lock Screen Notifications   
  12. [03/11/2013] Using Phone Resources   
  13. [03/18/2013] App to App Communication   
  14. [03/25/2013] Network Communication    
  15. [04/1/2013] Proximity Sensors and Bluetooth   
  16. [04/08/2013] Maps and Location   
  17. [04/15/2013] Wallet Support   
Enjoy learning Windows Phone 8!