 This tape is from the very first movie, the very first movie of SketchCad taken in the summer. In the summer of 1962, so this is 25 years old, rubber bands you're familiar with, but look at what he's doing. He's pointing at the edges and saying, I want them to be all mutually perpendicular, and SketchCad just figured out how to do that. SketchCad is the first system to ever have a window. He's actually drawing on a virtual sheet of paper about a third of a mile on the side. He then gives rules like be parallel and perpendicular, and SketchCad figures out and solves the problems. Here the rule is collinearity, so that the dashes lie directly over the guidelines below. SketchCad was able to solve very complicated problems in real time involving both linear and nonlinear systems of constraints. The first non-procedural programming system and considerably more powerful than the spreadsheets of today. So he's made a hole in the flange, continuously zooms back. Now he wants to make a rivet, and again we see why it's called SketchCad. He just draws a rough shape, uses the center of the crossbar there as the center of the arc, and then points to the edges and says, I want these to be mutually perpendicular again. Solving that forces the crossbar to change, which forces the arc to change, which gives you a perfectly symmetrical rivet. That's SketchCad. So this was in 1962, so we have UIs today and we don't see things like this happening. And to create things like this is very painful. So what happened after this? Then the web happened and the web is basically HTML, CSS, and JavaScript. So UI development in 2014 revolves around these three technologies. So you define structure to a document using HTML and style it using CSS. But when you say style, you are really saying a very limited subset of what you can define as styling. Then you have JavaScript, which you use to manipulate this mutable data structure called DOM. It's terrible. So even for a beginner to do a very simple thing like vertically centering something, it's really hard. You have to go through tons of Stack Overflow and then you have to figure out how to make this div behave like a table and then this thing inside has to be a table cell and then you can align it vertically. So why is this so hard? It shouldn't be. So going back to what UIs really are, the UIs can be thought of as a value. So UI is a value and the value can be generated by a function which takes some data. So you have some data and you want to display that your UI. So this is a functional programming perspective. This is how UI is supposed to be. So let's talk a little bit about Elm. What is Elm? Elm is a purely functional programming language. It's a functional reactive programming language. So FRP, what is FRP? So FRP is a functional language. So obviously functions are first as objects. In fact Elm is purely functional even though it's not lazy. So this has a lot of benefits as we will come to see. And it's reactive which means that time varying values are actually first class citizens in the language. So we will see what that means soon. So why should you be excited about Elm? So Elm makes UI programming pleasant. So there are no callbacks, no broken stack cases. So in JavaScript you always have callbacks after callbacks and callbacks after callbacks leads to something called callback health. It's a well known problem. And then you start to use something like promises and they are actually slightly better but you look at stack cases they give and they are completely useless. So with Elm you can compose UI functionally like Venkat was talking about functional composition. It's very important we all know that functional programming. So and code ends up looking like data flow which is good for reasoning about. So types encourage correctness. So if you are program compiles you can be pretty sure that a lot of correctness is proved. So you get there is this really cool debugger in Elm which you can use to go back in time and see what happened, what broke something and stuff. So really cool debugging technology and you get unlimited undo. So this is the consequence of it being purely functional. So how do you get started? So this is the Elm website is elm-lang.org and you can try out Elm at elm-lang.org slash try if you have your laptop open. So please go to this URL and you can type in code and run it. Other than that there is a library.elm.elm-lang.org which gives you a list of packages and their documentation. Even Elm documentation is on library.elm-lang. So the Elm platform consists of the Elm compiler, the Elm repel and the Elm reactor. So I will be showing these three things in the stock. And my slides are available at bit.ly slash Elm hook on 2014. And the code I am going to be using, there is going to be quite a bit of live coding also, is at github slash dash e slash hook on stock. So you can just go check it out. So let's dive in. So values and so these are literals. So 1 is the number, 1.0 is the float. Coded 1 is let me open the Elm repel. So 1 is the number, 1.0 is the string and you have lists. So the syntax of the Elm is very similar to Haskell of even the type system. It's got ADT's. So this is a tuple with the type, which is again a tuple of types number, number, string. So Elm has extensible record. So that's the record. Let's try that out. Is that cool? So can you all see it? Yeah. So I have ID, the name is gone. You get a record of type that the type is actually a dictionary of type. So ID is number, name is string. So that's values. So how do we define functions? So functions are similar to functions in Haskell. Notice that type annotations use single column in Elm compared to Haskell where you use two of them. So let's define add ap equals a plus b. So add 9 and 4 is very important. So Elm again has automatic currying. So I can say add 9 equals add 9. And that's the function which takes one number and returns the number. So let's see what add 9 does. So add 9, 4. So that's one way to define a function. Elm has pattern matching. So how do you sum our list? We use a K statement. If the list is an empty list, you return a 0. If it's something cons with another list, you return that number with sum of that. So that double column is actually the cons operator unlike in Haskell. So this is an anonymous function. So you can use them where you want to, like you can create them where you want to use them. So this is map which increments each element. And Elm supports the point free notation. So you can define the sum function you defined above like this. Some list equals fold l plus 0 and list. And you can leave out list because it's the last argument in both cases. So it just becomes a function. So sum just becomes a function which takes one argument which is a list. So that's point free notation. So how do you display values? So to display values, there's a built in variable called main. We go and set it to some value which is an element which is of a type element. And element is basically a rectangle which can be displayed by the runtime in the browser. So let's see how that works. I've got a list of, this is the Elm reactor. So I've got a list of files here. Let's go to hello and it says hello world. Let's look at the code. It says main equals plain text. Should I change the color here too? Fine. So it says main equals plain text, hello world. So if you look at the type signature, it takes a string and gives an element. So sure enough you get hello world on the screen. And I didn't open this. I'll open this in debug mode. So now what I can do is I can say hook on. And as soon as I save it gets updated. So what Elm reactor does is it looks for changes in the file. And as soon as it finds one, it recompiles it and pushes it to the browser. So this is called hot mapping. This is also possible because of purely functional nature of Elm. And this is way cooler than it looks like right now. So let's look at how we can print other values. So we saw this function called aspects which takes any value and tries to print it on the screen. So that's printing. So it's right now printing a list. I could print. So there are markdown literals in Elm. So if I say print that. So markdown is actually already an element. So that this is the syntax for writing markdown aspects. So coming back to the story of what the UI is. We know that if UI is, I mean we can think of a UI as a value. And it can be a value generated by a function F using some data. So when the data changes, the view should change. So we can generalize this to a reactive UI. Where in the view at any given time t is a function of data at any given time t. So when the data updates because of user interaction or time is moving or because some missile launched, the view should too. So Elm has this data type called signal. A signal is a time varying. A signal takes a type parameter A and signal A is a time varying value of type A. It can take values of type A. So and there is this most primitive operator on signals. It takes a function which goes from A to B and a signal of A and returns a signal of B. So you can guess what it's doing. It's basically taking the signal for every update to that signal. It applies a function F and returns signal whose values will be the result of applying F. So let's look at some signals, example signals. So this is the window dimension. So I can go here and resize the window and it updates. So what I am doing here, I didn't tell you about the infix operator. It's basically lift. So it's the same thing that works. So let's look at some more of these signals. So there's mouse dot position which is the current mouse position. So as I move above. So notice that I didn't reload the page. The code got hot back and then you have keyboard dot arrows. Keyboard dot arrows. So what arrows give you is a record of type X and Y that float. So if I press the left button, it's going in the negative X direction. Increase the function. Yeah. Yeah. Which returns a signal of elements. So here unlike in the previous case, main is of the type of signal of element. So lm runtime can handle main being signal element. So it basically redraws the element. So that's... So if I press the right button, it becomes 1. Left button minus 1 because it's the Cartesian system. And up is Y1 dot. And I can press multiple keys. And only two of them get recognized. Nope. So lm actually has a compiler which compiles the JavaScript. So you don't have to worry about that. No, no. I think there's a long way to go before that can happen. That's signals. Let's see. So there are signals which you can derive from time. So there is a signal called fps. So you can pass it as floating point value. There's a function called fps to which you can pass any floating point value. And it returns a time delta in millisecond. So this is supposed to be 33.3. Yeah. So it returns a time delta in millisecond between two updates. So the cool thing about fps is if your program is taking time to render. It will try its best to get at that fps. And if your program is fast enough, then it will wait till it updates again. So it's basically like fps you see in your games. So if you're like the fps you get at is dependent on the hardware you have. So that's fps. I can have every which takes effect to a signal of element. So we have this system setup. So let's see. Let's go in pursuit of these functions which can take data and give you elements of it. So functionally composed graphics. So what is it? So this is a picture from the paper called Functional Geometry by Peter Henderson. In this paper, they go from drawing a line to drawing this intricate artwork by Esther. It's called square limit. So they basically start by drawing a picture and then aligning them and do the recursively till they get to this point. So we'll do, we'll look at how things like this could be done because of the ability to functionally compose UI. So there's a type called shape which is a geometry. It's an abstract mathematical thing. And there's a type called path which is a collection of paths. So here are some shape-producing functions. The circle takes a float and returns a circle geometry with that as the radius, with the argument as the radius. n1 takes a number of sites and a radius and returns a polygon with n sites and that radius. And that is where polygon rectangle is. And path is basically a function that takes a list of points and returns a path. So these are just abstract shapes in path and they do not have any manifestation in the real world. So to do that, we have to fill them with color or, you know, stroke them, stroke their edges. So these are functions which we learn. So there's a type called form which is a thing that can be drawn inside a collage. Forms lend themselves to styling, grouping and to re-transformation. So filled is a function which takes a color and a shape and returns a form. Faith is a function which takes a line style and a path and returns a form. And group is a function which combines many forms into one. So let's look at some code. So this is still not enough context to go ahead and draw a thing. So what we need is a surface to draw it on. So that's given by collage. Collage is not actually a type. So it takes a list of forms and gives us an element. It takes also the dimensions. That's the triangle. Let's draw a circle. If you have any questions about this code, please do ask. Yeah. So form is a type. There's no definition for it. Internally it's a list of points. It's a set of, it's a collection of shape and the size. It's a data type, but the rendering is done by the runtime. So it's like a hidden built-in data type. So we have a circle, but it's hiding the triangles. There you go. And I'm going to make, I can, okay, so I can keep doing that. But let me tell you about transformations. So you can move a form. The move function actually returns a form. And rotate a form, again it returns a form. Scale a form, it returns a form. So I'm going to try and use that here. 5 by 6. That's the wrong goal, right? Now I can go here and move and give it a set of coordinates. I'm going to move only one of them moves. Okay, okay. So rotate 5 by 6. 5 by 6 is the angle. So rotate is a function that takes a flip point which is the angle and a form. So what we have here is a triangle which is filled with white color. And rotate basically, rotates the triangle. And this collage takes two values with the integer, which is the dimension of the collage and a list of forms and then draws it on the screen. And returns an element with element and time can drop. So move is similar. Move is taking a tuple of coordinates and moving that shape here. It is taking from the center. I can, I'll show you that. I am going to update the dimensions of the collage to be 400, 400. Move takes a float, forms. So ignore the modules, names take a form. And it transforms. And move takes a coordinate. Close, close. Then move it. What else? Oh, there's no collage in this. Anyway, form is this. Form is a type constructor which has close, close, close, close. And then it forms. So these are internal representations. So let's go back to the light. Okay. Cappin C triangle. So drawing things is not fun without inter-functional language. It's not fun without a recursion. So what we'll do now is try to draw this thing. So how this works is the Cappin C triangle is a recursive picture in that all the three sub-triangles you see there are again Cappin C triangle with one less intelligence. Okay. So how do you draw Cappin C triangle? So to draw an n-step Cappin C triangle, if n is 0, just draw a triangle. Otherwise, draw an n-1 step triangle in each of the three sub-triangles in the given triangle. Right? So we will see this in graphical form. So when n equals 0, you just draw a triangle. If it's not, then you go to these three places and draw a Cappin C triangle with n minus 1 and h by 2 to the height divided by 2 instead of the original height. So we'll go back to it. So I have a scaling factor for the height because it's the height of a Cappin C triangle. And I have a function which should generate the triangle given an edge length. And this is done using a path which creates three points, the vertices of the triangle. And I have the Cappin C function which takes the center where the Cappin C triangle has to be drawn. And edge length and the n, which is the number of iterations, if n is 0, then I just draw a triangle and move it to x comma y. And if it's not, then I draw these triangles and group them into a single form so that I can take that away. So the most difficult part of this is getting these right. So these are the coordinates of the new triangles and the rest is just you're going to say draw these triangles with edge length a by 2 instead of 8 and iterate n minus 1 times. So that's all there is to it. And finally I'm going to draw for last year with 400 into 400 dimensions. And the Cappin C triangle with the dimensions 300. So I'm actually lifting this function which generates an element with the count of mouse clicks. So every time I click the mouse, the count updates are increment and you get one more iteration in the Cappin C triangle. So go back and set this off. So right now the count is at 0. So I'm drawing a triangle. And this one is drawing n minus 1. So n equals 0 on Cappin C triangle. And I click again. Again, again. Cappin C triangle up. Cappin C triangle. So next we'll look at layout. This is cool. You can generate elements. You can have markdowns. You can have a lot of things. But how do you align them? So this is like the hard problem in the TMLC at the center. It's aligning things. So let's go solve this hard problem. So it's three drawings on the first. But you can make it lazy in that. So there's a keyword called lazy. It will make the clear print key function lazy. And then it won't. Yeah. It's actually creating the entire clear print space triangle again. Okay. So layout. Let's go to the debug mode of layout. So I have got these four boxes. I have a function which takes a color and a string and draws a box of that color. And width and height. Hundred hundred. So I'm actually creating a list of the elements. The boxes. And I say flow to the left. Boxes. So I'll just start off with the right. So we are all, we read from left to right. So this will be a kind of fact. So that's A, B, C, D. So these elements are flowed to the right. And left. Yeah. So flowed. Flow. Yeah. Flow takes the direction and a list of elements and aligns them in the direction. Returns an element with these elements aligned in the direction. Okay. And the direction can be up, down, left, inward or outward. And you can stack these elements on top of each other. Okay. Yeah. So these are canvas elements. These are canvas. There's a canvas stack here because I'm actually drawing it a lot. You could have marked on a set. Let me show that. Then marked on literal. So to give a space there. And if I look at a, no canvas. So that, so I can do more, right? I can recursively have flows inside flows. Yeah. SVG. There is a D3 backend. So there's a D3 library. You can use to generate a SVG. But I've not looked into that. Yeah. So they've already done it. With a very nice API. So you can take a look at that. So I can nest these things. I don't know. I don't know. Maybe I'll do this. I'll load these off the plus. So what I need is to come out with that bit. So I have a flow inside a flow. So I can keep doing this. Whatever. And you have arbitrarily complex way of doing it. Let's call this something else. Yeah. I will come to that in the rest of the talk. This is the problem that I like doing this. That's the thing. Oh, I don't actually have to say this. Okay. I'll just do this. Okay. I have a cooler example. So the cooler example being recursive. Because recursive flow. So you all know this thing where you, where you visually show what 1 by 4, 1 by 8, so on up to infinity. So it's fun. So we can see that here. So here we have a square. And we are dividing up into half each time. And these are actually HTML elements. Okay. And not collage, not collage. So we are dividing them up into half and flowing them like this. So let's look at the code. Pretty interesting. I think it's very nice. So right now I have a way to draw a box. Given a width and height. This returns an element. And I have a way to cut a dimension in a given direction. So this takes a direction and a tuple, so w,h. And if the direction is either up or down, it splits the height. If the direction is anything else, it splits the width. So I have a function called stack here, which takes a dimension, a list of directions, and n, which is the iterator. And iterates n times and draws this thing. Okay. So the main function is just stack, stack with a initial dimension and a list of directions which has the cycle through. So and the number of iterations. Right now here we are drawing 15 different elements. And they are getting the flow is, so let me explain this part. So what's happening here is flowing in the direction d. It's the head of the list of directions. It's being passed. And it's drawing a box of the given width and height, cut in half. And then stack, drawing a stack, because it will be calling itself with n minus 1. And the interesting thing it's doing is it's rotating the list, taking this direction and putting it at the end. So that the flow happens first down and then left and then up and then right. And then they keep cycling till the iteration stops. Right? Okay. So that's layouts. Oh, by the way, this is, these are, yeah. I wonder how four strappers, 960 years or something like that go through this. Right? Okay. So there's also for doing layouts, there is this thing called container, that will create an invisible container of given dimensions in-chain. And place an element in that position. And again returns the element. Okay. And the position can be middle, mid-top, mid-bottom, mid-left, all that. So let me go here and say, I want a collage, say width and height, where I'm taking width and height from the window dimensions. I will show you how that is done. That's actually a tuple. So, yeah. So this is actually in our responsive grid. Center at all times. And it's also vertically centered. Okay. Okay. Let's move on to going more reactive. Right? So making more signals. So there are combinators for these signals. And then fold P. So this is similar to fold R. But you fold a signal over time. This is pretty cool. So you can, for example, implement the count function we used before. In this case, for example, you can implement a count function using fold P, where your function will take two arguments. It's a plus operator. And the initial value is zero. And then what is in any signal, you will get a signal offering. Okay. So I will show you this in an example soon. So this is lift two, which is basically lift with two argument functions and takes two signals and returns one signal. So there's lift three lift. Lift up to eight. How do you do nine? I think you can do them with lift two. You can implement lift nine with lift two. So there's much. We take two signals of the same type and give out a signal which updates when either of them updates. And then sample on where you take two signals and the output signal updates when the first signal updates, but it takes the value of the second signal. So if you look at the type signature, take signal A, signal B, and give the signal B, which updates when signal A updates. Okay. So there are other things. Keep it, which takes a predicate and a signal and drops. Keeps only value to satisfy that predicate. Keep one, which takes a signal of Boolean and another signal and keeps the updates only when the first signal is true. And drop it and drop and basically inverse of that. And drop a feed, which drops repeated updates and count and count if we drop. Count if takes a predicate and then count it. So let's go back here. You don't know. More clicks. So I'm opening this here. So this is just my mouse coordinates right now. So what I want to do is sample mouse position on mouse click. Okay. So I have a last click variables here, which is sample on mouse.click. Mouse.click is again an inverse signal, which is coming out from the runtime. And I take mouse.position at each mouse click. So if I now plot, I mean if I now print last click after the lifting. So I get the mouse position. Okay, wherever I click. So I'm clicking, you can't see. So let's now try to create a list of points that I have clicked on. So I have fold P here, whereas I am using a concat operation as the function that fold P takes and starting out with the empty list and just combining all clicks into a list of clicks. Okay. So let's see what happens if I say this. Yeah. So it already had those things in memory. My previous clicks in memory, and it was actually creating this signal and updating it. Now that I swapped out the thing that is being displayed, it is actually showing the list it has collected. So that works. If you come here and look at the debugger, it's actually recording all my events. Okay. So I click a few times and then go back here, pause it. I can roll back. I think this is pretty cool. Okay. Now let's, I'll show more of this. Let's go back to, so I have a program here called stamps. What it does is it just draws some random figure at different places in the scene. Okay. Now I have three points. That's because I've passed it a list of points. These three points are being drawn over there. So this stamp is being drawn on these three points and the stamp takes width and height of the collage and X and Y coordinates and draws something there. So by the way, this operator is this function application. Instead of having that set call, you can use this to reduce the number of parenthesis. So what this does is it takes n gone 330 and applies this function to it and so on up to the last move. So I'm just mapping over stamp and drawing all the points. Okay. So what I can do is get these signals from the other and just replace this, the list of points with some variable called points and say pdr this and say points and what happens is now I have a place where I can click. So you can actually make this code more pretty by just removing these things in this. So to go here and see, it's still recording all of my events. So I can roll back to any point in time and then start the program again and I can rewrite it. I think that's pretty cool too. So then we have an example of bouncing ball which operates on time varying signals. This is again 28 lines of code. So the main function is just lift draw ball. So this is how it's supposed to be. Draw is our UI function and ball is our data and so we have a function called step which takes the time and the ball and step the ball to the next function. Okay. And I'm applying some kinematics here. So the cool thing about this is that I can go here and vary gravity and get hot pack. I don't know why that is happening. So that's bounce velocity. That's just some trick where basically reverse the thing you're doing. So if ball's height is less than 0 then bounce velocity otherwise you reduce the velocity by minus 1. So a ball is, what is a ball? A ball is a type with these two. This is the type of the ball. This is the initial ball whose height is 0 and initial velocity is bounce velocity. These two are global. Bounce velocity is global. So 4p takes the initial ball and steps as and when the FPS is changed. This is a signal. That's the initial value. Step fills the function with step through time. So now I've passed the thing. I can go back, change the gravity and see how that affects it. Let's look at a cooler example. Yeah. Okay. So your database has to be, you know... So basically these events get recorded and replayed. So that's how it works. Replayed from the beginning. Even if you go to this point it replays from the beginning. Elm reactor actually caches the last 100 updates. So I guess the database record will be added again unless you have some mechanism to like fake the database update. And whatever when you are debugging it shouldn't be doing that. Yeah. So signals are the only way to do the side effects. So we can actually like simulate signals and record them somewhere else instead of the database. I'll come to that. There's something called ports which you can use to communicate with the outside world. Let's look at the Mario. Okay. This is Mario. So I have... His part is being traced here. This is actually a function in the debug module which you can use to trace anything. And I am watching the velocity and the arrow. So while he's doing this I feel that the gravity is not quite right. I can go back to my wire code and update some gravity here. Like this file. If you didn't notice I'll do it again. So it actually drops this path that would have been. So you can actually send him back. Start over with a new gravity. Okay. So I think this is very useful when you are making games. Yeah. What do you mean 10 browsers? 10 browsers connected to the same reactor. What do you mean 10? Yeah. Yeah. It's not really a thing you want to be using in production. I guess. So sometimes hot-surfing phase because there is some variable that you have destroyed and something else you are using. Oh, actually it phase when you have intermittent compile error. Yeah. So I will be covering how to embed LMAP inside your JavaScript application and how to communicate with others. So interactive UI elements. So you want to be able to have checkboxes, checkboxes and stuff like that. Yeah. You get functionally composing these things also for free. Yeah. Let me go back to the reactor. How do you create checkboxes? There is this type called input in L which has two things inside it. One is a signal. One is a handle. And the way I find most useful to think about an input is the handle goes into something in the runtime. The runtime can use that to update the signal. In this case in the case of a simple this is the type of type input. So type is actually type alias input A is a combination of signal and a handle. So there is a function called input given a initial value which is the rate of value of type input A. So looking at a more concrete example so I have an input called check which is which defaults to false. And then now I can draw connected to a checkbox in the runtime by saying checkbox takes this handle and apply this function on the updates give it a default value that is supposed to show in the beginning. So this so if you look at the diagram the handle is connected to the checkbox and every update the checkbox is making goes through a lift on F and then the signal comes out. Okay. Now I will go back and show you an example. So here is check we are starting off with a false value and here is the checkbox which takes check.handle and takes an identity function. I don't want to be changing true to false I mean true and false for anything else let's say and false as the default value and let's see how this works. So I'm actually printing true of the signal this is a lambda which takes the value v and puts it in puts it next to the checkbox so it's doing that so now let's say I want to say yes or no when the checkbox changes I can do that easily here with fetch then yes and no so now the signal is actually a signal of things that work let's go to a more complicated example this is not that complicated but yeah so this is how you do checkbox input so this is an app which has a checkbox oh no this is so this is an example that shows that you can think these input elements also so let me go back to this example and remove the signal thing oh you can't put it in a collage sorry the collage here I'm doing it the checkbox is in a flow hopefully it works in the middle of the 300 into 300 that's because I'm using aztec so I can just say plain text and it will make it that prints the literals we'll go back to this example so here I can actually lift my checkbox with a different default value taken from another signal so in this case there are three boxes they are all things because box is taking this variable called easter as a default value and easter is an argument to this function called display boxes and my main function is basically display boxes with the default value being whatever the signal value is right now so that's how they all get things so this is an app which takes is that okay oh right so this is an app which is reverse assisting so I'll go back and let's look at the code so these primitives are actually defined in these two modules so we'll have to import them so text input gives a signal of type content and content has two things the text of the input and the selection the current selection from where to where is the text selected okay so here there's a bunch of code to like extract out this string from the content and reverse it and display it as a plain text so that's about it okay let's move on in the slides so there's a school new library called LMHTMS okay so before we saw things which were like done using and primitives but you want to be able to tap into the enormous amount of CSS that others have written or good libraries like bootstrap or whatever so you want to be able to create HTML elements or draw HTML elements and manipulate them so this is a library that lets you do that so written by I have an template key which is also the author of it so so there's a function called load which takes a string which is a which can be dp or something like that which is a tag name of and a list of attributes and list of CSS properties and list of HTML children and returns an HTML okay so this is pretty straightforward I'm not going to go too much into the code of this in the interest of time but we will look at the concrete examples so there's a there's a famous benchmark called to do MVC which all MVC JavaScript MVC framework used to benchmark benchmark themselves and this is how it looks let's say task 1 all that works and this is about 300 lines of lines and the thing about this code is that it's a strongly typed and you can compose things functionally so say I'm sure there is a map function here which takes there are a lot of yeah to do item it takes a to do it takes a task and returns an HTML let's look for map to do so filter visible task so this is pretty cool you can't I mean it's very nice to be able to write code like this like this designing UI we just say filter all visible task and then map them over to do item and you return a HTML element and that becomes the children of your parent element which is a section of this is a function which takes a list of tasks and returns the HTML so what another cool thing about this is that you get since it's a purely functional language you can implement these data structures in your tables under the hood and what you get is when your view change you have a different view you can actually diff the view and apply this to the ROM okay so it turns out like redrawing the entire scene is quite expensive and so is so redrawing the scene is quite expensive because there will be a lot of bookkeeping the browser has to do so what you can instead do is just go to the particular element that you want to change and just do that so there is this library called virtual DOM written in JavaScript so elm taps into that to do this so when you have two views you can let me diff them and patch it to the DOM so what does this entail right so apparently this is extremely fast compared to the most popular JavaScript MVC framework but more than the angular at home elm is only slower than mercury and elm's virtual DOM is like taken from mercury okay so this is actually elm is actually faster faster than 5 of the ports so that's doing the same as in there okay so let's talk about ports so ports are a way to communicate with the external world the port is basically a signal a special type of signal the external world can update the signal if it's an input port or elm can give out signal to the external world if it's an output signal okay so this is how you define a port so port is a keyword port messaging is a signal of string port message out is a signal of string then you assign message out assign any signal of string to message out and it just goes to the browser so how do you take it out in the JavaScript end right so you can go to the html elm generate or you can write your own html and do this so there's a when you have the elm runtime in your page there's an object called elm which are the methods so here we defined a module called chat and that turns the port as elm.chat so you can embed that in a div the chat app inside a div and then assign an initial value to the port for that the messaging of the port that we created threadline and this is how you send a message to the port send a and the signal updates and you can subscribe to any output signal like message out pass in a handler and you can handle that in the browser so if the user types in some message in the elm app you get it you get it over here so let's now go check out one more example called shangai it's in shangai.elm I'm just printing this data structure called doc so doc keeps track of the shift in the doc and their capacity let's go to the reactor so all this code is online I encourage you to put such a dot so I am sending a ship called Phukon ship with that much capacity and it's getting updated so that this thing is an elm app this part is an elm app and the outside part is an html that you can write so this is the source code of this so you have included the elm runtime and then shangai.js which is generated by elm compiler so that's how you can send this in compile this shangai.js and it's including that and finally it has an id called container and inside port.js which is again a user written JavaScript code to connect elm and JavaScript so over here what I'm doing is elm.mbed take this module called elm.shangai put it in this div and these will be my initial values of the port so let's send one more ship so elm is actually sending sending the total capacity of the of the port shangai.doc right now when a ship arrives at a dock the capacity increases so if you look at the elm code the total capacity of the port which is coming to the browser and the way it's getting handled is being printed on the control so when I add one more ship with a different name with a different name the capacity increases so now I can say outgoing ship hook on ship free left the dock remove that from the dock so that's that and all of this code we wrote so far can be divided into these three simple modules called model for example in the mario let's go back to the mario example so the three three divisions are model update and state model is the model of your app like the structure of your app data structure and update is a function which takes your current current state and some input returns a new state and displays something that displays some given data so so model the model consists of mario x y position x y velocities and the direction is moving in so direction can be left or right so the entire thing is the model and this mario is the default model at the beginning and the step takes the time delta and the key screen press and updates mario using all these helper functions so that's the update part and the display part displays has the function to display the entire with the inside a container of w dash w dash with the given mario and main is display display this signal which is which is stepping mario to the next mario given some input and drawing it in this in these dimensions in the entire screen so I think this is a cooler way of dividing your application in terms of functionality there is a difference of flavor and you can contain modularity I have like 5 minutes left 4 minutes so let me go and show you some cool things that people are doing there are examples on the M website so this is webdl so there is a webdl library this is actually a lot of fun to play so now you can so that's the first person to shoot a game yeah so there is a you can embed an lm app inside a div and have quotes which communicate to some javascript and the javascript functions which communicate to will be responsible for communicating with the server actually there is a ajax library I didn't go into that so if you want to look at all those things just go to the lm website slash examples.l and there is a bunch of examples which goes from basics to intermediate to bigger what so the ajax library is actually built in but the runtime takes care of the runtime come again yeah so basically lm programs compile into html, css and javascript so you can use your favorite web server what plugin I have no idea I actually wrote yeah you can deploy the javascript code you don't deploy the lm code because that's meaningless so I actually wrote a bridge for lm meteor lm to meteor so there is one example so back then I didn't know a lot about the code this was like 6 months ago so this is the test code which is like 30 lines what this does it takes a signal of mouse clicks and sends it to meteor which gets stored in a MongoDB database and then you have it takes the point back from the database and draws it on the screen this is enough this is enough gluing together for it to become a collaborative app so lot of people have used this apparently so I am opening the incognito window that big circle just represents where I click last so when I click on this you see it appear on the other window so I will just click here what's that space so that's right below anyway so I click here so I am clicking here just find the same spot in the other one so it appears there there is this thing like 30 lines of code and it has session which means that my previous position is stored here the circle represents that and here is the different circle anyway this is not that cool an example but so far from that so I guess we are at the end of the talk so there is a Google group called I am discussed you can go there and one thing I didn't talk a lot about is the extensible record the records we saw are typed and you can change the type in your various functions you can extend add attributes to it so I am Shashi and that's my Twitter handle and you can have your own yeah sure oh no I am afraid so semantically semantically lm is not equal to haskell and lm is eagerly evaluated haskell is lazily evaluated one thing lm's compiler is written in haskell and it has nothing else to do with haskell apart from syntax being very similar it compiles to JavaScript so there is some work on this there is vse I think vse it compiles to JavaScript pure script and there is hack Facebook and there is lm which is like lm implemented okay so there are some good ideas you can see from lm so in my work I basically do that then they ought so this is lm so this is a giving agent which copies lm so some things I built with by stealing this so I work on Julia and I work on creating interactive user interfaces for people who do not want to care about the event loop or callback and stuff so they just want to be able to create easy interfaces that they can play around with so these are these are scientists and mathematicians so Julia has a technical computing language so you can do things like this with this much code and there is so people are actually using this stuff for teaching and the way I did this is basically I made a library called reactive which is which implements lm signals in Julia and then there is a library called interact which adds syntactic to left operation so you go manipulate at manipulate and then a follow and then you have something in the wheel and that update so the follow becomes a setup so that's my talk thanks a lot for listening