60fps with Functional Programming in idle time

Mike Talbot ⭐ - Jul 3 '20 - - Dev Community

Alt Text

js-coroutines has been able to process standard functions like parsing and stringifying JSON, or compressing data in idle time since it was launched - splitting up jobs over multiple frames so that everything stays smooth at 60fps - it now has the ability to build functional pipelines too:

const process =
        pipe(
            parseAsync,
            mapAsync.with((v) => ({...v, total: v.units * v.price})),
            stringifyAsync,
            compressAsync        
        )
Enter fullscreen mode Exit fullscreen mode

Here is a dummy routine that parses some JSON, works out a total value of items, stores it back in JSON, and compresses it.

We can then call this pipeline with our data:

   const compressedData = await process(inputJSON)
Enter fullscreen mode Exit fullscreen mode

The pipe function creates an asynchronous process that, in conjunction with the standard js-coroutines, runs all of the jobs collaboratively on the main thread, ensuring that there is enough time for animations and interaction.

We can also just insert our own calculations that we'd like to split up:

      const process = pipe(
             parseAsync,
             function * (data) {
                let i = 0
                let output = []
                for(let item of data) {
                    output.push({...item, 
                       total: item.units * item.price,
                       score: complexScore(item)
                    })
                    if((i++ % 100)==0) yield
                }
                return output
             },
             tap(console.log),
             stringifyAsync
         )         
Enter fullscreen mode Exit fullscreen mode

Here we put a generator function into the pipeline and make sure we call yield now and again. This yield call will check that we have enough time to continue or will schedule the resumption of the function on the next idle.

New functions

Function Parameters Purpose
pipe ...function

each function can be an async function, a normal function or a generator

A function takes the current value of the pipeline and processes it. You can use the call() function to pass other parameters - for instance the mapping function of a mapAsync. All xxxAsync functions in js-coroutines have a .with() function you can use to shortcut importing call - it has the same effect.

Creates an async function to execute the pipeline
tap function(current){...} This function adds a function to the pipeline that receives the current value, but does not return it's result. You can use it to cause side effects like logging or saving. The pipeline pauses execution until the function is complete.
branch function(current){...} This function adds a function to the pipeline that receives the current value. You can use it to cause side effects like logging or saving. The pipeline DOES NOT pause execution, so a new continuation is formed from this point forwards.
repeat function,times Creates a function that executes the specified function a number of times
call function,...params This function enables calling another function that will take the current value of the pipeline but needs extra parameters. The parameters supplied will be appended to the current value of the pipeline.

Demo

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player