Unit Programming Language

It is heavily inspired by Live, Data Flow, Reactive, Functional and Object Oriented Programming paradigms. github

Formally, units are Multi Input Multi Output (MIMO) Finite State Machines (FSM). A program in Unit is represented as a Graph.

The Unit Programming Language was developed in close junction to the Unit Programming Environment, which is a Web application built for easy composition of new units. The environment is designed to feel visual and kinesthetic, giving the perception of Direct Manipulation of Live Virtual Objects. The Unit Programming experience is minimalistic, ergonomic, mobile, and can be performed through a variety of input devices, and editing can be partially expressed through Drawing, Gesture and Voice. Unit is similar in concept to the Unix shell. For a seasoned programmer, Unit should feel like the 2D evolution of the Command Line Interface (CLI) where units' (commands) inputs and outputs (stdin/stdout/stderr) can be piped together into a graph (script). In fact, Unit can be thought of as a re-exploration of the Unix Philosophy in the context of modern Software Engineering and Web Development. The Unit system is set to grow into a simple and approachable Web Operating System, which is sandboxed by default, enabling a new era of Software Sharing and Collaboration, unifying the currently fragmented Computer Experience. For an introduction to Unit Programming, visit Getting Started. github

The broader design philosophy behind Unit is discussed in Concept. github

To jump right into the official Unit Programming Environment, visit unit.land (beta). site

Check out a collection of public open source units at unit.tools (beta). site See aggie's eye – abstract SVG path drawing

The goal here is to First learn the basics so I'll move this around I'll just actually reload everything start from scratch okay let me just zoom a little bit so this is units this is like an editor for a visual programming language you can see it's very empty very minimalistic there are only a few options here but let's start with the the main thing

Search

so there is a search bar here and this search bar is where you're gonna write what you want okay so you you have a collection of units there are many units already like in the system for you to select but let's start with the most basic unit the identity t

Identity

What's a unit? A unit's this little machine that has inputs in this case like the identity unit has one input a and one output a so it really doesn't do anything like interesting so I can double click on the background that's important to create a datum and I can say hey then I can drag this data and put it on the let's say foreign if I remove the output it will consume the inputs if I put the inputs again if I remove the inputs it will consume the outputs so this is important so let's go to another unit let's try something a little more complicated

Addition

so I can create any kind of data right I can create a number I can have a string I can have an object I can have an object with properties but then only some of these uh data will be compatible with the ad so they're not compatible strings not compatible why because uh if you go here on this mode you get into info mode

Info Mode

and then you can see if you hover on the unit you can see a little documentation of the inputs and the outputs in the little description so the identity only outputs a the ad outputs the sum in the inputs and the outputs are numbers okay so then you can come with the number and put it here then I can write another number one plus two three and if I change this number let's say 2 to 5 and press enter Then you see that it updated to six okay this is kind of the basics if you change the input you will change the outputs uh so I don't usually like to be writing the data like by hand so I could for instance take these outputs and you see these modes over here

6 Modes

There are like six modes there's a data mode which is like a little triangle and chartreuse color there's a green mode red mode green modes for copying for adding stuff yellow mode is for data so if you for instance if you are in yellow mode and you double click on the background it will just create a random date and for you and if you click on the inputs it will suggest an input for you so that's like good for demonstrating or just testing like a unit so uh from now on I'll be just using the the yellow mode to put the data most of the time if I don't want anything specific okay

and red mode is used for deleting stuff so if you want to clean up everything or you can select everything with multi-select mode if I'm in with a select mode I can multi-select or if I'm holding shift uh another interesting thing is that like these modes they can be controlled by the keyboard so I'm like I'm using my uh the basic ASDF to control these basic modes so for now on I'll be using the keyboard so I don't have to go like here every time and click one of the modes to see to get the to the info mode I just press Q okay

Connecting Units

so next thing you can do is connecting units so say I want to add and multiply units so I add a multiplication unit and then I just drag one of the inputs you can see that it's like uh all the the valid connections are being shown right now so I can put it here and then I can excite this input bang I have the result and then if I change it here again to say 100 you can see that the output on the end of the pipeline has changed so it has this like real active effect kind of like Excel

See also Cell (FRP)

