RPD — Reactive Patch Development, Extended Cut

Presented at Munich JS Meetup, 09 Feb 2017

Transcript

1. Anton ‘shaman.sir’ Kotenko JetBrains GmbH (Ulric Wilfred) JavaScript Meetup @ Feb 09 2017, München
2. RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd [Extended Cut]
3. Example Time: https://github.com/shamansir/rpd-p5-particle-system
6. Examples: http://shamansir.github.io/rpd/examples
7. Styles:
8. • SVG and HTML rendering • Very Simple API • Lightweight • Built using f unctional Programming principles • Easy to create Toolkits • Easy to implement Rendering and define Styles • Easy to connect with other libs (Sound, Animation etc.) • Supports any async stuff w/Reactive Streams • Import and Export history from/to JSON or whatever
9. • SVG and HTML rendering • Very Simple API • Lightweight • Built using f unctional Programming principles • Easy to create Toolkits • Easy to implement Rendering and define Styles • Easy to connect with other libs (Sound, Animation etc.) • Supports any async stuff w/Reactive Streams • Import and Export history from/to JSON or whatever ⽻羽 </> ⬇ ⬆ λ Rx
10. var patch = Rpd.addPatch(‘Title’);
11. var node = patch.addNode(‘jb/voronoi’);
12. var inlet = node.inlets[‘source’];
13. var inlet = node.addInlet(‘core/any’, ‘source’);
14. inlet.receive(loadImage(‘myImage.jpg’));
15. outlet.connect(someInlet);
16. outlet.send(Kefir.later(1000, ‘foo’));
17. 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 } } });
18. 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 ); } } });
19. Rpd.noderender(‘my/sum’, ‘svg’, { first: function(bodyElm) { … }, always: function(bodyElm, inlets, outlets) { bodyElm.innerText = inlets.a + inlets.b + outlets.sum; } });
20. Rpd.nodetype(‘my/sum’, function() { return { inlets: { … }, outlet: { … }, process: function(…) { … } } });
21. Rpd.noderenderer(‘my/sum’, ‘svg’, function() { return { first: function(…) { … }, always: function(…) { … } }; });
22. Now used by JetBrains: http://jetbrains.com/goodies/code2art
25. RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd