DEV Community: Anurag Vohra

Recliner-JS: A local REST CouchDB in your browser

Anurag Vohra — Sat, 09 Mar 2024 13:49:39 +0000

Recliner-JS

A CouchDB like DB, which runs in your browser.
Access your saved attachments locally with REST API:

<img src=`/recliner/dbname/doc_id/attachment_name`>

GITHUB_LINK

Features

Uses same REST API like Couch DB.
Implements CouchDB replicator protocol for seem less replication with backend.
Can Lazy load Blobs(video media) from cloud.
Partial content and stream supported.
Uses IndexedDB as its backend DB and hence no storage restrictions.
Mango like queries for searching and replication.
Typescript based client to access REST API.

Usage

In your service worker add this:

import {Recliner} from 'recliner-js';
const recliner = new Recliner();//create instance
self.addEventListener("fetch",(e)=>{
    const url_path = Recliner.getPathFromUrl(e.request);
    //mounts recliner
    if(url_path.startsWith("/recliner")){
        e.respondWith(recliner.process(e.request));
    }else{
        // do whatever else
    }
});

Now you can access docs and attachments saved in your recliner DB via URL

<img src=`/recliner/dbname/doc_id/attachment_name`>

CRUD with DB

There are two ways to interact with DB:

Using regular fetch in your JS code using REST API similar to CouchDB*.

const getADoc = await fetch(`/recliner/dbname/docid`);
if(getADoc.status === 200){
    return await getADoc.json();//{_id,_rev,ok: true}
}

See complete list of Rest API

*Though many , but not all Couch REST API is supported. See Difference from CouchDB section.

Use the a client instead: UsageDAO

import {UsageDAO} from 'recliner-js';
//Create
await UsageDAO.postADoc(dbname,{name:"person1",age:30});
//Retrieve
const doc = await UsageDAO.readADoc(dbname,docid);
//Update
await UsageDAO.updateADoc(dbname,doc._id,{name:"person1",age:34});
//Delete 
await UsageDAO.deleteADoc(dbname,doc._id);

//query
const findResult = await UsageDOA.findByPagination({
    dbanme,
    selector:{
        age:{$lt: 40},
        income: {$within:[10000,20000]},
        loc: {$isinpolygon:[]}//has some GIS capability
    }
});

//Save Attachments
await UsageDAO.addAttachmentsToDocID(dbname,doc._id,{
    "my_doc.pdf":DOC_BLOB,
    "my_video.webm":VIDEO_BLOB  
});

//Save attach wth a cloud URl.
//this way when such docs get replicated the Attachments are not sent. As they can be downloaded at end system using the cloud URL
await UsageDAO.addAnAttachmentToExistingDoc(dbname,doc,attachment_name,blob,new_edits,cloud_url,content_type);
//CRUD with attachments on DOC is available

//Replication: say fetch last 10 post
await UsageDAO.replicate({
    selector:{
        post_id
        type:"post",
        time:{$lt: now}
    },
    limit: 10,
    source:{
        url:"/recliner/my_db"
    },
    target:{
        url: "/proxy/couchdb/dbname",
        headers:{
            token:"some_token"
        }
    }
});

Partial content and Media streaming

Save the document with a cloud_url in a _attachments property.

await fetch("/recliner/dbname/docid",{
    method:"PUT",
    body:{
        _id:docid
        name:"person1",
        _attachments:{
            "my_video.webm":{
                cloud_url:"some_valid_cloud_url_which_supports_partial_content",
            }
        }
    }
});

Now this is can be streamed using:

<video src="/recliner/dbname/docid/my_video.webm">

The video player will automatically stream the video via recliner.
Using the cloud_url, the docs will be partially downloaded and saved for offline use, and then streamed to video element. So next time when user stream the same video, its pulled out from the local cache.

However for all this to work, you need to configure recliner for what all mime type you want to support for streaming.

import {Recliner} from 'recliner-js';

const recliner = new Recliner(24,{
    "video/webm":1000_000,//1MB of partial content size for streaming
    "audio/mp3":1000_00//0.1MB of partial content size for streaming
});

When configured this way, then whenever an attachments of type webm and mp3 are requested, they are automatically streamed.
If partial content of a doc is not present locally, than using the cloud_url its partial content is first pulled from cloud, saved in indexedDB and then streamed to the corresponding requesting GUI components like : video and audio tags. Next time same partial content will be streamed from local DB, instead of fetching it from cloud_url.

REST API supported

"/recliner/:db";
"/recliner/:db/_design/:ddoc";
"/recliner/:db/_find";
"/recliner/:db/_index";
"/recliner/_replicate";
"/recliner/:db/_changes";
"/recliner/:db/_bulk_get";
"/recliner/:db/_revs_diff";
"/recliner/:db/_local/:docid";
"/recliner/:db/:docid";
"/recliner/:db/:docid/:attachment";
"/recliner/:db/_db_design";
"/recliner/:db/_run_update_function";
"/recliner/_delete_recliner";

Gotchas

For a multientry search the field name muts end with _m
Supported query operators: $lt,$lte,$eq,$ne,$gte,$gt,$exists,$within,$nin,$regex,$in,$isinpolygon,$isnotinpolygon,$nwithin

Difference from CouchDB

DB level design docs, saved via UsageDAO.putADBDesign, can be used to configure various function at DB level :

export interface DBDesignDoc{
    //name of the DB
    for_db:string;
    //before insertion docs are validated using this 
    doc_validation_function?:string;//this is stringified JS function

    //used for map reduce
    map_functions?: Record<string,string>;
    reduce_functions?:Record<string,string>;

    //can be used to mass modify docs using a selector
    update_functions?:Record<string,string>;

    /**
     * Used during remote to local replication using view query as source. [one can pass viewQueryUrl to replication info, to start view based replication]
     * This functions are used to filter view result before replicating them to local DB.
     */
    view_result_filter_functions?:Record<string,string>;
}

Views are not supported, however Indexes, Map and Reduce is still supported using UsageDAO.postQueryToDBDesign<D>(dbname:string, query:MapReduceQuery).
Design docs are not replicated by default when doing remote to local or local to remote replication. However for local to local replication design docs are copied. By local means database present in the browser. By remote means the one located and accessed via HTTPS on DB server(or via a proxy).
_local attribute can be added on doc. They remain solely on local machine, and is removed when are replicated. So some values you wanted to keep in doc, but don;t want to send to server can be saved here. CouchDB Local Docs is supported, which are never replicated.

Though the most important API, to deal with docs and attachments and Database is implemented. And many which deemed insignificant where dropped.

Running the Demo

Type this commands in order

npm run i install dev dependencies
npm run build builds for typescript system
npm run predemo adds ".js" extension to build for demo purpose.
npm run demo : open http://localhost:8000/demo/index.html to view the demo

bloc-them : JS UI framework, learn it in 15 minutes

Anurag Vohra — Mon, 31 Jul 2023 10:12:18 +0000

The simplest, but mighty reactive UI framework, any JS developer can learn in less than 15 minutes!

Tutorial

The core theme of this framework is "Separation of concerns".
Its provides JS classes to separately encapsulate Business logic and UI code.

Lets start with the code:

<!--Custom web component we created in below our script!-->
<counter-widget></counter-widget>
<script type="module">
    import {Bloc, ListenerWidget,html, render } from "./index.js";

    class CounterBloc extends Bloc{
        constructor(){
            super(0);
        }
        increment(){
            this.emit(this.state+1);
        }
        decrement(){
            this.emit(this.state-1);
        }
    }

    class CounterWidget extends ListenerWidget{
        constructor(){
            super({
                blocName:"CounterBloc",
                hostedBlocs:{
                    CounterBloc: new CounterBloc()
                }
            });
        }

        build(state){
            return html`
                <div>
                    <div>
                        <button @click=${()=>this.bloc().increment()}>increment</button>
                        <button @click=${()=>this.bloc().decrement()}>decrement</button>
                    </div>
                    <div>Result: ${state}</div>
                </div>`;
        }
    }
    //custom web component defined here
    customElements.define("counter-widget",CounterWidget);
</script>

What the above code does:

Business Logic is encapsulated in Bloc class (Business Logic Components) and the UI code logic in ListenerWidget.

CounterBloc contains all your business logic (manges state of count).
CounterWidget contains all the UI code.

After configuring, the ListenerWidget, it starts listening for changes in state from its subscribed Bloc.
As soon as a bloc emit a new state, the listener widget will reactively update itself with new values.

CounterBloc

/**
 * Business logic must be encapsulated in Bloc class
*/
 class CounterBloc extends Bloc{
    constructor(){
        //initial state of the Bloc
        super(0);
    }
    increment(){
        //emit function 
        //provided in Bloc class 
        //to emit new state
        this.emit(this.state+1);
    }
    decrement(){
        //emit new state
        this.emit(this.state-1);
    }
}

CounterWidget

/**
 * ListenerWidget listens for state changes from blocs
 * In this case we have provided the blocName as `CounterBloc`
 */
class CounterWidget extends ListenerWidget{
        constructor(){
            super({
                blocName:"CounterBloc",//listen to this bloc
                hostedBlocs:{ //Listener UI can host different blocs for other nested UIs
                    CounterBloc: new CounterBloc()
                }
            });
        }

        build(state){
            //`html` is tagged template literal which helps in converting the code into HTML dom Nodes
            //@click is used to attach event listener to a particular node.
            //${state} can be used to get values 
            return html`
                <div>
                    <div>
                        <button @click=${()=>this.bloc().increment()}>increment</button>
                        <button @click=${()=>this.bloc().decrement()}>decrement</button>
                    </div>
                    <div>Result: ${state}</div>
                </div>`;
        }
    }

Registering as web component
customElements.define("counter-widget",CounterWidget);

This line register CounterWidget class as a custome web component. So that we can use the <counter-widget> whereever we need this functionality.

whats that `html`

html is a tagged template.
Its actually plain old Javascript!, and not JSX. It helps in converting template strings into DOM Node.

No JSX , do it means it re-render entire nodes.

It do not uses virtual dom, but still it only modify those portion of UI nodes, which have been updated!!!
Its comparable to virtual DOM, though using plain old vanilla javascript.

More about what can go inside `html`

You can add any valid HTML code inside html tagged template string.
You can add event listeners using @ prefix: For example @touchmove to listen to touchmove event.
You can add custom properties to a component using .: For example <my-app .config=${runtimeConfig}>, and whenever the runtimeConfig changes , it will automatically change the properties on my-app.
You can also add attributes as such <div style=${"color:white;display:"+{true?"block":"none"}}>
Also can add and aut remove optional attributes using ?: For example <div ?optional_att=${ifTrueThenShow}>.

How are blocs found

A listener widget first searches for the bloc its hostedblocs properties, if its not found than it looks for it in its parentNode , if not found there too, than it goes further up to grandParent nodes, until it finds the Bloc its listening too.
And once its finds it , it subscribes to that bloc. So that whenever new state is published , the listener widget will automtically update itself to the new state.

And thats it!!!

THE END

See how this has been used to create complex UI web component library : use-them

Proposed a new syntax await[timeoutInMs] to TC39 forum: Please review and comment

Anurag Vohra — Thu, 14 Oct 2021 10:20:59 +0000

Detailed problem description and solution

We all are aware with usage of await of a promise: it basically commands code to wait for a promise to resolve or reject..... but wait until upto when? Indefinitely actually!
As of now any asynchronous promise based code's eventual destiny is at mercy of the asynchronous source.

The asyncronous source has full power to keep all resource on stack of an async process engaged on RAM, and developer seems to have no control on it, as async source can decide when should it resolve (or never resolve) a promise, there by engaging everything on RAM.

Consider this code:

let someReallyBigItemOnRAM = getSomeBulkyValue();
let res = await someReallyTimeConsumingAsyncFunction(someReallyBigItemOnRAM);

Now in this someReallyTimeConsumingAsyncFunction can take really long time to return or say never return and keep someReallyBigItemOnRAM on RAM engaged on RAM forever!

To overcome this problem, a JS developer must have contol over await. A new code will look something like this:

let someReallyBigItemOnRAM = getSomeBulkyValue();
try{
let res = await[1500] someReallyTimeConsumingAsyncFunction(someReallyBigItemOnRAM);
}catch(e){
  //try catch is used as await[timeInMs] can cause a timeoutError, which needs to be caught
  console.error(e);
}

Such an await will await for at most 1500 ms, else it will generate an timeout error.
NOTE: It is assured that if used without timeout the await will exactly behave as it has always has behaved, so no old code is ever going to fail due to this new enhancement. User will still be able to use await without timeout.

Now one proposition that comes to mind is usage of Promise.race to simulate what is intended here:

let timeout = (time)=>new Promise(res=>setTimeout(res,time));
let someReallyBigItemOnRAM = getSomeBulkyValue();
let res = Promise.race([timeout(1500),someReallyTimeConsumingAsyncFunction(someReallyBigItemOnRAM)]);

But Promise.race has a flaw which do not suffice the requirement.
It will though ignore the value returned by someReallyTimeConsumingAsyncFunction function, if its not finished before timeout, but it do not interrupts its execution. Indeed your code will never exit and neither the someReallyBigItemOnRAM will be released until the promise of someReallyTimeConsumingAsyncFunction is resolved. Your virtually have no control on someReallyBigItemOnRAM now. It is at mercy of async source when they want to release it!

Async for await loops

