Flow-Based Programming for JavaScript

Video in TIB AV-Portal: Flow-Based Programming for JavaScript

Formal Metadata

Flow-Based Programming for JavaScript
Title of Series
CC Attribution 4.0 International:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
NoFlo is a flow-based programming environment for JavaScript. Originally built for Node.js systems automation, the same visual development tools can also be used for developing full-stack applications from the browser to microcontrollers like Arduino. With NoFlo developers build their applications by wiring data streams together between different pre-built or custom components. The NoFlo environment is fully browser-based and can connect to NoFlo instances running on remote servers, allowing inspection and rewiring of running software.
Keywords Development

Related Material

The following resource is accompanying material for the video
Video is cited by the following resource
Dataflow Computer animation Video projector Semiconductor memory Computer programming Software developer
Functional programming Functional (mathematics) Server (computing) Dependent and independent variables Code Multiplication sign Control flow Database Bit Mereology System call Web 2.0 Computer animation Software Integrated development environment Meeting/Interview Website Analytic continuation
Functional (mathematics) Process (computing) Loop (music) Computer animation Meeting/Interview Computer programming Network topology Projective plane Vertex (graph theory) Parameter (computer programming) Instance (computer science)
Complex (psychology) Texture mapping Computer animation Software Multiplication sign Source code Bit Proxy server
Dataflow CAN bus Multiplication sign Software developer Computer programming Model theory Distance Computing platform Information technology consulting
Implementation Multiplication sign Execution unit Virtual machine Process (computing) Meeting/Interview Core dump Computer science Cuboid Arrow of time Router (computing) Punched card Row (database)
Game controller Graph (mathematics) Virtual machine Plastikkarte Function (mathematics) Component-based software engineering Software Object-oriented programming Logic Computer programming Flowchart Formal grammar output
Dataflow Building Computer file Code Graphische Programmierung Virtual machine Web browser Mereology Facebook Component-based software engineering Computer programming String (computer science) Videoconferencing Software framework Descriptive statistics Area User interface Scripting language Programming paradigm Tensorrechnung Graph (mathematics) Information Software developer Sound effect Bit Two-dimensional space Computer Type theory Word Process (computing) Computer animation Software Visualization (computer graphics) Graphics software output Pattern language Right angle Flux Library (computing)
Dataflow Functional (mathematics) Component-based software engineering Process (computing) Computer animation Computer programming Multiplication sign Buffer solution output Mereology
Dataflow Server (computing) Electric generator Graph (mathematics) Bit Mereology Connected space Web 2.0 Particle system Component-based software engineering Process (computing) Computer animation Different (Kate Ryan album) Vertex (graph theory) Right angle Figurate number Traffic reporting Form (programming)
Point (geometry) Default (computer science) Server (computing) Service (economics) Graph (mathematics) Personal digital assistant Mereology Connected space Number
Web 2.0 Electronic data processing Server (computing) Texture mapping Component-based software engineering Graph (mathematics) Computer animation Graph (mathematics) Electronic mailing list
Subject indexing Computer animation Electronic mailing list Instance (computer science) Object (grammar) Parsing
Revision control Dataflow Web application Computer animation Software Computer programming Projective plane Number
Webcam Dataflow Server (computing) Game controller Computer file Code Web browser Web 2.0 Process (computing) Component-based software engineering Computer animation Personal digital assistant Computer programming Software framework Right angle Filter <Informatik>
Scripting language Dataflow Graph (mathematics) Open source Source code Subgraph Instance (computer science) Revision control Component-based software engineering Computer animation Personal digital assistant Cuboid Software testing Library (computing)
Server (computing) Code INTEGRAL Web browser Client (computing) Mereology Revision control Web 2.0 Mathematics Component-based software engineering Computer programming Hierarchy Cuboid Collaborationism Graph (mathematics) Europeana Projective plane Data storage device Subgraph Bit Web application Subject indexing Computer animation Software Vertex (graph theory)
Area Dataflow Texture mapping Web portal Graph (mathematics) State of matter Transformation (genetics) Projective plane Right angle Tableau Game theory Cartesian coordinate system
Area Web 2.0 Dataflow Android (robot) Graph (mathematics) Computer animation Software Integrated development environment Graphische Programmierung Sound effect Microcontroller
Server (computing) Digital electronics Transportation theory (mathematics) Graph (mathematics) Web browser Instance (computer science) Mereology Cartesian coordinate system Computer Peer-to-peer Web 2.0 Process (computing) Different (Kate Ryan album) Communications protocol
Dataflow Group action Run time (program lifecycle phase) Direction (geometry) Web browser Tracing (software) Web 2.0 Protein folding Computer programming Intrusion detection system Audiovisualisierung Graph (mathematics) Debugger Unit testing Cartesian coordinate system Web application Message passing Computer animation Integrated development environment Graphics software Chain Pattern language Complex system Middleware Abstraction
Area Dataflow Server (computing) Run time (program lifecycle phase) Perfect group Code Projective plane Graph (mathematics) Source code Bit Function (mathematics) Instance (computer science) Cartesian coordinate system Web 2.0 Web application Mathematics Component-based software engineering Process (computing) Computer animation Computer programming Video game Software testing Library (computing) Asynchronous Transfer Mode
Web 2.0 Server (computing) Pay television Computer animation Projective plane Electronic mailing list Bit Database Representational state transfer Shareware
Server (computing) Computer animation Personal digital assistant Instance (computer science) Resultant
Point (geometry) Web 2.0 Dataflow Server (computing) Computer animation Web-Designer Projective plane Bit Web browser
Dataflow Web application Computer animation Computer file Hypermedia Computer programming System programming Video game Fiber bundle Flux
User interface Dataflow Group action Mobile app Functional (mathematics) Server (computing) Graph (mathematics) State of matter Projective plane Bit Cartesian coordinate system Web 2.0 Loop (music) Component-based software engineering Computer animation Personal digital assistant Phase transition System programming Analytic continuation Resultant Hydraulic jump Task (computing)
User interface Dataflow Run time (program lifecycle phase) Graph (mathematics) Image processing 1 (number) Computer animation Integrated development environment Operator (mathematics) Right angle Game theory Communications protocol Resultant Library (computing)
Dataflow Server (computing) Graph (mathematics) Run time (program lifecycle phase) State of matter Multiplication sign Computer Field (computer science) Message passing Component-based software engineering Process (computing) Integrated development environment Operator (mathematics) Single-precision floating-point format Square number Vertex (graph theory) Game theory Plug-in (computing) Physical system
Trail Dataflow Complex (psychology) Game controller State of matter Virtual machine Open set Neuroinformatik Component-based software engineering Different (Kate Ryan album) Computer programming Operator (mathematics) Queue (abstract data type) Cuboid Graph (mathematics) Information Projective plane Connected space Message passing Process (computing) Personal digital assistant Logic Vertex (graph theory) Metric system Power set
Game controller Run time (program lifecycle phase) Computer animation Term (mathematics) Computer programming Intrusion detection system Projective plane Sound effect Microcontroller Software framework Number
Dataflow Run time (program lifecycle phase) Computer animation Different (Kate Ryan album) State of matter Projective plane Electronic mailing list 1 (number) Immersion (album) Number Product (business) Physical system
Dataflow Complex (psychology) Game controller Building Functional (mathematics) Server (computing) Run time (program lifecycle phase) Overhead (computing) Computer file Length Real number Set (mathematics) Web browser Function (mathematics) Streaming media Replication (computing) Computer Revision control Component-based software engineering Different (Kate Ryan album) Operator (mathematics) Single-precision floating-point format Gastropod shell Physical system Scripting language Area Programming language Projective plane Content (media) Planning 3 (number) Line (geometry) Cartesian coordinate system 10 (number) Computer animation Integrated development environment output Right angle Musical ensemble Operating system
User interface Dataflow Server (computing) Run time (program lifecycle phase) Code Graph (mathematics) Web browser Computer Process (computing) Computer animation Computer programming Communications protocol Library (computing)
Dataflow Stylus (computing) Building Open source Code Multiplication sign Software developer Graph (mathematics) Projective plane Set (mathematics) Streaming media System call Component-based software engineering Robotics Computer programming Stream cipher Pattern language Object (grammar) Sinc function Fingerprint Exception handling
Computer animation
so sorry about the technical difficulties this is always the most difficult thing in technology and the special technology conference exists projector sentinel holidays but it's never really plug and play anyhow but I'm here to talk about the flow-based programming for
JavaScript so 1st of all how many of you know anything about flow-based programming or dataflow programming no w you should present their are you alive that all of them again how many of you are JavaScript developers that's the next question that JavaScript developers at the hands OK good so get quick introduction I memory originally from Finland now living in Berlin for us fiveish years I think it's been no this is probably my 4th
or 5th frost so always from having and being here having coach great
so let's get to the subject so like in general like 1 important part of the software is of course the control flow so if you've done for example PHP or python where things are usually synchronous and you're probably very familiar with the call and return that the so you call some function yes i and its return value to some variable and then
basically the execution of your software stops until whatever the function returned and yeah this is of course a little bit problematic if let's say you just that the web server and you might have more than 1 person visiting in your website at the same time and you know your code is right there waiting for a database so query to return and hence it can't respond to the other HDP request so some environments like the PHP usually work around this by having multiple PHP processes so that they will hopefully be 1 away lable when request comes in In in JavaScript land in low functional programming of we use the continuation passing style so in this situation what we do is we
call a function we did it for arguments we
want and then we get the mother function as an argument saying a when you're when you have results please call me and with this for instance in OJS we can have served thousands of users with a single node is process because the the main main loop of the program it's not being blocked by waiting for something to happen instead you're using these callbacks where you know let's return back to this execution when that thing happened so with that in know you're never never really blocked of the downside of course is that the you end up with from the christmas tree at least my 1st nudges projects always look like this the I'm I'm seeing some nodding so I guess that's it experience many people in the
audience share and so on
coming especially start getting to a bit more complex piece of software it would be really
nice to have a map because we humans we have very good uh spatial understanding we've developed it over a long time low many long years in the summer not throwing rocks at mother animals so we're very good at like where things
are in spatial relationships and with the visual mapping we can utilize that to understand complex things like software this is actually like when you read source code is what to do in your brain anyway at you have to parse the source code you OK this talk to that that talks about the new built this kind of map that's why we get interrupted you lose all of that idea and then you have to start building the map again no but it would be very nice if software would be represented this way right away but so that's
kind aware I come to the picture I it over 5 years ago I was kind of transitioning from most during PHP programming 2 more JavaScript and notice and I was very can frustrate the that the primitive tolling and the can of developer support the that platform had but luckily I had an I was doing some consulting for the US West Coast and I had to drive long distances between Portland and Southern California In this but I scenery and that gave me a lot of the time to think about things and read some freedom but see his papers in in models of light and 1 1
of the things I read about and which really clicked for me was the idea of flow based programming this is a very cutting edge new idea in
computer science but this gentleman here with the whole Morrison invented in and the late sixties early seventies at IBM and when he retired in nineties he wrote the book about it there's no 2nd edition Lucy there the and he's also written some implementations for job of foresee sharp I taught me this actually this kind of boxes season arrows meant really fits with how I think about software and so I went and went on implementing and JavaScript Russian but before we
get to the nuts and bolts I I think you need to understand the cor core ideas of where full whispering comes from so at IBM in that that that time I most of their big stuff was done with using these unit record machines that uh basically big machines that work on punch cards so have punch cards that are data any of maybe punch cards that are configuration that
you feed to the machine and then you have this lovely flow charts that tell the bigger control fall the software saying basically if there's cards coming and this trade then you person in a white lab coat will take those cards picked and the next machine fit them to stop this and then the software execution will continue and so far was programming is exactly this except you know without lab coats no so we have 2 components little pieces of software that have input ports are trace whatever you want to think about them and output ports they execute some logic and then we have a graph that tells how the data flows from 1 component to another and that's made to kill of all of what phobist remains about but always and of course
wasn't the only 1 to come up with these kinds of ideas you may have heard of this gentleman here he the formalize these ideas as something called object-oriented programming which you may have heard of his original idea sound a lot more like flow-based programming but then somehow you get the jammer how that came to be the another another thing
where this might sound familiar is if you've ever use the Unix Linux command line this also again the idea of build programs that do 1 thing and then he pipe pipe stuff together to achieve more complex things I mean seriously like this is actually a flow-based its program 1 that you may have a had to write yourself if you had a nasty runaway browser process from and and basically what we do this if this textual pipelines are usually very 1 dimensional so what we do with that no flow we try to make try to bring that to the 2nd dimension and we lost in the string for some reason OK great yeah so that's that's what we're doing and now since none of you raise the hand yet I have to pose the question instead hasn't this been tried and done before like there's been all kinds of promising so visual programming from rails in the sixties onwards and yes a lot of this has been done before and actually this kind of data flow visual programming has become the dominant paradigm in various narrow industries in a lot of visual effects industries use these nodal editors to built things same thing with the video processing video streaming the now we have some new new things that for all these concepts like tensor flow that you may have heard of this machine learning framework that will release a lot of the ideas in Facebook's uh flux pattern for reactor development comes from from programming so there's a lot of kind of areas where this is this kind of paradigm has been successful but it hasn't worked as a general purpose programming paradigm and that's and what we tried to do here we try to build tools that would allow you to essentially build any kind of computer software using best programming so so back to no flow the word of warning there's a little bit of code here just to explain the basics of have novel
works so as I said there are these 2 concepts in FIL this programming there are components and then there's the graph that determines how components are connected and I mean components the usually right them is no for you write them in JavaScript CoffeeScript vibe script whatever whichever flavor of something that combines the JavaScript you like and you know I'm not expecting any but need to memorize this I just wanted to go through the kind of the important parts here so if you write a component you open over library you provide a get component in the face in your file where you create instant data an awful component that's why you have a component right which eventually will have to return there then to provide an interface that component what you do is you and some ports so you can add input ports you can give them a type if you want to so you can give also more information like description so that it uses using your component will understand how it works then you add
up ports and then finally the important part is to provide a processing functions of this function this problem here that you gave will be the called every time your component receives a packet and so that's something that comes from the outside the components don't know anything about the rest of the program they are and they just no way I get a packet and here you can make our decisions on whether you have enough input to do something that were not once you once you have enough input you read the packets from your input for buffers that you want to work on and you do your work and then in the end you send some alkyl packets out so this is this is the very basic no flow component they're typically asynchronous you can also write synchronous components if you have something that for that makes sense but the important thing is usually you don't have to
write a book or there's hundreds
probably thousands of novel components out on and M for pretty much any particle here and purpose so from payment processing to kind of report generation to dealing with a lot of different Web API as this forms of components of their and people in the community are I think more so in a lot of situations you can just grab a few components maybe massage them a little bit to fit your figure purpose put them to graph and yeah good when and then maybe write a couple of specialized components for something that you need so that's how you have a
component the either instill it from and P M or the right 1 for yourself for get somebody else to write the is but than the other the next big thing is how to define a flow so the because some people like text I start with that so this is a lovely lovely syntax for defining and flow-based graphs the IBM came up with I think in early eighties the it's reasonably straightforward but you can define a connection between so here we have a node called server you really have a node called parts the server uses component called this the parts uses component of that and here we make
a connection between the at the port of the server to the at port of the parts you'd also send the literals to due
consideration when the graph started so in this case for that we're in sending the number 80 to the port part of the server so basically what we're doing various we're telling this an HDP service so we're telling it a when you start listen to port 80 which is the default point for this to be and then we go on to define some stuff like here we do we provide a resource called image we say OK you responding path
image and then it has ports for like create destroy list etc. so basically when when you put post to slash image of the web server or you deviate from then the request packet would be sent out to that pipeline and then you can do whatever data processing that that would imply and that's perfectly fine way of of defining no graphs but to be honest it can get tricky because here like you have to constantly memorize what ports do my components have and you still don't get the proper visual map of how things are and so we built some tools for that
so here you can see the same graphics it graph that was here's a text
the this is how it looks like an hour our
VisualEditor so here you can see we had it should be server begin at the port 80 might be a little tricky to see from behind and we have a body parser which just basically Parsees HDP requests so if somebody center Jason for instance or issue we now at you're coded data than it turns of today in JavaScript Object there and then we send send that off to the image resource and now here you know very conveniently see that even though we just dealt with create and destroy there's also all these other ports for wearable so the we could easily like OK if you want to do index which is listing of the Meech resources you have then you would just buy or something there of the visual VisualEditor
on originally was built only for no flow and we finance that's it with a Kickstarter we did in 2013 but then this was the 5th largest software Kickstarter was by now the numbers the sizes of Kickstarter projects have gone through the roof so I don't think we're anywhere in the top 100 anymore but back then that this was a big deal and so I with that funding we were able to build a web-based our ID for no full programming for other flow-based programming it's all MIT licensed out there but for convenience of my
company also provides a hosting and supporting version called flow and generally because this is a client-side Web Application of using the using our hosted version is
the recommended way because anyway like all of the code all of the stuff lives
inside your browser process and there's not much that our servers do for you except give you the necessary files for the ID so what look like at all again a
little too light here to see properly but so you get the nice big canvas for defining are in flow in this case this is a kind of affordable the client-side Web up so with full of when you work with uh client-side Web apps that are gonna no flow what you get this you get a little frame here in the corner that's actually rendering the at as it's running In this case the acts affordable so can start your webcam and then you can go through different uh uh Yale Our filters for the images and then you see right here what's going on and yet on top of the top right you have the other controls for the execution is stopped the program to protect from and on the left you can add new components and all that stuff of innovation
in the inflow and you can also or for you I use the open-source version as you can also write components there you can see the source code of components you've loaded from libraries you can write your own ideas for instance a little component in of a script in this case for passing and mark them on and then there's the test for that on the right another nice thing that
you can do on this is something I probably should explain 1st so In no flow in generally met the people we have 2 ways to get a box in aircraft 1 is to write a component this is the typical way for simple things the other 1 is to create a subgraph so that's a basically a another no flow graph where you export some offered
ports from your components and then you can use that graph as a component in another graph and to make things come a convenient to work with in the in RID you can also select a bunch of notes like when you build a program and then the graph starts being a bit more complex you start to want to and impose some hierarchy and maybe reuse some bits there what you can do is you just select a bunch of nodes and then you right click and you select the graph and then put all of those nodes all that that whole part of the graph will become a subgraph it of in this graph it will become 1 box and then you can go and edit the inside of the box and the
no another thing we have is as I said the when you work with the a browser-based anything tools are all the code actually lives inside your browser we don't send it to our server at all it's all in the index DB which it's kind of a persistent storage for for HTML client applications but of course like when you work with real software that's not quite enough but usually want to use version control and collaborate with others and for that we have a GitHub integration so you can now push and pull co changes with Europeana project right from the web by the and yeah
that's a that's a pretty pretty convenient way to actually do these things in a bigger bigger project the and just just to give you an
example of I mean a lot of the lot of the applications that people have built with no flow have been more kind of business-oriented but this is just a little fun project we did that the the sea bass hackerspace in Berlin and many if you know the gaming if you Pokémon go if happens OK but basically the same game 2 different faces made by the same company so uh have at sea bass we have a lot of interest players will come there through the air in the evenings and we wanted to do something so we built this little table and bar table with the map of the area around CBS in Berlin with lights representing the portals and showing the kind of state of play so you can have sit there and have a beer and see how your faction this winning the game to and yet all that was done in no flow here is actually the the main data-flow graph where we fixed data from the from the nurse API we do some transformations to decide what's date the label should be and then finally on the right there we
tell to microcontrollers to do things with the lights and get that kind of stuff with visual programming it's a lot of fun to work with because generally you get like with with no for this is something I promise should mention to this you generally don't have to stop Europe's software to change it you can actually rewire the graph while the sulfurous running and that's really great when you're working with something like animation like I'm and debugging and lamination they're gonna modifying the software as it's running without having to you know stop compile restarts all that stuff so I can just tweak the values and add some filters in between and then hopefully get to that effect I wanted so when when you're doing like we still thinks it's really really nice can be that have so area
as I as I mentioned there's probably of they'll hold this actually works so the when we started working on the web based tool for editing things and no flow yeah original idea was just to support no flow on no j is because that was the only flow based environment we actually had the but then during the Kickstarter a lot people started talking well enough I would like to do this I would like to do microcontrollers or Android or whatever and we realize that no doing every imagining
that everybody would do everything with no GS is not quite enough and so what we what we did was we abstracted the way uh we communicate from the browser based ID so the thing that actually runs your graphs I We have circuit that away in a thing called the the protocol we
implemented bunch of different transporters couple so WebSocket is typically used for communicating with the server process that part 1 snowfall we have been marked B C which is really cool for a while peer-to-peer communications you can for instance if you have a have an application on your phone that you're debugging on your computer you can use web RTC between those 2 with post
message for the client-side applications and so forth and what is this kind of abstraction was it opened kind of correspond 2 sides so 1 was OK here we have our web-based wrap editor but then and allowed people to build other things do there's things like at BP spec which is a unit testing tool for flow based programs this fall trace which is kind of retractive debugging tools so again uh lobe traces of how data flows in your graph and then you can replay and inspect this is really nice when you can work with complex systems but on the other side of like OK no folds are primary target but it allowed people to add compatibility to other other runtimes so we added we made no floor and also in the brochure that was 1 nice thing but then a lot of all the other things were also built that our web-based tools can interact with so a couple of our 1 example of this I mentioned the running off on the browser so this is actually no for me if you know the redox 1 may be active so redox is another kind of application pattern for building a client-side applications coming from the kind of reactor JS community and a lot of their stuff is related to this middleware swear
so yeah a chain of middlewares and actions done by the user traversed through the middle ware chain the middle worst may either pass on the action like I'm not interested in that action or they might intercepted and produce of directions and this is actually the middleware chain of the Web IDE done an awful so it's very easy to that we have this kind of data ideas from other environments it's pretty easy to take those and bring them to know full and so basically the idea itself is behaving exactly like a redox application would accept that that's not done in redox and we get to do these kinds of visualizations
so a little bit about how to how to get it going our on OJS if you want to do back and stuff whether it's some our ETL tools or web search web application some some I O the thing no it's pretty simple you create a new folder for a project you prepare your but that is chosen within a minute the you install whatever you need including hopefully no flow maybe some components maybe some other third-party libraries that you're gonna use but the important thing is to install the no flow no GS runtime so there's an empty packet that provides you with the command line tool to start your novel program and make it a wearable to the ID when you start that's how it's going output a
URL and when you click that URL what you get is a what we call the light mode so the no flow of the floor by the opens in your browser and you're going to be watching the life running no James application you just melt you can click on a click on a wire to see the data go passing through by them all that and if you want to to start modifying it then you just click it as a project and then you in perfect mode inflows of the duke and make changes of new components that it component source code change graphs push to get have all of that stuff and all the changes you do there are AP lied lied to your server and instance so if you're running some tests testing manually wherever you're doing every change you do well will become life right away there's no need to stop the notice process started again and all that stuff including the ifyou change some component code that will also we applied immediately the area I showed little
example as this 1 there's a little bit
more comprehensive of example and are assists reader and no you I just the just REST API but basically if you wanted to do your own goal reader this this little demo projects I prepared this would be enough so basically here what we do is we again we start they web server then we provide a resource there's
no if you register or if you subscribe to new feed we validate that your subscription as correctly formatted like you give the URL that was expected and all that stuff and we say the database if you missed your feeding get the list of the the to have and when you 1 the
news of aparticular feed you go here and we actually for called the world request there to go and fetch the RSS feed this is where you would add caching if you really wanted to and then once we get the results we just serve them up and again in this case the screenshot is from running out instance of the server so I clicked on that wire there because it kind of highlighted and here you can actually see the data flowing through through us you know people make requests the servers because see what's going on and to go to the brochure
side of should probably asked how many of you working client-side Web development nobody 1 to 3 4 point yet so all of this stuff basically the same ideas apply also for the browser there's a little bit more work in the sense that you have to use wet back to build no flow for the browser we have a convenience of a thing here called no flow browse wrap this basically a template project that you can they can be modified so again you fought this project yet whatever dependencies you need you build it it deployed
to whatever web server it's just some HTML and
JavaScript file so you can Robert anywhere and then you get the weather up and here the URL will be provided as a little button so when you when you build the bundle you can choose whether it supports debugging or not if it supports the running you get this little button here it take that and the life of the program will be opened in the flow of so that's again like a pretty pretty quick quick and easy way to get to this is system where you can have a the a web application that you can actually what's running media as a little
example there's just quick to due to do major where reusing react JSS the rendering layer and you can see the basic data here using the flux
but and where the you I sense actions they get dispatched to the correct handlers and then state goes back into the UI so you have this continuous loop of actions turning into state changes actions that separates it from and you can you can again watch applied so the yeah you can see like OK we create task there we believe that the task etc. etc. and the 3rd
way to use no no flow is you know it might it might be very very nice if you can start a greenfield project where you can start with no flow build the whole system with no flow but usually that's not realistic you probably have an existing codebase where you have some hairy bits that you probably want to our 1st no flow to get that trouble off the way and for that we have in in the latest release is novel we have this callback interface so what that this does this you can give it the graph or textual component does matter and returns to a function that you can call so in this case we're in they express app so as Web server whenever somebody posts to this image we would run this graph would be request and then you get the results of their so this is a very easy way to kind of In the great no flow into an existing codebase if you don't want to make the jump to full light into and no flow application right from the get go yes
I mentioned other runtimes I think that would be good to bring up a little so
the With the FPD protocols and we made it possible to go for other people to build the execution environments that that the idea can work with 1 of the 1st ones was uh something called image flow how many of you have used game the image most yet so in said game there's a library called giggle which is actually the thing that dust Image Processing it did this the UI on top of that and giggle is actually a dataflow engine but they never had a visual interface for that so with image for what you can do is you can draw graphs using all the scandal of operations so you can basically build graphs that can use anything you can do anything that you could during Game with your mouse right and you can see the light results there if you click on a wire you
can see how the image would look like with just this operation applied but you can run this on a server if you want but the other nice thing is you can actually use this graph in Gimp itself so you can create new game plug-ins using so that's pretty pretty nifty big actually also this 1 supports a component anything so can actually go and right uh new operations and see if you if you're so inclined who so this question often comes up when
I'm talking about now flows flow bike it's nice to have the state environment but no flow actually is something that only runs in a single jobs process and when you start talking about near systems probably won't be able to do everything with a single computer the and so for that no the we've got another at runtime called message field where this kind of a runtime of from Times Square each of these nodes for this is actually the I O P E I O the
devices graph of the sea bass hyperspace in Berlin we know that all the stuff missing this book more stuff there each of these nodes here it with message flow is basically it's own processes which can be on the same machine that usually are on different machines and then they are induced here so the connections between the different components or message queues so it this way you can build complex and clusters of in information processing things or you do I owe whatever you like between different computers and use message use but you can define all of that Michelin which is really nice because you can actually see how how the data flows to to get all the same benefits as you get from no flow but you can get to use that's like across computers that's something we've we used at some projects to like you millions of very complex computational operations of data and it's very very scalable and yes you can do we also have some then if the components like this 1 where we connect the uh the Nassau open mission control dashboard and we made it a message flow component so if you have some like in this i autographed there you might have some metrics that the track the uh the Nassau tool just becomes a box and then you can wire whatever data you want into that it gets logged invokes the B and you get the mustache work for the automatically yes so so the question was how are these all asynchronous and yes in and out it doesn't really matter in this case because the connections between different things are are their own message queues so each of these nodes kind of true sees when it when it wanted to read something and when wants to transmit something the yeah they're about then the next question question was are they stateless or stateful and the answer is it depends of I mean ideally ideally especially like business logic should be reasonably stable less generally data-flow off of its programming component should be stateless but unfortunately dealing with the real world where sometimes you have state and hence with most of these tools we are not banning state but you can you can make stateful components but then you have to be very careful about like the how to set up the state halted their down the state of all of that stuff because if you have so if you're a program that gets changed while it's running then you need to you need to be able to clean up after yourself what the In another nice 1 is
so how many of you have worked with artery
no or node MCU you or any of these things primitive and whole there no we have microflow which is that of writing C + + and the Arduino IDE you can plug in your microcontroller and flesh it with the microphone runtime and then it shows up and FIL of and you can it's things there so this a pretty pretty nice now a nice way to do you actually show programming also on the on the microcontroller uh this project originally all started when no when my colleague had a problem he had broken French and he needed to fix it and of course being in engineer he decided to fix it with itself solely of the he added some added a microcontroller to uh to the French and with that he could reprogram visited build a new term start for it likely that temperature numbers
Jews how much to call now not and yeah as a as a side effect he you end up building the micro framework so we put we can get out of this was now we have a microphone which allows you to be visually program and my controllers and he has an corrected fridge built in the seventies in East Germany idea have there's much of others but
if you go to flow out of it and you can see a
list of the ones that we know about we also know that there's a bunch of compatible runtimes that we don't know about but I'm seeing some some numbers related to that yeah but the no that's basically the
introduction to to know flow here's couple of euros that will give you a lot more stuff and before I take questions but the last thing is how what's the state of an awful so we're kindly immersion 0 8 which has been in production systems for almost all of the 5 years that project has been around so you can consider that reasonably stable the so we're gonna do 1 . 0 probably right after the I can get back from the summer vacation so September and the only difference between 0 8 and 1 . 0 is that in 0 8 this bunch of old Floyd gas that give you deprecation warnings and 1 . 0 those things will so if you want to get of get used to how far the major release of novel works then 0 8 is a good place to start if you have anything if you use something that has the potential warnings then you know those are things that you we probably need to be looked at so question a lot more and more we do it in the the
and I have the area of the world the yeah so the question was how about how all flow of band or no flow actually and no red uh compare and yet no right this projects from IBM that's now I think governed by the transcript screwed foundation and that's not really a flow-based permits dataflow and programming environment there are some subtle differences there but with no breadth of it's pretty simple to get started the component appears pretty limited but there's there's a few few things that I I find a little problematic 1 is that you can't get to really built like more capable component to usually pretty much limited to single input output kind of things about you don't have um the kind of more complex flow control things that we have like streams where in no flow you can no like if you have a lot of data like image file contents of an image file or just a big area of stuff it actually splitted into a stream of data and then sent chunks from that stream to be processed independently and then components can also say OK but I want the full stream and then they can wait for the whole stream to arrive and and do something with the whole set of data to have that kind of operations so in that sense I would say no flow is probably more more powerful that of course means that there are more for the guns involved and of also runs in the browser that's 1 difference 3rd environment where no flow also runs that might or might that be interesting this the known because in which can only have a JavaScript runtime uh that non shell is built with and you can actually build desktop applications in flow have formed on non-tree yes and that's the that's the main line version of non so I thought that that would be that yes so the question was why Joe scripts 1 of the real programming language right so yeah and especially regarding regarding performance so the primary reason why we do it in just about this because our JavaScript runs everywhere that's the only universal run time out there you can run you build no-fly applications that work in well OK just doesn't run in really small embedded systems but it you get pretty small and then you can go all the way to make server clusters you can do client-side stuff that runs on basically any computer with a web browser which is basically anything that they would consider a computer and so the primary reason for doing no flow in JavaScript was you can really targets pretty much any like we wanted to do a general-purpose programming environment and hence we wanted something that can target pretty much anything our performance in general is pretty great uh no flow doesn't really output much overhead on top of a plane no JS so our approach replication there's probably a few more function calls here and there so it's not really thank you can easily serve you know thousands of tens of thousands of requests from flow the problem so for a lot of things the performance is fine and for the things where you might not want to use Javascript then you have these other runtimes like uh you know Micah flow C + + so you can you can 1st 1st of all targets by controllers with
that but you can actually write C + + components you do on the server to this of the question was
whether image follows a will win the browser interface uh and the answer is yes and no so image flow itself is a server process that you run on your honor let's say on your desktop computer or whatever that has the has giggle installed and then just like all the other runtimes it uses this protocol so you can use the browser-based interface to edit the graphs you can many plate see what's going on and all that stuff so anything off all these flow-based per programs happens in the browser but with some of them the execution doesn't happen the brochure it happened somewhere else a yeah so the 1st question was how this compares to our exchanges and the 2nd question was do I rather pleaded the click might programs or uh or vitamin code
and so far xj has is a kind of reactive of flow library for
JavaScript I haven't used it myself so I countries say but I would say generally that kind of things you can pretty easily wrapped that kind stuff into no flow component or you could use the novel call back in the phrase to wrap no flow code into arched years so in that sense they are probably interoperable but I I haven't used it so I can't really say of and the the question of whether I prefer
uh drawing my code or writing my code and I'd say I really like using the VisualEditor that's why I I'm actually presenting this from an iPad because I can use the nice stylus for drawing the graphs with this like a very very very nice way to prove that that said of course when working on the like no flow since JavaScript doesn't compile it's not self-hosting so no flow itself is written in code not done visually and so every now and then when I'm working on multiple itself only to drop back to become the embrace of many think the question and all but only 2 you I think so the yeah so the question was if if there's a project to argues no flow for teaching children to program and not to my knowledge I know those people who have been doing things with the these uh Meyer about drawing robots that kind of a gerbil on top of some of flat bought paper and you can draw patterns and that's a very nice visual way to teach children but as a kind of projects not to my knowledge I would I would probably a great idea that OK I think the whole thing maybe you 1st clothing the the streaming support in there so the question was training support and so no flow each packet is just a JavaScript object that travels through stuff and then we have special packets and for kind of determining stream start stream and you can have all source substreams in the in between and then we have our own convenience methods for the components use where you can things like Haskell stream get full stream cipher and your questions in the world all the other so that yeah so the question was the licensing so but in general everything we do and almost everything in the notice community in general as MIT license so no death like pretty much everything here is under MIT license I think image flow is probably annexed set exception to this because I think that's lgpl can't be that image flow I think Google is still GPL so image image flow was probably also but don't don't quote me on that so but the at generally out if there's no reason for some other license like you know being building on top of something that's licensed differently than everything we do this MIT because I think if we want to build a developer tools we should let people protection use them for whatever they like that OK I yeah I just got the five-minute notice like 2 minutes ago so it's probably time to wrap up thank you everybody for listening and asking questions