Tweet
Tweet

Slide 1

Slide 1 text

Anton ‘shaman.sir’ Kotenko JetBrains GmbH (Ulric Wilfred) JavaScript Meetup @ Feb 09 2017, München

Slide 2

Slide 2 text

RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd [Extended Cut]

Slide 3

Slide 3 text

Example Time: https://github.com/shamansir/rpd-p5-particle-system

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Examples: http://shamansir.github.io/rpd/examples

Slide 7

Slide 7 text

Styles:

Slide 8

Slide 8 text

• 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

Slide 9

Slide 9 text

• 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

Slide 10

Slide 10 text

var patch = Rpd.addPatch(‘Title’);

Slide 11

Slide 11 text

var node = patch.addNode(‘jb/voronoi’);

Slide 12

Slide 12 text

var inlet = node.inlets[‘source’];

Slide 13

Slide 13 text

var inlet = node.addInlet(‘core/any’, ‘source’);

Slide 14

Slide 14 text

inlet.receive(loadImage(‘myImage.jpg’));

Slide 15

Slide 15 text

outlet.connect(someInlet);

Slide 16

Slide 16 text

outlet.send(Kefir.later(1000, ‘foo’));

Slide 17

Slide 17 text

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 } } });

Slide 18

Slide 18 text

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 ); } } });

Slide 19

Slide 19 text

Rpd.noderender(‘my/sum’, ‘svg’, { first: function(bodyElm) { … }, always: function(bodyElm, inlets, outlets) { bodyElm.innerText = inlets.a + inlets.b + outlets.sum; } });

Slide 20

Slide 20 text

Rpd.nodetype(‘my/sum’, function() { return { inlets: { … }, outlet: { … }, process: function(…) { … } } });

Slide 21

Slide 21 text

Rpd.noderenderer(‘my/sum’, ‘svg’, function() { return { first: function(…) { … }, always: function(…) { … } }; });

Slide 22

Slide 22 text

Now used by JetBrains: http://jetbrains.com/goodies/code2art

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

RPD Framework Flow Programming for Everyone for Everyone http://shamansir.github.io/rpd