Consider this code:

for await(let s of anAsyncGeneratorOrStream){
//do some thing here
}
//once loop finish do shomething after wards

Again the anAsyncGeneratorOrStream has full power to keep this loop running for ever with developer having no control. As the source is asynchronous, it can send data at interva of its own will, and can take forever to complete if it wants.
However if we have an await[timeInMs] syntax available as well with regular await:

try{
  for await[3000](let s of anAsyncGeneratorOrStream){
  //do some thing here
  }
}catch(e){
//catch time out error if above code throws it
}
//once loop finish do shomething after wards

We can be assured that we will get out of such a loop by at most 3000 milliseconds.
A much better control in hands of a developer.

Again there are codes to simulate this kind of timeout loops using Promise.race, but as like before Promise.race will ignore the value returned by LongRunning async code but will not stop it from holding RAM and values on stack until async promise it had is finished, even though we intended to ignore such timed out values.

Why is it required/matter ?

Better control on developer end, rather than at mercy of asynchronouse function.
Can give much more better understanding of how long can a particular line can at most take and can help pin point bottleneck in the code.
Is very simple to implement, as the code simply generate Timeout error. try/catch and async/await are part of JS. An await[timeInMs] is possible source of a timeout Error, and hence compiler can pre warn user about potential timeout points in the code.

What are the fears, and they indeed are not to worry

Argument: A code can't be made to break/interrupted in between, it can cause potential resource leaks. That is some resource which were supposed to clean up but were interrupted by timeout error, will be in leak stage.
Consider this problem (Problem 1):

async function doLongRunningTask() {
  const connection = await getConnectionFromPool()
  const { error, resource } = await connection.fetchResource()
  connection.release()

  if (error) throw error
  return resource
}

If such a code is interrupted before a call to connection.release() is made, then it will evetually cause leak.

await[3000] doLongRunningTask();//its feared that this new syntax can cause leaks inside long running task, as if it takes too long it will raise an error and will not get time to call connection.release()

But it should be noted that developer has deliberatly written await[timeInMs] , and user knows that it will cause an error to be raised.
When something is deliberate, all repercussions, are not unexpected, they are intended outcomes.

User can create such deliberate problem, by writing a code as such to the same problem without using await[timeInMs]:
(example 1)

//deliberate attempt to mess up some one's api code:
let t = getConnectionFromPool;
getConnectionFromPool = ()=>setTimeout(a=>throw "error",100); return t();

async function doLongRunningTask() {
  const connection = await getConnectionFromPool()
  const { error, resource } = await connection.fetchResource()
  connection.release()

  if (error) throw error
  return resource
}

Both will have same effect and , are done deliberately, and hence user knows what is about to come.
An api that intend to do a must have clean up , would have rather written code as such.

async function doLongRunningTask() {
let connection;  
try{
 //now any where any exception occurs, or an interrupt exception is thrown, or time out error is throw in middle, all clean up will still take place.
  }catch(e){
     if(connection) connection.release();
  }
}

They have written the code as discussed in previous example (Problem 1), as may be thats what they wanted, as thats what the code does which they have written! (As it allows people to mess it up anyway even if await[timeOutInMs] is not there in place, as explianed in example 1).

This new syntax indeed gives a better control to developer to mandate him to wrap such a code with try catch:

try{
await[3000] doLongRunningTask();//a try catch as this line can possible throw timeout error or any other error within from function even without timeout
}catch(e){
//you actually get a chance to clean up manually if something goes wrong.
}

Context

I was desining a consensus algorithm, where each particpant needs to send their response via websocket. As the response from each of the particpant can come anychrnously, the framework I use for websocketing provide this via asynchronous stream, which is then dealt by me using for await ...of loop.

for await(let data of asyncStreamFromChannelOfConsensusResponse){
//collect thier response
}
//do something after response are recived.

Now this problem can't be left at the mercy of consensus participant, if one never sends any response, the code will run forever.
So a need for such an await with timeout aroused.

