 I know we have some time, but since you are here, I think it's OK if you can listen to me. So just to show off, how many of you are already coding with React or going to evaluate it right away? One, two, what are the frameworks do you use? I know we are in a jQuery conflict. That's OK, but how many of you use Backbone here? Angular? Ember? Only two? Any other frameworks? Just shout it out if. Ah, OK. Yeah. Yeah, yeah, yeah. Yeah, true. How many of you code in other than JavaScript here? Java, I suppose? Or which other language? Ruby, Python? How many of you are in Ruby? One, two, OK. Closure, anybody? Wow, OK, there's only one. OK, we've got to fix this. Cool, I'm just filling time. You can ask me anything. By the way, do you know some crazy, fun facts about JavaScript? Do you know undefined is not a keyword in JavaScript? You can actually do var undefined is 20. How many of you use that already? Cool, OK. Yeah, I know, but that's no fun, actually. And you know, this is the other thing, where actually NaN is never equal to anything. I mean, NaN is not even equal to NaN. That's weird, actually. Yeah, but then you have a value. NaN is like a value, and you expect some value to be equal to some other value, or at least to itself. But what is type of undefined in JavaScript? Type of undefined is undefined? Yes. Oh, type of undefined, null is object, see? I can't even keep up. But what would you have if null instance of object? What would that evaluate? Null instance of object? False. Yeah, but if type is object, then it's. Check. Let's see. Fun thing. Yeah. Yeah, I did that. And it's false. So that's JavaScript. It's a couple of minutes more. I've been trying to do a stand-up routine around JavaScript. I think it's a fun idea. I'm sorry? Yeah, yeah, yeah. Of course, you would never use any of this code in production. It's just fun things to do with JavaScript. I don't know, how many of you watched the VAT talk? W-A-T VAT, by Gary Bernhardt? Nobody? So anyway. So I guess we can start now, or do we have some time? Maybe for a couple of more minutes before people come in. I guess people are coming, so let's start. Hi, everybody. So my name is Bagmi. So I'm going to talk about Elm, actually. So Elm is a sort of a weird language. It's a functional programming language, right? So what do we mean by functional language? So a language which deals with functions as first class and distance, but we know JavaScript already does that. It can actually take things and move things around. But Elm is also sort of a pure language where it doesn't allow for side effects. So generally, functional languages are popular for not allowing side effects. So what does that mean, side effects? So if you call A equals 1, and then you do A equals 2, basically, you have redefined A and destroyed the value of A, actually, which is not true, actually, which is absurd. If you think about it, when you're making a session that there's something equals to other, so if A is 5, then 5 is A. I mean, it can't be any other way. Now functional languages actually are very strict about it, about enforcing those kind of things. And whenever you call a function, if you call it with some argument, it should always return the same result. So given that you say, times 2 of 4, it should always give you back 8. It shouldn't go and do something else. And the world should just be the same as you left it. But that's not very useful. I mean, it's mathematically beautiful and pure and all that. So but if you only have pure functions, and they don't cause any side effects, that means that you can't write to the screen. You can't read and write to networks. You can't read and write to databases. And basically, all you would do is make the box hard, actually, and not do anything. Now the goal of all these functional languages is, how do you work around these side effects? And different languages have different ways of doing that. Elm thinks about it as signals, actually. So if you think of how the browser works, basically, it's in a big run loop, where every time the whole thing happens, and you have various events which happen, like window resizes, or your mouse moves, or something clicks on something, or you've received a new data because of an Ajax call, and so on and so forth. So there are several things that happen, and your JavaScript is basically reacting to it. And that's why you have the whole thing about callbacks in JavaScript. I mean, JavaScript has asynchronous. You have to have something call you back. When something happens, you can't block on anything. And that leads to a lot of problems. The callback style development is a lot of problems. Now Elm is one way you can get out of this callback. So briefly, a commercial break before we go in. So I stole this from Narayesh yesterday. So I run this company called Tarka Labs. It's a small business division of set-in technologies. We do web and mobile development. Off-late, I've been doing a lot of JavaScript, way more than what I enjoy or what I want to do. So I've been doing Node.js on the server. I've been doing React, Immutable, and this thing on the client. But my heart lies with functional programming languages. My heart lies with making elegant and beautiful solutions for the problems that come across every day. And before, in fact, my introduction to React was not through React itself, but was through a framework called OME, which is in ClosureScript, actually. Now Closure is also a very functional programming language. And it comes up with this idea where view is a pure function. So whatever view you write is a result of whatever state you manipulate. So as long as you have your state in the right place, view will always reflect it. There's no way you can actually have one representation on the view and nothing on the server. That means that data always, or the flow, happens in one direction. You change something in the state and the view changes. And that's the only way you can change the view is to make changes to the state. And that's how it works. Now I was inspired by OME because that radically simplified the UI solution. But then you go to a client and I say, hey, I'm going to build your stuff in a programming language which nobody understands. And it's going to be like Lisp. And it's going to get compiled from Closure to Java to JavaScript. It's not going to fly, actually. So I was looking for ways in which I can take those learnings back into JavaScript, and that's how we want. And similarly, when I did Elm, that actually reinforced my pattern of how to think about a functional view of a particularly imperative style of programming. Because I've written from, I mean, before jQuery days, I've been doing JavaScript. So it's been a very imperative sort of a language. But apparently, using JavaScript, you can write very beautiful functional programs as well. So that's a little bit about me. So let's get into Elm. So are you guys able to see that? You want to change the theme? It's going to be a little difficult, but hold on. Just bear with me for one moment. Is this better? OK. So this is the obligatory hello world program. So you have a main function, and all it does is show of a string. Now show is a function which takes any object and turns it into an element. So Elm is a sort of a Haskell type language. So it uses type inference to do that. So it is strongly typed. That means that you can't randomly give some type to some function, which it doesn't expect. Like JavaScript doesn't do coercions and things like that, you have to be very explicit about types. But it doesn't insist on the programmer typing out the types, like how Java does. Java is very particular about if there is something, you've got to label every single thing. It's like an OCD for Java programmers to name things and label things and so on and so forth. But it's not like that. So generally, main has this form element. It says element is not formed. That's because it's there. So main actually returns an element, and it does that. Now let's start with something simple. So I'm going to come from a perspective of a JavaScript programmer. So you say a person is, I say, name equals Wagmi and place equals Bangalore. Now you may think that, and I'm going to say show this person. So you may think that you have created a variable called name with name Wagmi and place Bangalore. Actually not. So what you've done here is you have created a function called person, which returns the structure as indicated there. So you don't have to actually say what the structure is. We haven't defined the structure. So we're going to write one more function called show person. Now show person is simply going to take person as an argument and show the person. I mean, it looks like I'm adding more code, but I'll show you why. Just to make sure this still works for us. Now what would be the type of show person now? Actually takes a person and then returns element. It's not void, because it has to return element. There's no side effects here. There is no void type, actually. So it's not a side effect. It returns an element which then gets rendered by the run loop. It's out of here. So you can't actually print something, or you can't actually do it. So you're only returning structures which then get written. So that basically suggests that there is some sort of a virtual DOM in play, actually. So Elm already has a sort of a virtual implementation of those things work. So now this won't compile, because it will, of course, say, I don't know what you're talking about. I don't know what person is, actually. So let's create that type. So I'll say type alias person is actually name string place string. Break this up so that, yes, it is. So there is also, yeah, it's a bit like data keyword. It's a record, actually. Yeah, they have named it a little differently. So there is a, no, they don't have a data keyword. This is the data keyword. And then you have the type keyword. So we'll talk about this a little ahead. So I'm coming from a JavaScript perspective, since most of the JavaScript. But I'd be interested to talk about if you've already done Haskell and if you want to know what the differences are, I'd be happy to talk to you about that. Now we know that this person object comes. So this compiles, actually. So we know that this person function actually returns a person. Now this is a cool thing about Elm is that it supports something called a scurrying. Now in a mathematics thing, you would have read about equations, right? And you say if x plus a equals y plus a, you can cancel out a on both sides and you can say x is y. So you could do the same thing. This is called a point-free form. So you can come here and say, hey, you know what? Person is there on both sides of this thing. So if it's mathematics, why can't I eliminate it? So I will say show person is just show. And then it still works. Now, why would I want to do that? So it doesn't mean that show person is actually show completely, right? Because the thing is that if I pass hello world to it, as it was earlier, which used to work with show, it won't work show person saying that because it says, hey, you know what? I think you mean to pass a person object here, and person record here, and not a string. So that way you can actually say, hey, you know what? Yeah, you're right. I need to pass a person here. And this works. So imagine the whole class of bugs in JavaScript that this eliminates, actually. So in many cases, you accidentally pass a number where a string should be. You accidentally pass a different structure where you expected because the function you think would expect the same thing and on so on and so forth. By explicitly making sure that these types are done, this becomes a compiler error rather than something going and blowing up in the runtime, actually, which is much harder to track and debug and so on and so forth, actually. So let's talk about, I mean, so we talked about some of those kind of things where we talked about carrying. So here, show person, when you do this point free form, actually, so it actually returns a function which returns something, which should expect something and so on and so forth. So ideally, in other languages, this may say, hey, you know what, you've forgotten a parameter to get passed during declaration. But in Elm or Haskell, this is perfectly valid way of declaring something. Let's go on to something more exciting, actually. So I'm going to do a, so imagine if you are a typical web designer and you have to do this famous five grid layout. So you have this header fixed thing, and then you have the footer as a fixed length. And then you have an expandable middle section, where it has a fixed length, left fixed length, right, and an expandable central section. Everybody knows how hard it is. It's almost impossible in HTML and CSS. I mean, it's possible, of course, but it's just that you have to do a lot of work to get that done. It's almost like you have to understand Flexbox. You have to understand absolute positioning. You have to understand, I mean, there are at least three ways that I know of how to get this done, and none of them are elegant. I have to always look at Stack Overflow, or I always have to look at something to figure out, OK, I have to do these things in the ordered way, and float this off first, and float this off here, and then do stuff, and absolute position of the thing below, and it's like crazy. Now let's do the same thing in Elm, and I'll show you how this is. Now, remember I talked about the fact that Elm likes signals, right? So you have signals, and then you respond to them. So let's start doing something similar, simple, actually. So I'm going to import mouse, which gives us all these things. And I'm going to say, so I'm also going to get signal. Now as I move the mouse around, it will show me my current Windows position. Now the beauty of this is I didn't have to write a on mouse move, and I didn't have to give a call back, and I didn't have to do all those things, which is awesome actually. The way this works is because the main now has a type of signal of element. Now it basically says that, hey, you have the signal of changing mouse positions, because of this function actually gives you a signal of changing elements. And then you work on the signal, and you manage all the callbacks yourself. Don't bother me about it. But just do what I tell you to do, right? And this is really powerful actually. Now we're going to do this. Instead of mouse, we're going to use window, and you can get window to dimensions. I'm sorry? Yeah, we'll come to fold P and things like that later. So you can fold over past that's there actually. So just for the fun of it, I'm going to change the, so if you see here, if I change this, window size, these values change actually. So it actually reacts on the window dimensions. So we're going to leverage this fact, and then we're going to do that, right? So what I'm going to do is, I'm going to say drawLayout. So I'm going to, let me go to fullscreen. So I'm going to say, so I'm going to write this function drawLayout. Now drawLayout basically gets whatever is the dimension as the argument, right? And dimensions is a tuple actually. So it has an x and y value. It's a coordinate ordered pair. So since it's an ordered pair, I can actually do x, y here. And I can, or rather width and height, right? So width and height here. And this is called dereferencing actually. So you have, you can dereference into deep structures by saying that, OK, these are the variables I'm interested in, actually. And then you can say, hey, so let me get a container. The width and height of the container is this. I want everything to be in the middle, actually, of this container. And I'm going to, say, have a simple kind of text here, which is going to say, OK, this is a mouthful, but let me quickly try to break it down so that it fits into one line, fits into this viewport. So what I'm doing is, so I have this function width and height. I'm basically starting from text or from string. So hello, this basically gets a text object. And I'm going to say that, hey, print it in a left aligned fashion in the middle of the container of height, width, and this thing. So if I do this vertically aligned and center aligned, I mean, that's magic in CSS, right? Yes, to do this. This is done, right? So let's do this thing. Now let's have some fun, OK? So I'm going to do something. So I'm going to say, let top box is actually going to be top box height. So it's both top and bottom. So header and footer have the same height. So let's say about 20 pixels, actually. And then I'm going to say, let the sidebar height, so sidebar width equals 20. And then, so if you have to calculate the width of the main section, it's actually, so main section height is actually then 20, yeah. So it's height minus 20 star 2, basically. And main section width, I should probably say main width, I mean, just save some screen real estate. So the main width is going to be w minus, in fact, I shouldn't use 20, so I'll use. So I have these. Now I know that this is going to be main width and main height. And this is going to be the main content. I know it gets, I mean, this actually will fit less than 80 characters, but because the font size is pretty small, it doesn't do that. But let me continue doing this, right? So you have the main box and main content defined, right? Now let's try doing the, so in fact, let me actually do the whole width for now, and then we'll get to this. So now I'm going to say the color for this guy is going to be, so what this is going to do is, oops, I'm looking for these things, white space. Why are you looking for it? Oh, I didn't say in, actually, OK, let me do that. Let me just return the main content for now. Color is not font, so let me get color, right? So it actually creates this sort of thing, and it has this 40 pixel thing in the bottom. But actually, we need 20, 20, right? So let me actually do this to 40, and you would see that this increases. I'm sorry? So no, it actually always, it's not last event, right? So you're saying that I want to return main content, but what does main content do? Whatever is declared in the net block. So it's not an imperative thing. It actually does this variable mashing, and then figures out how to actually do this. So let's also do a box, actually. So the box is going to be container of, width is going to be the whole width, and height is going to be vbox height, assuming that this wants to do middle, whatever. And let me just give element here, and so this is going to be show, hello, a show top. And we'll call it the bottom box. Now I can say flow. Let me also give these colors, actually. So let me say color blue, and for this I'll say color, color.green, right? So now this is given as this whole layout, where the center one is vertically aligned. Sorry, red is probably a bad color. Maybe we'll do orange. Yeah, this is supposed to be orange, by the way. So now if you look at the, so the thing is that now, since it works on signals, as I resize my browser, if you see this, the hello actually, the other two things maintain their height, and the center one basically re-adjusts it. This is amazing, I mean, this is way more code that you would have to do in normal CSS of this thing. And you can do the same thing for, I'm not using absolute positioning. Well, it's a little more nuanced than absolute positioning. So if you have thought about grid bag layouts or things like that, I mean, if you look at layouting in general, this is very powerful in terms of layouting, because you just set flow down and just give these three, these three elements. So you could actually do flow right and also do this thing, so you can give different flow directions. So if you want an overlay, you can say a layer, a list of elements, and it will overlay them on top of each other, actually. So this makes it very, very intuitive to actually design UIs. So most designers actually think of them as flowing down, as think of like, OK, it's an increaseable width or responsive width and so on and so forth. So now it makes it really simple to build these kind of apps, especially with this sort of a layout with L, actually. So let me also finish the side bar. So left box is going to be the same. So let me do this. So this is going to be, oops. So you can see how this nicely composes. And these are just functions that you have to deal with. You can actually take them into different places. So let's do this. So let's keep this in, does anybody have any favorite colors here? I'm running out of colors. All I know is like red, green, blue, and orange. Yellow, OK, thank you. So this is going to be, the width is going to be like side box width, side bar width. I should probably have given this smaller names, actually. So let me also do right. And I'm going to give this purple, maybe. This means the container that we have here is going to be, and this is not going to be V box height. It's going to be main content height, right? Because you don't want this to just be 20 pixels. So this is going to be main width and main height. So you could say, and you can replace main box here. What is it? Oh yeah, let me call it main box. Main width is not formed. I deleted the width is width minus side bar width by 2. So you can basically see that. So I'm going to increase this to say. So you basically have this whole sort of expanding thing, which is kind of hard in other languages, but it's trivially simple in this thing. So I mean, of course, I've written everything in one function, but you can also have it written in other functions and so on and so forth. So this is one thing that I wanted to show. Let's see how we're doing on time. We have a lot of time. So I'm going to show you the next thing, actually. So how many were you in the, did you see about the famous demo on the first day? OK, couple of you. How many of you know about famous? OK, famous is a JavaScript library which lets you do graphic intensive, that sort of thing. And it has this thing called the Mixed Mode Rendering, where it basically decides itself, whether it has to do CSS3D transforms, or if it has to do Canvas, or things like that. And it will automatically do it. So you just have to draw vectors, or you have to deal with a drawing text, or boxes, or whatever. And I mean, famous will take care of all that for you. So we're going to do something similar with Elm, actually. So here, all I'm going to do is I'm just going to draw a blue pill, right? I mean, we call it a blue pill, because it's a blue dot, actually. So I'm using this library called graphics.collage. So we were using graphics.element earlier. So this supports something called as graphics.collage. And I'm basically creating a collage of 300 by 300 pixels. And I'm going to put a circle with 10 pixels in here. Now if you notice it, if you, so let me do an, I'm sorry? Yeah, collage creates a box of the dimension, and it basically accepts a list of forms, actually. So if you look at it, I created a circle, and I say filled color is blue, actually. And if you notice, it's around 150 pixels, 150 pixels here. That is because when you create a collage, it creates this really nice coordinate system where the center is literally at 0, 0, right? So which is very nice. I mean, it's like your 600 graph papers, actually, that you could do where the center is at 0, 0, and you can start plotting and moving things, actually. Which is very nice. So let's work with this a little bit and see what we can do about it, right? So I'm going to do the same thing. I'm going to get a mouse. So what I'm trying to do is I'm going to animate this blue dot as I move my mouse. Let's see how that can turn, right? So I'm going to also do import window.dim, window, and I'm going to work on window dimensions, okay? So let me get rid of this for the moment. I'm going to say signal.map, drawpill, and I'm going to work on two things, actually. So I'm going to look at mouse position, as well as window dimensions, okay? So that means that I'm mapping over two signals now, actually, okay? So I'm going to say drawpill, and this is going to get the x and y, because that's a mouse position. And then I'm also going to get width and height for the window dimensions. So now let's see what we can do. Let's have fun and start, right? So now, obviously we need a blue pill. So I'm going to have a let block to define it. In fact, just to save some space, I'm going to do this. Circle off. So initially what we'll do is we'll make it so that the radius of the circle is the x coordinate. So if we are all the way in the left, we'll actually make the circle small as we go to the right, we'll make the circle big, okay? So let's have this, and we'll say this is going to be filled with color.blue, because I like blue, and that's about it. So when you use this arrow, I failed to explain it. So this is the same as saying, so filled actually takes two arguments, filled takes a color, and I'm sorry, filled takes a color and then circle off. So let me just do, so I'll say in collage wh of let me see if this works. Type mismatch has unexpected type most.position. So okay, so the thing is that when you have this, this expects a float, but you got an int, so do this. So now if you see, I get to do this, right? So as I move my mouse, it kind of animates very smoothly. Now the reason I wanted to show you this was filled actually takes the second argument of this, but usually you're chaining this whole thing. You want to do a lot more transformations. So in order to save all these brackets, you generally do circle of x. And then you pass it in to filled color. Now the filled blue color actually gets a function which takes in a form and gives back a shape. I mean, sorry, takes in a shape and gives back a form, right? So instead of, I mean, so this is the beauty of Haskell and other languages is that when you don't pass in all the arguments, if you pass in only a few, I mean, a partially a list of arguments. It's not a syntax error. It'll simply return a function that will expect the other list of arguments, actually, which is very nice. That's what we are exploiting here, actually. Makes the syntax much nicer. Yes, there is a backward symbol which also works in the other direction. So you could also do that. All right, anyway, so we have the collage that's written and this would still work. Oops, no, sorry. I forgot the two-float. In fact, you could also do this, it'll be an overkill. You could do two-float of x and then pass it in and then, yeah, that would still work, right? So essentially, so that's the idea. Now that we have this, we wanna actually move it around to do this. Now if you notice this, I wanna make sure that when it's in the center, it's actually small and it goes back both ways, right? So let's do the transformation. Because here, for the most position, zero, zero is here. But for the collage, the zero, zero is here. So we have to do a little bit of transformation to do this. So let's do that first. So I'm gonna say, let corrected x, I'm just gonna call cx because I don't have space for corrected. This is going to be whatever x is minus w by two. Does it sound right? So whatever x coordinate is, you wanna subtract half of it. So of course, this is going to, we might as well turn it to floats here. So let's do that here. Because w by two, you can't do an integer, division of an integer when it expects a float. So you have to make sure that this is converted to a float and so this works. Similarly, let's do it for y. So y is a little bit more tricky because y, zero, y is still zero, actually, right? When it comes here, that's when we need to do. So y is going to be, it's gonna be h minus y by two. I think that's about right. Or h by two minus y. H by two minus y, right? Sorry, why? No, because if it is here, I wanna show positive y by two. H by two, right? So this is going to be, as it enters here, I wanna reduce the value of this thing. So at h by two, it will actually be, if it's y is h by two, it has to be zero. So I think this will be right, actually. So this will be zero, we'll know, shortly. So, yeah, c one, thank you, okay. So I'm gonna just do a cx here, just to see how this works. Oops, two float of cx is not needed because it's already a float. And so, zero, zero, it's here, and if I move it, then it comes. So let's see if our y implementation is correct as well. So, zero, zero is here as a go big or small, then it's correct, okay? So our implementations are correct. So let's, let me do a circle, and let me do a cx here. And what I'm also going to do is, after I have filled this guy, I'm going to move him. I'm gonna move it from to cx and c1, essentially. So, this is a nice effect as we move, it becomes bigger. I'm sorry, move only has to take one xy coordinate, right? Why should it take two? Yeah, it's a destination of where it has to move. So it's not an animation if you think about it. So all it is doing is, I'm asking it to render the circle wherever my most position is, or my corrected most position is going to be. I'm also utilizing the fact that I'm changing the, yeah, this thing. So it gives this nice thing. I mean, you can keep playing around with this forever. So, yeah, it's kind of nice, actually, right? So you could see how it's really simple to actually work on these kind of things and then move on and so on and so forth. So, but of course, I mean, we are all web programmers. We get paid to do some serious stuff, like login forms, right? So yeah, anyway, so let's do that, actually. Now, let's do a login form in L, right? Now, so we saw two things. First was the graphics.element, where it said that, hey, you don't have to worry about CSS. I will do the CSS for you, you do whatever. But then, I mean, there are some people who like CSS who want to do that and you want to do virtual DOM and things like that and all that. So, Elm has the fastest implementation of a virtual DOM-based rendering system. So they use the direct virtual DOM library on that basis. And then they actually have, I mean, and all the data types here are immutable. I forgot to mention that. So let me go back just a couple of slides where we did this hello world thing here. So if I have to change the value of this thing. So if I have to have another function, so it's just a brief suggestion. So if I have to say update person and I get a person and a name, I can update the person by saying, okay, and I can show the update. It can run it on the console, but okay. Well, there has been some effort to try to do that, but Elm makes a bunch of assumptions about, I mean, continuous signals and being a synchronous and things of that nature. So it's, I mean, so far I've tried to make it work on an NPM console for trying to do unit tests on Elm and I have not been successful, actually. So there is talk in the mailing list community about moving it to this thing. But yeah, let me get to this a little, I did some syntax error here. This is working fine, right? So I update the name of this guy, actually. Now when I say update, actually, if you say I get a person object and I replace the name with a new name, right? But what this essentially means is that it is actually giving you a new copy of this person, the signature of this function would be update name. It takes in a person and a string and it actually gives back a person. So that is the signature of this function, right? Now, the reason it works is because it is actually going to create a new copy of name and send it back to you. So that way, it's immutable and you can, I mean, the virtual DOM things and all work beautifully well with immutable structures. So if you are interested in how it works with React, cast me up later and then I can show you some really good code bases that we have around it. Anyway, that's a brief suggestion. So I wanted to do that because some of the code that we're going to look at now actually depends on immutable data structures for us to work. So let me run this piece of code. So what this does is, I mean, it's basically a form where you type in a name and then when you do this, your passwords don't match. And then if you finally have it match, then it says that passwords match, okay? That's how it works. Now, let's look at how that works. Now, Elm has this thing called the startup library, okay? Now, remember, I told you that generally the way in which Elm applications and even my React applications are nowadays architected is that I have a big state model that I have, which represents the entire state of the application, actually. And then I have a bunch of functions that actually make me go from one model to the whole model. So I don't replace parts of it. So I'm actually giving back a new copy of the model representing the new application state. And then I use the view to render whatever is there in the model, okay? So it's a very linear flow. So any time update happens, it updates the model or when I say updates the model, it actually creates a new copy of the model and view always renders the new copy of the model, actually. So that's how it works. Now, startup basically says that, hey, you know what? I know you're gonna build your application that way. So I'm going to require an application that has this. So if you notice here, I'm not using signal.map. I'm not doing any of that stuff here, actually. So the startup basically returns a signal of HTML, actually, which actually works. So it does all this thing internally, right? So you need to know what the model is. So here, obviously, the model has these three types, names, password and password again. And then it starts off with an empty model, actually. And it says these three strings, actually. Now, you could also do name equals empty and password equals empty and password again equals empty and so on and so forth. But this is much quicker and a better way of doing this, actually, right? And then you have an update. Now, how many of you have worked with a language which has enums in it, right? So some language is a enum, and that's a very interesting thing. Because now you can say it's either this or this or this. Now, think of the type here. This is called an abstract data type, ADTs and Haskell, actually. Now, the action could be a name which has a string. It could be a password which has a string, or password again which has a string. All of which map onto the same type action, actually. Oops, am I out of time? I'm sorry, L is so much fun. Let me be brief and get back to it. So now what this does is that the view basically has this whole thing which it does, actually, which it renders and so on and so forth. And then an update has to happen. For example, all these fields basically have an on input of target value, right? And then they say signal.message to an address. And the address is a general thing that is given by startup. So it basically posts a message there. And then it evaluates something and then it gets that stuff. Now, because of this, when these things work, so you have this function which basically says, hey, what the value is going to be by looking at the validation message. So it looks at the password, it's equal to password again. If the password is equal to password again, then it puts in green that this thing is there. If not, it says passwords don't match, actually. So that's pretty simple, straightforward sort of thing. So I was planning to implement a reset button and do the reset and update and so on and so forth. If you want me to continue, I can. But in the interest of time, I can take it up later. You can hit me up. Whoever is interested, I can walk you to the rest of the Elm code base and show you some of the things that I have built with Elm. For now, I would like to open for some questions and we can go from there. So as I type in here, okay? So when I do this. So it's always passing the signal. But when I do an on update, it actually passes a message on to the address bar, actually. Sends a message to the address. Now the address is being passed in via the view. So we said in startup view is this address, right? So it knows where those actions need to go to. So it will actually send the message to the address, which the view will get after it processes the signal. Because it will run it through the update, actually. In update, whenever you have password of password, it basically updates the internal model, actually. And so the view will then get the new internal model. It will evaluate whether the password match or passwords don't match, and render the appropriate thing here. So if I do ASTF and ASTF, then it works. Yeah, that's the point. So if you remember, Elm has static signal graphs. It always gets a signal. So it gets an empty model first. And then as the model changes, it keeps getting the new model every time. There's no point where an event has to be raised for it to get the model. It'll always get it. There are no events. No, that's not required. So there are no listeners. You don't have to register for anything, actually. So that way you don't have to clean up for other things. That way there are no memory leaks. So you have these on events. So even here, you still have this on event. So let me go to those here. So on key change here, there's still an event which happens. It says onInput, right? So it uses a HTML5 input event. And it says that you get this new target value, which is a string, actually, and then send it to this address. So you will get the string value here. And then it converts it to two action and then does that. The two action is a curry trick. So whoever is interested in knowing how this, I mean if you look at the type of two action, it's string to action, actually. But it uses a very sneaky trick to do it. But if you hit me up later, I'll show you how exactly this type gets resolved, actually. So yeah, it's a string to enum converter only because all the actions actually have string in it, if you notice here. Otherwise, this won't work. So they just use that as a leverage because I was wondering, what is string to enum and two action? It uses a curry trick because all the ADTs are basically functions themselves. So each name and password and password again are also functions. And they take whatever value it is to come out of that. And it'll actually return back an action. So they have a type on that as well, which will be pretty exciting and interesting. So anyway, so that's about Elm. So you can find the slides. So it's on GitHub. And we are hiring at the collapse. It's a small plug that I have to. So we are hiring good engineers, regardless of whether you do front end or not. So for interested, hit me up. Thanks. Large projects created with Elm. So let me show you something that we did. So it's not very large. But so this is something that we did for our client. So let me see. So we are a distributed team. There's one guy in Bangalore. We have three guys in Chennai, one guy is in Poland. So most of us work from home. If required, we meet up. So a very different sort of work environment. And incredibly fun. I mean, whenever we are at office, we are usually around the TT table and things like that. Usually that's the excuse for going to office. So this is a project that I did in Elm. So basically the visualization is meant to see what would be the case if someone were to visualize the Facebook timeline in a 3D sort of view, actually. And you see the dates actually change. And you can move this thing around. And when you hover over something, you can see that which video gets selected, actually. So as I select this, you see the white confetti dot getting updated below. You can show more or less. You can switch to a 2D view instead of a 3D view. And so on and so forth. So it took me about a week and a half to build this. It was meant to be a prototype of sorts. But I think it's a representative of a fairly complex Elm code base. And it works pretty well. So right now it uses the Reddit API feed to get stuff. Since I didn't want to do the backend stuff and Facebook art and things like that, I just assumed that whatever videos you get from Reddit feed is going to be your timeline videos. You can catch me up outside. So I'll be.