Jump to content

WebWorkers and Flow Based Programming

Recommended Posts

  • Moderators

WebWorkers and Flow Based Programming

It has been a while since I got as excited as I was when I read J.Morrison's book "Flow-Based Programming: A New Approach to Application Development - 2nd edition".

This post is not meant to give an overview of FBP, but if someone is interested, the first edition of his book is available online for free.

FBP utilises independantly running processes which are wired together in an assembly line type of arrangement. The main advantages are that each process runs on demand rather than on availability, components can easily be re-wired to implement changes in requirements and there are possibilities for extensive component re-use.

I was in the process of porting this framework to Smart, when I realised that javascript and concurrently running processes is not an easy match. Basically all js code in the browser executes in the same thread, and time-slicing mechanisms like setTimeout (used in the framework I was porting) doesn't enable real concurrent processing.

However there are 2 exceptions to escape the single-threadedness : IFrames and webworkers. Both implement runtimes separate from the main thread and have their own heap, stack and message handling mechanism.

The similarities between the FBP and shared webworker specs are (more than) striking, so this post is about having a go at implementing FBP using webworkers. 

- processes (fbp) can be implemented through shared webworkers
- connections between processes (fbp) can be implemented using channels (webworker to webworker, buffered)
- ports (fbp) can be implemented using ports (webworker)
- reading/writing of information packets's (fbp) can be implemented using messaging (webworker)
- information packet handling (fbp) can be implemented using the transferable interface (webworker)

The demo chosen is a variation of the 'Galaxy Clock' project in the featured-demo's section. The variation being that the 'single motor' driving the 3 hands of the clock (hr, min, sec) is replaced by 3 separate 'motors', each driving one of the hands and each one operating in its own thread.

The architecture of this demo : a scheduler webworker receives the current local time when a button is clicked in the main program. It transfers the time-elements to each of the other web-workers through the channels created. These other webworkers in their turn update the main project at appropriate intervals.



The result of this rather peculiar architecture.
The hr/min/sec displays are purposely not synchronised and are all running at 10x normal clock-speed.

Link to post
Share on other sites
  • Administrators

Interesting. I tried your demo with FF and get this:

SecurityError: The operation is insecure. main.js:16747


Link to post
Share on other sites
  • Moderators

mmm, works fine with FF at my place. (FF Quantum 61.0 64 bit on Win10)

FF is usually better than Chrome in this respect, it handles local file-based webworkers as well as server-based ones, where Chrome silently fails on local file based webworkers.

But I'm surprised by this SecurityError.  Googling this gives lots of references to FF being resentful to blocked cookies ? Lots of other reactions as well, so I'm not sure. Might try sandboxing (hamburger-help) to see if that makes a difference

As a side-note I know Edge (and Safari) don't support SharedWorkers yet, so this demo won't work on those browsers. However there is no particular reason to use sharedWorkers either, it works as well with just normal dedicated workers.

See here demo with normal webworkers, which should work on any browser. For interest sake let me know if that makes any difference

(by the way projectcodes available for your perusal on www.lynkfs.com/Experiments/FBP/FBPWW.sproj (sharedWorkers) and .../FBP2 (dedicated workers)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...