Its pretty simple, its very clear what it intends to do: await for x amount of timeat most === await[x] somePromise.
People have alwasy wanted cntrol on cancelling a promise (which they don't create) and this is one such way.

I hope that other people find it usefull and a good feature to have in lovely Javascript!

Comments are welcomed

Please raise issues or support with this new syntax.

Cheers!

Proposal in TC39 forum: https://es.discourse.group/t/timeout-for-an-async-loop-if-loop-do-not-finishes-before-timeout-it-will-break-anyway/1021
Here is the proposal:
https://github.com/anuragvohraec/proposal-es-await-timeout

Ok so the final verdict after discussion on TC39 Forum, on this issue is:
A better generalized syntax like this is already under propsal.

let someValue = await[cancelToken] getSomeValueFromPromise();

Using cancel token to solve the timeout problem:

let someValue = await[timeoutFunc(3000)] getSomeValueFromPromise();

Cancel token provides a more generalized approach for cancelling a promise.

let someValue = await[createCustomCancelToken(someArgs)] getSomeValueFromPromise();

All this is under proposal and review so far, lets see if it is promoted futher in the JS syntax proposal lifecycle.

Why single-threaded non blocking javascript out performs better than MultiThreaded systems?

Anurag Vohra — Thu, 14 Oct 2021 00:05:59 +0000

Any starter node.js enthusiastic would at least one time ponder, how can a single thread system out perform better than a MultiThreaded system.

And specially many people from multithreaded pardigm, who are evaluating/understading node.js, would rather find it hard to understand : why Node.js(or any single threaded non blocking JS system) is acclaimed better than multi-threaded system (At least for serving web-traffic!)?

Node.JS is not faster (doesnot means its slower either), but rather highly efficient in handling a single thread, as compared to a blocking multi-threaded system handling its single thread!

I have made diagrams to explain this statement with analogies.

A multi-threaded blocking system is not capable of utilizing its threads power to its full potential, as a thread is blocked until it evaluates each line of code.

Now offcourse one can build a non blockig system on top of a blocking multi-threaded system (thats what Node.js is under the hood), but its very complex. And you have to do it ever where you need non blocking code in your application or program.

Javascript ecosystem (like nodejs) provide this out of the box as its syntax. The JS language sytanx provide all this feature where ever needed. Morever as its part of its syntax, the reader of the code immeditetly knows that where code is blocking and where its non-blocking.

The blocking part of multithreaded-blocking system makes it less efficient. The thread which is blocked cannot be used for anything else, while its waiting for response.

While a non-blocking single threaded system makes best use of its single thread system.

And hence node.js if used properly can out perform many multi-threaded systems.

Introduction to lit-html.js

Anurag Vohra — Mon, 10 May 2021 03:16:12 +0000

lit-html is a templating library.

What do it means to be a templating library?

Templating Library helps you create DOM nodes/element at runtime.

If you have to create a DOM node tree like this at run time:

<body>
    <!--START: create this at run time and append to body-->
    <div id="myid1">
        <div style="width:50px;height:50px:background-color:red;">
        </div>
    </div>
    <!--END-->
</body>

Ordinarily without any templating library, you would have written a JS code something like this(not boasting to be an accurate code):

let div1 = document.createElement("div");
div1.id = "myid1";

div1.addEventListener("click",()=>{
alert("hello");
});

let div2 = document.createElement("div");
div2.style.width="50px";
div2.style.height="50px";
div2.style.backgroundColor="red";

div1.appendChild(div2);
body.appendChild(div1);

Too verbose and impractical for creating deeply nested node trees.

lit-html helps your create this JS code like this:

let mytemplate = html`
<div id="myid1"  @click=${()=>alert("hello")}>
    <div style="width:50px;height:50px:backgroundcolor:red;">
    </div>
</div>
`;
render(mytemplate,document.body);

This code looks almost similar to the the Node tree we intended to create. Infact we have added an event listener too on the DOM.

Lets break down this code and understand whats happening.

html `...` : this is a JS template string.
Many of the JS user is accustomed to template string like this `Some text ${some_var}`, but the specification of template string also allows to add tags before this template strings tag`Some text ${some_var}` . Read the tagged template JS specification here at mozilla docs.
So lit-html lib has created this html tags to help you convert your template string into DOM node tree.
@click=${()=>alert("hello")} this helps you add event listeners to your DOM tree, at run time. Isn't it awesome. user of other libraries might be accustomed to similar syntax provided by there own libraries.
render function call. It has two arguments, one is the template and other is the place where this node tree created will be appended at run time.

Tutorial

There is no better tutorial for lit-html, than the (official documentation](https://lit-html.polymer-project.org/guide/getting-started). It will be hardly 1-2 hrs read and you be ready to use lit-html in your projects.

Breaking up with Flutter, getting along with PWA

Anurag Vohra — Fri, 07 May 2021 01:37:06 +0000

Yeah! I had enough of flutter. I will like to keep it short.

7 problems I had with Flutter:

No separation of style, coding and layout. An infinite depth widget tree for creating a simple animated button. The code looks ugly as hell, the bigger the project gets the uglier and difficult it becomes to manage.
Its not cross platform in true sense, once you dwelve into the world of plugin writings. You will often be in position wher you have to write code in swift (For IOS) and C/C++/Kotlin for android. So how can it be called cross platform, when some one else does have to write a code for both platform!
App Size is too big. You use 3 Plugins and your project become bigger than any app on the planet!
Unecessary Programming Context Switching : Front end code in Dart, Back end code in Javascript.
Requires App store to publish app: Publishing through some kind of App store! We all know their monopoly and dictatorial regimes!
The development time of any decent app will be too big!
Requires Heavy machine to do the job: One requires pretty good machine to do the job. A Flutter full stack developer would have to open follwing big apps to work.

IDE: Say Android studio (Very big in itself) and if you are creating a modular project, one has to open two to four instance of Android studio.
Chrome/Firefox: You would have to google code many times, and that too many tabs!
Emulator. Its pretty Big app in itself.
IDE for back end code. Which again if is modular (which every big project must be), then you need to open two to three instance of such IDE.
Docker with local instance of DB/ Micro services.

I have a 8 GB Linux machine with 16 GB swap memory and it made me cry, as apart from writing codes in DART, Javascript (for backend), DB programming , I would have to manually manage memory on my system.

So why PWA: Progressive Web App.

Its a new breed of websites , which user can install on IOS, Android and Desktop, just if they were some mobile apps. Yeah install, just like regular mobile apps user can install them on their mobile phone. By installing it means one can cache any big file at user machine, and it wont be fetched from server again and again! (Just as your regaulr mobile app gets installed once).

As they are plain simple websites, one can create them with just HTML, CSS, and Javascript.

There are tons of better articles which will give you what PWA are and their capabilities. I will like to rather focus on how PWA solve above problems.

In the rest of the article, I assume you already know what PWA are.

Solutions to above problems solved by PWA:

No separation of style , coding and layout.
I think any one who knows HTML,CSS and JS knows how it solves this problem pretty good.
Not cross platform in true sense.
Well web works every where*. If something is web standard, its gauranteed to work on all system which adheres to it.
Yeah I will be fair here I do need to acutally write code sometimes to target specific machine, but its a one time job. I wanted to to access contacts on user machine, and PWA only offers this kind of access on newer Systems, to target old system, I wrapped my PWA in pure Android JAVA code!
App Size is too big.
A decent flutter app which uses few plugins, will end up of being pretty Big!
A same flutter app which was half completed was of 30 MB in size, and the one developed in PWA was mere 88 KB!
I started this app with Flutter ended up with 30 MB code during mid development, then I tried it on PWA! and developed whole app in JS, HTML and CSS, latter at last moment came to know I cannot read contacts on old mobile phones !
I googles some shell projects which can give me access to Contacts and expose javascript functions to my webviews. I created such shells, and such shell only were of 88 KB size. If I had to design any app in future which requires contacts, I can reuse this shells.
Programming Context Switching.
Front in dart and back end in javascript.
My story on this goes like this. I had been a JAVA developer for almost a decade , and then I switched to javascript as I hated Context switching and simplicity of Javascript and NPM at that time.
Now when I swicthed to flutter I am again to the same problem I solved many years back: Context switching!
Well now on PWA all I have to code is in javascript every where. I have chosen my database too which uses Javascript for most of its functioning (CouchDB).
All I need to focus is on one langauge and I am good to go.
Requires App store to publish app
Well PWA can be published on App store and can be hosted on your own servers too, from where user can install them fearlessly!
The development time of any decent app will be too big.
Coding in HTML/CSS/JS is way faster then coding widgets tree with the depths of hell.
Requires Heavy machine to do the job
All I need is one IDE with integerated browser. Say VSCODE to work on my back end / front end , runnig dockers and no eumlators required.

Use C/C++ code in DENO using WASM: In VSCODE, using WASI SDK

Anurag Vohra — Tue, 06 Apr 2021 12:14:43 +0000

Hi Everyone,

In my previous post : Use C/C++ code in DENO using WASM: In VSCODE, using Emscripten, I used Emscripten to convert C/C++ code to WASM and then use it in Deno. Here we will use WASI-SDK.

About WASI

What: WASI: Web assembly system interface.
Why: If your C/C++ code needs to make system call (say File IO, Socket, Clocks, Random numbers). Than you need WASI.
How: Follow the instructions below.

Prerequisite

VSCODE: IDE
Install WebAssembly plugin in VSCODE:
WASI SDK Download the latest tar.gz file and extract to directory of your choice, we will call it WASI_SDK_HOME.
Deno
C/C++ source code

C++ Example

GIT REPO for all files

Step1: Your C++ Source code.

I have named my C++ code file as app.cpp \
Its a Simple C++ code to create a copy of file based on the run time arguments passed.

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <fcntl.h>
#include <errno.h>
#include <iostream>

int main(int argc, char **argv) {
    ssize_t n, m;
    char buf[BUFSIZ];

    if (argc != 3) {
        fprintf(stderr, "usage: %s <from> <to>\n", argv[0]);
        exit(1);
    }

    int in = open(argv[1], O_RDONLY);
    if (in < 0) {
        fprintf(stderr, "error opening input %s: %s\n", arhttps://github.com/anuragvohraec/EXAMPLE_WASI_CPP_DENOhttps://github.com/anuragvohraec/EXAMPLE_WASI_CPP_DENOgv[1], strerror(errno));
        exit(1);
    }

    int out = open(argv[2], O_WRONLY | O_CREAT, 0660);
    if (out < 0) {
        fprintf(stderr, "error opening output %s: %s\n", argv[2], strerror(errno));
        exit(1);
    }

    while ((n = read(in, buf, BUFSIZ)) > 0) {
        char *ptr = buf;
        while (n > 0) {
            m = write(out, ptr, (size_t)n);
            if (m < 0) {
                fprintf(stderr, "write error: %s\n", strerror(errno));
                exit(1);
            }
            n -= m;
            ptr += m;
        }
    }

    if (n < 0) {
        fprintf(stderr, "read error: %s\n", strerror(errno));
        exit(1);
    }

    std::cout << "Done" << std::endl;

    return EXIT_SUCCESS;
}

Step2: Compile it to wasm using WASI SDK

Lets say you have extracted your WASI SDK tar.gz in ~/wasm-sdk-vers folder we will call it WASI_SDK_HOME in the code below.
You can compile the C++ code to wasm using below command.

`${WASI_SDK_HOME}/bin/clang++ app.cpp --sysroot=${WASI_SDK_HOME}/share/wasi-sysroot -o app.wasm`

This will output app.wasm file.

Step3: Use wasm in deno

Deno file name is test_app.ts

//this standard modoule is required to run wasi code: it provide system calls needed by WASI
import Context from "https://deno.land/std@0.92.0/wasi/snapshot_preview1.ts";

//Create context

const context = new Context({
  args: Deno.args, //args will be the run time argument passed to WASM code
  env: Deno.env.toObject(), //Any environment varibale you wanted to pass
  preopens: {"./":"./"} //Directories which will be hosted in WASI Sandbox to be used by WASM. The string keys of are treated as directories within the sandboxed filesystem, the values are the real paths to those directories on the host machine.
});

const binary = await Deno.readFile("app.wasm");
const module = await WebAssembly.compile(binary);
const instance = await WebAssembly.instantiate(module, {
  "wasi_snapshot_preview1": context.exports,
});

context.start(instance);

Step4: Run the code:

deno --unstable run -A test_app.ts  app.wasm  README.md cr.md

I have readme.md file which I want to copy and create cr.md file.

It should output:

Done
#And create a cr.md file in the directory

Use C/C++ code in DENO using WASM: In VSCODE, using Emscripten

Anurag Vohra — Tue, 06 Apr 2021 04:32:41 +0000

Hi Everyone,

If you have faced issues like me in finding concise tutorial on how to run C/C++ code in Deno using WASM, this is a to the point tutorial for you.

Prerequisites

VSCODE: IDE
Install WebAssembly plugin in VSCODE:
EMSCRIPTEN Just follow each steps to install this tool.
Deno
C/C++ source code.

C Example

Step1: C Source code

We will use fairly simple code to demonstrate the concept.
We have a add.c file which exposes a single function add from it using emscriten macros.

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int x, int y) {
  return x + y;
}

Consider this as a facade for your C library.

Macro EMSCRIPTEN_KEEPALIVE from emscripten.h is required for all function you want to expose to be used in your Deno code.

Step2: Create WASM file

Run emscripten emcc tool on your C file.
${EMSDK_HOME}/upstream/emscripten/emcc add.c -O3 --no-entry -o add.wasm
Explanation for the above command:

-O3 WIll Optimize your WASM to best possible way. Used for production release.
--no-entry flag is required as our code has no main function.
-o will create an output file.

This will create a add.wasm file.

Step3: Use WASM in DENO

I created a file usewasm.ts:

//loads wasm file
export const f = await Deno.open("./add.wasm")
const buf = await Deno.readAll(f);

//load it as module
const wasmModule = new WebAssembly.Module(buf);
const wasmInstance = new WebAssembly.Instance(wasmModule);

//export the C functions in DENO!
const add = wasmInstance.exports.add as CallableFunction;
const subtract = wasmInstance.exports.subtract as CallableFunction;

//Use C functions
console.log(add(4,2));

Step4: Run the Deno code

deno run --allow-read usewasm.ts

--allow-read : as our code will read wasm file

It should out put 6.

C++ Example

GIT for C++ code

Step1: C++ Source code

We will use fairly simple code to demonstrate the concept.
We have a mylib.cpp file which exposes a two functions add and subtract from it using emscriten macros.

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int x, int y) {
  return x + y;
}

EMSCRIPTEN_KEEPALIVE
int subtract(int x, int y){
  return x-y;
}

Consider this as a facade for your C++ library.

Macro EMSCRIPTEN_KEEPALIVE from emscripten.h is required for all function you want to expose to be used in your Deno code.

Step2: Create WASM file

Run emscripten emcc tool on your C++ file.
${EMSDK_HOME}/upstream/emscripten/emcc mylib.c++ -O3 --no-entry -o mylib.wasm
Explanation for the above command:

-O3 WIll Optimize your WASM to best possible way. Used for production release.
--no-entry flag is required as our code has no main function.
-o will create an output file.

This will create a mylib.wasm file.

Step3: View generated wasm file.

If you have install the webassembly plugin mentioned in the pre-requisite, then you should see semthing like this after clicking Do you want to open it anyway?.

Pay attention to _Z3addii and _Z8subtractii , this will be the name of the functions exported by your wasm. (Strange but in C++, unlike in C this exta prefix and suffix are added to your function name).

Step4: Use WASM in DENO

I created a file usewasm.ts:

//loads wasm file
export const f = await Deno.open("./mylib.wasm");
const buf = await Deno.readAll(f);

//load it as module
const wasmModule = new WebAssembly.Module(buf);
const wasmInstance = new WebAssembly.Instance(wasmModule);

//export the C++ functions in DENO!: The function name can be seen in WASM file using VSCODE plugin
const add = wasmInstance.exports._Z3addii as CallableFunction;
const subtract = wasmInstance.exports._Z8subtractii as CallableFunction;
CallableFunction;

//Use C functions
console.log(add(4,2));
console.log(subtract(6,2));

Step5: Run the Deno code

deno run --allow-read usewasm.ts

--allow-read : as our code will read wasm file

It should out put:

6
4

...
I have another reference sheet using WASI, instead of EMSCRIPTEN:

Use C/C++ code in DENO using WASM: In VSCODE, using WASI SDK

About WASI
What: WASI: Web assembly system interface.
Why: If your C/C++ code needs to make system call (say File IO, Socket, Clocks, Random numbers). Than you need WASI.

DEV Community: Anurag Vohra

Recliner-JS: A local REST CouchDB in your browser

Recliner-JS

Features

Usage

CRUD with DB

Partial content and Media streaming

REST API supported

Gotchas

Difference from CouchDB

Running the Demo

bloc-them : JS UI framework, learn it in 15 minutes

Tutorial

What the above code does:

whats that html

No JSX , do it means it re-render entire nodes.

More about what can go inside html

How are blocs found

THE END

Proposed a new syntax await[timeoutInMs] to TC39 forum: Please review and comment

Detailed problem description and solution

Async for await loops

Why is it required/matter ?

What are the fears, and they indeed are not to worry

Context

Comments are welcomed

Cheers!

Why single-threaded non blocking javascript out performs better than MultiThreaded systems?

Introduction to lit-html.js

What do it means to be a templating library?

Tutorial

Breaking up with Flutter, getting along with PWA

7 problems I had with Flutter:

Use C/C++ code in DENO using WASM: In VSCODE, using WASI SDK

About WASI

Prerequisite

C++ Example

Step1: Your C++ Source code.

Step2: Compile it to wasm using WASI SDK

Step3: Use wasm in deno

Step4: Run the code:

Use C/C++ code in DENO using WASM: In VSCODE, using Emscripten

Prerequisites

C Example

Step1: C Source code

Step2: Create WASM file

Step3: Use WASM in DENO

Step4: Run the Deno code

C++ Example

Step1: C++ Source code

Step2: Create WASM file

Step3: View generated wasm file.

Step4: Use WASM in DENO

Step5: Run the Deno code

Use C/C++ code in DENO using WASM: In VSCODE, using WASI SDK

whats that `html`

More about what can go inside `html`