public class Episode 11: MVVM Part Deux

{

Tim and Tim revisit the MVVM pattern and dive deeper into issues and details, like whether a control should have it’s own viewmodel, and which came first, the VM or the V?

Subscribe

public void Summary()

{

Tim and Tim revisit the MVVM pattern and dive deeper into issues and details, like whether a control should have it’s own viewmodel, and which came first, the VM or the V?

}

public void Links()

{

}

public void HotSpot()

{

  • Zeplin.io – Convert Adobe design files directly into UI components in Xamarin Forms!

}

}

public class Episode 10: NPoco and Other ORMs

{

Tim P. interviews Tim J. about ORMs, and specifically a little-known yet powerful .NET ORM called NPoco.

Subscribe

public void Summary()

{

Tim P. interviews Tim J. about ORMs, and specifically a little-known yet powerful .NET ORM called NPoco.

}

public void Links()

{

}

public void HotSpot()

{

  • JSON to POCO Conversion
    • easily convert a json file to a C# class
  • GitHub
    • read through other coder’s source to learn new tips and tricks
    • clone repos locally to use your IDE to browse code

}

}

public class Episode 9: Biting into Blazor

{

Tim J. interviews Tim P. about the new .NET Core Blazor web UI framework, it’s history, and where it is headed.

Subscribe

public void Summary()

{

Tim J. interviews Tim P. about the new .NET Core Blazor web UI framework, it’s history, and where it is headed.

}

public void Notes()

{

I (Tim P.) was a little out of date with my information on this episode, as Blazor Web Assembly was officially released by Microsoft last month!

}

public void Links()

{

 }

 

public void HotSpot()

{

  • CPU-Z – Free utility that provides detailed analysis of your hardware,
  • Azure –  Microsoft Cloud Service Provider

}

}

public class Episode 8: To Your Battle Stations!

{

Tim & Tim discuss their current workstation hardware and accessory setups, as well as some history on past pcs and purchases.

Subscribe

public void Summary()

{

Tim & Tim discuss the challenges and rewards of becoming team members vs. working as a solo dev.

}

public void Links()

{

Tim P’s Battle Station

Tim J’s Battle Station

}

public void HotSpot()

{

}

}

public class Using MVVM ViewModels Cross-Platform

