Web Atoms for Xamarin Forms

Web Atoms is set of tools (NuGet & NPM) to build native cross platform Xamarin Forms apps with JavaScript with JSX along with debugging, ready to use business controls and production code push.

Comment

Inspiration

React Native brought power of JavaScript on native platform to build and deploy mobile apps faster, we wanted to bring features of React Native (JSX + JavaScript) to Xamarin Forms. So we can use NPM and NuGet both in one single app and use Production Code Push to avoid deployment delays.

What it does

Web Atoms is set of powerful tools (NuGet packages, NPM packages) to build native cross platform Xamarin Forms apps with JavaScript with JSX along with debugging capability, ready to use business controls and production code push (Production hot reload).

It provides a JavaScript debugger, JavaScript engine and JSX syntax support for Xaml. It offers Simple Dependency Injection along with MVVM framework making transition from C#+Xaml very easy.

It offers best of both worlds (NuGet and NPM). It has simple design time mocking framework allows you to test/debug individual UI components.

How we built it

We have created abstract JavaScript bridge with JavaScriptCore on iOS and Custom built V8 on Android. And we have created abstract cross platform C# services which can expose device services to JSX. And we have created one, two way binding in JSX to emulate Xaml kind of bindings in JSX.

Challenges we ran into

Switching from Xaml+C# to React Native or any JavaScript library is not a straight forward path, as developers are more familiar with MVVM and Bindings, none of the libraries truly support MVVM and Bindings as expected. So we have created complete development framework to make transition from C# to JavaScript extremely easy.

Accomplishments that we're proud of

Most of the code in JSX looks visually very similar to C# code. You can reuse existing C# code in Web Atoms and you can easily integrate Web Atoms in your existing app without rewriting the code.

We can ship side by side versions of the app to users without having to reinstall the apps. We can selectively ship different versions.

It is very easy to debug JavaScript compared to native code as line numbers are often missing and is very difficult to investigate crashes/errors.

What we learned

We can use JSX in existing Xamarin Forms Apps without having to rewrite entire app in React Native or any other JavaScript platform for mobile.

What's next for Web Atoms for Xamarin Forms

Integrate Web Atoms JSX features for other native platforms such as GTK, WinForms etc.

Built With

Share this project:

Updates