 Just start. Okay, cool. So this talk is not about JavaScript. It's about refreshing language called Elm which happens to compile to JavaScript. So how do I hit the word? Wait. This is fine for me. Okay. So Elm is a functional reactive language for interactive applications. That's how they phrase it. So it's a language where time-varying values are first-class values. So I'll explain what that means. And I think it's a very important idea in modern interface design. So Elm is functional, which means that functions are first-class objects also. And it's reactive, which means that we have signals, and it's compatible for all of you framework folks. You can actually embed it in your JavaScript applications. So on the website, there are quite a few examples. You can see Mario Tetris vessel, this game called vessel, and a very basic FPS game. Okay. Let's jump into the code. So this is the Elm online editor. So you can just go to elmlang.org slash try or click on one of the examples and they appear in the editor. So if you just click on any of these terms, it will tell you what type they are or what... So this Elm is strongly typed, which means there is type inference all over the place. So this is the hello world example. No surprises here. So it takes hello world string and converts it into an element. So what is special about Elm is the signal type. So mouse dot position here is actually a signal. Signal means the time-varying value of some type T. So mouse dot position is actually a first-class value here. And I'm using the lift operator. This is called a lift operator. And converting it to a signal of elements, which I'm displaying here. Okay. So the next phase of incrementally moving towards a better example is this, where I am sampling the mouse position on mouse clicks. So mouse clicks is again a signal, but I'm sampling mouse positions on mouse clicks and displaying them so that I can actually just show clicks. So there's a primitive called fold P, which is similar to the fold function you might have used in functional style of programming. So it takes an array and folds it into a single value. It's like reduced, but ordered. So fold P is fold over past. So you take past values and create a new value. So here I'm creating a list of my click positions. So what can I do with these positions? So I have a function here which takes the window width and height and a list of locations and draws pentagons in those locations. So what I'll do now is use fold P to create a list of points I've clicked on and then just lift the scene function with the signal of points. So I have an app where I can click on things and I get a pentagon at a random orientation because I'm rotating it with respect to its x value and moving it to its proper place. So Elm has a very slick debugger. So since Elm is a purely functional language, which means that there are no side effects, just like Haskell. A lot of Elm's syntax is also borrowed from Haskell. So what this entails is that you can also... Signals are the only way to introduce side effects to your program. So what this entails is that you can actually record the inputs to your programs and replay them. So the site gives you a lot of demos and explains them. And at the end, there is a nice talk by Laslo Pandy about how he implemented the debugger. Go on to the debugger scene. So I have the same stamps example with more colors and some more guard conditions and stuff. So what's happening here is Elm is... The debugger is recording my events. So once I restart, I can click on things and pause my time and go back here and scroll back and see what happened. All right? So this is Mario. Oh, wait. I have to refresh because there's some bug in the code. Okay. So that's Mario. Okay. The tracing is supposed to happen wherever he jumps, but let's go along with it. I guess it's the change in resolution that caused this. Anyway, so I can pause Mario and... Oh, fuck. Yeah, great. I have the slider and... Where's the slider? He jumps back. So he basically travels time. So this is... If this is not cool enough for you, you can go to any of these values and change them. And there's hot swapping in Elm because there is... It's a pure language. So which means that it can compile the current program into JavaScript and just push it to the other side of the screen. So what happens is it predicts where he would have been if this value was not what it was, but 7.3. Okay, wait for some time. Now I can still rewind my time and debug it. Okay. So this all may seem esoteric, but recently a month ago or so, Elm introduced this library called Elm HTML. So it's basically a combinator library, as you would put it, for composing HTML documents with CSS and also integrating it with your existing CSS and stuff. So what Elm can do, because it is purely functional, is that it can have a scene graph of the entire page. So to say, or a representation of the entire DOM. And when a new DOM is created as a signal, it can diff the saved representation with the current one and only apply those diffs to the DOM. So this has value because the DOM, mutating the DOM takes a long time. So if you're actually replacing the entire page because Elm's movement changed the entire page, so you're going to, it is going to cost you a lot. So what Elm does has value because of this. So this is, okay, this is a comparison of 2DoMBC. It's a very simplistic benchmark. I agree with some benchmark. So this is running times on Chrome, on Ivan's application. He's the creator of Elm. Very nice guy. So that's Blackboard number. Angular, React, OM, Mercury, Elm. Okay, Mercury is actually inspired largely by Elm. And Elm HTML is inspired largely by Mercury. So I guess that's my talk. Yeah. Good. I will take it off. Thank you.