{

In episode 7 of the ToCode.Software podcast, we discussed the MVVM framework. In that episode, I (Tim Purdum) asserted that, if designed carefully, you could reuse a ViewModel across multiple UI frameworks.

To demonstrate this point, I made a simple demo application at https://github.com/TimPurdum/Mvvm.

public void ProvingAPoint()

{

In episode 7 of the ToCode.Software podcast, we discussed the MVVM framework. In that episode, I (Tim Purdum) asserted that, if designed carefully, you could reuse a ViewModel across multiple UI frameworks.

To demonstrate this point, I made a simple demo application at https://github.com/TimPurdum/Mvvm. I started with the Visual Studio Blazor Template, which gives you three Blazor Pages:

  • Index(Home/Main) – with text and a link to a survey
  • Counter – with an interactive button that increments a number counter
  • FetchData – with a graph of weather data fetched from a “service” (mocked)

}

 

public void StartingWithBlazorAndMakingViewModels()

{

First, I created a new .Business project, and created a ViewModel for each of those pages. I used a very simple BaseViewModel and RelayCommand implementation, like Tim Jay and I discussed on the episode. Then I moved as much “logic” and content from the Blazor Pages to the ViewModels.

Image comparing original template with MVVM version
Left: Original Blazor template file; Right: MVVM refactor
Image comparing original template with MVVM version
Left: Original Blazor template file; Right: MVVM refactor
Image comparing original template with MVVM version
Left: Original Blazor template file; Right: MVVM refactor

Wow, I hate writing more code to accomplish the same task. But that’s only a temporary side-effect. Notice the use of binding via @ViewModel.Property in the Pages now. This makes our pages even more efficiently design-only, with the content being provided by the ViewModel.

}

 

public void AddingXamarinForms()

{

Next, I added the Visual Studio Xamarin.Forms template to the project. I chose the Master-Detail layout from the template selector, as this most closely resembles the Blazor/web layout.

The Xamarin.Forms template imports a class library, and individual executable projects for iOS, Android, and UWP (optional). The main focus of the Forms demo template is a Page with an editable list of items, that can be drilled into, edited, and refreshed. It also includes a nice About Page.

Now, the Xamarin.Forms template is already structured on MVVM, but uses a few Forms-specific things in their ViewModels. I wanted to move these to my Business project, but not introduce Xamarin.Forms dependencies that might conflict with my Blazor implementation.

Image compares Xamarin.Forms vs. Cross-platform implementation of Items view
Left: Xamarin.Forms ViewModel; Right: Cross Platform ViewModel

There were two major changes. First, the Xamarin.Forms BaseViewModel had a DataStore property. I decided to implement this just in ItemsViewModel, rather than in my own BaseViewModel, but either would have worked. Second, the original uses a Xamarin.Forms Command. I replaced this with my own RelayComand, and made the public Command property to be the common interface ICommand, which is .NET Standard. The ItemsPage.xaml and ItemsPage.xaml.cs required very little change at all, except setting Binding to the new ViewModel. I decided to inject the ViewModel and a reference to the IDataStore to make it possible to load and handle the NewItemPage.

I won’t bore you with the details of migrating NewItem, ItemDetail, and About. You should get the idea by now, and can certainly check out the code examples themselves.

After each refactor, I would run the Blazor or Forms app to make sure I hadn’t broken any functionality. I found many times that I did! Probably a nice Unit Test set around this project would be helpful as well, and I might add that in the future.

}

 

public void ImplementCrossPlatformViews()

{

The last main step was to implement Views(Pages) for the Blazor ViewModels in Xamarin.Forms, and the Forms ViewModels in Blazor. This is where it all pays off!

Xamarin Forms Implementations

HomePage.xaml
HomePage.xaml (Index/Main)
CounterPage.xaml
CounterPage.xaml
FetchDataPage.xaml
FetchDataPage.xaml

Blazor Implementations

About.razor
About.razor
ItemDetail.razor
ItemDetail.razor
Items.razor
Items.razor
NewItem.razor
NewItem.razor

}

 

public void Challenges()

{

There were several things that I discovered along the way that made implementation difficult.

Dependency Injection

Unfortunately, while both Xamarin.Forms and Blazor support DI, they don’t use the exact same implementation. Since the Blazor/Asp.Net Core version is now a .NET Standard Nuget Package, and appears poised to be baked into .NET 5, I went ahead and added this to the Forms project, so I could use the same references. But since the other DI is built into Forms, and they both use the IServiceProvider interface, I found some conflict with the .GetService<T> extension. I solved this by adding a local copy in the project of the same extension method, which then “won out” over the Forms extension.

Navigation

Navigation paradigms between mobile apps and web pages are very different. The web treats all links equally, whether to a local new page or a different site. Xamarin.Forms apps, on the other hand, keep their own internal list of pages (navigated by an enum/int), and then launch Chrome for external links. I solved this by creating a NavTarget class that included both a textual link and the MenuItemType enum. I’m sure there are more clever solutions to integrate these two together.

Fonts and Icons

This part took me a bit too long, and even so, I think there’s a bug in the UWP Xamarin.Forms renderer. The Blazor app makes use of icons from Open Iconic, which is really a font set. I thought it would be great to use this same open-sourced set for the Xamarin implementation. I discovered you can set the open-iconic.ttf file as an EmbeddedResource in the Xamarin.Forms project, and this should be able to be referenced. Like I said, it works for iOS/Android, but not for UWP.

}

 

public void NextSteps()

{

I’m hoping to take this pattern and apply it to some real projects in the future. I will keep you updated with new blog posts here. Be sure to join our mailing list, listen to our podcast, and leave a comment below on what you would like to see for future blog topics or podcast episodes. Also, if you have any suggestions for improving this demo project, feel free to leave comments here or on the github repository.

}

}