and units a lot like Excel except that like the focus is on the code is on the graph on the computation and instead of cells you have data or uh the data might come from somewhere else like it might come from some components so let's say for instance if I come here in a search and by the way I I just accessed the search by saying by pressing comma if I press comma open and close the search so I can come here and say it's lighter and you then you have like a component slider which you can double click all these rectangular units if you want to use them you have to double click them inside if they're not like double clicked if they're not unlocked then you can basically just drag them around or you can resize so if you double click you can see that the UI has gone has disappeared so you focus on what you're using and if I change the slider you can see that the value changes here and then if I connect the slider here you can see that the value changes on the other side so here's an interesting thing this is kind of like a facilitation you know instead of like writing the number I'm using you know another machine to generate the number for me this can also be done for visualizing the number so say I have a number field a number of fields is a way of dealing with numbers like normal HTML number field so I can interact with it I can come here on the style and say that the font size would be 30 pixels and maybe 60 pixels oh uh another important thing that when people are like programming unit is that since let's see when I remove this output it consumes all the inputs you don't want those some inputs to be consumed so one thing you can do is to make them constant and to make them constants which is this dashed input I go to change mode and I click on the thing I want to change so there are only a few options if you click you're going to change between cons or not constant so generally when you want to save something when you don't want something consumed then you you make it constant so make this one constant too and now if I remove this it will only consume the things that are not constant I could even make this one constant and then next time I consume it'll keep producing forever because now every time everything is consumed they're repurposed okay now I've created a little infinite generation machine uh and this is interesting because you know if you just get like an identity and make this one constant and say one now you have this little machine that generates once forever and sometimes this is useful you know there's a Unicode one or maybe constant one and the constant one does exactly that okay so that's the very basics of unit right you add the units that you want you connect them together make some things constant delete what you don't want and connect okay so now uh that's let's say that's the the first example but I liked what I built uh and I wanted to to embellish this I want to transform this into some sort of machine I can reuse later so then uh one thing you can do is if you see here there's a circle uh and if I click on this circle and it becomes a square and then you can see that only the components the rectangular units which are visual units like for real like they they would be exposed so you're liking layout mode right now in layout mode I can add other units like a flex column and I can reorder them I can also resize but then I want to add these two items uh so I selected them and then in select mode okay this mode has to be activated if you want to do this compositions and then you long press on the column then you have like your items inside a column oh I just like removed them so long press to put in or select and long press again to remove long press to put in okay now I can double click if I leave the muta select mode and then I can interact with it so it's like they're so pressing L I change between the layout mode and the graph mode the graph mode is where you do the logic in the layout mode is how you just like lay out things on the screen and now that I have finished my uh the machine I want to build I can just say select everything and then I can press here on the motor select mode and I will compose everything by by pressing long pressing on the background Bang so I just created a new unit called Untitled and it behaves the way I just like programmed it I can come here and rename it to rename a unit oh to rename my unit I go on to info mode and I click on the name then I can rename it so this is going to be slider Plus number and now uh how do I get inside this unit I just have to long press it and then release then I'm inside long press on the background oops I got a little bug here uh then you leave it okay so that's that's the very Basics I think like now we can like do a little stuff and maybe ask some questions I don't know

Keyboard Shortcuts

The modes they are activated like the most important modes the the ones that modify the code are this far here okay so these can be controlled with ASDF on the keyboard right now so if you press a you get to this chartreuse data mode then as for add then D for deletion and this F is like change okay let's put it in the basics cool and then the the one other question I had right away which is probably probably the number one question I see people ask when they when they first see unit is the little orb the little like omniscient science fictiony you know Guilty Spark orb that's floating around uh does it have a name and does it have any specific purpose or is it is it merely decorative or or what what do you call that thing and what do you think about it

The Bot

that's not a basic question but yeah that's the that's the bot um well like the butt is optional you know like it is it is a unit right now if you uh write bot on the search you can see the bot again uh uh you know and uh so the bot is here just to kind of like be a companion uh and kind of like sometimes I'm not showing the the the the mouse and so the bot like kind of like manipulates everything for me like from behind so it's kind of like educated but you're not obligated to to have the bot you know it's just like the the default experience okay so let's do let's do like a more uh a common example

Counter

okay so let's do the the counter thing I want like a number field all right and every time I click on this field I wanted to increment okay so first you need like to be able to get this value from inside then you come here and say get there's a get function there are two gets here uh I'll put the two of them you see that this get one has like a special input which is kind of like linear these guys can only usually connect with other units so this Gap is like a method calling I'll remove this one so if I get the value of this inputs then I'll get zero okay um get value it's coming here and then the inputs now I don't have to write value anymore it's the get value is already undistracted for me I just have to excite this input to get divided all right

so how do I get like one click how do I identify one click you just go to search again and say on click there are many like other events like pointer down Basics like web stuff so I'll go with one click connect it here and when I click on the thing oh I guess um actually let's let's put it like on the other buttons to to increment and decrement

I'll have like icons two icons okay and the icon here they're part of the platform there are like a couple icons you can pick lists you can have the style of say cursor uh is a pointer copy the style here that's an interesting I can do with like the the green mode if you're running green mode you can copy things and that uh style property is that just any CSS or is it a certain Basics CSS yeah anything CSS uh I could come here and say background but we'll get there okay

so whenever I click on the increments you see that the click like has some click event information but I won't need it so just like connect it here to get the value right click and I get the value then I increment that value and then I can do the opposite set the value here then you can see already changed and then you can come here double click on the icon and then clicking on it I can see it incrementing and then for the decrement I can basically just copy the same thing you know you can copy the unclick could copy also duplicate this I don't need to duplicate it necessarily but it'll look cooler I guess I don't look it a little bit uh actually I'll have a decrement in this case there we go oops what happened here yeah get value I guess [Music] okay get value something weird went up but you guys get the point point okay

so in the end uh I could save that unit I didn't show you how to save it yet but we had it here that made this calendar field you can get inside and you can see the same the same logic yeah not sure what my it stopped working right now all right so that's like for the counter any questions Ivan

(21:21) um uh I mean this is very cool to see um there were some I don't know if anybody else on the call is getting this or if it's just me but there was some uh some internet hiccups there for a second um I see uh some other folks saw that as well audio oh okay yeah um so yeah if that's not just me seeing that I'll uh I'll I'll flag you down uh Sam if that uh happens again um and uh yeah if anybody in the in the call here wants to take this opportunity to ask questions um we could probably do one or two right now um and then move on to the next demo

I have a question um would it be possible to show us like that incrementer or something like that with layout mode again like like the button sector to the counter uh okay so uh here like on my desktop I kind of have like many files so I can basically whenever I want to pick one I wanna I just drag and drop them inside I'll make the counter field oh now it's working for some reason yeah uh okay so this is the mini map right kind of shows like the overview we have the counter here which is kind of the the main the main functionality but there's a little Flex role here to give it some style so if I enter layout mode you can see that everything kind of comes together and that's how it would work like layout mode

Transcend

