Forum Libraries, Components, and Plugins

Xamarin.Forms apps with VS Code, TypeScript and TSX

How is it possible?

We have created a JavaScript bridge for Android using V8 and in iOS using JavaScriptCore. This bridge allows you to load JavaScript and create Xamarin.Forms control on the fly.

Hot Reload Published App

With XF pages written in TypeScript, it is possible to keep all the code in npm kind of repository and hot reload your application without having to go through app store approval process.

TSX Instead of Xaml

Xaml is great, no doubt, but TSX in VS Code is even more powerful. Take a look at following code,

import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import { AtomXFControl } from "@web-atoms/core/dist/xf/controls/AtomXFControl";
// Existing Xamarin.Forms Definitions
import XF from "@web-atoms/xf-controls/dist/clr/XF";
import AtomXFContentPage from "@web-atoms/xf-controls/dist/pages/AtomXFContentPage";
import ListViewModel from "./ListViewModel";

export default class List extends AtomXFContentPage {

    public viewModel: ListViewModel;

    public create() {
        this.viewModel = this.resolve(ListViewModel);

        this.render(
            <XF.ContentPage title="List Sample">
                <XF.ListView 
                    itemsSource={Bind.oneWay(() =>
                        this.viewModel.movies.value)}>
                    <XF.ListView.itemTemplate>
                        <XF.DataTemplate>
                            <XF.ViewCell>
                                <XF.Label
                                   text={Bind.oneWay((x) => x.data.name)}/>
                            </XF.ViewCell>
                        </XF.DataTemplate>
                    </XF.ListView.itemTemplate>
                </XF.ListView>
            </XF.ContentPage>
        );
    }

}

Best of Both Worlds

NuGet + NPM, you can use most of both the worlds. It is very easy to expose services from C# to JavaScript.

Extend Library

You can easily create new component within JavaScript (TypeScript) and you can also write similar component in C# to improve performance.

Web Atoms MVVM with Xamarin.Forms Features

JavaScript Stack Trace

C# Code is little painful to debug in production as line numbers are missing. Not only that, JavaScript stack traces retains line numbers in production with source map making life lot easier.

Side by Side Versioning

This is by far the biggest benefit, in typical production application, you cannot change version immediately, but with Web Atoms, you can dynamically change version and even allow single user to change version. This allows you to investigate bugs and platform related issues easily.

Performance

Of course, JavaScript engine execution and lot of data transfer between JavaScript, CLR and native platform is expensive, and it is little slow compared to pure C# code. But at the same time, you can always tweak your code easily. We first roll out beta in JavaScript, we let it stabilize and then we move that part of code to C#. Only when you make changes to C# code, you have to republish app to the store.

Smaller App Size

Since your app only contains JavaScript engine code, your app becomes smaller, all your Views/View Models/Services stay on web server.

We have organized documentation and we are still in process of making more documentation available easily. Integration requires little effort, but once the application is setup, it is extremely easy to build/test and deploy.

Posts

Sign In or Register to comment.