Single Page Application with #uwpdev

Over the next few days I will push a set of blog posts detailing the design of Daily Mail Online app for Windows. This has been due for at least 12 months now.

I am not going to discuss the Content published by the App rather the App in itself – I am the creator of the App and have no control over the content.

Traditionally most applications have multiple views / pages. User is presented with different pages depending upon the data to be shown. Page transition theme makes navigation between pages a joy.

I had issues with page navigation – especially when the page you are navigating to contains a FlipView control and the item to be displayed is anything but the first item – there is an obvious rendering issue where the first item renders momentarily before the correct item is shown – really makes me want to kick someone in the nuts every time I see it.

During my rework of Daily Mail Online app for desktop last year, I decided to go the SPA route. SPA stands for Single Page Application. Whilst it has been around for a very long time, I first heard it from Benjamin Howarth when he did a talk at London Mobile Dev user group back in 2015

So the idea of SPA is simple
* Get all necessary data
* Display correct view depending upon what the user desires.
* Maintain pseudo navigation to maintain sanity.

Daily Mail Online app has the following views:
Channel view
Article view
Related Article View
Comment View
Topic View
Search View
Profile View
Read Later View
Photo Gallery View
Video View

In early days of UWP, one could use Deferred Loading but there was no way to unload anything you didn’t want. That meant that from a Visual Tree point of view it was messed up – all these views – all rendered and in memory just hidden away when not needed.

Last year with Creators update, Windows Dev team introduced a feature called x:Load. It allows dynamically loading and unloading of controls – providing an experience similar to visibility toggle while having a lighter footprint.

<ListView
    x:Name="ArticleListView"
    Grid.Row="1"
    Grid.RowSpan="2"
    x:Load="{x:Bind MainViewModel.LoadSingleArticleView, Mode=OneWay}"
    Background="{ThemeResource ContentBackgroundBrush}"
    BorderBrush="{ThemeResource ContentBackgroundBrush}"
    BorderThickness="0"
    ItemContainerStyle="{StaticResource GroupItemStyle}"
    ItemTemplateSelector="{StaticResource ArticleLayoutSelector}"
    ItemsSource="{Binding ElementName=mainPage, Path=DataContext.RelatedItemContent, Mode=OneWay}"
    Loaded="OnArticleListViewLoaded"
    SelectionMode="None"
    ShowsScrollingPlaceholders="False"
    VirtualizingStackPanel.VirtualizationMode="Recycling" />

The only requirement is that you need to Name the control and Laoding / Unloading can be done by binding to VM property – it can’t really get any simpler.

Along with SPA design, I use ReactiveUI along with traditional MVVM within the Daily Mail Online App. More on injecting ReativeX goodness within MVVM app in next post.