DEV Community: Akash Kava

Positron-JS for DotNet Maui

Akash Kava — Tue, 03 Sep 2024 04:18:07 +0000

An Advanced Web View based Maui Project. This project was inspired from Cordova/Capacitor. However, building native plugins is very time consuming. Maui offers single language to write native plugins easy on any platform. So we decided to create Capacitor/Electron-JS for Maui.

Why?

Well C# is better language when we want to develop native apps for Android and iOS, however writing everything in C# and deploying app is very time consuming as every build needs to go through app store approvals. Often app store reviewers have no idea about the apps and they keep on clicking on the most unused parts of apps and complain about something trivial and reject the approval.

We wanted to use Capacitor or React Native, but both of them suffer plugin creation as plugins has to be created in native languages, (Java for Android and Swift on iOS), which requires two separate set of codebases and different expertise.

So we decided to build a PositronWebView that offers easy hybrid app creation along with simple API to access Device's native interface.

Is HTML Fast?

With recent advancement in HTML5 + CSS3 and JavaScript updates, creating web UI is easier than native UI, you can create almost all effects in HTML. The key to make app superfast is to drop the bulky JavaScript Frameworks, for example using instead of using $('.price').text("$20") you should use document.getElementsById("price").textContent = "$20".

Try to use inbuilt CSS animation vs JavaScript to emulate animations.

Our own Web Atoms framework is superfast, but you have your own choice to use any framework you want with PositronWebView.

Getting Started

Create an empty folder
Run npm init
Run npm install -s @positron-js/cli
Run node ./node_modules/@positron-js/cli init
Run npm install

This will create a maui project inside maui folder. Along with build scripts to publish.

Open Web URL

PositronWebView expects URL for website, you can directly open remote URL and expose positron context. You can also limit exposure of positron context by setting ShouldInvokeScript delegate.

The url is set in build script's config.js file, you can also configure url in appsetting.json file.

Access .NET API

Positron exposes positron property on window object, with run method. Positron installs JavaScript engine (YantraJS in Android and JavaScriptCore in iOS), which integrates with CLR. So you can write JavaScript that access CLR objects directly.

Example - Get DeviceToken

Lets assume that we have configured push messaging and we want to retrieve the device token. (For convenience, we have created Positron class that gives you deviceToken), you have to enable RegisterPushMessaging in MauApplication.cs file, which is commented by default as it gives build errors if google-services.json is not configured correctly.


    import PositronInBrowser from "@positron-js/context/index.js";

    /** Although syntactically correct, this function
     * will be executed inside Positron's JavaScript Engine.
     * And the result will be available after successful execution.
     * 
     * This function cannot contain any closer except `global`;
     */

    /** Basically positron.run() will send script text and parameters */
    /* (as json) to Positron's JavaScript engine */
    const deviceToken = await PositronInBrowser.run(function () {

        // this runs inside App's Internal JavaScript Engine

        const NSPositronAssembly = this.clr
            .assembly("NeuroSpeech.Positron");

        const Positron = NSPositronAssembly
            // following is fully qualified name
            .NeuroSpeech.Positron.Positron;

        return Positron.deviceToken;
    });

Example - Open Url

Lets assume you want to open native browser instead of navigating WebView.



    import PositronInBrowser from "@positron-js/context/index.js";

    await PositronInBrowser.run({url}, function (p) {

        const Essentials = this.clr.assembly("Microsoft.Maui.Essentials");

        const Browser = Essentials.Microsoft.ApplicationModel.Browser;

        Browser.default.openAsync(p.url);

    }, "https://socialmail.me")

Note, we are sending parameters as first parameter in call to run method. And same parameters object can be accessed inside function(p). You can only pass plain non recursive primitive types in parameters. As they are sent to Positron as JSON.

Example - Create New Instance



    import PositronInBrowser from "@positron-js/context/index.js";

    await PositronInBrowser.run({url}, function (p) {

        const Essentials = this.clr.assembly("Microsoft.Maui.Essentials");
        const Graphics = this.clr.assembly("Microsoft.Maui.Graphics");

        const { Browser, BrowserLaunchOptions } = Essentials
            .Microsoft.ApplicationModel;

        const { Colors } = Graphics.Microsoft.Maui.Graphics;

        const options = new BrowserLaunchOptions();
        options.preferredToolbarColor = Colors.orange;

        await Browser.openAsync(p.url, options);

    }, "https://socialmail.me")

Positron Context

PositronWebView creates a new JavaScript context (JavaScriptCore in iOS and YantraJS on other platforms) and it exposes clr.assembly function, which you can access by calling this.clr.assembly, from this assembly you can easily access namespaces and types.

Once you have types, you can call methods or construct an objects from it.

For convenience we have created @positron-js/context npm package which exposes typescript definitions for Microsoft.Maui.Graphics, Microsoft.Maui.Essentials and NeuroSpeech.Positron assemblies.

You can add your own assemblies easier, the source code is available on github https://github.com/Positron-JS/context

AOT and Linking

For PositronWebView to access all CLR objects, Linking must be disabled and interpreter must be turned on, these settings are automatically set when cli creates a sample project.

Using interpreter, reduces code size, but it does add performance overhead. However, if you do your most stuff inside HTML, browser's native performance will take care of everything. And if you only need to occasionally access .NET APIs such as geolocation or push registration token, select files etc, there would be no visible performance issues.

