 Before we start before I'll wait for a couple of more minutes for others to come in I want like a show of hands. How many of you here have used react or something like that How many of you have used other forms of virtual DOM Okay, that's not a good sign. Okay, so I was just asking how many of you have used react before React is okay, none of y'all. Okay, cool. How many of you have heard of this programming language called Julia? One person, okay So a lot of the things I'm doing here the server side part of it is in Julia Actually all code is server side. That's the whole point of this talk So it's a very easy language language. It's like the syntax is like pseudo code I haven't started yet Yeah, I'm just yeah, so it's it's basically like pseudo code so I'm sure you guys can figure it out so what Julia is is a it's a Programming language for technical computing which means it's really good at number crunching basically But it's also good for general purpose programming That's the kind of work I do in in my job Well, so if you haven't heard of Julia look it up and there is a Nice article called why we created Julia which explains why They created Julia and it's like pretty ambitious and very nice and I think we're almost there So is that so yeah, I guess we have two more minutes or should we start Oh Yeah, I know Okay, let's start. Okay, so Hi, everyone. I am Shashi Gouda From time to time I make UI packages for this for users of this programming language called Julia This talk is about some of the work I did on a package called a share dot jl You can Google this to look it up So my the topic of my talk is what can you do with a virtual DOM on the server, right? So So What is a virtual DOM? What does it even mean and? Does it actually work on the server and the answer is yes, and I would settle for nothing less So I have a series of demos here And I I'll tell you the number of lines of code it took to make those demos and This this code is written entirely in Julia. No JavaScript So someone who has no JavaScript or HTML or CSS experience can come and use this package to make Really good-looking UIs. So that's the idea At least so the first demo is a UI for a recommendation system So my friend abhijit has had written this This recommendation system which basically Takes ratings of movies from users and then creates a does some linear algebra magic and figures out What you would like to watch if you haven't watched it already. So Here's the Recommender system. This is 33 lines of code for the entire entire UI so I can Select different people here. I mean these people have really bad taste, but Yeah, so as I select Select who whose recommendation I want the thing keeps changing The second demo I have is a trade data viewer. I have a date picker widget here If I just yeah so I can go select any of these dates that are highlighted and Then I have like a thing to search for things and then I can Go filter these stickers by categories. So if you notice those two checkboxes are synchronized and Any guesses how many lines of code this was These are all plots. This the code includes a Code to basically load the data and then plot these things using using a plotting library in Julia So basically this thing is 194 lines of code Which is a big deal I think and Then I have this demo where I take a 2D FFT of my face there I am and I Can't see the FFT. So I'm just gonna zoom out So what's happening is that's the camera and To the right is the FFT of whatever is being read by the camera This is 13 lines of code. I'm going to put some random images in front of the camera to see like Now you can see ripples over that Which is the 2D FFT of a vaguely drawn circle and this is a square You can see like two Perpetual lines and if I rotate this That's going to rotate to so the idea is you can do any sort of image processing and show it right next to it And it'll be very simple like the code you write is going to be about 15 lines Then I have the CS Prince's triangle which is basically a triangle with So this is the number of steps to the see a Pinsky's triangle so each time the triangle is divided into three parts and That n-1 a see a Pinsky triangle is drawn. So it's like a recursive construction. So This is about 24 lines of code and then I have a demo I Have a mine sweeper demo which is 70 lines Okay, so it's pretty feature-complete but as you can notice the zeros do not propagate which is like a bummer but It works. So including the Styling the icons the shadows the tiles. You cannot actually see the tiles. I think it's the projector Everything it's 70 lines. Okay, so and then I have this other demo where It's a simulation of birds flying around in in the sky So the flock vaguely attracts each other and comes together to the center But when when birds come too close, they start to repel and this is a simulation It takes a while because it's loading the package and stuff like that Yeah, there you go, so Yeah, that's the boards demo if you if you Google if you Google for boards pseudo code you will find a site with pseudo code for this and So the algorithm is also included in this 84 lines But how is this all done, right? So at some level this has to come to the browser and get displayed But I'm writing Julia code What's happening? What's going on, right? So So of course it has to come and become the Dom so first we need to understand what the Dom is right, so We all know what the Dom is the Dom is a Document object model in its expanded form. It's basically a convention where The browsers use a huge imputed with a huge mutable data structure To represent the state of the page, right? So Why is so if this has served as okay still now But Dom is state and state is inherently bad Okay, so there is a lot of research on this the best reference I think to get you like to get a feel of why state is bad is this paper called Out of the Star Pit by Ben Mosley If you have time, you should just check it out. Yeah, so So state leads to this thing called combinatorial explosion. So what happens is So basically an average person can hold less than ten things in his head when he's working Like it's the working memory capacity or something like that. So a programmer is no different I mean if you are really smart, you could be like more than ten but but but To put things in purpose perspective 50 bits of state can be in two to the power 50 different configurations Okay Which is 10 to the power 15? But there are like 10 to the power 11 starts in the milky way So it's just kind of explored and if someone else comes in and he's working on some code that Uses state that you wrote and he changes the state that thing is going to be in and then your code is going to break And debugging this is going to be a pain so the next thing that comes with state is Callback oriented programming you saw Bordel's keynote Which is all about like subverting the callback style and state and using pure functions to write a game, right? So so state and call callbackness necessary to state necessary to each other so basically What you do in the end of a callback is set the DOM state or set some state, right? It's not so good because state is not so good And there is an increasing understanding that this is not ideal because you see these new frameworks like RxJLs or React or Languages like L and they they are all trying to come up with a better model for UI programming than callbacks So what is virtual DOM buyers, right? So Okay, first of all, what what is a virtual DOM a virtual DOM is a mock representation of the DOM It's a JavaScript data structure or any other Languages data structure. It's a data structure basically which maps directly to the DOM and What it enables is this very simple model of programming So your UI becomes just the function which which takes some data and returns a UI, okay? so Which is very easy to understand because so the the return value only depends on the inputs to that function and nothing else No other state, right? So what you are doing actually fits in your head and so there's a clever trick which makes Virtual DOM feasible because if you create a virtual DOM at each state progression of your app and then you go redraw the entire DOM, it's not going to be efficient So what virtual DOM libraries do is they take a diff of two virtual DOMs And then figure out what exactly changed and go and apply those patches to the actual DOM So what happens is efficiency is managed for you you end up with a declarative model for programming You just create the UI and be done with it Whenever state changes you don't have to explicitly go and change some Part of your UI you just generate it and virtual DOM is going to figure out what changed and actually do the work and Virtual DOM gets along very well with this thing called functional reactive programming, which was the topic of Bordel's Keynote, so I'm going to talk about functional reactive programming towards the end But basically it's a escape hatch from this call back help basically Okay So over to the dark side What should all on the server? How does this work? So I'm going to talk about this library called Escher But building up to that is this thing called patchwork.jl, which is a substrate which is basically The most medieval virtual DOM in implementation And it directly maps to this other JavaScript library called virtual-dom by by Matesh It's a excellent library very well tested and a single-purpose library and it's also fast Sorry Okay So what happens is patchwork.jl generates these virtual DOM nodes on the Julia side In Julia we have the convention of appending .jl to all packages That's the .jl So it generates this virtual DOM data structures It serializes it to JSON and sends it over to the browser where Matesh's virtual DOM is going to pick that JSON up and then draw the actual DOM Okay, so I'm going to show some examples. So patchwork.jl the lowest level of the subtraction provides the LM type using which I can create normal HTML like basically this is a div and this is hello world and The text goes inside and I have this dictionary which is a style Which is the style of this thing. So I can go here. This is actually a Interactive editor so I can make it black and press control enter and it becomes black So you can keep adding things to this if you want to font size Font size I don't know 2 EM maybe so it's going to become bigger and stuff like that Yeah, so the next example. So this also extends to SVG, right? So since I'm writing Julia code, I have abstracted out creation of a circle into this function called MK circle which takes the XY coordinates of the center and the radius and optionally a color and then draws these circles Right draws a circle returns circle, which I'm going to put it in a SVG tag So the first argument here is actually the namespace and the second argument is the tag So as you can see SVG circle SVG SVG and I have a bunch of circles here Let's try and make this guy look creepy So red red Seven Yeah Well, so it extends nicely to SVG. What else does it extend to it extends to html5 custom elements as well which means that You can have you can define your own custom html elements and Have custom behavior for example, this is the cardiac element that I wrote. It's a wrapper around Khan Academy's tech library Latex library basically so what is so the API I have created in the in the custom element is There's a source attribute which takes Which takes the latex code and then it typesets it to latex and this block thing basically means that it's a block or in line Inline thing So I can edit this thing here I can make this for the formula is wrong now. I can put it back. So one more thing I have is One more. Oh, so I wanted to show you one more thing. So if I inspect the element inspect this element Although I'm just creating one DOM element, which is k dash tech. I have all these different Smaller elements which which go inside the shadow DOM of of that parent element So this is not visible to virtual DOM and it need not be right so that's the beauty of it everything is encapsulated in this one custom element and Yeah, it just works Okay, so coming back to Azure.jl. So that's that's patchwork now We are building our abstractions on top of this virtual DOM library So abstraction one converting Julia values to UIs right as simple as that. Oh I wanted to show one more thing. So this code editor. I'm using is just one one You know It's just a Custom HTML element again. So I just created a code mirror and then I got a code mirror So yeah converting Julia values to virtual DOM so first off Textual values Yeah, hello world works. You can also have numbers Why is this not working? Okay. I might need to reload this thing. Yeah Sure Actually, yeah, it's going to be hard, but I'll try Okay, I haven't got I Have to reload this thing to make it work I seem to have changed something in the code and not reloaded the page So I can have marked on this is a string macro called MD So as you can see the world became italicized I can do this Open and That becomes bold. I can have multi-line marked on strings. Oh These are just comments for my reference later on so Ignore them. I can have like Julia code here function Whatever and if I run that I get a types like syntax highlighted code Code thing and then I can inline. I think this will work. Let's see Latex Yeah, I'm inlining latex and into this thing Take some time to load So that's marked on I was showing code mirror before So I yeah, I showed you these two things now I Have this thing called there's this thing called sim pi which is Which is a Library for dealing with symbols in mathematics So I'm creating a symbol called x and then I'm differentiating sign x squared With respect to x five times and that's the simplified expression I got and it automatically gets typeset and converted into a shield on and displayed on the screen, right? so I Can change this number to whatever 20 and it's going to go out of the screen, but Sure Yes, SimPy is a Python package, but Julia can call Python package packages. So Yeah, so it's like yeah So this is compose.jl. It's a package for declarative vector graphics It's similar to something called diagrams in Haskell Actually, it's it's become completely different now, but that's the inspiration So here's the Cierpinski triangle code that I was showing you So basically what we are doing is if n equals zero We are just drawing the drawing a triangle in in the context And then if it's not then we are dividing the context into three different three different Smaller contexts and then drawing drawing the n minus one Cierpinski triangle there So this is like a recursive thing if you think about it hard enough you will understand how this works For brevity I am going to Go to the next slide. Yeah, so I had text over here so This so the content this time is is a plot so there's this library called Gadfly which Which lets you draw Nice plots, okay So Gadfly returns an immutable value which can be converted into virtual DOM, right? It's basically converted first into it's converted to SVG virtual DOM and then shown on this on the browser That's how this works. So if I just uncomment this This is a cooler plot, but it takes a while to While to finish Okay, that's a contour plot. So it's it's like plotting a function And like telling you how hot the function is at different places Abstraction to layouts In Azure we do not use CSS style layouts So here's here's an example. I have this box one Which is Creating this container of 10 year man 10 year and then filling it with the color and I have there's this Package called color in in Julia. It's like the most extensive color manipulation package out there so What color has is all these color maps and color scales So you can just call to color and it'll give you a list of colors so I'm I'm just getting seven reds here and creating two boxes with The third and the fifth thread respectively and then I have this thing called V box, which is going to put two boxes put to put to Any of Azure UIs? Vertically one one below the other right so So, what if I wanted to give us give some space between those two in CSS? You will have to figure out like which one to pad or which one to give a margin to I don't want to do that That's like extra overhead. So I'm just going to do this thing called we skip which is going to give us space over there and Similarly, I can do this with h-box and it aligns horizontally and The really cool part, which I want to drive home is all these things are values So you can you can generate them as you would any other Julia value Here's a list comprehension where I'm creating a container of of size one to seven here square containers and filling them with all the colors that I created in the color map And then I'm going to put them in a V box Okay, so they got stacked up like that and I Can put them in an h-box as well Let's just try a V box for now So say you wanted to give some interspersed some space between all of these right In CSS you would have to give like a padding to one of them like a top hiding to all of them and then Select the first one and not give a padding there because you want you don't want space there. So Padding or marching I mean, whatever. So How you would do this in in assure is you say interspers and I say we skip 1 em and then boxes and it's going to return a new list with Sorry, it's going to return a new list with all these things interspersed. So it gets stacked properly and You can do it with a h-box as well, but I need to give a escape instead. So This this is based on flex box so you can just show this I'll just show You can flex a box and it's going to fill up the entire space Entire remaining space You can If you want to like give as much spacing between two things as possible Then you can say flex and it's kind of just create a container which just expands and pushes these two things out So this is more tractable. I think than CSS layouts and then there is padding which is Which is kind of different from from CSS. I'll show you how if I fill If I fill a padded Padded container It's actually going to fill it outside So what pad is doing is it's actually wrapping it in inside at the other day And then giving the giving a padding to that day This makes things more predictable because I can have multiple paddings to the same element and Yeah, it's going to See box one box one. I had already defined before in some previous slide. Oh, yeah here and that has this pink color and Now I've padded the box one. I've got a new box now. Okay with the padding That's it and then I filled that box the padded container gets filled Okay Okay, I have this other thing called inset Which is okay. I'm gonna give it some indenting so that you can see it So pipe is basically so in in Julia when you say pipe some value and pipe F It's similar to saying F of V Okay, so what what fill color tomato is returning It's a is a function of one argument Which which is that which is the UI to fill the color of Yeah, it's Yeah, Julie actually does not have automatic currying, but I have a macro which generates all these methods for me so So that's how the pipe operator works as a digression But so I have this function called inset and I give it to I give to it a container that I want to place my Place another box inside Instead of this I'll just use box two because it's smaller I Think yeah, so I can tell I want to offset this I want to place this inside of another container But offset is from the middle Five e.m. I along x direction four e.m. Along y direction and it just works and if I if I just Remove this offset and just say middle That also works. It's just places it's in the middle Vertical centering yeah Yes, so it's in all these demos I'm showing it's the last value that is returned that So this is a code by From from magic ink. It's an essay by Brett Victor. So he says that CSS is so complex that it has never been implemented correctly yet successive Versions specify even more complexity at the same time. It's so underpowered that many elementary graphic designs are impossible or probably bit of difficult, okay, so Both CSS lore is about how to circumvent CSS's weirdness and stuff like that Right, so he also goes on to tell what the problem actually is and he says that Default is that the languages attempt to serve as both a tool and a platform, right? They're best succeeding at neither. So what a share tries to do is it tries to use CSS as sort of Sort of a bite code if you will So it has these high-level like abstractions which compile down to the complicated CSS that you don't want to write, right? At least that's how I see it So this is layout to which is like higher order layouts now We want to in a decent web app We want to have like tabs and toolbars and stuff and extra allows you to do that Here's my tab and in an edge box. I'm putting an icon and then saying vector graphics And then plots here and then these are my pages in the vector graphics page I have here Pinsky and then in the plot page. I have a plot of sign and cause So I need to wire these things up and that this is how I do it like wire T copy it's going to return a new T and P which which are now connected Okay, so this is because of the functional nature of this thing I cannot say set this to that set this to this and So instead I have a function which takes these two things and returns two things, right? Which are now connected. So if I click on this sure enough it changes Okay abstraction three typography Simple so we have two types scales which are loosely based on material design As you can see I've created both in a list comprehension And put them in a V box, right? So this is all well and good so far we saw how to make static things How do you do interactivity right? I should say in the demos I showed you there were animations There were all these sorts of like sliders and stuff like that So the story so far has been our UI is just some function applied to the data that we want to display How do we get to the time dimension, right? How do we get to the interactive dimension? So we turn to reactive programming for this a great inspiration for this is Elm a very well-designed language also advanced application Thesis is very well-written it condenses like 30 years of FRP research into very digestible thesis So there's this package called reactive.jl, which is an implementation of Elm's signal library in Julia So FRP in in in Julia and Elm is based on this type called signal, okay, so I'm going to like briefly introduce what signals do They're like reactive extension observables that you saw in the keynote, but slightly different So we want some data which varies over time Apply some function to it and then show it as the output That's what you want to do like at a very high level right so think of signals as Signals in circuitry, right? That's that's a very good model to start off. I think so So the first principles of signals, right? So these are sort of the axioms that we assume that signals all signal values Sort of satisfy so a signal always has a value That's the first axiom and the second one is the value held by a signal can change as time passes, right? Very simple So how do we create a signal? So at the most basic level, there's the input signal An input signal is created with the input constructor and you have to specify an initial value to it Right, so int signal is a signal which has the zero which has zero as the initial value No, and then the value held by that signal can be changed with a push call So the push operator takes a signal and the random number updates the value of the signal that at that current time, right? So this is sort of the functions that work on signals and give you more signals You can say it's like the algebra of signals or something like that So there is firstly consume which takes a function and a signal and for every update to that signal It applies the function and then returns a new signal with Whose values are the functions the function applied to each update, right? So it's basically like map or it's also called lift because it lifts you into the time dimension or something like that and then there is fold L, which is basically The scan function in RxJS that Borel was showing so it takes a function of two arguments The first argument is the Current accumulated value and the next argument is the update in the signal and then it keeps adding them Or or combining them using this function I'm going to show an example of fold it's going to become really simple and then there's filter for filtering Only certain values in in a signal So the updates get dropped if the function does not satisfy and then merge can merge multiple signals into one signal and then drop repeats will drop any repeats in a signal and then keep when Takes a Boolean signal and another signal and only when the Boolean signal is true The other signal is updated That's the output of keep and and then FPS takes a floating point number and gives a signal which updates that many FPS That many numbers number of times and FPS when has a switch also It's consume There's no subscribe here. It's just consume So if you want to show it show a thing that updates you just show like a signal of UIs and it works Yeah Yeah, so it's yeah, you can think of it as consume Right, so I'm going to show some examples. It's going to become become clearer. So So an input is just like a wire with some initial voltage and then so I'm starting off the input with the value zero and Then I am going to create a slider over here and then subscribe the slider to this to the steps So it's basically like attaching a slider. They all put from a slider to this input So now I have a new slider which is connected to this input Okay, now I put put this slider in a V box Along with this thing and what this thing is is it's basically consuming steps The steps signal and applying the sierpinski a function at each step at each update, right? So now when I update the signal, it's going to change. So it's pretty simple Everything is on the screen and easy to think about So here's an example of an animation. So I have a switch here at the top if you can if you noticed So the switch state is a signal again And I have I made the switch a toggle button So when I toggle that button the switch state is going to update to false Update to true or false depending on the state of the toggle button and then I have the sticks function, which is going to It's basically a call to SPS when so only when the switch is on it's going to emit updates at 60 FPS, right? and then I have this This no show ball function which takes an argument and returns the position Returns a picture of the ball at that's that particular instance, okay? So then I am putting I'm basically putting The switch in a V box with with the show ball signal which takes the ticks Now if I turn this on but ball is bouncing That's because of the Cute math over here. So it's like point one plus one minus absolute of sign Which is essentially what a bouncing ball does So we saw two two widgets now since I slider and a toggle button So what makes a widget right? So we are so if so you might be thinking that I have some JavaScript Which has some callback and then? So yeah, but we didn't write any of that stuff here, right? It's all ultimately virtual DOM, right? So So there is a subtraction which is below widgets so widgets use this thing called behavior So anything in in Azure can have a behavior like I'll give you an example So there's a behavior called clickable which makes any any Azure UI a clickable clickable element So I have this thing called click me here and I'm making it I'm making it a clickable thing now. I can subscribe to Now I can subscribe to this thing because it has a behavior so I'm subscribing Over here to the click signal Click signal which has the initial value of left button Because when I click on this thing, it's going to update to some Update to the button I clicked on so So if I keep clicking here notice that the counter keeps updating It's going to increment. So that's the folder doing all the work So it's taking the clicks and then it's starting off with zero and then at each Tap it's applying this anonymous function. This is an anonymous function in Julia, by the way. So This is the anonymous function. I'll just explain what it does So these two are the arguments the anonymous function and then this is the return value So so it's taking the previous counter and then returning one plus that counter. Okay, and then ignoring the click So as you can see it's counting the number of clicks I'd make Oh, you can't actually see that I'm clicking but I am So let's inspect the DOM here, right? So I have this thing called It's in a span Click me and then there's all these weird custom elements, right? So I'll tell you what each one does clickable behavior adds a Event listener to the parent. So basically now now the spine becomes Spine has a clickable. I mean spine has a click Event listener and then signal transport because we have subscribed to a click signal it tells that when when the when the behavior updates go to go back to the server and tell that it updated and Tell that this specific signal leads to update, right? So this is again a custom element. It's very it's encapsulated in its own It's JavaScript is encapsulated inside and then there is this top propagation which stops the click from bubbling out and causing problems elsewhere, right? No, the clickable behavior is having a listener to the click event because that's its job and Then it's going to raise a signal raise a event called signal dash update Which is which is what signal transport watches for it can watch for any signal update So you can have like a slider Which is actually giving out like the value of the slider, but you can signal transport it with the same way just Sure, but but the whole point is you want things to happen on the server in this case, right? So this is a very trivial example, but for most things you probably want to go to the server Yeah, sure Yeah, that's right I'm gonna answer that in the end. Let me just finish my talk. Okay, sorry Other behaviors are has state key press. There is like draggable, which is very alpha and then like seriesizable as well And then there is like a camera listener and all that So you think these abstractions we can build these things. So and there is this one more thing called Interpreters, which is like purely Julia side Interpreters are meant to like interpret messages from the client So to speak why do you need interpreters because when I was clicking on those things it was actually making it into a Julia value, which is the which is the constant Called left button. So I want interpreters to do all that stuff. So it's an abstraction between the client and the Signals, right? So interpreters allows to decode and augment messages coming from the browser so an example of an interpreter is this constant interpreter which to which you give a value and Every time there is an update in this widget. It's going to send that value to your Input. Oh, by the way, this is just subscribe. I should have not introduced this here So that's an alias to subscribe It's just yeah, so But that's not good Did I change something my computer song now? Oh, it's it's trying to load the phones or something and there's no internet All right, so where oh, oh, sorry Oh, that may not be the problem because There's something else happening here. Okay. Let me just go to the end and get it back Okay, so There you go So what's happening is the delta signal is getting updated with the delta. So when I click on Click on the minus button. It's sending the constant minus one to that signal when I click on the plus button It's sending the constant point to the signal and my fold is just adding So plus is a function of two arguments which adds to things So it's adding whatever delta is coming in. So I'm just displaying the count over here and it's a nice little counter Polymer. Yes. So all these nice widgets you saw are again polymer custom elements Okay, so So a widget is a UI plus behavior plus interpreter so So all all widgets have and a default interpreter and a default behavior for example, the slider has a default behavior of watch state, which is like watch the state of my My whatever child and then it has a interpreter called to type real Which is going to convert the slider value into a real real value Realizing mathematics real value like a float or a integer depending on the range you get Okay So I have this example that I want to show oh this slide show it was made with a shirt and this is how it looks It's like a it's like a series of D-boxes and then there is this Function called slide show which takes a list of slides and makes use lecture and then Okay, I'll just show you the recommender system demo right away right now and Try to edit that thing Where is it? Where is it? Okay, there it is. Okay so So what my friend Abhijit KV is this appropriate? No, no, this will be more easier So my sweeper is actually using the constant thing to get the Get the coordinate of the tile that was clicked and it's like that that's what makes the whole thing so short I think so I was given this function called recommend which takes a user and an end and then gives me back End recommendations for that user. Okay, and this this return value is like a list of movie names But I have this json file which I got by scraping IMDB with like a list of certain movies and I can look look up Look up the The out the movies in the output in this json file and like figure out what's the poster what's the Caption or what's the genre and stuff? So I have this function called show movie This is your so in in a CSS JavaScript HTML setup. This would be a template, right? So it takes a movie object and then gets the data from the json file So the get field is doing all the hard work from of getting it and checking if it actually exists and all that and then it Increases the size It sets the size of that image and then it has this D. E. S. C. Thing It's the description which goes to the right of the image, right? So it's just a V box with the with the movie name and then The the plot of the movie and then the genre So and finally it returns a H box or the of the poster and a two in space between the poster and the description Right, so that's that's one of these things. Yeah, Tom and hug So this is a H box with with the name the plot and the and the And the genre and then it's next to a image because it's in the H box So what I'm doing here is I'm just mapping over all the returned recommendations and Calling show movie on each one of them and then it returns the new list and then I'm interspersing some space and a line between all of them Between so this this is what is getting interspersed the line and this thing So you can see that there's an H line function in a share which just draws a horizontal line if you are if you are doing a Horizontal stacking you can use the V line function which will draw a vertical line Hmm, I think we're out of time Yeah So consume of user signal. Oh the do block. Yeah, so the do block is basically a syntactic sugar So the first argument was a function before right? So what this does is it creates a lambda? It creates a anonymous function with one argument and then puts it as the first argument So it's a syntactic syntactic sugar that Julia provides. So I'm just making use of it So let's just say I want like a I'm not cool with just 10 recommendations I want to see more or less So I basically add these three lines, right? So the first one is I create a new signal Which which has that which holds the end and then Basically Yeah, consume both of them So consume is a is a variadic function, which means that it can take any number of signals and then And then the function it takes will need to have that many number of arguments so right now I have this and I just put a slider which which is subscribed to the send signal And if I go back here and reload It takes a while because it actually trains when he wrote the page Okay, so one second. Let me just see what's wrong here. Oh, yeah, so in the sector 10 Mine sleeper was not working on Mozilla. Okay, I have to look into like testing all these other browsers But I mainly work on Chrome So productionizing this stuff is my next goal We've been documenting it and like things like that. So, yeah, as you can see this thing works So I have 49 recommendations now So with like three lines of code you added one more dimension to this whatever you I you had It's kind of easy to write You I sin assure. Okay, so thanks To all these people for for the inspiration and code. So firstly, I'm event chapliqui has written a great programming language and and they're very nice thesis And then virtual dorm by Mattish Which is like patchwork.jl is like a verbatim translation of virtual dorm to Julia and then Polyver for all those beautiful widgets and some helper helper Custom elements for making more polymer elements and cut tech for the latex and And on the Julia side Compose and catfly written by Daniel C. Jones Amazing libraries and then images by Tim Holy, which was what I was using for the image processing No, and then SimPy, which is like a wrapper around SimPy the Python module Thanks for listening Responsible so the The response of the virtual dorm you mean so you can just inspect the elements and that's how you see what it becomes so That's actually described in the virtual dorm Read me So it's basically this data structure. I just showed you the div and then a bunch of Dom properties which just become Which just gets set to that to the element that gets created So it's a direct mapping between this data structure and the dorm. I mean there is nothing fancy about it Let me just go back to that slide I showed the LM type Yeah, so What happened there? So so this tile is a so style of a Dom element is actually like a JavaScript object Which has exactly these contents, right? That's what this is creating. This is just creating the exact same thing that the browser represents in the DOM and then it just gets supplied One-to-one mapping any other questions. Does that answer your question? you can actually inspect this thing over here and You'll see that this is actually a div with all these styles Over here So the color is white padding is one year and all that Then it contains the hello world text Yeah, you had a question Okay, if there are no questions, thanks a lot