JavaScript notes

General

• use FileReader API to handle files locally to client, i.e. without uploading to the server
• atob() decodes from Base64; btoa() encodes in Base64
• toFixed([Number]) formats floating point numbers e.g. 3.14.toFixed(3) => 3.140
• ES6 introduces sync iteration: for (const l of readLines()); ES2017 introduces async iteration: for await (const l of readLines())
• trailing commas are legal from ES2016, i.e.

const obj = {
  a: 'foo',
    b: 'bar',//won't complain
}

• Spread operator for Arrays (Since ES2016) and Object literals (ES2017)

const obj = {foo:1, bar: 2};
{...obj, baz:3}// {foo:1, bar:2, baz:3}

• Spread operator is convinient for cloning; merging; filling in defaults; updating properties
• Use Object.create(null) to create map like storage

Async Functions

async function foo(){}

const foo = async function(){};//expression

const foo = asnyc () => {};

const obj = { async foo() {}};//method definition

//example usage
async function foo() { return 123; }

foo().then(result => console.log(result)); //123

async function bar () {
  throw new Error('Problem!');
}

bar().catch(err => console.log(err));

• async works with anything that returns promise
• await puts function to sleep and awaits while promise is set; if promise is rejected throws an exception

Concurrency & Parallelism

• Web workers – aka threads. Much saver than Threads in Java or C++, due to
  1. copy and sends strings
  2. copy and send structures
  3. move and send structured data
• Shared Array Buffers (ES2017) – a primitve building block for high-level concurrency abstractions aka shared data between workers. Interaction via atomic operations:

const sh = new SharedArrayBuffer(Uint32Array.BYTES_PER_ELEMENT * 10);
const ta = new Uint32Array(sh);
worker.postMessage(ta);//share with worker

//Writer
Atomics.store(ta, 0, 123);

//Reader
while(Atomics.load(ta, 0) !== 123)
;

• SIMD.JS (ES2017) – single instruction. single data (aka vectors operations) obsolete in 2018 (in favor for WebAssemble)

Networking

• always use WebSockets over HTTPS – will prevent proxies to cut WebSocket connections

Rendering

• position: absolute does not affect layout. Hence can be translated freely (without repainting)
• 3D aka translate3d transformation uses layers, i.e. DOES NOT paint (redrawing the whole screen – expensive)
• 2D aka translateX transformation will probably repaint

Webix

• to customize template output use function: template: function(obj) { return customizeOutput(obj);}
• one can use column template to show any complex data, but there is no easy way to edit complex data structures in ui.datatable.
• how to implement custom data type: https://webix.com/snippet/66c11a75
• using count to show overlay:

webix.ui({
 view:"list", 
 ready:function(){
  if(!this.count()){ // if there are no data items
   webix.extend(this, webix.OverlayBox);
   this.showOverlay("<div style='margin:75px; font-size:20px;'>There's no data</div>");
  }
 }
});

• preserving master filtering while datatable filtering: webix forum