Over the last week I have spent significant time in flushing out the UWP Client for bbxp. In doing so I have run into several interesting problems to overcome. This blog post will cover the ones I have solved and those that I uncovered that are much larger scope than a simple UWP client.

Problem One - Displaying HTML

A simple approach to displaying the content that is returned from the WebAPI service would be to simply use a WebView control in XAML and call it a day.

The problem with this approach is that in my case I am using two css files, one for bootstrap and one for my custom styles. Without the CSS styles being included I would have to either accept that the syling would be inconsistent or come up with a way to inject the CSS into the response item.

I chose the later. In diving into this problem, one approach would be to pre-inject the CSS string for every item. In looking at the file sizes, even minified bootstrap.min.css is 119kb and my own style file minified is 3kb. That is an extra 122kb per response, returning 10 posts that is over a mb of needless data. Another approach would be to return the CSS once along with the content strings. This is problematic as it would require other elements (Content, Searching and Archives) to also implement this approach. After some playing around with these approaches I came up with what I feel is the best approach:

  1. Added a new Controller to the MVC application to return a single string with both CSS files
  2. For every request on displaying either Content or a Post, see if the CSS file string is stored locally otherwise go out to the MVC app, download it and store it. Finally - inject the CSS string with the content string and display the XAML in a WebView
Pretty simple approach and efficient so lets dive into the code.

To start, I created a user control in the UWP app called HTMLRenderView to handle the NavigateToString event firing and allow the XAML to be able to bind with MVVM the string with a custom property called ContentBody like so:

This way whether I am loading several WebView controls in a list or just a single instance my code behind on the pages is clean.

Problem Two - Matching Styles between Platforms

In doing this "port" to UWP I quickly realized maintaining CSS and XAML styles is going to be problematic at best, especially when adding in Xamarin Forms ports to iOS and Android down the road. I have run into this situation before at work on various projects, but in those scenarios the application styles were pretty static as opposed my blog where I update the syling fairly regularly. Also thinking about others using this platform or at least as a basis for their own platform.

My first inclination would be to do something akin to TypeScript where it would compile down to the native syntax of each platform, CSS and XAML in my case. For the time being I will be adding this to my bucket list to investigate a solution down the road.

Conclusion

As of this writing there are only two features left in the UWP Client: Archives and External Link handling. There is additional styling and optimization work to be done, but overall once those two features are added I will begin on the Xamarin Forms port for iOS and Android clients.

All of the code thus far is committed on GitHub.
TAGS
none on this post