another like powerful thing is this button right here which is called transcend but like it's used for if you select things or if you don't select things if you click on it things will go like kind of full window you kind of see uh the resulting website of that graph obviously like not all units have like visuals not all units have components not all units are like visual websites but they they are all websites you can visualize them by clicking on this button okay and you see how it works is that was that your question?

yep that's awesome thanks for the added yeah so you can get inside this route uh and reorganize things you know I can get inside the route and I can uh maybe reorder here okay that's it that's how you would really uh uh the website okay so just before you uh go ahead I think uh car tech also has a question he uh raised his hand

Motivation

Could you say a few words about your motivation um one thing that wasn't apparent to me before this call started was that this is uh it's web Technologies under the hood uh and it seems like so far what I'm seeing is it's a way to build little widgets like with spreadsheets you can build any spreadsheet you want but in the end it looks like a spreadsheet with lisp you can build any macro you want but it'll still look like a macro here you'll get things that look like unit um I'm just curious how you think about the problems that you're trying to solve

and that's a complicated question but yeah like units is uh you're right like it's inspired by the web uh and I really like because I come from a web developer uh professional background so basically I use a lot of reacts and whenever I was in I was using react like I was imagining this sort of like manipulation with the components you know so this like this is the way I like I I see the structure of like a website right like the hierarchy and the difference between the logic and the you know the state machine logic and the the layout so I'm really trying to make this uh at least uh super useful super powerful for small machines or small Computing tasks you know like I'll be showing more examples and you'll see like how how far this can get

yeah sounds good thank you yeah definitely like my question uh it's possible that you'll answer it later Okay so another example a little homage to our brand along k so I have this guy here and if I use it you see it it has a little presentation right it's just another example but then obviously like Alan Kay picture is not like a Primitives it's not a unit that's already in the system it's it is right now like an open source but in your normal like editor it wouldn't be so it's probably something that has been built in unit so you can long press in it and get inside and you can see that it now it's built on top of a primitive like an image uh and you can see that the the logic here is actually pretty simple there is an allen K picture source there's an iterator and there's a non-click like we saw so if I click you can see the data flowing and changing the URL and you're like okay so I'm curious to know what is this Allen K picture source the one thing you can do to debug a unit is basically copy it and then you have like a an isolated version of that unit for you to play with and you can see all this the inputs and outputs behave in this case it's just outputting a bunch of urls and you can see inside if you go inside you see that it's like a for each with the this input as an array constant and that's why kind of like it never stops with outputs one by one one by one for each forever so that's kind of like this the data source of this little and then you can go full window and see how the the website will look like this is one thing I would like to to show it's this ability of whenever you're in doubt of how something works one thing you can do like besides asking for the documentation uh is to make a copy of that unit and uh get inside or you could get inside like right here and you can play with the outfits no fear then you kind of learn how it goes if this wasn't uh constant let's see what happens so I make it not constant then I consume the inputs by deleting them with the the red mode yeah that was too fast see so it was consumed and now like you we've already seen like this interesting unit because it's a it's a unit that outputs more than once right so I should probably go here I'll put 1K on the side

Loop

and let's see how like a loop works like there are a bunch of programmers like when the audience so like we should know like how Loop works so every time you wanted to iterate something on unit you've got to use this Loop the Loop's kind of like a more complicated unit but let's see how this works the loop there's an initialization right I can start with zero and then it outputs a local and this local output here helps me decide if the test is going to pass or not

Test

so I'll say that the test is going to pass if this number is less than six or is it less than six true then I put it on the test and now I have the current so now now it passed the test I have the current uh you know just like and now I want to this to increment okay I'll get the currents and give it the next and you can see that it like it kind of looped through uh forever until uh the condition has been met until we've got a pulse here uh but I will put like some another unit here just to kind of hold this data before it's consumed so I can come here again and say zero so you can see that it like it did all the loop but it also output it here and it kind of got stuck so then I can uh delete this guy and see the the loop going on and then I consumed again I could even like make this guy a constant zero zero and then consume it again and then we reach five it starts from zero again because this guy restarted the loop this is like a little machine the loops uh until six from zero to six and I can come here compose them and now we have this like unit that outputs more than once okay so this is for the loop and with the loop you can do all sorts of other uh more complicated units units the output many times that uh get many for instance we already see let's see the range

Range

the ranging goes from zero to B from sorry from A to B so it can go from three to six kind of like the python range it outputs three four five and then it gets consumed if I like this uh this pattern I can say two then I can make this one constant I can make this one constant two and then I have this constant generation if you get inside the range you see that it's a a combination of two Loops basically Loop repeats which is built on top of the loop loop increments and the less than logic so this is how you do loops

Map

uh and this is useful for everything right like for you can map things I can have a map and here's how the the map would work right it got an array as input but I can put here four three five little output the thing and I want to map them to double they have if I connect it here you can see that now this unit is a unit that receives an input it kind of needs like a machine outside to kind of decide uh what's going to happen with each element and then it outputs there's a result if I change it here it changes the out but then it computes again

okay uh so we saw that like there are many units uh and most of the units they're like arithmetic functional units an example these two units uh work that way I've shown you right like if you consume the outputs it will consume the inputs all right but there are some uh other units that don't behave this way those are control units

Control Units

let's give you an example a nif an if is a control unit that has like two inputs so if I put something here and then I put like true then it will pass okay is that what's false it won't pass and it will consume the inputs okay um so let's see if we can do something with this like with the IFS uh or maybe some combination let me get an example I get a text box you could start with the text box and then I can say not over it okay um you can see that this like uh value input here doesn't get concerned this is on purpose so it can uh you know modify it and not see it and see the result or not have it consumed but then let's let's change this to hovert if we hover on it okay so let's try on pointer enter double click okay and go to pointer enter and I can also get uh on pointer leave now you get these two things that activate when I enter or leave so that's easy uh another control unit is the wait

