What the Elm, Mate?

All right, so, first of all, the name of this talk was completely coincidental with yours. I promise I like puns, what they all mean, you know? So, yeah, awesome talk by the way, all right. So who's David K is? So when you're here, I'm a web developer in Orlando, I sort of work in Orlando, sort of work in San Francisco. I was born in Nelman Park, Illinois. But this has nothing to do with Elm, it's two different things anyway, so what isn't Elm? How many of you have actually heard about before? All right, you sort of know what it is, so most of you have no idea what it is. You might think like, is it a new framework? Is it like the glue that holds your application together? Is it this guy? is this guy's friends? Is it JavaScript? No, it's not JavaScript, it's sort of like JavaScript, but better, and you're going to see why.

So what the hell this is all about? L is a functional programming language with static type checking, so that means that, with JavaScript. You have things like flow and TypeScript. That tell you, oh, hey, you're probably using an integer, you're probably using a string, so I'm going to infer what the correct value is going to be based on those types. But this one actually has static type checking that's compiled to JavaScript. So I sort of lied when I said, it isn't JavaScript, but at first, it's not JavaScript. So it's also a functional, reactive programming runtime, which means, you get a bunch of signals over time. So, I mean, those are big, huge words. But also it uses, just like Randy talked about, the virtual DOM, to efficiently update the DOM. Similar to React, so the performance benefits you get in using reactor review model also apply to them.

So here's the ELM program. There are too many words on here. This is the architecture that's all about, so I sort of simplified it. We have a person on the computer doing actions, and so this might ring a bell from the previous talk. And those actions cause an update on some sort of model. And just like Redux, there's only one model, only one store, and so that updates the view and that goes back to. The angry user. So L is based on three things first, it's purely functional, it's a pure functional programming language. Second of all, it's data types like I talked about, and it's beginner friendly. That doesn't mean it's simple. It just looks like it's easy to pick up. But there's still a lot of functional stuff that you have to wrap your head around. So pure, functional. What I mean by that is, everything is a function, even pure values, like just a single value, like a string or a number.

Think of that as a function that takes no arguments and just returns that value all the time, so everything's a function. Like in JavaScript, if you have an ad functional crap, I'm running outside, all right. So here's an example of how you would write a function in L. So you might be asking, where is the parentheses? Where's the commas? You don't need that because it's it goes right after the function name. So this one, you could take a look at it and you could be like, yeah, I have a pretty good idea of what's going on. It's taking two numbers, A and B, and it's adding them together, so also it's statically typed in JavaScript. We could do stuff like adding 42 to crap and we're going to get like a string. It sort of mixes the number and that, but Elm, Elm sort of yells at you, and by sort of yelling at you.

I mean that it produces a really, really, really nice looking error message. So you actually feel good about being a crappy programmer because it lays it on you nicely.

Play from 0:00

It seems like AD is probably expecting a number, but you're an idiot when you're gaining a stream, so you should probably do that. So it sort of holds your hand. It's pretty nice. So, it's also statically tight, and yeah, there's also union types, which are pretty cool, it's also very, very beginner friendly. So while I have like 30 seconds for me, we're going to do live demos, actually, we're new live ones that someone else made. So over here, if you go on the Ellen website elm dashlane..org, you're going to see a whole bunch of really cool examples. So I like this one, let's do this one. So yeah, you see that the. Image is reacting to where my mouse is, so it's growing, it's shrinking, and you can sort of see that over here. You really can't see that. But basically, since where my mouse is a signal, it's telling L update and yeah, check it out.

I. I played around with it, though it's pretty fun, it's it doesn't take long to learn HTML, so sort of the same way reacts does virtual DOM, where you know it looks like HTML, but it's not really.

Play from 4:00

L does the same thing. And remember, everything in L is a function, so if you have a Div, that's a function that takes in. Like, its children, its attributes and everything, and it returns, you guessed it, in HTML elements. Hopefully that answered your question, anyone else? What's up? Do you still build things in terms of components, like in React? Yes, you do so, just like React, everything's a function, though, so if you have a component, that's actually a function that returns just like, just like same type of thing. So it's actually really easy to build cool applications with that. Yeah, how easy can I embed an existing application? But I just wanted to write one moment in L. Great question. So Elm, since it compiles to JavaScript, you could just tell Elm to, like, stick itself on this Div. Just like you do with React, and using something called Ports, Alan can communicate with JavaScript. So, just like what Brandon talked about with, with Redux, where you dispatch something and that dispatch causes the story to change, and then you get back a new state.

You do the same thing with Elm, except you're dispatching to some sort of magical Elm world, and magically it brings you back in your valley. So those are called ports.

Play from 6:00