 My name is Shashi Gaurav. I build UI tools for the Julia programming language. Julia is a really cool programming language. It's also easy to learn. So it's used by scientists, mathematicians, and teachers to do sciencey things. So it's really good at numerical computing. It's also good at general purpose computing. So last summer, we started planning to make a UI framework for the average Julia programmer. So the average Julia programmer doesn't want to spend time learning HTML, CSS, and JavaScript. So we wanted this UI framework to be extremely painless, so no boilerplate code, no HTML, CSS, and JavaScript, just Julia, also no explicit DOM manipulation, and Ajax WebSocket setup. So we also wanted this toolkit to be a powerful out-of-the-box. So it has a rich set of library functions, and it's also modular. So if someone writes a visualization, you can just write away, put it in your own UI, and it should all start to work. So to start explaining what this thing is, I'm going to start from the first principle. That was actually showing you some old page. Anyway, let me get on with it. So the UI framework is called Canvas. So it's a convention in Julia to suffix everything with dot jl. So you can access it over. I mean, you can find it on my GitHub page. So what is a UI? So my claim is that a UI is just a function applied to some data. So let me make this more concrete. So here's a hello world example. So I say plain text. Plain text is my UI function. Pass it some data, which is hello world, and I get that as the output. Hello world. So here is a more involved example. I have some plain text over here, and I'm applying a 2EM padding to it, and then coloring it with the tomato color. So here's the same thing, but with a steel blue color, and a easier syntax. So I'm making plain text, passing it to pad 2EM, and then filling it with this color. So there are very good and predictable layout primitives in this library. So you say vbox, box1, box2. You get them aligned vertically. So this is similar to tech or latex, if you have used it. So I can give a spacing between the two boxes by just saying vskip2EM. So it's going to give me a 2EM spacing here. So same thing can be done horizontally. So I say hbox, box1, 2EM, skip, and box2. So I get this. I can also have one of the elements inside flexed out to fill the entire space. So in this case, the blue thing is expanding to fill my view box, my containing div. So containing div is actually 30EM. So that's how it looks. So you can take these things you composed using vbox, hbox, and put them in more layouts. So also since you are programming in Julia and it's a powerful programming language, you can make layouts that you would not bother doing in HTML, like this one. So this is a 15 iteration painting of, so basically each thing over here is a div, and it's laid out in this way. So it's filling the remaining space inside a square, half of the remaining space inside a square at each step. So layouts are not the only things that you can do. You can do plots as well. So here I'm saying plot sign and cost functions from 0 to 6, and that's my plot to the right. Here is a more involved plot. It's a random walk of 1,000 iterations. That's the plot. And here is a more involved example. So the icons are not appearing here, but I don't know why. So I have a bunch of tabs here. So I'm passing it to this tabs function, which will return me this form of layout. And I have this pages function here, to which I'm passing three different UIs. So one is HelloType, which is the first tab, PLT, PLT2, which are the plots. So this wire function basically takes the tabs and the pages and connects them and returns a new set of tabs and pages, which you can then use in your actual layout. So here in the VBox, I'm using T and P, and it all starts to work. So how does this actually work? So you're calling these functions and they're returning some values. And how does this actually work? So the way it works is when you call a function, like plain text, it creates an abstract representation of what needs to be drawn. And after that, there is a render function which will convert it to a virtual DOM on the Julia side. A virtual DOM is just a representation of the actual DOM on the browser. And then this is JSON serialized, sent to the client, and it's applied to the actual DOM. That's how you see these things. So I'm going to open up a demo here. So it's in examples, videmo.jl, edit anyway. So I'm editing this file called demo.jl, and my server is running in the same directory. So I'm going to go to this URL, slash demo.jl. So how you write UIs in Canvas is that you make a main function, and the return value of that function will be your UI. So forget this for now. This is just a function I want to use later. So here I'm saying plain text hello world. It's going to show me hello world. So now let us put this in a vbox. And say box, I want it to be colored orange. So I save this. It updates automatically. Now I'm going to assign this to a value called x, and then I'm going to put this in a hbox. Actually, this is where, so this is beta quality, and the patching actually does not work. So I need to go and refresh this. So as you can see, I'm going to add a escape so that you can see that there are two different things over here. So I can increase this. And there is hot swapping, by the way. So when I change the file, it automatically updates. So let me go back to my slide show. That's how we code the UI. That's all I wanted to show there. So this is all well and good. You can create static pages and static UIs. So how do you do UIs that update over time? So what does it mean for a UI to update? It means that the data that the UI depends on changed. So this is a simple model to think of. So here's, so let's start building a UI which updates something. So here's, so what I want to do here is connect the slider to this plot. So when I move the slider, I want to set the phase of this sine curve using this plot. So the slider over here goes from 0 to 2 pi at steps of 0.1. So I can vary this and the slider changes. This is an anonymous function. It's just calling sine x. Anyway, so moving on, so notice that from the previous slide and this one, there are three things that changed. The first one being I have this thing called input over here. Input is actually a representation of the input to a UI. So I call it phase t. And then I've moved this UI function into another function, plot with phase, which takes as argument the phase and plots with that phase. So if you see here, I'm adding the phase to the sine curve. So in the end, I am returning a plot with a phase of pi by 4. So as you can see, it's not at 0. It's starting at somewhere. It's starting at 1 by root 2, actually. So now we haven't still connected the plot. So at the end of this previous slide, I set plot with phase pi by 4. But I want to plot with the slider's value. I plot with the phase that is given by the slider. So now I have this input, which is updating as I move my slider. What I do is there's one piece to this puzzle. I say lift, take this function, and this signal, phase t signal, and create me a signal of UIs. So what happens now is when I move this, the slider, the plot actually changes. This is all the code that was required to do this. So what lift does is it takes one signal and transforms it into another signal. In this case, it's a signal of UIs. So Canvas can actually draw signal of UIs. So how does this work? So I told you that it generates virtual DOM and then sends it to the browser where it's actually applied to the actual DOM. So how does this work? So one way to make this work is just create a new DOM, send it to the browser. The browser redraws the entire thing. But this is, first of all, inefficient. You have to transfer more data and do more things in the DOM. So this is not very good. So what we can do is we can calculate a set of patches which can take me from my current UI to the next one. Canvas actually does this. There's a diff function inside Canvas which will create a sequence of patches. These patches are then serialized to JSON and sent over to the client side where it is applied to the actual DOM. It is resulting in a stepping in the actual UI. So this is the diagram. So there are these dotted lines which are going outside the screen and coming back all the way to the server where I have a lift call. And it generates a new virtual DOM. This is the previous virtual DOM. It takes a diff. So it's basically calculating what changed exactly and then sends the patches to the browser and patches are applied over there. So the title of the talk is US as values. So what do I mean by values? So by values, I mean immutable values. I like the word values because it does not bring in the same mindset as when I say objects. So these values are more similar to numbers than to DOM objects. So for example, if you say Hbox A, B, you're getting a new UI value. And A and B do not change, which is just similar to 1 plus 2, which will result in a new number. And 1 and 2 don't change. It does not mean anything for 1 and 2 to change. But in an actual JavaScript, while you're writing JavaScript, you cannot be sure that A and B will not get modified by this Hbox function. And when you use A and B later on in your code, there can be unpredictable business going on there. So this is the credit slide. The signal framework I told you about that is inspired by Elm. So Ivan Szapliski, author of Elm, helped me out a lot with that. And so I'm also using Matts virtual DOM. It's a library pure JavaScript for doing virtual DOM stuff. So actually, patchwork.jl, the thing that canvas.jl uses for virtual DOM, is a verbatim translation of virtual DOM to Julia. And also Viral Shah, Island Needleman, and MIT for supporting me through this work. Thank you. OK, questions. OK, Brett Victor Quartz. There is this really cool essay by Brett Victor called Magic Ink. I think all UI developers should read it. And he tells how CSS, which is the basic thing that bread and butter of all designers, is a terribly designed tool. And in Canvas, basically we try to abstract out all of the nonsense of CSS and keep predictability. For example, there is no margins in Canvas. There's only padding. So if you want to do margins, you create a, so you pad it, and it basically puts a container around it and does the margin. Why not margins? Because margins have special meanings at different places. So when you say margin auto in a flex box, it's going to go to the end. There are collapsible margins and stuff like that, but we want predictability. Yeah, that's why. OK, thank you. Questions? Thank you. I recently came across a UI framework called Shiny. It was based on R. I was still in the initial phase. I'm just evaluating it. This framework looks very similar to that. So I said, I mean, shall I start with this or that? I mean, I just got confused. I don't know, this is still beta quality. Basically, both language supports data visualization and analytics. So I would say it's better to wait a couple of weeks and then just use this. Thank you. OK. OK, I have a question here. Just to draw a comparison, this is like React, but all on the server side? Yeah, I could say so. I mean, much better than I would say. I haven't written a React app in my life, but I could. So I think the signal stuff is easier to think about. OK, and one last question. Plots that you displayed, are they drawn using Gadfly or? Yeah, they're drawn using Gadfly, sorry. So Gadfly is a plotting package in Julia. It's very feature rich. So it has different backends. One is SVG, PNG, and PDF. And this one is actually the patchwork backend, which is converting the plots into virtual DOM. Since this is an SVG, you can do that. So SVG is actually just DOM. So also when I do this, I wanted to show you this as well. So when I change the slider, what's getting transmitted is just the path, because it can different tell that only the path in the plot changed. So I could probably show you this, but I'll take some time. I need to reload. Any other questions? OK. Do you have a last question for Shashi? OK, thank you very much, Shashi. OK.