https://github.com/legistek/Xamarin.Forms.Platforms.Webassembly

A proof of concept for a Webassembly backend render platform for Xamarin.Forms
https://github.com/legistek/Xamarin.Forms.Platforms.Webassembly

Last synced: 30 days ago
JSON representation

A proof of concept for a Webassembly backend render platform for Xamarin.Forms

• Host: GitHub
• URL: https://github.com/legistek/Xamarin.Forms.Platforms.Webassembly
• Owner: legistek
• License: mit
• Created: 2019-01-06T17:57:30.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T02:19:26.000Z (about 2 years ago)
• Last Synced: 2024-10-16T06:02:21.558Z (about 2 months ago)
• Language: C#
• Homepage:
• Size: 258 KB
• Stars: 37
• Watchers: 12
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-xamarin-forms - Xamarin.Forms.Platforms.Blazor ★36

README

        
# Xamarin.Forms.Platforms.Webassembly

A VERY BAREBONES proof of concept for a Webassembly backend rendering platform for Xamarin.Forms, currently using Blazor webassembly for the backend.

## Prerequisites

Visual Studio 2019, latest update.

.NET Core 3.1 SDK

## Getting Started

Compile and run the `Xamarin.Forms.Platforms.Webassembly.TestApp` project. You can also run the `Xamarin.Forms.Webassembly.TestApp.Reference` (Universal Windows) project for a side-by-side view of the application using the UWP backend as a reference.

## How it Works

The basic concept is that every XF view results in a `
` with its own custom CSS class based on the XF control properties. Since XF handles layout, each `
` is styled with `position: absolute` and given `left` and `top` coordinates based on the final layout bounds of the XF control. Individual control renderers then add to these styles based on properties unique to their control by overriding `SetBasicStyles`.


## Adding More Renderers

The basic process for creating a control renderer is as follows:

- Make a derived class from `ViewRenderer` where `T` is the Xamarin.Forms element

- Override `AffectsRender` to tell the platform which XF control properties should trigger a Blazor component render (always or (`||`) with `base.AffectsRender`)

- Override `SetBasicStyles` to translate XF control properties into CSS styles for the containing `
`.

- Optionally override `RenderContent` if the XF control has child content. For example, the `ButtonRenderer` adds text content corresponding to `Button.Text`. If the child content is another XF view, use `RenderChild`.

- Optionally override `MeasureOverride` if the control needs to measure text or other complex content. (See below regarding text measuring).

- Optionally override `AddAdditionalAttributes` to add UI event handlers.


## About Blazor

The project has been renamed from Xamarin.Forms.Platforms.Blazor to Xamarin.Forms.Platform.Webassembly so as not to tie it to Blazor long term. Blazor ultimately does not offer sufficient performance to support a XF backend. That's not true of Webassembly itself though. 

Currently we're using Blazor for the low level WASM bootstrapping and the component rendering, but we would like to use less and less of it as time goes on. Even if Blazor did have better performance, it's overkill because a great deal of Blazor is dedicated to building and comparing render trees for updating, whereas XF does its own visual tree building and change detection. A better backend would queue up changes received from XF Core and periodically update the DOM through WASM-Javascript interop, similar to WPF's render queue which interops with C++, treating the browser as little more than a composition engine.

## Contributing

Again, this is a very barebones proof of concept. I don't really have the time to review pull requests, but I encourage anyone with the time and interest to take this project on as an active maintained community effort. Contact me if you'd like to be a maintainer, or feel free to fork. Enjoy!