Wait

I use it a lot it has like two inputs a is usually the most important input and B is kind of a secondary for this case if I have something on the wait I can put anything on the if I put anything on B then it passes even if it's false that's why like it's kind of a transistor so I can have two of these uh and one is not over and the other is over okay when the pointer enter I'll Transform this click event into a hovered and then go directly to the value and here I'll turn this guy into a not over and go directly to the value as well and you see that like one uh when you have like a merge like this only one inputs will win right the last one the input will take over the value so then I can over not over over and over if that was over not over so that's it that's one principle that's one way of doing this any questions I'll come back here

(37:54) I think um cartek had a question first and then Lou Wilson has a question um I changed my mind in between so happy to let Lou go first oh thank you yeah this is so cool I have so many questions but I will just ask one um like I think with this example I've started to notice a lot more of like how things move really fluidly and everything feels quite quite weighted like when you were yanking around those like pointer events everything came around with it and I'm just curious to to hear a little bit about the the process of of making that like did you just get it right first time or did that take a lot of thinking like yeah yeah well okay more about that

yeah that's a good question because like units really like a you know like the whole for the whole Simplicity and fluidity fluidity of like the interface like the the actual back side of it is is very complicated it's very big you know that there are like files of like 60 000 lines of typescript uh uh and for instance like this uh the simulation Behavior this physical Behavior was was hard to kind of get it right from the start it wasn't there you know when I started unit like it was supposed to be just like another JavaScript library you know something like um on the lines of trying to replicate functional reactive programming like in JavaScript something like that uh but then I found out this way of visualizing uh I found out about visual programming found out about like functional reactive programming and then had this idea of okay so if you if you let the physics simulation take care of organizing the nodes there's a chance that the the final stable uh states of the simulation will be like kind of like aesthetical and that's kind of like what what happened you know so basically let's see the famous merge sort unit

Merge Sort

if you get inside the website unit you could like try to mess it up and you see the all the the physics kind of always aligns the unit into something that's kind of aesthetically pleasing that's what like I mean that's just like one challenge like in this interface uh obviously like um moving away from like traditional web design uh layouts for instance like units UI is like command and control uh that's the best term I found like for for this sort of like inspiration it's a commanding controller interface like using the military uh but yeah like I don't know maybe the answer to your questions yes like uh there are lots of like hidden challenges like to create the UI um and the inspiration came from from everywhere it's hard to pinpoint exactly um I don't know yeah awesome thanks yeah I think it's it's really paid off all of the work thanks cool um okay so what did I show I think uh can I just ask a question back with a question yeah um yeah there's a locker digest here uh I had a question that I thought was answered

Pumping Mechanic

um it seems like this I don't quite understand the pumping mechanic here of when you decide that inputs turn into outputs um one thing that seems to me to be true is if you get an input anywhere and you have all inputs available then you get an output um it's not clear to me when you consume the input sometimes or dashed lines for something to stay and not be consumed but I think from the conditional example it sounds like each uh unit has its own rules as well it has its own ability to decide when it consumes inputs

so yeah yeah that's why I was talking about the the difference between so when you open the search and you look for like normal units let's think about concat

Concat

this concat array unit is for concetting array so it has this app tag over it uh every unit that has this F is is a functional unit so it behaves like functionally I guess that's not the best term but uh that's that's where it comes from so it will only uh uh it will only work that unit will only output if you give it the two inputs okay if you take one input you remove the output if you have just one it doesn't work right so most units are functional like that and they're actually functioning their like academic sense because uh you know like they they're pure they uh don't mutate the objects that the objects are uh they're cloned okay and I can say split in half this array and you can see like the split in half unit is not a primitive but it still works also like functionally so I can have to consume all the inputs the outputs to consume the input and but then if you get inside the splitting unit you see that it's only built on top of other functional units uh so uh in the end it behaves like functionally as well okay but there are other units which are Primitives as well uh which are control units I'll give some examples there is a lever units there's the weight units I've shown there is uh the if what else let me see a switch Maybe Okay so well we've got a little problem here let's start a lever the lever is a oh a lever is not a primitive I'm confused what is the primitive let me try it if else if you see the if else if it's true it goes to two the two else if it's sorry if it's false it goes to else if it's true it goes to if that's like interesting for you know going different directions depending on the on a Boolean and if you see the if else you'll see it's basically just a combination of two control units the if and if not yeah I don't have the list of like all the control units but there are some

um yeah yeah I wasn't expecting a full reference of the whole language I'm just trying to give an intuition for um how many so I see two kinds of arrows the solid Arrow seems to consume and the dotted Arrow seems to not consume but with if with the Primitive if control uh a gets consumed but B does not get consumed or a gets consumed only when B is true or something like that I'm just wondering let's say is the number of such patterns like three or is it 600

say again um okay let me talk about the different arrows I've seen I've seen solid arrows I've seen dotted arrows and then I've seen the Callback arrows where you can just attach an event to a more complicated box like a text box or something like that um are there any other arrows like that that have like their own semantics

no yeah so they're only uh these two types of errors which uh one references which you can only connect with other units uh normally and the normal the normal ones which you can put like normal data and both of them I guess can be like constant or not okay so if uh if the the a of the if is constant and I give it a true then it passes right and then if I consume the output you will see that only the true the B will be concerned oh I see yeah in fact like this one input was consumed as well but then there was like kind of like immediately replaced by another and then kind of initiating like if this if B was uh would say constant true then this the if wouldn't work it was just like but then so now I'm imagining the dots as uh streams the solid arrows are single values and the dotted arrows are streams of values