Publishing

To publish the project, you must execute .jsx file with @neurospeech/jex as shown below.

node ./node_modules/@neurospeech/jex/index.js ./build-android.jsx

Jex is a new scripting engine that executes jsx files as a build script, and you can easily edit them and utilize JavaScript in the build script.

You just have to configure environment variables and put your certificates in cert folder, you can review build-%%%%%-config.js file to find out what every platform needs.

Positron Web View Repository

Positron-JS / positron-web-view

Positron JS WebView for MAUI

Positron Web View

Get Started

Create an empty folder
Run npm init
Run npm install -s @positron-js/cli
Run node ./node_modules/@positron-js/cli init
Run npm install again.

This will create a maui project inside maui folder. Along with build scripts to publish.

Publish

To publish the project, you must execute .jsx file with @neurospeech/jex as shown below.

node ./node_modules/@neurospeech/jex/index.js ./build-android.jsx

Jex is a new scripting engine that executes jsx files as a build script, and you can easily edit them and utilize JavaScript in the build script.

Access .NET Inside Browser

Positron exposes positron property on window object, with run method. Positron installs JavaScript engine (YantraJS in Android and JavaScriptCore in…

View on GitHub

Introducing new JavaScript Engine YantraJS for DotNet

Akash Kava — Wed, 27 Oct 2021 08:46:31 +0000

We are happy to announce a brand new Open Source JavaScript engine completely written in C# for .NET.

Managed JavaScript Runtime

YantraJS is a JavaScript runtime written in .NET Standard. Yantra has two components, Expression Compiler and JavaScript engine.

It is written in .NET standard, so it runs everywhere except iOS which enforces JIT restrictions. However, with help of an interpreter you can still use it on iOS.

Why did we build it?

We wanted a JavaScript engine with complete support of ES6, including generators and async/await. And we want to officially support as a commercial product. YantraJS is open source.

License

Apache 2.0 License

For more details, please visit YantraJS Website

Features

Compiles JavaScript to .Net Assembly
Strict Mode Only JavaScript*
Arrow functions
Classes
Enhanced object literals
Template strings and tagged templates
Destructuring
let const
Map, Set, WeakMap, WeakSet
Symbols
Subclassable built-ins
Binary and Octal literals
Module support
Null coalesce
Optional property chain identifier?.[], identifier?.(, identifier?.identifier
Rest, Default and Spread Parameters
Generators, iterators, for..of
Async/Await
Optional parameters
Many ES5 + ES6 features
CommonJS Module Support
Easily marshal CLR Object to JavaScript and other way around
CSX Module support

* Most JavaScript today is available in strict mode, we do not feel any need to support non strict mode as modules are strict by default.

Roadmap

Support for V8 Debugger Protocol
Increase ECMAScript conformance
Faster IL Serialization
Faster Debugging
Support for module pollyfills (ability to redirect default node modules, to support dual platform)

ECMAScript Conformance

Currently we are seeing more than 70% conformance to ECMAScript, reaching 100% is little out of scope as it is very huge and Yantra is only one year old. We are focusing on supporting most used JavaScript patterns instead of targeting 100% compliance due to limited development bandwidth.

Expression Compiler

YantraJS is built on custom Expression Compiler, which allows us to create expressions similar to that of Linq Expressions. Expression Compiler has several methods to generate IL, you can compile expression to MethodBuilder. Since there is no support for Linq to compile expressions to MethodBuilder, Yantra Expression Compiler was written from ground up to support saving IL to various ways.

Engine Types

JSContext - plain JavaScript context
JSModuleContext - context with modules and clr support
YantraJSContext - context with modules, clr and CSX Module support

How to use?

Simple Execution

var context = new JSContext();

// create global function
context["add"] = new JSFunction((in Arguments a) => {
    return new JSNumber(
         (a[0]?.IntValue ?? 0) + (a[1]?.IntValue ?? 0)
    );
});

var result = context.FastEval("add(4,5)", "script.js");

Wrap CLR Object

Custom CLR types can be wrapped in ClrProxy which will allow you to call any methods directly from JavaScript.

context["createUri"] = context.CreateFunction((in Arguments a) => {
    var uri = new Uri(a[0]?.ToString() 
          ?? throw context.NewReferenceError(
                   "At least one parameter expected");
    return new ClrProxy(uri);
}, "add");
var result = context.FastEval(
      "var uri = createUri('https://yantrajs.com'); uri.host");
Console.WriteLine(result);

For more information on how to use various types, please visit YantraJS Examples

Alternative to Razor View in ASP.NET Core

We have created our website using JavaScript as view instead of Razor view, though it started as a simple application, but we realized that by using JavaScript as view, we can easily plugin Server Side Rendering and improve page delivery speed. However, using traditional JSDom is not yet supported due to very heavy dependency on various built in node modules. But you can easily create a wrapper with mocks to render content of your React/Angular components on server easily with YantraJS. Check out source code for our website at Github Repository for YantraJS Website

Originally Posted at Introducing YantraJS - Web Atoms Blog

Difference between instanceOf Array and Array.isArray

Akash Kava — Mon, 18 Oct 2021 10:35:37 +0000

There are two major differences between instanceOf Array and Array.isArray.

Cross Context Object

In browser, when you access object from different window (such as different iframe from same domain), instanceOf Array will return false. However Array.isArray will return true.

For example,

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iArray = window.frames[window.frames.length-1].Array;
var arr = new iArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr);  // true
// Considered harmful, because doesn't work through iframes
arr instanceof Array; // false

Why?

Well internally, all root level (global) functions/constructors such as Array, Object are isolated under the currently executing contexts. Two browser windows or two iframes will have different context and object created in one context will have prototype associated with the context.

When object is accessed in different context, instanceOf will fail to identify object's prototype chain in current context.

Created with `Object.create`

var a = Object.create( Array.prototype, {});
a.push(1);
a.push(2);

var b = [];
b.push(1);
b.push(2);
console.log(a.join()); // it will display '1,2'.
console.log(b.join()); // it will display '1,2'.

Array.isArray(a); // false
Array.isArray(b); // true

a instanceOf Array; // true
b instanceOf Array; // true

Why?

With Object.create, Array.prototype is present in prototype chain of a, so instanceOf Array will be true, as in the context of JavaScript, a has prototype of Array. So all the methods of Array will work correctly on a as those methdos are generic.

But Array.isArray does not check for prototype, it checks if it was created using Array constructor, which internally is a separate type of object in the language it was implemented. Such as in V8, Array constructor will create an object of class V8Array which inherits V8Object. And Object.create will create V8Object. Array.isArray method in V8 will check if the receiver is instance of V8Array class in C++. Similarly every JavaScript engine will check natively, what kind of object it is, rather then checking prototype.

Originally Posted at Web Atoms Blog - Difference between instanceOf Array and Array.isArray

Web Atoms for Xamarin Forms vs React Native

Akash Kava — Thu, 18 Feb 2021 04:56:11 +0000

Xamarin Forms

Xamarin Forms provides platform independent UI framework, however the code is natively compiled, it gives you speed but deployment is lengthy process. Xamarin Forms makes it easier to create and deploy custom UI components using Custom Renderers.

React Native

React Native on other hand provides quick updates but to achieve native performance, and for custom UI components, you need to write code in different platforms in different languages.

Web Atoms

With Web Atoms, we decided to bring all features of React Native in Xamarin Forms to get the best of both.

Native Component

We are always in need to create native components when framework components don't provide exact features we need. In case of React Native, we are left to create new components in Java/Kotlin for Android and in Swift for iOS. In Xamarin Forms, we can create custom components by combining existing platform neutral controls or write custom renderers in different platform but all in C#.

In Web Atoms, you can create custom controls using JavaScript and in C#, (Writing in C# will require you to redeploy application in AppStore).

JSX + JavaScript Support

Xamarin Forms does not have any support for JSX + JavaScript, React Native and Web Atoms, both provides support for JSX.

Support for NuGet Packages

In Xamarin Forms you can reuse all existing NuGet Packages. There is no support for NuGet packages in React Native as it is not built on .NET framework.

In Web Atoms, you can reuse all existing NuGet Packages.

Support for NPM Packages

Since there is no support for JavaScript, using NPM package is not possible. In React Native, you can use most of NPM Packages.

In Web Atoms, you can use most of NPM Packages as well.

Live Reload in Production

Application deployment is becoming lengthy day by day, the queue to publish new update is increasing and also subject to approval.

Live Reload allows user to refresh the app version without having to download the app from the respective store.

In Xamarin Forms, it is not possible to provide live reload as entire code is natively compiled and shipped via store.

In React Native and Web Atoms for Xamarin Forms, you can provide live reload in production.

Binding and MVVM Pattern

Xamarin Forms has excellent One, Two way binding and MVVM Pattern support.

React Native is purely functional and there are no inbuilt binding/MVVM concepts.

In Web Atoms, we have created Binding and MVVM support to reduce learning time, you can easily translate Xaml + C# to JSX + JavaScript with exact similar concepts.

Dependency Injection

Xamarin Forms has simple dependency injection and Prism provides advanced dependency injection.

React Native does not have dependency injection, but there are other frameworks in NPM in which you can achieve same.

Web Atoms provides Prism kind of Dependency Injection in JavaScript with decorators.

Reuse Existing C# Code

If you have your backend and most of your front end application already has C# code, reusing them in Xamarin Forms is very easy.

Using existing C# code in React Native is not easy, either you will have to rewrite it in JavaScript or provide server side rest proxy.

Using existing C# code in Web Atoms is as easy as using in Xamarin Forms. In fact, you can use Web Atoms in existing app without having to rewrite most of its parts.

Side by Side versioning

Since Xamarin Forms apps are compiled natively, you cannot allow users to switch the version, this is very useful in beta test, early adopter tests. For admin and investigation purpose.

In React Native, apps are mostly in JavaScript, it is possible to load JavaScript from server and it is possible to switch to different version for various investigation/debugging purpose.

In Web Atoms for Xamarin Forms, apps are mostly in JavaScript and they can be loaded from server, it is possible to use different versions.

Feature	Xamarin Forms	React Native	Web Atoms for Xamarin Forms
Native Component Implementation Languages	C#	JavaScript, Swift, Java	JavaScript, C#
JSX + JavaScript Support	No	Yes	Yes
Support for NuGet Packages	Yes	No	Yes
Support for NPM Packages	No	Yes	Yes
Live Reload in Production	No	Yes	Yes
Binding and MVVM Pattern	Yes	No	Yes
Dependency Injection	Requires Prism	Requires other packages	Inbuilt
Reuse Existing C# Code, if you already have various application logic already available in C#	Yes	No	Yes
Side by side versioning (Use different versions of Application without uninstall/reinstall)	No	Possible	Yes
Exception Line Numbers in Production	No	Available	Available

Today it is Parler, Tomorrow it could be Us

Akash Kava — Wed, 13 Jan 2021 04:49:57 +0000

This post does not justify content on parler or its way of doing business. Whatever happened on Parler may not be legal, but even criminal judgement requires trial, Should Big Tech take justice on their hand?

Small business is Dying

Imagine you are a small business running a small social network, you have only some budget to maintain the network, advertise and generate revenue. Suddenly some group of people on network does something offensive, it spreads like wildfire and Apple, Amazon and Google collectively decide to kick you out of network.

You can find hosting, but Apple and Google controls complete App market.

The only thing you are left with is world wide web, within limited browser with slow UI which no one is comfortable with. Notifications/calendar many things are difficult to implement.

Amazon killed small shop owners, Apple, Google, Facebook are killing small social networks by making the entry and survival very difficult.

Apple Google Amazon Facebook, all are watching US

These companies have information about probably every individual on internet, I am sure they have more information about US than our government. Google started presenting my "Interesting Article" in Google search home page, this means that Google has kept all my search engine history since day 1 unless I manually go and delete it.

All information in big tech is watched by default.

Web Browser isn't free anymore

Apple owns Safari, Google owns Chrome, This comprises of 90% of users of web. Everything is forced upon by these two browsers.

I got annoyed when our users didn't want Browser to store username/password, we spend so much time in customer support that it is done by browser fast and automatic, and we cannot control, even after specifying auto-complete="off", both browsers simply ignore this as per their term. Me as a developer and my customers as users do not want this, but both of us do not have any good handle on it. Our users are old and non tech savvy, it is very annoying to explain this at least once a day to them.

Communication is Restricted indirectly

As mentioned above, Safari and Chrome are forcing Web Standard upon us and way to stop/alternative is very long.
Instagram does not allow business profiles unless you open an ads account with Facebook and spend money (Instagram puts you on shadow ban).
GMail API is restricted by Google, and access requires approval by Google after reviewing the process of how the app will use the Api. Here it is a problem for developers and customers, emails belong to customer and they are buying app from developer to manage email. Google should not sit as a Gatekeeper because that is not what customers have signed up for. Many customers aren't realizing this now.
Once we had Amazon complain about outgoing email, (due to some error, many bounce resulted due to extra character in email address), Amazon threatened to stop account. SES is a problem, we realized we are at mercy of Amazon. Bounce wasn't problem, they analyzed outgoing content and gave us some improvement tips on spam check. I didn't opt for them to read and do spam check. We immediately moved out of it.
The biggest problem is "Content Guidelines", it is impossible to setup an easy framework to moderate content. I bet you can easily report competitors content on social media to make them suffer.
Apple isn't allowing financial transactions in the app without you agreeing to pay 30% of your hard earn money.

So what can we do?

Us Multiple hosting providers along with cloud, and avoid cloud services such as SQS, SNS.
Create an abstract microservice service on top of cloud service in such a way that in case of outage/suspension you can easily migrate to an alternative service.
Avoid any cloud service except storage and pure compute, it is easy to move your VM from one service to even smaller hosting provider with bare metal servers.
It will take little longer to build basic services but "Parler" is a lesson for small business to avoid Amazon Web Services.

Software License

License of a purchased software is still more valuable than cloud service.
It is considered as an asset in your company's balance sheet and you are allowed to use it as long as you are alive on same type and quantity of hardware.
You can even install a software in a personal computer in your Garage.

Keep little distance from Large Social Media

Create your own blog
Publish content at multiple locations
Always gather readers back to your own website
Collect email addresses of your users (opt in) not automatic by telling them to subscribe.
Email communication is still relevant and should be made more important than gated community.

We need improvements in Email and we need to be free from Social Media.

JavaScript does not cache array.length

Akash Kava — Wed, 30 Sep 2020 15:20:47 +0000

Myth: `array.length` is cached by JavaScript Engine

I have seen many comments and posts saying that JavaScript VM caches array.length for optimization.

So following piece of code is not required...

for(var i=0,n = a.length;i<n;i++) {
    ...
}

And this one is automatically optimized by modern compilers.

for(var i=0;i<a.length;i++) {
    ...
}

Well this is a myth, compiler can optimize but only if the for loop does not call any other method and performs simple mathematical steps.

In above example,

function run(a, f) {

   for(var i = 0; i < a.length; i++) {
       f(a[i]);
   }

}

var a = [0,1,2,3];

run(a, function(n) {
   console.log(n);
   if (n == 2) {
      a.push(4);
      a.push(5);
   }
});

The output should be 0,1,2,3 if engine caches array.length, but if you notice, the output is 0,1,2,3,4,5.

This means that a.length is read before every comparison.

Optimization is expensive

Source level analysis of script is an expensive process, if JavaScript engine would spend time on detect complex logic to decide whether to cache or not, it would slow down startup time.

Why isn’t mainstream Linux available for mobile?

Akash Kava — Sat, 12 Sep 2020 03:22:08 +0000

I am tired of iOS and all restrictions. I like PC because we have choice to virtualize, use any OS and any product from any company.

Why hasn’t anyone invested in open OS that can be installed on any phone. Just like Linux.

Android is there but it is still in control of Google.

What is stopping people from creating free OS for any or at lest most recent mobile phones?

LLVM compiler tools are available for all processor types and are used to compile native mobile libraries.

Is there any project already doing this?

Why isn’t Linux community doing anything?

Pine64 looks interesting, but is it fork of Android? Can we fork it and create own private distro?

C# Pattern Matching Performance Overhead

Akash Kava — Thu, 10 Sep 2020 15:49:32 +0000

Pattern matching is great, makes life easier, but it comes with a cost. Most of the time the cost is negligible. But it is better to know when not to use it.

Lets assume following simple case,

Pattern Matching

    public abstract class Shape {
    }

    public class Circle: Shape {
        public double Radius;
    }

    public class Rectangle: Shape {
        public double Width;
        public double Height;
    }

We want to calculate area, by using pattern matching, so here is the code.

    public double Pattern(Shape shape) {
        switch(shape) {
            case Circle circle:
                return Math.PI * circle.Radius * circle.Radius;
            case Rectangle rectangle:
                return rectangle.Width * rectangle.Height;
        }
        throw new NotSupportedException();
    }

Now lets analyze JIT ASM generated for above code,

C.Pattern(Shape)
    L0000: push rsi
    L0001: sub rsp, 0x20
    L0005: vzeroupper
    L0008: mov rsi, rdx
    L000b: mov rdx, rsi
    L000e: mov rcx, 0x7ffb9945d250
    L0018: call 0x00007ffbef626620
    L001d: test rax, rax
    L0020: jne short L0049
    L0022: mov rdx, rsi
    L0025: mov rcx, 0x7ffb9945d3c0
    L002f: call 0x00007ffbef626620
    L0034: test rax, rax
    L0037: je short L0064
    L0039: vmovsd xmm0, [rax+8]
    L003e: vmulsd xmm0, xmm0, [rax+0x10]
    L0043: add rsp, 0x20
    L0047: pop rsi
    L0048: ret
    L0049: vmovsd xmm0, [rax+8]
    L004e: vmovaps xmm1, xmm0
    L0052: vmulsd xmm1, xmm1, [C.Pattern(Shape)]
    L005a: vmulsd xmm0, xmm0, xmm1
    L005e: add rsp, 0x20
    L0062: pop rsi
    L0063: ret
    L0064: mov rcx, 0x7ffb8fbddfd8
    L006e: call 0x00007ffbef6278f0
    L0073: mov rsi, rax
    L0076: mov rcx, rsi
    L0079: call System.NotSupportedException..ctor()
    L007e: mov rcx, rsi
    L0081: call 0x00007ffbef5eb3a0
    L0086: int3

Notice lines, L0018: call 0x00007ffbef626620 and L002f: call 0x00007ffbef626620, both calls are to check whether the object is of instance requested. I was also surprised to see this as pattern matching can also match an interface/base class. So it is not simple comparison. Every pattern matching case requires separate CALL instruction, which is a considerable overhead on CPU.

So, in simple words, the last case will always require all instance of CALL before hitting the case. You can certainly move the most used cases on the top to make life easier.

Plain old OOPS

    public abstract class Shape {
        public abstract double Area();
    }

    public class Circle: Shape {
        public double Radius;

        public override double Area()
        {
            return Math.PI * Radius * Radius;
        }
    }

    public class Rectangle: Shape {
        public double Width;
        public double Height;

        public override double Area() {
            return Width * Height;
        }
    }

Now lets call Area method and see what JIT ASM generates.

    public double Area(Shape shape) {
        return shape.Area();
    }

C.Area(Shape)
    L0000: mov rcx, rdx
    L0003: mov rax, [rdx]
    L0006: mov rax, [rax+0x40]
    L000a: mov rax, [rax+0x20]
    L000e: jmp rax

It is simplest single call, it loads and address and jumps to it and returns from the method. The speed is achieved by avoiding instance of checks.

Complete sample

https://sharplab.io/#v2:EYLgxg9gTgpgtADwGwBYA0AXEBDAzgWwB8ABAJgEYBYAKGIGYACMhgYQYG8aHunHiUGAWQAUASg5ceAX0ndZvBgBMIAV2AAbGAwCCsbMIDKAC2wAHLbhPnxnaj3tMA7A0tmYAOl0x9ogNzyZOx55eiVVDS0ABWwMDBgoADtDKwsUm3l7XAB3AEsMMCNhV2sJIIcHMDwtFhyoME0GMFr6mBAM8odiZ0EYo3dIgEkGACpG5s13ACVsRRyVXBGxuonp2fn/Mo7uStwtSZgwDGwEgHMG2EPjs9b2re4uhguj04mAdRzFDCNFp6uJgAkYDkTkYMBstoEtl8oBAsgwEjA4QA5CAYAwqUymaBxRQAUQQYBgpgwOQgST8AXkIUY2GAuAwUGwhyYpAYxjcpS2oVp9MZzOUagaXh84OkVM2oWYNWWrTZKU5HVCAoiDFWc1wG1uCggADd4lAPlplUK9GItbY7jwHj0vv0hqM1fNFo6NVrIWLNtSWaqDs9riA5RyLYrGMatO9PkZReUleEGoDgaDow4taFdfrDWFBVphWIFZaHhGvosEyCwW7KdQpEA=

Can performance of Pattern matching improved?

Not really, high level languages usually store too much type information in order to provide improved pattern matching. But underlying cost of every single comparison is costly.

In Processor, any type of processor, be it ARM, X64 or any, single numeric comparison is much caster than hierarchical or sequential types. Basically type matching is a multi step comparison.

This is also the reason V8 team decided to store Enum flag to detect type in JavaScript inbuilt type instead of pattern matching.

Branchless

OOPS will also make most of your code branchless, which makes CPU eagerly load next set of instruction to execute instead of missing branch cache and slowing the execution.

More about branchless coding

Live & Hot Reload/Code Push Xamarin.Forms Apps with Web Atoms

Akash Kava — Thu, 10 Sep 2020 09:52:00 +0000

History & Motivation

We have been using Xamarin.Forms for a couple of years, but business augmentation demanded more frequent app updates. We were assessing React native as an alternative, but the learning curve was very steep and our developers are considerably more familiar with MVVM approach up against the MVC method. Thus three years back, we ran a pilot by writing Xamarin Forms in JavaScript, it was relatively easy to fabricate and prototype swiftly. We now have three apps that are partly c# and partly JavaScript, as all-new screens are shipped through JSX

Native Limitations

Native code is fast, but for most business application needs, this performance vs the time need to build/deploy and maintain release cycle is extremely costly.
No side by side versioning, once the bug is found, fix is not available instantly.

Xamarin.Forms Limitations

Xamarin has an advantage of writing app in one language c# along with Powerful set of NuGet Libraries. 2 BUT, yes the big But is, the c# code is translated into native, so it requires same time to build and deploy the app.
Unfortunately, Android builds are still relatively slow.
Developing and debugging is painfully slow.

Deployment Limitations

iOS App approvals take longer, bugs do go out on production as we never have million dollar app budgets to fix all the bugs before rolling out.
There is no quick way to fix bug, a new upgrade reaches all your customers after couple of days. Most of the time, users don't have auto update enabled, they don't download new version, they are not connected to high speed internet and above all, all the major heavy updates in queue will delay your update.

React Native Limitations

React native was great alternative to bypass all slowness, but for C# developers, it has many roadblocks.
C# developers are more familiar with MVVM pattern, lack of MVVM pattern on React increases learning time.
Rewriting C# components and services on React will defy the purpose of making life easier.
Native integration in C++/Swift/Java is again problem for developers who have years of experience in C#.

Hot/Live reloading with Web Atoms

Language/Platform

You can use JavaScript + C#, JavaScript for your business pages/UI and C# only for high speed computation and other native integrations.
NuGet has probably million packages that you can easily use in Xamarin Forms. And all that can be used in JavaScript.
Web Atoms is designed by keeping MVVM in mind, so writing JSX with MVVM is extremely easy. For C# developers it only feels different in syntax, rest of things remain as it is.

Reuse

Since you can reuse all of your existing Xamarin.Forms code, time to shift to Web Atoms is really negligible.
You don't have to rewrite everything.
You can simply add nearly 20 to 30 lines of code to start using JSX instead of Xaml in Xamarin.Forms project.
You can reuse all your existing C# components in JavaScript.
You can create reusable components in JavaScript and use them in your existing components of C#.

Side by side versioning

Since web atoms javascript packages are deployed simply as nuget packages, you can easily create some strategy to upgrade/downgrade versions on your web server.
You can easily distribute private beta and offer different version to different customers to debug or quickly patch few bugs.

Advantages of Web Atoms over React Native and Native Script

Both, React native and Native script offers JavaScript , but native integration and high performing code needs to be written in Swift/Java/C++. With Web Atoms, you can easily write platform independent in C# and use it in Web Atoms.
You can continue to use your existing code/libraries written in C# easily without any hassle.
Debugging Xamarin apps is easy compared to native platforms.
Debugging JavaScript in Android is done via Chrome debugger and in iOS with Safari development tools.
JSX syntax in Web Atoms is exactly same as Xaml, you can perform all kinds of Bindings in JSX in exactly same fashion as in Xaml.

How does it work?

Your existing Xamarin Forms app is loaded natively in exactly same manner.
As soon as the app is launched, a new JavaScript bridge (V8 in Android and JavaScriptCore in iOS) is created.
Web Atoms module loader loads your scripts and provides integration between c# and your code.
Once the bridge is loaded, you can refresh the bridge inside the app via some code, or some trigger, without reloading entire app, the bridge loads new version of application JavaScript. This happens usually within 1-2 seconds.

Once built, only JavaScript is reloaded

You don't need to publish your app on app store unless you make any changes in the C# code.
You don't even need to close/restart the app to see new changes.
You can publish javascripts on the Wifi and you can also debug your app over wifi.
JavaScript reloading is little slow compared to native code, but for prototyping, for business applications, the time delay in JavaScript code is negligible.

When and What to Unit Test

Akash Kava — Mon, 13 Jul 2020 05:55:32 +0000

I have seen many posts about justifying why and why not to unit test, but most posts only talk about burden of writing unit tests, testing framework shortfalls and overhead of mocking in testing.

After writing and deciding not to write unit tests, I have finally compiled one and only one single reason why and what should be unit tested. How is not the question. If you think any testing framework is inadequate, you can simply create one.

So what should be unit tested?

Edge Cases

Answer is, "Edge Cases", yes, only the edge cases should at least be unit tested.

Early Age

Lets take a simple function as an example, we will use C# to demonstrate the reason, however same can be done in any language.


   int Add(int a, int b) {
      return a + b;
   }

Most of you will think that this function will never fail, well hold on, see what will happen when you do Add(int.MaxValue, int.MaxValue).

This is called an edge case.

If you run this code, https://dotnetfiddle.net/H3wmI6

You will see the answer given is -2.

Now lets assume that we wrote this simple method and which is used by 10 methods and all 10 methods are used by total of 100 another methods. So you now have 100s of dependent callers to this method.

Middle Age

At one point, somebody decides that function returning -2 is really not helpful, so they create a method VerifyAdd with following implementation.

   int VerifyAdd(int a, int b) {
       if( a == int.MaxValue || b == int.MaxValue) {
           throw new ArgumentException();
       }  
       return Add(a, b);
   }

And at some part of code we continue to use old Add and some part of code we write VerifyAdd.

Mature Age

When project is couple of months old and has entered into maturity, we decide that we should change Add method.

   int Add(int a, int b) {
       if (a == int.MaxValue || b == int.MaxValue) {
            return -1;
       }
       return a + b;
   }

Now this is an issue, because half of your logic will expect ArgumentException and half of them will expect -1 as return answer. Leading to inconsistency in the logic.

Though this example looks simple, but when code graph is complex, when classes are subclassed and implementations are overriden, inconsistency in code keeps on rising. Now some will come and argue that this is the reason functional programming is best, nope, it is not, same can happen in any language. No language and no framework can ever provide immunity against logical inconsistencies.

How to identify Edge cases?

All exceptions and errors are edge cases. So you must unit test every error, we have to make sure that the callers get correct error messages.
Edge cases are also evolved, as we have seen, introducing one change in logic, change introduce new edge case.

So only edge cases for Unit tests?

Nope, Edge cases are must, arithmetic and time delay related logic must also be unit tested.

Apart from error edge cases, we must consider logical edge cases

Integer/float overflow
Delay, timeout, any method should not indefinitely hang
Never eat errors, log them and throw again, Application level unit testing must catch all errors.

How to learn to write unit tests?

For early developers, it is difficult to understand how and when to write unit tests. Even I was against it and I never wrote in my early years thinking it was total waste of time to unit test 5 == Add(2,3), and it is.

To begin with, we should look at how large open source repositories are built and maintained. And look at the simple implementations and simple unit tests backing the logic.

Even if you don't contribute to any open source project, downloading them and browsing them for hours will give you many meaningful insights.

Introducing Xamarin.Forms Fiddle

Akash Kava — Wed, 08 Jul 2020 15:29:06 +0000

Xamarin.Forms app in JavaScript

With Web Atoms, you can create Xamarin.Forms apps in JavaScript. You can write JSX instead of Xaml and that gives you powerful multibinding and allows you to push code on production.

Side by side versioning
Divide large app in multiple javascript npm packages
No need to create multiple apps and integrate all of them
Debug JavaScript in Chrome using V8 Inspector protocol for Android
Debug JavaScript in Safari debugger for iOS

Download the App

Trying and playing with Xamarin.Forms in JavaScript is one step process, download the app.

Open Demo

Shapes

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

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

Master Detail

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.

List View

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

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

Form

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

Explore validation sample with simple form.

Tabbed Page

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

Explore tabbed pages.

Scan QR Code

Console Logging

You can see console of your device and you can log errors/warnings in the console in your code.

ViewModel Decorators in Web Atoms for Xamarin.Forms

Akash Kava — Sun, 14 Jun 2020 09:03:07 +0000

Rich View Model

Web Atoms provides feature rich View Model to write common logic with simple configuration.

Watch Decorator

Watching property is super easy with Web Atoms. You can simply create a readonly accessor and mark it is @Watch.

export default class EditorViewModel extends AtomViewModel {

    public model: CustomerModel = {
        firstName: "",
        lastName: ""
    };

    @Watch
    public get fullName() {
        const firstName = this.model.firstName;
        const lastName = this.model.lastName;
        return firstName + " " + lastName;
    }
}

Usage

    this.render(<WA.AtomForm>
        <WA.AtomField>
            <XF.Entry text={Bind.twoWays(() =>
                this.viewModel.model.firstName)}>
        </WA.AtomField>
        <WA.AtomField>
            <XF.Entry text={Bind.twoWays(() =>
                this.viewModel.model.lastName)}>
        </WA.AtomField>
        <WA.AtomField>
            <XF.Label text={Bind.oneWay(() => this.viewModel.fullName)}>
        </WA.AtomField>
    </WA.AtomForm>);

Validate Decorator

Validate is special type of watch, which gets activate only if validation was requested.

export default class SignupViewModel extends AtomViewModel {
    public model: CustomerModel = {
        firstName: "",
        lastName: "",
        emailAddress: ""
    };

    @Validate
    public get errorFirstName() {
        if (!this.model.firstName) {
            return "First name is required";
        }
        return "";
    }

    @Validate
    public get errorEmailAddress() {
        const email = this.model.emailAddress;
        if (!email) {
            return "Email is required"; 
        }
        if (!emailRegEx.test(email)) {
            return "Invalid email";
        }
        return "";
    }

    @Action({ validate: true })
    public async actionSignup() {
        // only when this was invoked
        // in UI, validation occurs
    }
}

export default class Signup extends AtomXFContentPage {

    public viewModel: SignupViewModel;

    public create() {

        this.viewModel = this.resolve(SignupViewModel);

        this.render(<WA.AtomForm>
            <WA.AtomField>
                <XF.Entry text={Bind.twoWays(() =>
                    this.viewModel.model.firstName)}>
            </WA.AtomField>
            <WA.AtomField>
                <XF.Entry text={Bind.twoWays(() =>
                    this.viewModel.model.emailAddress)}>
            </WA.AtomField>
            <WA.AtomField>
                <XF.Button
                    command={Bind.event(() => this.viewModel.actionSignup())}
                    text="Signup">
            </WA.AtomField>
        </WA.AtomForm>);
    }
}

Load Decorator

Load decorator makes loading of async data very easy. Let's assume that we want to load countries and then selected state. It reports exceptions and cancels previous
operation.

export default class SignupViewModel extends AtomViewModel {

    /** This gets called on initialization */
    @Load({ init: true })
    public async loadCountries() {
        this.countries = 
            await this.restService.getCountries();
        this.selectedCountry = this.countries
            .find((x) => x.value === "IN").value;
    }

    /** This gets called when `this.selectedCountry` changes */
    @Load({ watch: true /* watch */ })
    public async loadStates(ct: CancelToken) {
        const country = this.selectedCountry;
        // pass cancel token
        // to automatically cancel previous
        // incomplete request
        this.states = 
            await this.restService.getStates(country, ct);
    }

}

Debouncing


export default class SignupViewModel extends AtomViewModel {

    @Load({
        /** watch for changes */
        watch: true,
        /** wait as user might still be typing */
        watchDelayInMS: 500
    })
    public async loadCities(ct: CancelToken) {
        const search = this.search;

        /** cancellation of previous request is tracked here */
        this.cities = await
            this.restService.searchCities(search, ct);
    }

}

Action

@Action decorator can be applied on a method which will automatically display an alert if there was any error. And it will invoke validation before executing the method. Display an success alert after completion if configured. You can also configure confirm to request confirmation (e.g. for delete operations).

export default class SignupViewModel extends AtomViewModel {

    /** This decorator will handle validation, display error
     * and will display an alert for success
     */
    @Action({
        validate: true,
        success: "Signup successful",
        confirm: false,
    })
    public async signup() {
        ....
    }

}

    <XF.Button
        command={Bind.event((e) =>
            this.viewModel.signup())}
        text="Signup"
        />

DEV Community: Akash Kava

Positron-JS for DotNet Maui

Why?

Is HTML Fast?

Getting Started

Open Web URL

Access .NET API

Example - Get DeviceToken

Example - Open Url

Example - Create New Instance

Positron Context

AOT and Linking

Publishing

Positron Web View Repository

Positron-JS / positron-web-view

Positron JS WebView for MAUI

Positron Web View

Get Started

Publish

Access .NET Inside Browser

Introducing new JavaScript Engine YantraJS for DotNet

Managed JavaScript Runtime

Why did we build it?

License

Features

Roadmap

ECMAScript Conformance

Expression Compiler

Engine Types

How to use?

Simple Execution

Wrap CLR Object

Alternative to Razor View in ASP.NET Core

Difference between instanceOf Array and Array.isArray

Cross Context Object

Why?

Created with Object.create

Why?

Web Atoms for Xamarin Forms vs React Native

Xamarin Forms

React Native

Web Atoms

Native Component

JSX + JavaScript Support

Support for NuGet Packages

Support for NPM Packages

Live Reload in Production

Binding and MVVM Pattern

Dependency Injection

Reuse Existing C# Code

Side by Side versioning

Today it is Parler, Tomorrow it could be Us

Small business is Dying

Apple Google Amazon Facebook, all are watching US

Web Browser isn't free anymore

Communication is Restricted indirectly

So what can we do?

Software License

Keep little distance from Large Social Media

We need improvements in Email and we need to be free from Social Media.

JavaScript does not cache array.length

Myth: array.length is cached by JavaScript Engine

Optimization is expensive

Why isn’t mainstream Linux available for mobile?

C# Pattern Matching Performance Overhead

Pattern Matching

Plain old OOPS

Complete sample

Can performance of Pattern matching improved?

Branchless

Live & Hot Reload/Code Push Xamarin.Forms Apps with Web Atoms

History & Motivation

Native Limitations

Xamarin.Forms Limitations

Deployment Limitations

React Native Limitations

Hot/Live reloading with Web Atoms

Language/Platform

Reuse

Side by side versioning

Created with `Object.create`

Myth: `array.length` is cached by JavaScript Engine