postMessage Excursion

We collect here a few javascript libraries which build on top of the postMessage API to enable cross-origin communication. Be begin this journey with experiments to enable wiki integrations via the Frame Plugin. What we found along the way invite other design questions.

We began by comparing postmate and penpal whose names are largely synonymous and whose APIs are quite similar.

We will show penpal's examples. github unpkg

Compare postmate github unpkg

In both the parent window and the child frame, there are initial calls to create a connection, for postmate, or a handshake, for penpal. Each can describe a collection of methods offered to the other side of the communication. Not shown in our example below, the parent connection offered addition to the child, and the child connection offered multiplication and division to the parent. Both libraries use promises to manage the asynchronous communication.

# Parent page let child = await connectionToChild.promise child.multiply(2, 6).then(console.log); child.divide(12, 4).then(console.log);

# Child frame let parent = await connectionToParent.promise parent.add(3, 1).then(console.log)

Self Addressed continues the mail and letter metaphor for wrapping the postMessage api. github unpkg

Example of self addressed paraphrased from workflow

# Parent page function mailman(address, msg) { address.postMessage(msg, '*'); } window.onmessage = function (event) { var letter = selfAddressed(event.data); // if letter === undefined => not an envelope, // handle differently! var returnAddress = event.source; // places the letter into the same envelope selfAddressed(event.data, 'bar'); selfAddressed(mailman, returnAddress, event.data); };

# Child frame function mailman(address, msg) { address.postMessage(msg, '*'); } window.onmessage = function (event) { selfAddressed(event.data); }; selfAddressed(mailman, parent, 'foo') .then(console.log);

At another extreme, endpoint.js. Endpoint.js enables modules within a web application to discover and use each other, whether that be on the same web page, other browser windows and tabs, iframes, servers, web workers and processes in a reactive way by providing discovery, execution and streaming interfaces. github unpkg

Endpoint.js aims to empower a plugin model for constructing applications. doc

endpoint.js application architecture diagram source

Future webapps will be composed of data spouts, sinks, and streaming enrichment engines on the server side. This architecture will feed into a client-side application comprised of published APIs. These APIs cover data movement to simple UI features, such as a Grid API (similar to bootstrap's grid capability for displaying UI elements), a Window API to access events or perform global actions, and a sidebar API to manipulate visible components. A plugin manager allows the user to compose their application and view by enabling plugins, which live in hidden iframes and/or web workers. These plugins communicate with the main client window through an OAuth-like permissions framework created specifically for inter-browser communication between cross-origin websites.

N.B. Can't get the demos of endpoint.js running. The code was basically abandoned at the end of 2016. At this point useful only as inspiration.

wiki mechanism

We've included some links to unpkg above. If we choose to use one of these libraries, rather than importing all the dependencies into our project, we could either use unpkg as a CDN, or vendor the compiled javascript libraries.

.

The author of selfAddressed library, Dr Gleb Bahmutov, looked familiar, but turned out to be someone different than we thought. Nevertheless, sampling some of his vast collection of javascript libraries reminds us of previous excursions into events, functional, and reactive programming. site

Our first live cross-origin experiment with selfAddressed is over in glich.com: glitch

https://lilac-wind-worm.glitch.me/self-addressed.html HEIGHT 270

Instant Web Application presents bottle-service, a tool using a Service Worker to cache rendered pages to eliminate a jumpy UX common to several single-page app frameworks. "Like server-side rendering in your browser." Especially interested to look more closely at bottle-service for offline wiki usecases. article github

Journey from procedural to reactive JavaScript with stops article

Compare André Staltz' Intro to Reactive Programming You've Been Missing: gist

A fairly succinct journey through the many ways javascript developers have learned to cope with asynchrony. Callbacks vs Promises vs RxJS vs async/await link

https://www.npmtrends.com/jschannel-vs-penpal-vs-postmate compare popularity of penpal, postmate, and jschannel HEIGHT 1000