yeah you can see it like that a stream of the same value right but you could uh they kind of you know if you go for a random right a random unit is a primitive and if you excite it gives you a random and it can excite it multiple times a different random so if I uh make this one constant then it will produce infinitely because it only has one this one input right so it when I pull this it consumes and then it comes here uh sees that it's constant and then like outputs again then restarts the end and then I can say use this property to iterate on something say I wanna build an array there's a unit called and a raid dealer which is kinda first its own logic inside but then I give it like a number of elements that I want let's say I want on four elements and then I can put anything on the inputs we see that these inputs are being consumed right away yeah so this is like uh this is the unit that's built on top of like Primitives and control Primitives simultaneously so I can have this Behavior uh and then I can put more here and then it outputs after I have gave them it the the four elements if I connect the random here I'll create a an array builder of random elements so there you go you have kind of like a stream of random arrays

so the stream itself I would say it's the whole thing is streaming and uh this guy is just kind of like a stop you know you get used to it thank you I've got one really quick one just before we go back to demos and that is uh do you have any way to tell whether a unit is a primitive or a composite of other units good question uh visually there's only one indication there's only one indication which is the size but it's very subtle like this you can see the the array yeah I mean what like the final proof is okay can I get inside this you know you know can I long press on it you see that this one doesn't animate but if you try this one you'll see that it kind of animates right that means you can get inside and then when you're inside one of those composite ones there's an arrow pointing to an arrow pointing to the unit is that how you do inputs and outputs okay so yeah good that's a good problem I'll start like another little class here

(51:12)

cool so um what's a famous a very simple okay I'll just add two numbers and then split them in half so it's the the average right so I just created this unit and I tested it and it works and now I want to create I want to I want to create this unit right like a Trader unit that does this uh averaging one way I can do is I've already shown you is like let's select only the units that will go inside right so I left these inputs outside in this output outside and then I can go to the long press again sorry I can go to the muta select mode again and then I can long press in the background bang I create a new unit and then this one I can get inside and see that it already has these things which are the inputs and outputs of this Graph okay so those were like created automatically right but foreign there's a way of creating those inputs

Here on this layer which is by drawing and I'll show you like a very uh I mean if you get used to it like that it becomes easier but some people have trouble with this gesture

it's like click and hold click and hold and you see it give a little animation so now I can kind of like draw okay so if I click and hold and draw from the center to the outside like this I create an outlet if I click and hold from the outside to the center I create an input and then I can uh come here use the same like info modes to rename it so I don't know what that would be okay

Gesture System

(53:30) so unit has this like gesture system for creating basic things okay so if you draw for instance a circle you get a new unit if you draw a square you've got a new unit but this time it's a it's kind of a component ish unit all right and then if I want to add like an input to this unit here I just created I kind of like start the drawing and from outside to the unit then it's an input from the units to the outside then it's an output so you can see it's kind of like easy and if you get inside the unit you see that the inputs and outputs that you've created are there and then it can go on connecting right uh these plugs I call them Plugs right uh uh very useful for other things as well like I don't know if if we just like build it up that example from the loop again very fast less than eight um it's either they're consumed I could uh draw an inputs or an output here on the on this merge from inside out and then I add a little plug to it and now if I do it then it does that job of holding the data I can debug it and then uh if I select everything including the plug and compose it oops I guess problems but I was going to show that if you have a unit and then you want to rename an input say [Music] your name and then you compose this unit you get like the output already renamed and then you can go on

Top down programming

this enables kind of like an interesting way of programming which is I call it top top down programming which is like uh you don't know like how you're gonna feel the things uh how you're gonna make the program but you kind of like have an idea over the architecture so you can if you enter the multi-select mode again which is also the composition mode and you just long press on the background you create there's a new unit right so and then I can say oh I'm sure this unit is going to happen on output I'm sure he's gonna have an input too and then I can use the composition modes again to compose here to compose here so I already have kind of like the architecture say you know this program here could be there's a source of data you know uh messages coming from Twitter right I could come here and say Twitter and then I say I can call this guy it could be a filter so this is like you're you're visually exactly and then you can come here and say send to phone and then uh then you go about like get inside and filling these Gaps right you could also go to change mode and then say I want to change this guy for something else then you can use already a unit I can change this guy for something else and change this guy for something else right and now you don't have the holes anymore so yeah I would imagine someone could come here and like just like out of imagination I'll need two outputs here come get inside get inside and then he can do you know can do the whole template of the program or maybe like do the program uh partially right so I implemented this side and now this guy is not implemented but it's stuck there and then I can tell hey someone come here and implement this

