 Hi, so my name is Shashi Gouda. I work on building UI tooling around the Julia programming language. And my talk is about a package I made called escher.jl. So how many of you here have written web apps? OK, cool. So this is a data science conference. But most of you are scientists who are working with data. So usually you end up having to create some kind of UI for your colleagues or deploy it over the web or just do a presentation for your students and stuff like that. So what you'll end up having to do is learn HTML, CSS, and JavaScript, and one more language for the back end. And try to figure your way through these four languages and try to make different pieces work in unison and become the web application. So this is a painful, painful, painful thing to do. So if you have written any CSS, you know how hard it is to center in a limit vertically in CSS, until we had a Flexbox specification it was. Like you would go on Stack Overflow and then look it up. There'd be 10 different answers and you'd try. And then you just hope it works. It's like a lot of rituals and nothing works. So Julia was created to solve the two language problems. You want to prototype in a high level language and get the speed of a low level language like C. So as soon as you start making a web application, you have these four different languages that you need to deal with. So we decided to make a UI package using which programmers can code entirely in Julia and you end up with a web application. So what is Azure? Azure is a package that provides a fun abstraction over the web platform. It's just really fun to use. And it works. So I'll start off with a few demos to vet the appetite, so to speak. So the first demo is like a recommendation system. It's 33 lines of code. And so this is what it looks like. So I have a dropdown over here. And I select the user I want the recommendations for. And I get all these movies over here. So my friend Abhijeet had written just this function called recommend, which takes the user name and the number of movies he needs the recommendations for. And it returns a list of movies. So what I did was I wrote this 30 lines of code to vet the UI. And this is much more presentable. And you can explore your own algorithms very easily with this. So that's the recommendation system. Second one is a trade data viewer that I wrote a week ago. So this is what it looks like. It'll come back on its own. Should I unplug and plug it back in? Can't handle my demos. So Amit was talking about visualizing multi-dimensional data and how exploration is a key thing in doing that. So the way I started off with Julia is last summer I wrote this package called interact.jl. So what it does is it provides you this nice abstraction over the IPython notebook widgets. So you might have seen it somewhere. So say you have a for loop where your i goes from 1 to 10. And then you're using i as a parameter inside your body. So you just prefix this macro called act manipulate to that for loop. And the i equals 1 to 10 becomes a slider. So you can set the i as you want it. So if you were to say i equals something in this list, it will become a dropdown or like a selection. And if some flag equals a Boolean, false or true, it'll become a checkbox or a switch. So it's really easy to use for such things. So from there on, what we wanted to do was break out of the framework of ipython. We didn't want everything to be stuck inside that interface and basically have the ability to make complete web applications. That's the path we took sort of to get to Escher. And Escher is mainly inspired by this programming language called Elm. So it's a really cool programming language which compiles to JavaScript. But Escher does not compile to JavaScript. I'll come to that if the projector comes on. So sorry about the projector. Meanwhile, I can show you the school demo that Rohit here is making. So this is actually an Escher app as well. I couldn't connect it to the projector because you cannot have two things at a time. So this is a pyramid, as you can see. And it's actually a Sierpinski's pyramid. So I can increase the number of steps of recursion. And it's got to form the pyramid with a lot of tiny pyramids. And then I can go here and change the color of the pyramid. And it changes the color. And I can also just write everything. So just keep this in mind what happened here. And I'm going to explain how this all works and how everything is run in Julia. But the browser is basically a slave. So everything is generated in Julia. And then the browser is just used as a UI framework. So that's Rohit's work, really great work. What are you doing? So one more thing I wanted to tell about since the projector is not on is that somehow I find I can't really put my finger on it. I find Julia to be a really nice language for general purpose computing as well. And I think the goals that the founder set off with is like almost, we're almost there. So you should check out this blog post called Why We Created Julia. It's like a blog post with tall claims. But in 2012, when Julia was announced, it's just like a shell command that brings up the web server. So you can choose the port that it needs to run on. And then you can use an engine proxy or something. So apparently, we're back online. We should be in recommended. So there you go. So that's the recommendation system. Who's using my mouse? So not the recommendation system. Sorry, this is the trade data viewer. So I can just go to any of these dates. Not all of them are enabled because I don't have data for all of these. And select these to filter things. And these two lists are synchronized. All this is actually 194 lines of code. I think 194, 7. Yeah. What are those? So another demo I have is a real time F50 of my own face. Turn this on. And I have all these pictures. So this is about 15 lines of code. So let me just, as you can see, that's like the 2D FFT of a dot. And you can actually see circular patterns in there. And this is an ellipse. So you can actually see the FFT of an ellipse. That's supposed to show my hand. So yeah, it works in real time. And I have one more over here. So this is like the most pronounced. So there is like a plus mark. And then when I rotate it, this is really hard to do. I hope I'm doing it right now. So that's one of the demos. So this is like 15 lines. And one more is a Sierr-Pinsky strangle. Let me just find it. OK, there you go. So as I increase the value in the slider, the thing is updating. Another is Minesweeper in 70 lines of Julia. So zeros don't expand right now. I should add that feature. So this is pretty good for 70 lines, I think. So it includes all the coloring, the icons, the typography, everything. So now I'm going to try and show you one more really cool demo by Iain Dunning. He's a Julia contributor. And he works on the optimization packages for Julia. So if you're into optimization, Julia has a really good community built around optimization. So there you go. So these dots are moving around like birds. When they come close to each other, they have some repulsive force. So the frame rate on the projector is actually less. This is actually running at 40 FPS on my computer. And so also, the group attracts each other. But they repel from each other if they come to close. And it looks like birds flying around in the sky. But how does it work? Azure provides this very simple model for making UIs. So the claim is that a UI is just a function applied to some data. So I'll show you what this means in a second. And when the data is changing over time, your UI should change over time. But it's still the same model. So you apply a function to a data that is changing over time. So we have this abstraction called signals to represent data that changes over time. And a UI that changes over time is just signal of UIs. So I'm going to show you how we built the recommender system. So this is the code for the recommender system. So I'll just open it back up. So over here, I have this dropdown from which I can select different users and see recommendations for them. So the UI is basically, so I was given this function called recommend, to which I can pass two arguments, the first one being the user name, and the second one being the number of recommendations I want. So using this, I made this UI. So I have this map function, which takes each recommendation and looks it up in a JSON file. I downloaded it from IMDB for the image and the description. So let's look at the show movie function right now. So if you go to the show movie function, it's just like get the poster from the metadata over here, movie metadata over here, and the URL to the poster, and then resize it to this size. And then in a vbox, vbox is basically stack things vertically, right? So this is like tech style layout. So in a vbox, just put the movie name and the caption and the plot in a caption. So these are the caption over here and the font size are all typography primitives from from measures. So there are a lot of these that you can use right out of the box to get really good typography. And then I finally have a genre displayed in the same box. And then I'm putting the description. This is the description. I'm just putting it in an H box next to the poster. And between them, there is two EM spacing. So this is how they used to do layouts in tech. And this is not how they do it in CSS or HTML. This is more predictable and more tractable to sort of speak. So that's all the UI is. And how does it update when I change the dropdown? So I have this input signal, which contains the user ID. It starts with the first user. And then I have this dropdown menu which will show these users. Users is just a list of users. It'll just show these users in the dropdown. And then I have this overloaded operator called 3 greater than or triple greater than, which is piping whatever the dropdown state is into the user underscore signal variable. So now I consume the user signal. So when I consume the user signal, the current user becomes the user inside this do block. And I just use the user in this line of code where it just gets the user and shows it there. So let me just add a slider to increase the number of, increase or decrease the number of recommendations that I'm getting at any given time. So I just uncommented these two lines of code. So that's all I needed to do. Actually, that's not all I needed to do. I also need to do consume n signal along with user signal so that I know I have both the user and the number of recommendations required. So now if I go here, so notice that I didn't reload this page. There's hot swapping. As I type, Azure renders the new UI, makes it, takes a diff, like it figures out what changed and upsize it to the actual UI here. I might need to reload. There are some, yeah, subtle bugs. Well, okay, so I have this slider now and as I change the number of recommendations I want, it keeps changing over here. So I just added like one more layer of interactivity, one more dimension of interactivity to my UI with like three lines of code, right? So, right, so let me go get back to my slide show here. But, so if you're a UI programmer, JavaScript cake in the room, you would be asking, how does it work still, right? So how it works is it's a series of transformations which ends up becoming the thing in the browser, the UI in the browser. So like I said, the UI is like a function applied to a data, like for example, you can imagine the recommender system UI as a function which takes the user and the number and gives you the UI and then the UI object is converted into something called a virtual DOM. So DOM is this convention that browsers use to represent a webpage, right? It's called document object model. So what Azure does is it converts it to a virtual DOM on the server side, okay? This is something new that was done before, I think. And then the virtual DOM is serialized to JSON and sent to the client, where it becomes a new virtual DOM on the client side, okay? And then finally, the virtual DOM on the client side gets rendered to the actual browser DOM and that's how you see the UI, right? So how does updates work? Where when I change the number of things in my recommendations, it'll be inefficient so just re-render the whole scene, right? So how it works is it generates the next virtual DOM to display, but then it does not re-render it. Instead, it takes a diff and figures out a series of patches to send to the browser so that the UI progresses to the next day, right? So this is how it works in a schematic representation. As you can see here, it takes the diff of the two virtual DOMs, figures out this went to this, this went to this, this went to this and then sends this patch to the browser where the patch is applied and these dots are again signals coming back from the browser to the server when I change some widget or something like that. Okay, so I can show you a live demo here. Well, okay, okay, I'm not supposed to touch this or something, well now I don't have internet and my fonts are screwed, but excuse the fonts. I am going to show you a demo if this works. Screen resolution, oh, I did, holy shit, okay. That's not good. Okay, what about, okay, I think it's the, maybe the Chrome, whatever, the debugger. So how do I do this? I'll just take it to another workspace and see here or something like that. Okay, let me just split the screen or something like that. I don't even know what I'm doing now. Okay, okay, so apparently this is even bigger, so, oh shit. Oh well, I was just going to show how it works for latex, so I have these latex widgets. Put something back on, dark, okay. I can't see it anymore, but that's in full screen mode right now, so I don't know how to minimize it, so un-maximize, okay, cool. This is like, okay, cool, I'll believe you. I mean, there's no reason not to. Okay, I guess I can show my demo like this. Oh, right, right, right, okay, yeah, that's a good idea. Frame rate is also low, how many are gonna, yeah. Okay, this is too much white, okay, yeah, can handle this. Now, let's see, so I have a web socket connection here, which didn't fail, okay, cool. So these are the, so as I was resizing the window, it's actually telling the server that I resized the window, but I'm not using that information, but I could and make it, you know, responsive. Well, so I was going to show you the demo about with the latex thing in it. So for later, I'm using the Cartek library by Khan Academy. It's excellent, it's like super fast and really good. So as I'm typing this, notice that there's an exchange of messages between the client and the server, and the green stuff is the client sending server or something, so it's saying this signal updated, and here's my data. I'm just gonna click on it and try to see if I can show you the actual data. So, yeah, I can't see the scroll bar now. Oh, there's no scroll bar? Oh, yeah, so if I go to the scroll bar here, it's saying that the data you sent, okay. Oh, well, so the patch is coming back, the U.S. re-rendered and the patch is coming back, and the patch is this, okay, source of some element. So 23 is the index of the element that is changing, and four is the type of patch, and it's just saying that the source of this thing changed. So if I go to my code for, okay, I think this demo is impossible to do. I was just going to show you how you could use web components and complicated things like latex will become just a tag in your, just a DOM node in your virtual DOM, all right. So the source over there is actually an attribute to the web component, to the custom element called catech. Anyway, so Azure comes fully loaded with all these features. There is text marked on text-style layouts, there is typographic scales, there is 2D vector graphics provided by this package called Compose. So the cool thing about Compose and Gatfly is Gatfly is written in Compose, and Compose is a package that you can model your UI as a function of data, right. So you take a function of data and it returns a value which is the UI, right. So this fits in nicely with Azure, so what we do is just render these vector graphics into SVG or plots into SVG, and make a virtual DOM of the SVG and then just show it on the browser, right. And then it has all these cool looking widgets which are from Polyver, which are again like DOM nodes, simple DOM nodes. And then it has Composable behaviors, which means that you can make anything on the screen clickable, it's like, you can do pretty much anything you would in a normal web development setup with lesser lines of code. So you can make anything clickable, even making something clickable just adds a web component into the DOM element. So 3D graphics like you saw, there's a camera widget that I just started yesterday or something. So, and then there are slideshows. By the way, the slideshow was made in Azure, I think it's like 50 lines of code. Thanks for the inspiration to Elm and Virtual DOM, an excellent JavaScript library written by Matash. So the Virtual DOM on the server side is like a verbatim copy of this JavaScript library and I use Virtual DOM on the client side and I use Catac for the latex stuff and also I should have put Polymer, but yeah. So thank you for listening. I hope you enjoyed it. So if you want to check out Azure, just Google Azure.jl.