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.
Top comments (0)