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.

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";
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.

Try Now

https://www.webatoms.in/play/demo/shapes/1

Explore new feature "Shapes" of Xamarin.Forms 4.7.

https://www.webatoms.in/play/demo/master-detail

Application with drawer and multiple pages, using navigation service to open pages, retrieve result and load unpacked pages.

https://www.webatoms.in/play/demo/list

Explore list view with Cell bindings. Using two way binding to update the selection.

https://www.webatoms.in/play/demo/form/3

Explore validation sample with simple form.

https://www.webatoms.in/play/demo/tabbed-page/3

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.

Validation

Simple and Complex Data Validation in Web Atoms

Akash Kava ・ Aug 28 '19 ・ 4 min read

#typescript #showdev #validation

Dependency Injection

Dependency Injection in Web Atoms

Akash Kava ・ Jun 25 '19 ・ 3 min read

#dependencyinjection #mvvm #typescript #javascript

REST Services

RetroFit inspired REST Services in Web Atoms Core

Akash Kava ・ Jul 5 '19 ・ 2 min read

#mvvm #typescript #showdev #javascript

Simple Unit Testing

Simple Unit Testing with Web Atoms

Akash Kava ・ Feb 18 '20 ・ 2 min read

#typescript #showdev #javascript #testing