um what do you think Karthik oh I love it I'm not sure if you're asking something no yeah I'm just uh yeah so uh okay so more on this um so say I started this unit it's a new unit and I want to share this to no actually I want to see inside and outside at the same time the whole unit experience you know the whole app the whole unit app uh is the unit so and it's uh in fact like the editor user unit so you can add an editor inside and then you can double click on it and then you can program inside this one editor okay and then move it around and then you see that the editor has a graph input here in this graph uh you can connect to any like valid graph so I connect to this one so now I can see it inside if I excite here then you see the inputs here okay that's interesting uh and that enables kind of like say let me see if I can do this um let me give an example so let's say you're making a website right I'll put some placeholder components here there's this random color div which is just a then I go to layout mode then uh I can I want to put them inside a column I want this too like inside the realm I want these guys inside the column to see the website all right so I mean this layout mode now and now I can't you know access unless I leave the layout mode uh to you know I can play with the style inputs you can put it here and say it's like just 200 pixels okay so uh one interesting secret I have here is that like also this button if you long press on it and at least we call this like a long click you put everything inside an editor so everything you had before is inside an editor and now you can cast another editor and connected to the graph inputs with the graph output and now you started a kind of like a collaborative session with yourself okay uh and I can say keep this one in layout mode and this one in graph mode and now you can like kind of play with the style NCD layout this guy could also be like full window so you can see you can play with the graph the logic and then see the result right away on your site so basically this is a concept of collaborating with yourself you can basically create the editing the programming experience that you want okay I could have multiple of these what happens if you press the the transcend button on the topmost transcend button right now this one yeah both will go for window [Music] oh that's cool okay yeah like so whenever you have like uh components here you just like to you can select them you only pull window all of them and since this like divs they take 100 you see like a list of things that take 100 percent I kind of already shown that then you could put them inside here and select just this one go for window then you have all in a single place CSS and um an extension of this ability let me show you that's actually pretty interesting um let's say um let's see something like canvas actually let's see a chalkboard I created this chalkboard unit I can draw you can double click and then it goes empty uh and just out of curiosity like how does this unit work you can get inside and then you can see all the events you know the processing you can see for instance that there is a hard to read here but on double click it will clear and on drag and we'll do this operations add line two stroke things like canvas operations that's what does the the drawing and you can see the points being consumed over there and inside the booklet then this one runs and then okay um and that's cool let's see what happens if I change the color here to red okay um but I don't want to write this objects so I can tag color and Tech colors just like a composition and whenever I put something like red here then it outputs the color tagged and that kind of like reduce the amount of work that I have the right okay but instead of writing this I could select from another inputs like a color field or a color oh there's a color one okay then I can connect here you can use the Color Picker um interesting so what if I'm trying to think of something cool to show here can I ask a couple quick questions just what we're here yeah yeah go ahead please yeah one of them is that I noticed that you sometimes delete an input from a unit if you don't need it I'm I'm curious if that uh like a I'm curious kind of what that accomplishes if it's just for like visual tidiness or if there's any other reason you do that um all right so yeah so if you go like on green mode you will see like some other nodes are showing up like these inputs there there are ignored right now so they're not being used they're not important or they're not necessary right so they're ignorable uh uh you could also like kind of set them and say that the only what was my worth 100. and then I can ignore them so just like take them out of it do and they're still there and having nothing they're just not visible yep yeah yeah sometimes I just want to focus on a single thing the one other question I had and then Elliot um put their hand up for a question um is there any way to see where the data for The Strokes on the chalkboard is being stored where it's being stored yeah like is there some way you can go in and like show like here's where that data is being where's that where that state lives okay so the state for the canvas lives inside the campus that's basically it uh obviously it could output as well this is a good idea actually so I could output and then you could like kind of combine canvases and make like some like some build up but but yeah you could uh the state is stored inside the the components it's kind of like this D attribute is the drawing itself obviously like I'm uh I'm kind of manipulating the state directly here I'm mutating like directly on the components by calling this method Draw d um but that's it if you want to access this this value then you would do something like like we did for the like the get value cool you would have a get the right um and just to kind of like finish up one thing we can do based on that like early idea of uh sharing and collaboration is that let's see if I can do this um how long click here to put everything inside an editor and then I will let's look for share and there's a peer share unit here which is a unit peer share graph which is supposedly to share a graph allow remote peer to connect to this graph that's let's try this this um you can put some options here or use like normal servers and then I connect to the graph it will give you an offer there's a spear to peer happening right now no action put my camera here um and now I'll get my phone okay and I'll go to unit land and uh and that's cool because like units very useful like on the phone you know like this this minimalistic interface and like I kind of like put a lot a lot of work to make it work well like on the phone so I can like you know do programming while like I'm not like sitting um but then I can copy this offer here and I can paste on my phone using the global clipboard you guys will see in a second uh come on the internet so then the internet knows that you've got people watching yeah the internet yeah it was gonna be cool but the idea is that it would it would bring this works before yeah yeah yeah so like I could uh I can connect with myself like peer-to-peer obviously like this this whole offer and answer uh exchange could be simplified by someone like cloud service or something but I can't peer-to-peer with myself here so in the other side on my let me see if I can copy this do you want to try it in maybe a different window or something like that like a different Chrome window good one let me try I'll duplicate these windows and then on this side I'll have a peer graph and an editor as well and then I can say copy the offer you see it like that in blue mode when I'm in blue mode I can copy things if I just click on them on green if they go to my clipboard so if I go to this side and do a double click on on also green mode then you get the graph on the other side so I have the offer put up some options I have the answer give the answer back here and that that way of pasting is nice because it lets you pick where the paste is going to go and now you can see right in the canvas like the the two oops I just put now yeah yeah but like here you can see that then I could like uh basically interact with myself peer-to-peer then I could use the say say they use my phone to select the color and then use the computer to play with it. Questions?

