React-like approach for building Xamarin.Forms applications

As a library for building HTML/JS apps, React has some unique features: JSX for mixing JS and HTML, declarative and component oriented aspects of building UIs and leverages several functional ideas that differentiate it from 'classic' UI frameworks.

Since HTML and XAML are somewhat similar, can we reuse concepts in our C#/XAML based applications? Here is a motivating example using React:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {}</div>;

ReactDOM.render(<HelloMessage name="John" />, mountNode);

JSX enables mixing HTML and JavaScript code instead of separating it. In XAML based apps XAML part is always separated from the code behind and it is also separated from the matching ViewModel (when using MVVM).

Our ideal syntax in C# would be something like:

public class HelloMessage : Component
  public string Name { get; set; }

public override Node Render() => <Label Text="Hello {Name}" />; }

VirtualDOM.Render(new HelloMessage { Name = "John"}, page);

Read More

Implementing Redux in C# (Part 1)

This is the first part in the series about porting Redux to C# and using it to build MVVM based apps. In the last post we introduced the concept of stores as a replacement for our repositories and in this post we will see how to create such stores.

So without further ado, let's write our simplest store ever!

public class Store<T>
  public T State { get; private set; }

public Store (T initialState) { State = initialState; } }

Read More

MVVM, data stores and Redux

MVVM (Model-View-ViewModel) is the default pattern for most XAML based apps. It forces separating all code used for one screen into separate parts. View is the UI part (XAML or coded) while the model is usually raw data retrieved from database, web service or constructed on the fly. Model is usually too raw to display in the UI and shouldn't contain any business logic. It is also supposed to be a simple POCO (Plain Old C# Object) class, although some logic can be added to it.

Functionality such as validation and data aggregation/formatting is placed in a corresponding one or more ViewModels which are then bound to XAML views. Binding is a fundamental feature found in XAML based UI-s used for connecting UI with data on the backing ViewModel and to connect simple UI interaction to corresponding commands in the view model (e.g. clicking a button).

Read More

Xamarin.Forms App.xaml and default PCL template

When creating a new Xamarin.Forms blank app. the default template creates a code based Application class in the PCL project. Since this is just a C# class, to add global styles and resources you must add those in code. Creating styles in XAML is preferable to writing them in code. Adding global objects for binding like ViewModelLocator for MVVMLight and common converters is also nicer to do in XAML. Luckily, we can add the missing XAML part of this class quickly.

Once you project is created, delete the App.cs file in the PCL project and go through the Add New Item wizard and add new Forms Xaml Page with the name App.

Read More