Mobile Blazor Bindings - Develop In Xamarin Using Blazor

Imagine joining technologies like Xamarin, Blazor, and .NET Core to develop mobile applications using Razor Views instead of XAML.

  

Mobile Blazor Bindings is still an experimental project that was announced by Eilon Lipton, Software Engineer on Microsoft. The focus of that project is the possibility to create Xamarin mobile applications using Razor Views and the use of the bindings of Blazor.

 

When James Montemagno, Xamarin’s Guru, shared that news, it quickly spread among Twitter users.

 

Blazor also started as an experimental project, and you can find other articles about it in my Blog.

 

Mobile Blazor Bindings

 

With the name Mobile Blazor Bindings, the project can perform in a way to allow developers to create mobile applications using web concepts.

 

That was a huge problem using Xamarin Forms when you were a web developer.

 

The complexity in Xamarin still is the XAML, a markup language much similar to XML, to create user interfaces. XAML is most used in WPF and the almost extinct Silverlight.

 

That was one of the reasons I had let Xamarin behind, but now I will try it again.

 

All the web concepts are present in other platforms like Ionic, React Native, and Flutter, so Microsoft could not leave it behind.

 

Check the following code sample that Eilon published in his blog, 

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

StackLayout is one of the tags of XAML, but here in Blazor it is a component/view.

 

Samples

 

That experimental project already has three code samples available in his Github, but I couldn’t compile them, possiblly due to  problems in my Visual Studio.

 

But if you create a new project after you have downloaded the VS project template, you are good to go.

 

Hello World:

 

That sample is the famous counter button that when clicked, counts +1 showing the result on a label.

 

 

Todo Sample

 

Adds items on a Todo List.

 

 

Weather

 

That sample is more complicated than the previous ones. It uses a Grid component, CSS style, and Dependency Injection.

 

 

Considerations

 

Like every experimental project, we need to see what happens next. We need to know more about performance, support of other components, and interoperability.

 

After everything I have seen, it seems they had created a component/view for each XAML tag, something similar to what I had done in my previous Blazor article.

 

If you take a look at the Razor Views, you will see that they are still similar to XAML. In other words, the structure is still the same as Xamarin Forms.

 

It could be interesting to change that structure or, even better, let us develop it using HTML like other stacks.

 

I have enjoyed it very much 🙂

 

Thanks for reading.