practical pairing of generative programming with functional programming
DESCRIPTION
The new wave of JavaScript techniques: Practical pairing of generative programming with functional programming. Eugene Lazutkin, ClubAjax, 6/4/2013TRANSCRIPT
The new wave of JavaScript techniques
Practical pairing of generative programming with functional programming
Eugene Lazutkin, ClubAjax, 6/4/2013
Wednesday, June 5, 13
Generative programming
Wednesday, June 5, 13
What is GP?
Generative programming (GP):
Creates source code automatically to improve programmer productivity.
Can be considered as a form of code reuse.
Sometimes called “automatic programming”.
Wednesday, June 5, 13
Examples of GP
Macro processors:
C preprocessor.
C++ templates and inline functions.
IDE “wizards” in Eclipse, MS Visual Studio.
Meta-languages and their compilers.
Domain-specific languages (DSL).
Wednesday, June 5, 13
Why do we need GP?
Higher-level programming.
Meta-programming.
Modeling.
DSL.
Wednesday, June 5, 13
Why do we need GP?
Performance improvements.
Program transformations.
Data transformations.
Code optimization and generation.
Applies to both compilers and interpreters.
Wednesday, June 5, 13
Why do I need GP?
Common narrative goes like that:
“Compilers and interpreters are now very sophisticated – no need to optimize my code.”
“Modern CPUs with their fancy pipelining, parallel execution, and branch prediction eliminate code inefficiencies.”
Wednesday, June 5, 13
Don’t write inefficient code
Always estimate the algorithmic complexity of your code (Big O notation).
Remember simple things:
Linear code usually works faster than code with branches or loops.
Calling a function is not free. If its body is small, it may make sense to inline it.
Wednesday, June 5, 13
Don’t write inefficient code
Remember simple things:
Simplify!
Simple shorter code is usually faster.
Eliminate unnecessary variables.
Profile!!!
BTW, this was an advice by Jared Jurkiewicz.
Wednesday, June 5, 13
Performance summary
Do not expect that an inefficient code will be magically efficient. Always profile!
In a battle of a code clarity with a code efficiency support the clarity, if possible.
Avoid premature optimization by taking complex steps, yet do not write obviously slow code.
Wednesday, June 5, 13
JavaScript and GP
People coming from static languages frequently overlook or discount GP facilities in JS.
JS has four ways to generate code dynamically: eval(), new Function(), setTimeout(), setInterval().
Browser allows to inline code.
Wednesday, June 5, 13
JavaScript and GP
Amazing code-generation facilities are a big differentiator for Javascript.
Yet they are frequently shunned for numerous reasons, including security, which is not applied in all scenarios.
Wednesday, June 5, 13
JavaScript and GP
Recently GP crept in JavaScript libraries.
Examples:
Many templating languages are actually compiled in JavaScript or can be compiled:
Mustache, Handlebars, jQuery templates...
Wednesday, June 5, 13
JavaScript and GP
Examples:
All JavaScript-based templates:
EJS, JST (e.g., Underscore, Lo-Dash)...
All transpilers:
CoffeeScript, GWT, Emscripten...
Numerous code-level tools (minifiers...).
Wednesday, June 5, 13
JavaScript and GP
Examples:
Some libraries generate code for similar functions from the same template in order to reduce their downloadable size, and optimize performance.
Lo-Dash...
Wednesday, June 5, 13
Functional programming
Wednesday, June 5, 13
What is FP?
Functional programming (FP):
Treats computations as the evaluation of mathematical functions.
Avoids state, mutations, side-effects.
Emphasizes “scenario” over “a list of actors”.
Concerns more with “how” rather than “who” and “what”.
Wednesday, June 5, 13
JavaScript and FP
“JavaScript is Lisp in C’s clothing.” – said Douglas Crockford back in 2001.
Functions are first-class objects.
Lambdas are supported (functions can be inlined, and passed around).
Closures are supported (functions can access their environment).
Wednesday, June 5, 13
Practical applications of FP
Abstracting control flow details with array extras:
var total = data .filter(function(value){ return value % 2; }) .map(function(value){ return value * value; }) .reduce(function(acc, value){ return acc + value; }, 0);
Wednesday, June 5, 13
Practical applications of FP
We can even use “building blocks” now:
var total = data .filter(isOdd) .map(square) .reduce(sum, 0);
Wednesday, June 5, 13
Why I like this code
It is easy to understand.
It is easy to decompose or refactor.
There is no trivial technical noise like names of index and value variables, and exit conditions.
Wednesday, June 5, 13
Building blocks
In general we are assumed to create our programs from right-sized building blocks.
Bigger blocks are built from smaller blocks with a mortar/language.
It applies to any programming paradigms.
Wednesday, June 5, 13
...and reality
How come in real projects we see methods and functions in 100s and even 1000s lines of code?
Sometimes there are “good” reasons for that.
It can take more time to figure out our building blocks than to code everything from scratch.
Wednesday, June 5, 13
...and more reality
Sometimes there are “good” reasons for that.
Calling myriad of small functions can be detrimental to performance.
Is it really the case? It can be verified with a profiler, which takes time too.
It is possible to create a different system of “building blocks”.
Wednesday, June 5, 13
Case for pipes
Pipes are individual components of a pipeline.
Each pipe has an input and an output (sometimes more than one of those).
Pipeline combines individual pipes by connecting their inputs and outputs producing a program.
A pipeline can be used as a pipe.
Wednesday, June 5, 13
Case for pipes
Unix shells are a classic examples of pipes.
Closely related concept: dataflow.
Complex applications frequently can be expressed in terms of event flow.
Hot topics in JS: event streams, data streams.
Wednesday, June 5, 13
Pipes and chaining
While chaining is a frequent implementation technique for pipes, it doesn’t mean that all chaining equates to pipes.
Pipes encapsulate streams of data and orchestrate processing of individual bits.
Frequently chaining operates in terms of transferred objects (streams), not data bits.
Wednesday, June 5, 13
Chaining
Examples in JS of chaining without piping:
jQuery
Underscore
JavaScript array extras
All examples above create a container object before passing it down.
Wednesday, June 5, 13
Theory and practice
Wednesday, June 5, 13
Can we do better?
Let’s use our simple example as a start point and optimize it by inlining functions:
var total = data .filter(function(value){ return value % 2; }) .map(function(value){ return value * value; }) .reduce(function(acc, value){ return acc + value; }, 0);
Wednesday, June 5, 13
Can we do better?
var a1 = [];for(var i = 0; i < data.length; ++i){ if(data[i] % 2) a1.push(data[i]);}var a2 = new Array(a1.length);for(var i = 0; i < a1.length; ++i){ a2[i] = a1[i] * a1[i];}var acc = 0;for(var i = 0; i < a2.length; ++i){ acc += a2[i];}var total = acc;
Wednesday, June 5, 13
Can we do better?
Let’s merge loops and eliminate intermediate arrays:
var acc = 0;for(var i = 0; i < data.length; ++i){ var value = data[i]; if(value % 2) acc += value * value;}var total = acc;
Wednesday, June 5, 13
Performance results
0 750 1500 2250 3000
ms
Manual (38ms) Extra (2885ms)
Wednesday, June 5, 13
We did better!
And the results are in:
It is faster.
We loop over values manually.
We cannot easily move this snippet around because our technical variable names may clash.
Ultimately it was a trade-off.
Wednesday, June 5, 13
Can we have our cake and eat it too?
Yes!Wednesday, June 5, 13
Can we have our cake and eat it too?
We need a way to describe a result.
Not how exactly get it, but its logical inference.
Then we can apply GP to generate an optimal code.
Wednesday, June 5, 13
FP and pipes
FP gives us some answers:
Iterations can be described by higher-order operations:
map, filter, fold/reduce, zipping, unzipping, partitioning.
Secondary: forEach, every, some, indexOf.
Wednesday, June 5, 13
Heya Pipe
Wednesday, June 5, 13
Heya: ctr and pipe
Heya is a library that provides a modern foundation for building web applications (both server and client).
Heya Pipe is a functional toolkit to build efficient data and event processing pipes using GP.
Heya Ctr provides a constructor to build generated components.
Wednesday, June 5, 13
The Heya way
Let’s use our simple example and optimize it with Heya Pipe:
var total = data .filter(function(value){ return value % 2; }) .map(function(value){ return value * value; }) .reduce(function(acc, value){ return acc + value; }, 0);
Wednesday, June 5, 13
The Heya way
Here it is:
var f = array(new Pipe() .filter(“value % 2”) .map(“value *= value;”) .fold(“accumulator += value;”, 0)).compile();var total = f(data);
Wednesday, June 5, 13
Performance results
0 750 1500 2250 3000
ms
Manual (38ms) Pipe (53ms) Extra (2885ms)
Wednesday, June 5, 13
What do we see?
We are as expressive as array extras.
We are as performant as manual code.
The performance gap can be reduced.
In any case pipes are >40x faster than array extras.
Wednesday, June 5, 13
Heya Pipe conventions
Heya Pipe is modeled after array extras.
It can accept the same parameters.
If a string is specified instead of a function it is assumed to be a code snippet.
Code snippets work by conventions.
Wednesday, June 5, 13
Heya Pipe conventions
Snippets can have several lines of code.
“Boolean” snippets assume that the last line returns a boolean value.
Snippet’s input is a “value” variable. A snippet can modify it to return a different value.
Snippets for fold-able operations can access and update an “accumulator” variable.
Wednesday, June 5, 13
Debugging
People make mistakes ⇒ code should be debugged.
How to debug a generated code?
What is Heya Pipe story here?
Wednesday, June 5, 13
Debugging
The screenshot shows node.js debugging with node-inspector.
The generated code appears in the file panel.
The code is fully readable.
Wednesday, June 5, 13
Heya Pipe
Provides a rich foundation for pipes:
forEach, transform, map, filter, indexOf, every, some, fold, scan, skip, take, skipWhile, takeWhile, voidResult.
Can work with potentially infinite streams.
Wednesday, June 5, 13
Heya Pipe
Can iterate over numerous containers:
Array (sparse and dense, including in reverse), array slices (including in reverse), Object (keys, values, own and inherited), iterators, enumerators, generators, and perform unfold.
Includes a compiler, and an interpreter.
Can use pipes as sub-pipes.
Wednesday, June 5, 13
Heya Ctr
Implements GP helpers.
Includes a simple formatting-aware templating.
Allows managing closures.
Serves as a foundation for Heya Pipes.
Wednesday, June 5, 13
Closures with Heya Ctr
Allows to inject variables in a closure, which will be directly accessible from snippets by name.
Does not use “with” statement because it is incompatible with strict mode.
Fully strict mode compatible.
Allows to access and modify closure-bound variables.
Wednesday, June 5, 13
!at’s all
Folks!
Wednesday, June 5, 13