RPD: Reactive Patch Development

Presented at JSKongress 2016

Transcript

1. Anton ‘shamansir’ Kotenko JetBrains GmbH (Ulric Wilfred)
2. RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd
5. Examples: http://shamansir.github.io/rpd/examples
6. Styles:
7. * SVG and HTML rendering * Very Simple API * Lightweight * Built using Functional Programming principles * Easy to create Toolkits * Easy to implement Rendering and define Styles * Easy to connect to other libs (Sound, Animation etc.) * Supports any async stuff w/Reactive Streams
8. var patch = Rpd.addPatch(‘Title’);
9. var node = patch.addNode(‘jb/voronoi’);
10. var inlet = node.inlets[‘source’];
11. var inlet = node.addInlet(‘core/any’, ‘source’);
12. inlet.receive(loadImage(‘myImage.jpg’));
13. outlet.connect(someInlet);
14. outlet.send(Kefir.later(1000, ‘foo’));
15. Rpd.nodetype(‘my/sum’, { inlets: { a: { type: ‘core/number’ }, b: { type: ‘core/number’ } }, outlet: { sum: { type: ‘core/number’ } }, process: function(inlets) { return { sum: inlets.a + inlets.b } } });
16. Rpd.nodetype(‘my/sum’, { inlets: { a: { type: ‘core/number’ }, b: { type: ‘core/number’ } }, outlet: { sum: { type: ‘core/number’ } }, process: function(inlets) { return { sum: Kefir.later( 1000, inlets.a + inlets.b ); } } });
17. Rpd.noderender(‘my/sum’, ‘svg’, { first: function(bodyElm) { … }, always: function(bodyElm, inlets, outlets) { bodyElm.innerText = inlets.a + inlets.b + outlets.sum; } });
18. Rpd.nodetype(‘my/sum’, function() { return { inlets: { … }, outlet: { … }, process: function(…) { … } } });
19. Rpd.noderenderer(‘my/sum’, ‘svg’, function() { return { first: function(…) { … }, always: function(…) { … } }; });
20. RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd