Close

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

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)

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