Learning Javascript

Learning more about Javascript – articles, useful resources, personal notes.

Quick reference

Fundamentals

• Tips for common idioms accessing property values while protecting from inexistent properties, and suggestions for other day-to-day idioms
• 2ality › Global scope How do JavaScript’s global variables really work? All about scopes, lexical environments, global object, global environment, module environments
• Mathias Bynens › Notes on globalthis
• Lydia Hallie › JavaScript Visualized: Prototypal Inheritance The infamous prototypal inheritance of Javascript presented in a step-by-step tutorial, with animated illustrations of property access

Pull vs Push

Pull and Push are two different protocols that describe how a data Producer can communicate with a data Consumer.

System	Single value	Multiple values	Description
Pull	Function	Iterator	The Consumer determines when it receives data from the data Producer. The Producer itself is unaware of when the data will be delivered to the Consumer.
Push	Promise	Observable	The Producer determines when to send data to the Consumer. The Consumer is unaware of when it will receive that data.

Promises

• MDN › Javascript Guides › Using Promises All about their guarantees, chaining them, error propagation, composition, timing (passed-in functions are put on microtask queue, they never run immediately), nesting and common mistakes
• Remember: then() expects a function (or two); that returns either a Promise; a scalar; or throws (We have a problem with promises — Common mistakes with promises, Nolan Lawson, 18.05.2015)

Observables / RxJS

• Observable Observables are lazy push collections of multiple values. Represent the idea of an invokable collection of future values or events. const observable = Observable.create( function (observer) { … }) The code of the ellipsis represents an Observable execution, a lazy computation that only happens for each Observer that subscribes. The execution produces multiple values over time, either synchronously or asynchronously.
• Observers – a collection of callbacks, that knows how to listen to values delivered by the Observable. An Observer is an object with methods next( value), error( err), complete(). observable.subscribe( observer) is the way to start an Observable execution and deliver values or events to the Observer of that execution. In an Observable Execution, zero to infinite Next notifications may be delivered; if either an Error or Complete notification is delivered, then nothing else can be delivered afterwards.
• Subscription – an object that represents a disposable resource, usually the execution of an Observable; is primarily useful for cancelling the execution. Has one important method, unsubscribe(), that takes no argument and just disposes the resource held by the subscription.
• Subject – a special type of Observable, that allows values to be multicasted to many Observers. While plain Observables are unicast — each subscribed Observer owns an independent execution of the Observable —, Subjects are multicast. The equivalent to an EventEmitter.
• Operator – pure function that enables a functional programming style of dealing with collections, with operations like map, filter, concat, reduce, …
• Scheduler – centralized dispatchers to control concurrency, allowing to coordinate when computation happens, on e.g. setTimeout or requestAnimationFrame or others.

Iteration protocols

• Iterable protocol To be iterable, an object must implement the @@iterator method — meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key, which is available via constant Symbol.iterator. The method @@iterator is a zero arguments function, that returns an object, conforming to the iterator protocol. (ES2015)
• Iterator protocol An object is an iterator, when it implements a next() method with the following semantics: a zero arguments function, that returns an object with at least the following two properties:
  • done – a boolean with either the value true, if the iterator is past the end of the iterated sequence — in this case value optionally specifies the return value of the iterator; or the value false, if the iterator was able to produce the next value in the sequence; this is equivalent of not specifying the done property altogether.
  • value – any JavaScript value returned by the iterator. Can be omitted when done is true. (ES2015)

Generators

• function* declaration defines a generator function, which returns a Generator object. The returned Generator object conforms to both the iterable protocol and the iterator protocol (ES2015).
• yield keyword is used to pause and resume a generator function (function*). [rv] = yield [expression]; expression defines the value to return from the generator function via the iterator protocol; rv returns the optional value passed to the generator's next() method to resume its execution. (ES2015)
• yield* expression is used to delegate to another generator function or iterable object. yield* [[expression]]; expression is the expression that returns an iterable object. (ES2015)

State and event propagation

• Westbrook Johnson › composed: true considered harmful? Detailed description of event propagation and description of a pattern for event propagation with state — which I would not recommend & adopt, yet it is an excellent article to learn the topic
• Open WC › Managing events in your custom elements Patterns for listening and dispatching events in the context of Web Components
• Peter Caisse › Modeling State with TypeScript TypeScript interfaces and unions allow to describe the structure of data; common schema can be modeled in generics; and state transitions can be modeled with conditional types — which allow the compiler to capture and signal errors, when state is set to unintended values, due to typo, logic error or accidental type coercions. Note: error signaling happens at compile time, however clever the compiler is; those techniques would not protect from malformed data suddenly provided by an upstream source, at runtime, which is another common issue in production.

Streams

• Learning using Streams, Observables and Transforms articles, useful resources, personal notes

Web- and Service Workers

• Learning Service Workers experiments, articles, reading notes
• Learning Service Workers › Reading notes › The Basics of Web Workers
• Transferable interface represents an object that can be transfered between different execution contexts, like the main thread and Web workers. The ArrayBuffer, MessagePort and ImageBitmap types implement this interface.
• ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate its contents; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
• ImageBitmap interface represents a bitmap image which can be drawn to a <canvas> without undue latency; it can be created from a variety of source objects, using the createImageBitmap() factory method. ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.