public class Black Lives Matter

{

Last weekend, our hearts were too heavy with the news of yet another brutal murder of a black man by authorities, reflecting on our own privileges, and trying to come up with ways to help in the ongoing protest movement. So, we did not make a podcast episode. I will be posting a new tech blog article soon, and we hope to be back up and running with new episodes next week!

}

public class Episode 7: Movin’ Along with MVVM

{

Tim & Tim dive into their first deep-tech topic, the MVVM framework!

Subscribe

public void Summary()

{

Tim & Tim dive into their first deep-tech topic, the MVVM framework!

}

public void Links()

{

  • MVVM: Model, View, View-Model pattern
  • MVVM in Depth: Pluralsight course, great overview of WPF/MVVM design
  • XAML Behaviors for WPF: Simple nuget package that makes calling commands from Bindable events simpler
  • Stylet: Full yet simple MVVM framework, based on Caliburn.Micro, provides simple ViewModel-first view-finding
  • MVVM Light: “Light” framework
  • Prism: Another framework

}

public void News()

{

  • Java Streams: Comparable to (but maybe not as full-featured as) .NET LINQ
  • GIVEAWAY COMING UP! Leave a comment here or a review on your podcast source to be entered into our June drawing!

}

public void HotSpot()

{

  • Hand Lotion! Keep your keyboard fingers supple.
  • Surface Book 3: High-end laptop that also becomes a large tablet

}

}

public class Episode 6: Developer Burnout

{

Tim & Tim discuss what developer burnout looks like, how to deal with it, and how to avoid it.

Subscribe

public void Summary()

{

Tim & Tim discuss what developer burnout looks like, how to deal with it, and how to avoid it.

}

public void HotSpot()

{

  • Coding Blocks – Awesome dev podcast
  • Go for a Walk or a Drive! Get up outta your chair!

}

}

public class Episode 5: Java & Risk Assessment with Chris Purdum

{

Chris Purdum is a Senior Software Developer at PayPal. He talks about his work on Fraud and Risk Assessment, and compares language features of Java and .NET with Tim and Tim.

Subscribe

public void Summary()

{

Chris Purdum

Chris Purdum is a Senior Software Developer at PayPal. He talks about his work on Fraud and Risk Assessment, and compares language features of Java and .NET with Tim and Tim.

 

}

public void Links()

{

  • C++ – Low-level, un”managed”, cross-platform programming language, predecessor of Java and C#
  • PayPal – Digital payment transactions
  • Java – Original cross-platform managed language, strong inspiration for C#, still used widely and being developed/improved
  • JVMs – Java Virtual Machines
    • Zing – Azul performance-tuned JVM
  •  Scala – Succinct multi-paradigm (OOP and Functional) language that can run on both the JVM and Javascript runtimes
  • Hadoop – Distributed computing framework

}

public void HotSpot()

{

  • JFR – Java Flight Recorder: gives detailed analysis and diagnostics of the code as it runs
  • FindBugs – Static analysis for Java
  • Music! (You know where to find it…)
  • Pluralsight – Developer and IT-centered online learning site, with courses and IQ quizzes for many languages, frameworks, and patterns.

}

}

public class Episode 4: Teaming Up!

{

Subscribe

public void Summary()

{

Tim & Tim discuss the challenges and rewards of becoming team members vs. working as a solo dev.

}

public void Links()

{

}

public void HotSpot()

{

  • Display Fusion – Advanced Multi-Monitor support tool.
  • PowerToys – Free Windows plugin for multimonitor, shortcut keys, and other simple tools.

}

}