Elliott has a question part of my question was answered by that but um I guess my question is is the peer-to-peer uh can both peers edit the same graph yep yep yep yeah it's much easier when you peer-to-peer with yourself if you combine the two things gear graph if you just straight up get the the offer with the offer and the answer with the answer obviously like in normal situations you would share them like I was trying to do you know like open Pace manually or uh but I can have the two editors when they're your uh okay so one editor are you see this unit this output here is ignored right now so I can go to green mode see them click them and then it's not ignored anymore I can share it and then I can do the chalkboard I guess there's something some API missing yep I've been doing quite a while I need the slider yep you see they're connected so is it the case that the graph um arrow is both sort of a Setter and a getter and that's how they communicate or is there some more funky stuff going on under the hood oh no yeah this is a Weber to see peer secure stuff is is more complicated this is a primitive right now like in the system but it basically does get like a you see that this output this output here is like a special output like the those method inputs it's kind of like the opposite version which is a reference this is a direct reference unit doesn't have like the references they don't travel they're not capable of traveling right they can only be like controlled through these like uh method units through this like special referential like inputs but the graph doesn't doesn't travel like in the data flow it stays kind of here so everyone that wants to access it uh has to kind of connect here like physically okay I'm gonna get to reference and then it says okay share this graph like create like a bunch of channels and peer-to-peer connections to you know to make this communication my last question is is the editor A Primitive or is it something you can get inside as well uh no no the editor is not a primitive uh right now but that's kind of like the basic bootstrapping challenge of the of the the projects you know the other super complicated you know it enables all this interactivity but then at the same time there's a constant effort of like taking pieces of the editor and like making them units uh but the there's a unit called root which is this app in itself so you can use the app inside and you can see it has like the GUI uh and then like for that question like that I actually remember that like Karthik asked this so if I don't like the bot then I can get inside like a bunch of units and then I can see that the bot is also a unit and it's in its graphs kind of like isolated in here or like thankfully so then I can basically just delete the entire like graph of the bot keeping the logo there and then I have the same Roots experience without the butt of course like uh I mean one way of using this could be say I just added this group unit but it's not the roots anymore they could call it a my editor my unit editor oops and then if I do Ctrl s or maybe click here it will download this unit called my unit editor and then later on you could come back like to unit land and then uh get this file that you saved put it back there uh obviously like later you'll be able to get the units that you created like and like kind of serve them as websites and then you would have basically like the the editing experience without the bot so that's like one interesting aspect of unit it's that like uh basically you can choose how like your experience is going to be because you can always get inside and delete some things obviously like some complicated stuff like the editor still not done uh but that's the the base philosophy right some people might like uh so people might like to have a sidebar you know like there are some visual programming environments that like uh have the the search on the side as a sidebar with a bunch of uh other units here then you this is a sort of experience that you could create in unit if you wanted very cool um we are well past an hour we should probably um do any last demos that you wanted to do Samuel or if anybody has burning questions um we should probably hit those and wrap up sometime in the next 15 minutes or so um so yeah if you if you had more demos you wanted to show um let's crack into those or if you're ready to turn it over to questions uh we can just go let's go for the questions yeah it was kind of like yeah okay uh sorry uh yeah cool go ahead is it possible for a unit to do you have like a demo of the a unit modifying the graph like could I build a worthy wig of unit and what unit will well a unit modifying a graph yes um well there are metal programming units you know if you look for say add unit there will be one of those method units that receives the graph and it has a class and the ID you want to add so to connect it here and you put a class and you put the ID then you can see that the the unit has been added I think you'd be doing that oops um and now that's kind of like revealed another thing that I gotta you know talk about but if you start from any unit they even an identity if you go on any of these modes and you long press on here the core like this you can remove the unit ghost okay so now you have kind of like the ghost in the body and the ghost can return to the body becomes the identity again and the the body is basically just a template like a whole with inputs and outputs but it doesn't have anything inside so every time you have a unit that has is this empty that becomes kind of like a body um so then you can extract the class and so let's see the editor again it's still at the Ender it starts kind of empty and this guy is uh is activated but it doesn't show anything because it's empty but you can actually excite this guy with things that are not references you can excite it with these ghost data this classes units but one interesting thing about this is that the class is not like executing that if you try to do something here like to activate the style for instance you see that it doesn't propagate so this like unit is paused right now it doesn't work you can set it uh the the the data inside and uh and maybe even get a copy of it right if I expose the graph here and then I say class I can extract the class out of this graph then I have it again uh and okay so I have the class how do I go back from the class to a physical unit you go to data mode and you long press on the ghost and you can see that I already had the the data that I had put like inside this class which is cool right so it copied the I think it copied everything like deeply because I could copy deeply or I could copy gallery in the next time I guess okay so yeah so there's uh there are these classes and then you can do like meta programming you know from scratch get the graph add unit or you know so this is like a meta programming unit so you can basically tell which units to add do the same things that we're doing like manually yeah I'm not sure if the meta programming is like what you're looking for but that's uh that sounded related yeah thanks for the additional demo um yeah so yeah then many things can be built like in unit I'll give you some last examples there's this like round switch guy uh how do how did I do the round switch you can see there's like some uh sometimes like a graphing unit might look like too daunting but that's probably because you you didn't do like some maybe basic composition you know I could get this guy and compose it and then call it uh background Style right so when I compose the units then they become uh then the graph becomes kind of more bearable to kind of read step by step uh I was also going to show like this um let me see if I can find it I did a little to-do app um let me see if I can come here laundry I can watch this video okay so if you get inside you can see that there's a little machine here that does all the things uh for instance like this box here it's the box where I write and then you can see that like if you go inside you'll see that there's some logic with uh with a mentor every time I press enter it will oh so here's the control unit like for curiosity for Karthik there's a control unit called plan which doesn't behave like a normal like functional unit so it has only one input I put one here then it outputs first on this output zero then on this guy so every time I uh I want to do some uh sequence you know like sequence of steps like something must happen before something else happens right I can say something like um first I will send this guy like on a network request I won't do a network request here but I can pretend like with the delay okay I can say a delay of like one second then I connect here then it takes one second to let's see and then it outputs here so like in JavaScript this will be like waiting for a promise right but here is kind of natural like the async part is it's taken care for you so as soon as this is consumed then I will open here this is for the plan unit and what I'm doing here like in this input is you know every time I press enter on Enter key down I will use plan to First I'll get the value and I'll put it here if it's not empty then I will set the value to an empty string so basically it has this effect of I write something um what's the task what do I have to do Ivan you have to feel fantastic because this demo is amazing things so a few fantastic and then it eventually opens the child to the and this one example is you saw that already worked you know sorry I already had some data when I put uh put it in because it's using internally let's see the get out to Do's for instance they get out to do's will basically use the local storage they will get something from the local storage and then parse that Json basically so everything here is like using the local storage so that's why I can have the persistence and it's kind of like related to why like a code unit not just like a visual programming language but a system because you know the web was already a system to be used but then uh it needed like some wrap up and sandboxing additional foreign but it's it is a system in the sense that you can like create your own you know you can build your own um your own system that's it just the system for building other systems and I guess uh yeah that finishes the demo let's go for the questions yeah uh I'm so this was really awesome like it I've looked at unit before but I never knew all functionality existed here right like there's so much here and so I think on that you know have you thought about doing maybe like a in unit tutorial like this really seemed to like lend itself to like I can imagine like a video game style tutorial of like you know building the basic things and then I get to the next level even things like just from this explaining the bot to me was uh an eye-opening like oh this is the kind of system I'm in because up until that I I just didn't I was like okay what is this circle what am I supposed to do with it yeah I'm just curious if you have any thoughts on like a tutorial or you know yeah that kind of yeah so uh yeah obviously like uh I thought about a tutorial but since I'm like uh uh units only developer basically right now I I've been focusing like much much much uh more like on the functionality than on the documentation so they're like you saw that there are a few like rough spots still like to to finish so I'm kind of like I feel like the responsibility like my responsibility is like okay I gotta keep this this system like robust because people might be using it and then I end up like not having time but also uh I want to build like the next website like my websites with unit right so it takes a while for a unit to have like also the not only the functionality but also the apis available for something to be to be possible to be like exposed to be created to some website to be created so but that's basically the Paradox you know like oh I want to create a unit tutorial oh but I want to do the unit oh but I need the features and the apis and then like it never comes up uh I understand that like a unit's been a mystery like uh it's it's being public for in open source for the past two years um in the documentation is very raw but it's doing better you know like there was one guy that uh there was no documentation back then like he just uh got this interface and he started like playing playing playing playing playing like with the units and then he figured out a bunch of stuff like all by himself that was and he made a video like on YouTube so that was kind of like the go you know like just give the tool as it is like a physical tool like similar to an appliance that you have at home you know they're not making like labels on stuff but like through experimentation you can uh you can learn a bunch of it but yeah one day one day we'll have the tutorial or if you want to like write a tutorial for me Jimmy hahaha yeah no totally understand that there's always more work to do so you know uh I'll definitely try to play with this more and see if I can uh if I can do some stuff now that I've seen this this demo definitely helped uh show me all the capabilities quite a bit so super happy that you did it yeah I hope I have uh shown you guys like enough um that's probably like some things that I haven't shown you know like there's a little keyboard here this keyboard is here only because of mobile uh because I realized that like the programming experience is like on mobile is very bad with the the platform keyboard but then I can identify if this is like a mobile or not so the keyboard is here uh uh and it's useful sometimes you know you can actually use it as a normal keyboard um some options here for deeming basic I guess it doesn't work like perfectly who needs light mode it's overrated yeah uh there's a microphone identity it works sometimes depending on like on your English and Google's Mercy chalkboard this is specially useful like on mobile right when you don't want to like write stuff um yeah so you guys get the dream right like the dream is like can I have like a a full system you know can I personally I would like to have like all my projects like in one place all my research all my work management all my personal stuff all like in single environment which I never have to context switch you know I never you see like the food after the the presentation I didn't have to go outside to do anything uh related to unit I can do it everything inside and that's kind of the goal so in the future you can imagine like this workshop for instance like we could have like a unit that was built to be like a workshop unit so like with all the you know I that's to be done already like I've used the peer-to-peer to share this like mirror and then I had like a an actual real-time conversation with like someone and it's like uh you know when you use like other apps I'll give an example like if you use Google meet uh then you usually sometimes you get frustrated because you can't change the experience you know like you can't like make this window for window where you can put the guy like on this on the side like they chose everything for you so but in unit since you control the whole website then you can always get inside explode and change the experience as you want and so you have basically if you know like oh it's a programming unit then you you have the experience that you desire that's basically it that's uh I think a very lovely point to wrap up on knowing what the dream is and hearing your articulation of it and seeing all these demos um I think a personal highlight for me was watching Lou Wilson's little video repeatedly having their mind blown throughout the the course of the demo having like sparkles and steam flowing out um did you record that we have that on record oh yes that will be there there'll be the loo cam the Lou the Lou reaction cam um yeah glad to be a part of this yeah yeah um yeah this is amazing Samuel thank you so much um thank you to everybody who joined to watch the demo live watch the workshop live um uh Samuel if if people have more questions or if they have uh other things that they'd like to uh maybe see if you could make a video or something like that or if they want to kind of keep tabs on on how this project evolves is just talking to you on the future of coding slack the best way do you want people to reach out to you on Twitter where would you like people to to get in touch you you can reach me through a river whatever platform Twitter or select that's what we where we connect um and I'm available you know I'm always up to like receiving like answering questions I'm also open to you know I'll put it just right here just in case with like a big font style 30 pixels like friends partners [Music] sponsors collaborators [Music] uh investors anything um bystanders billionaire philanthropists BP [Music] exactly great well thank you so much um this was a this was a real treat and uh I think a wonderful start to um seeing more of the the cool work that's going on in this community in a in a different venue um yeah thanks everyone like nice to meet you guys there are some places here like I'd like to see uh that was great uh thanks for watching like I hope you guys like unit and I hope you got like some some sense of like how to use it um and yeah let me know let me know what you build if you build something if it's if it's simple like send it to me I can I can make my review