When are we gonna pair our program? 0:00 Well, this right here. 0:00 So one way to show people a language is to like put up a 100 slides and, you know, 0:02 be like oh, here are the interesting features of ClojureScript, and 0:07 why you might wanna use it. 0:09 Or you could write a real program, and show people how it works, and do it live, 0:10 which is my preferred way of doing things. 0:14 So, we are going to be coding part of flappy bird today. 0:15 Everybody know flappy bird? 0:18 You're familiar with this, right? 0:19 If you don't, it's a very simple game. 0:21 You'll get the gist of it. 0:22 So unfortunately it's only, I only have 45 minutes so, 0:24 I'm not gonna be able to code, we're not gonna be able to code, 0:27 we're not gonna be able to pair a program, all of flappy bird. 0:29 But, we can write the interesting parts. 0:32 So, what I've done, is I wrote the boring parts already. 0:35 Those parts are hidden away and cool. 0:37 And we're just gonna write the interesting parts. 0:40 So, I'll show what this is. 0:42 So, very quick overview. 0:43 What is ClojureScript? 0:44 ClojureScript is a language that compiles into JavaScript. 0:45 What is the best part about ClojureScript? 0:48 You don't have to write JavaScript anymore. 0:49 You can use a programming language, that writes JavaScript. 0:52 I know this is like I've come into the lion's den, and 0:54 told the lion like, you lion, don't worry you don't have to be a lion anymore. 0:56 You can stop being a cat. 0:59 But I think it's an awesome language. 1:01 I think you should, I'm, I'm glad to see there are people here. 1:04 I hope you have an open mind. 1:06 There are some really interesting things in ClojureScript. 1:08 And we're gonna try to bump into them organically. 1:09 Now let me show you one cool thing that's gonna happen right away. 1:11 Take a look at the label over here, the Start, underneath Flappy. 1:15 I'm going to change this to Art, which is appropriate. 1:18 And all I did was save that file. 1:21 And notice the browser, this is the browser over here, it's a Chrome, updates. 1:23 We can change it to tart, and we get that, or just start. 1:26 So, I had this really interesting thing going, which is called live reloading. 1:30 So, I have a plugin for 1:33 ClojureScript called Figwheel, which is kind of an awesome library name. 1:34 And figwheel is basically, setup a web socket connection from the browser, 1:38 to our code, and every time I save one of these CloJureScript files. 1:42 They get recompiled, cuz it is compiled into JavaScript, 1:46 on the fly, and then the browser goes oh, hey I noticed, or I guess [INAUDIBLE] hey 1:48 I noticed you changed that file, hey browser, here's some new code. 1:51 Reload that live. 1:54 And because of some of the properties of ClojureScript, 1:55 it's actually quite easy to write code that is reloadable on the fly. 1:57 And so you'll see me do some more things like that are reloading like this. 2:00 So, let's actually start our game. 2:04 And just see how how much we've got so far. 2:06 So, there have been better games. 2:09 So far collision detection, not 100% quite yet. 2:12 So basically Flappy moves to the right. 2:17 And the parts we're gonna write are jumping. 2:20 Like I can't jump right now, if I click, Flappy does nothing, 2:21 I think it's an interesting thing oh, okay, just like scrolled off. 2:24 So, if I can't jump I don't, there's no gravity, 2:26 I'm not doing any collision detection with the, the pipes, the pillars. 2:30 But we're gonna write those things, but one thing I wanna show, while I'm here, 2:34 just to show that this is pretty actually really live, 2:37 I am gonna change the horizontal velocity, and save this file, ready? 2:40 Save. [SOUND] The game just got a lot harder, 2:43 so, let all those var, I have a bunch of of sort of constants here that 2:46 determine where Flappy starts, and how tall Flappy is, and 2:49 how far apart the pillars should be, and blah, blah blah and all of those 2:52 things are in fact, I can update any of these live, and you might see me do this. 2:56 For instance, to make the game a little bit easier. 3:00 When I add collision detection, I'm pretty bad at Flappy Bird, actually. 3:01 And so, I'll like take the pillars and sort of stretch them apart. 3:04 I know you can do that without reloading, which I think is really, really cool. 3:07 But let's start writing our very first function. 3:10 And that'll start bumping into real ClojureScript functionality. 3:12 So, let's make Flappy jump. 3:15 So, in real Flappy Bird, every time you click, or I guess, 3:18 tap on your screen, it's a mobile thing Flappy's supposed to, you know, 3:21 sort of have a vertical velocity, and then sort of sink back down to the ground. 3:24 Kinda [UNKNOWN] by gravity. 3:27 So, let's right now, the rough model of this program is a very typical functional 3:29 set up, which is there's a bunch of data, at almost sort of a global level. 3:36 So, it's a big map. 3:41 It's like a hash. 3:42 There's a big map that has all of the variables of the program. 3:43 And this map is constantly being updated, basically every eight milliseconds. 3:47 And then we take all the data in that map, and we pass into a render function, and 3:50 the render function paints the game, using just that data, that, all that, 3:53 all that, everything that we need is in that map. 3:57 So this map, works its way through a series of functions, that update it. 3:59 And each function has a small responsibility for updating things. 4:04 So the very first thing we wanna write, is the map function. 4:07 So, basically all the functions that we're gonna write today, 4:10 take the entire state of the world, and then return a new copy, 4:14 of the state of the world, having affected it in some way, or not. 4:16 [BLANK_AUDIO] 4:20 So, let's write jump. 4:22 So, jump is really easy. 4:23 Now, one weird thing. 4:25 Fir, first thing to look at here. 4:26 I've defined, this is a partly how you define a function. 4:28 So, I define jump right here. 4:30 And I've said, right now, jump is just the identity function. 4:32 Identity is a function that takes whatever you give it, and returns it to you. 4:35 And I want this because, 4:39 there are other functions in this code calling jump already, and 4:40 they give jump a state, and they want back a state that's been effected potentially, 4:43 and so, identity just takes that state, and returns it wholesale. 4:46 That's a get, here's the state, nothing's happened. 4:49 So, this basically just keeps my code from blowing up, every time I click, 4:51 cuz when I click, it's actually calling jump, but 4:54 nothing happens because we just have the identity function. 4:56 So, let's rewrite jump. 4:59 Here is how you write a functioning in Clojure. 5:01 It looks basically like this. 5:03 And I'll write it in pieces and explain what I'm doing. 5:04 So, defn, defn says, I'm going to define a function now. 5:07 The function's name is jump. 5:10 Notice something weird is happening, we have prefixed notation, so 5:11 in ClojureScripts, the very first thing you type in a set of parens, 5:14 is the function name, and then the remainder things are an argument. 5:18 So, we have defn, which is a call to say create a function. 5:21 The function's name is jump, and this is an [UNKNOWN]. 5:23 You can say state, you can say world, you can say foo. 5:26 Those would all be parameters to this function. 5:29 So, I'm jump is fine here. 5:32 I'm gonna redefine it below. 5:34 If that'll work fine. 5:35 We'll just leave this identity thing here for a moment. 5:36 so, we'll say, jump takes a state. 5:39 And what does it do? 5:42 Well, it's actually pretty easy. 5:42 All we need to do is add in a couple values to this current state of the world. 5:44 So, the way you do that enclosure is with assoc. 5:48 So let's, let's look at a ripple real quick. 5:51 So, lets' say we have here's what a map looks like in Clojure. 5:54 Like, this says, this is like a hash. 5:57 This says the val, you know, key foo goes to three. 5:58 And if I took assoc of foo goes to three, and said, I want you to associate 6:02 bar goes to four, we get back, bar goes to four, foo goes to three. 6:10 By the way, these data structures are immutable. 6:15 Now, what does that mean? 6:16 It means you never change them in place, ever. 6:18 Assoc is now taking that map, and manipulating it. 6:19 And giving you back a new one, and giving you back that same map. 6:23 It is taking it and returning a new one. 6:27 This is an interesting idea. 6:28 I think it's really powerful. 6:30 We'll get into this a little bit more. 6:31 But all this, these core data structures, the arrays, the maps, the vectors, 6:32 all these things are all immutable. 6:36 So, here's what we're gonna do. 6:38 We're gonna call assoc on state. 6:39 So, we're saying, hey, state. 6:41 I want you to set a new value, for the following keys. 6:43 So, user-has-clicked, needs to be true. 6:46 Cuz now we've clicked. 6:48 Jump is like a click. 6:49 We need to set the time of last click, because we need to know, 6:50 the game needs to know, when did the user click, because that, 6:54 that length of time that's elapsed, affects how much gravity affects Flappy. 6:57 Cuz we want Flappy to jump, and then coming crashing back down to the earth. 7:00 So, we need to record when the last click was, so 7:04 that we can make some calculations. 7:05 So, record the time of last click, and I'm gonna, 7:07 I'm gonna pull the time of last click out of state. 7:09 So, I'm gonna get from state, the current time. 7:12 It looks like this. 7:15 I'm gonna actually grab a little more real estate here. 7:18 And flappy-velocity we need to set. 7:21 So, when we actually make Flappy jump we set it with a jump-velocity. 7:24 And jump-velocity is defined up above. 7:28 It's a global. 7:30 It just says, when you do click, 7:30 how much of a vertical impulse do we give to Flappy? 7:32 So, fingers crossed, we'll save this, and click, and we'll see Flappy jump. 7:36 Hey! 7:39 Flappy jumps, and is affected by gravity now, 7:41 cuz that user has clicked true, means now Flappy is affected by gravity. 7:43 Can I get a little [SOUND] you guys excited? 7:47 [SOUND] Hey! 7:49 Thank you, so we have our first function, live coded for you. 7:52 This is custom home grown, organic code hand put together for you, right here. 7:55 This is a very sustainable conference. 8:01 This kinda thing is important to all of you, I know. 8:02 So here, so questions so far. 8:05 What do you think of this? 8:07 Are you freaked out? 8:08 Are you worried? 8:09 Are you bored? 8:09 Tell me some reactions or questions or thoughts. 8:11 Yeah. 8:13 >> Hold on, I've got a mic for you. 8:14 >> With ClojureScript, do, 8:18 do the functions, do they all have to have one parameter in and one parameter out? 8:19 Or can you have multi in and out? 8:22 >> Nope it's not like Haskell. 8:24 it, it, the functions can have as many parameters, in and out as you want. 8:26 So, you can return a collection from a, a function. 8:29 There's basically one return value, I'm pretty sure. 8:31 But you can say, 8:34 I'm gonna return you a whole map of 25 things, which actually this function does. 8:35 So when we call assoc state, and 8:39 we add these three things in there, we get back the whole state map. 8:40 And the state map is actually pretty big, and 8:43 I can show it to you really quick, actually. 8:45 So, I added a thing to print the, the state map, as the game goes on. 8:47 And you can see it down there. 8:51 Data is flowing through this thing. 8:55 And we're, we're, we're re, basically reprinting this every eight milliseconds. 8:56 You can see the time delta is going up, meaning it's been long since the, the, 8:59 the game time started. 9:02 The current time is incrementing. 9:03 Our exposition is incrementing. 9:05 Things like that. 9:07 Things are changing. 9:08 But we're, we're constantly returning this map through our function pipeline. 9:09 So, you can of this like basically a pipeline of 9:12 functions that update what's going in the world. 9:13 And then we take the very final map of state, and we call, say, hey render. 9:15 Render this whole thing. 9:20 And we get what's in, in the browser. 9:21 Good question. 9:22 Other questions. 9:24 >> How ugly is the JavaScript that the compiler spits out? 9:28 >> How ugly is it? 9:32 It's not bad. 9:33 It's actually pretty reasonable. 9:34 so, there are several modes for compilation. 9:35 So, in development mode it uses reasonable symbol names. 9:38 Like reasonable variable names, reasonable function. 9:41 Keep, like maintains the function names, thing like that. 9:42 So, the code I actually the output of JavaScript is actually fairly readable. 9:44 I find my self not needing to go to it very often, 9:47 because ClojureScript actually has source maps. 9:49 So, let's actually break our function real quick. 9:52 And instead of assoc [INAUDIBLE] all this, well we'll do that, but 9:55 then we will throw. 9:59 nope, and let's see, now when I jump, let's see if that's actually through. 10:01 Put that through, let's get rid of this. 10:11 It's not assoc that. 10:19 Instead let's throw here. 10:21 Let's, save. 10:23 [SOUND] Are we actually throwing? 10:28 [SOUND] Did I filter on my console. 10:37 I don't think I am. 10:39 Well, that's you can kinda see it here. 10:44 So, it's not jumping to the line with the, 10:46 you may be right about that but you can see barely probably. 10:47 That these right here [UNKNOWN] dot cljs, 10:53 like I'm actually getting real source in the browser. 10:55 So, when things blow up, it blows up on the actual line of the ClojureScript, 10:58 not on the line of the JavaScript. 11:01 Which is like a super nice thing, like really good free debugging. 11:03 And you can do, like, 11:06 normal things like moving through thing, moving the code, and all that. 11:06 Yeah, great question. 11:09 >> Anyone else? 11:10 >> Yeah. 11:13 >> Yeah, could you show the. 11:15 >> Hold please- >> I'll, I'll repeat the question. 11:16 >> The rule is waiting for the microphone. 11:17 Sorry, rules are rules. 11:18 >> Cramping my style. 11:20 [SOUND]. [BLANK_AUDIO] 11:20 >> So, because ClojureScript is doing things is working with immutable data 11:24 structures, and JavaScript inherently doesn't support that. 11:28 >> Yep. >> Does that mean that if you look at 11:31 the profiler tab, you see a lot of member usage, or does their shortcut tricks for. 11:33 >> That is such a good question, and that, that so, yeah we have these immutable data 11:38 structures, which me, and I'm constantly returning this new state map, right? 11:41 And so, I must be like building up these tons and tons of intermediate things. 11:44 And it's kind of true and kind of not. 11:47 So, Clojure uses a really smart technique called structural sharing. 11:49 So, if I have a vector of a million elements, and 11:53 I change one of the very ends, or one of the mil, any, 11:55 any one of at random, rather than copying those million elements, elements and 11:57 having one changed, it insteads holds those elements in a tree, effectively. 12:01 And will chop off one branch of the tree, replace that one thing, and 12:06 point to the rest, to the the original. 12:09 Does that make sense? 12:10 So, like- 12:11 >> [INAUDIBLE]. >> Exactly the tree grows. 12:13 And so like, this grows at like log 32 of something, of like, of the size of the, 12:15 the things in there. 12:19 Like it has a very, very high branching factor. 12:20 So you get a lot of reuse. 12:22 And it actually turns out to be like, 12:23 really quite efficient, in terms of speed and memory use. 12:24 That was one of the big problems you have to solve right away when you start doing 12:26 mutable data structures, is how do we sufficiently share the old stuff? 12:29 But since the old stuff can never change, 12:32 you can safely point to it in the new data structures. 12:34 Yeah, it's a really good, that's a good intuition, a good, 12:37 good thing to ask, ask about. 12:39 And solved, I think, pretty nicely. 12:41 And the, this implementation has been copied like Closure's implementation of, 12:42 I think, like hash map tries or something, or trie mapped hashes or some crazy thing. 12:45 Has been like, they're pulling that into Scala. 12:49 And like, this, so this, this was sorta like almost a research problem for 12:51 a little while, and there wasn't a really good implementation. 12:54 And now, this is being like, sort of spreading through the world. 12:56 Yeah. 13:00 Got more. 13:01 [BLANK_AUDIO] 13:02 >> It's working, Ben. 13:05 >> It is working, right? 13:06 Also note that it hasn't blown up either. 13:08 [LAUGH]. 13:11 >> It looks pretty ClosureScript looks pretty Lispy. 13:12 >> Mm-hm. 13:15 >> Is that what it's based on? 13:16 >> In fact it is, yeah. 13:18 ClosureScript is a Lisp, yep. 13:19 If you use Steam if you use Closure like so, Closure and ClosureScript 13:21 are basically the same language, they just compile the different targets. 13:25 Closure compiles to JVM, ClosureScript compiles to JavaScript. 13:28 And yeah, if you've used Steam or Common Lisp, it's a very, very similar language. 13:32 Yep. >> Are you using, 13:36 are you using something Closure specific for your view layer here? 13:38 Or- 13:41 >> yeah. Good question. 13:42 I love this. 13:43 let's, let's open this bit. 13:45 So, this is something called Sablono. 13:49 So, this is how you draw things in Sablono. 13:53 For instance, this is how you draw a pillar. 13:54 So you pass it some variables that it needs. 13:56 And then we make a div, and then we make another div, with some style, and 13:58 some height. 14:02 Here is the full, this is the full thing basically, that, that is [UNKNOWN] Flappy. 14:03 So, we have a div, with a class of board, on mouse down we bind to this thing. 14:08 So, capture the clicks. 14:12 There's our score. 14:13 A little bit of conditional here, and, here's a nice thing about this, 14:15 it's like, notice we can use like we can use Lisp sort of, 14:19 we can use this language right in our template, much like other things, but 14:21 we have a div and we wanna map pillar on pillars. 14:24 So, we're actually mapping this function up here, for 14:27 every pillar in our collection to, to sort of render each of those. 14:29 [BLANK_AUDIO] 14:32 Yep. 14:34 Other questions? These are great questions. 14:36 You guys are killing it. 14:39 [BLANK_AUDIO] 14:40 All right let's write more ClosureScript. 14:43 So, that was a pretty easy one. 14:45 Let's write something a little bit more complicated. 14:46 Let's go back to where we were. 14:48 Let's make sure jump still works. 14:49 Yeah, it does. 14:51 And then we crash the bottom. 14:53 Okay. That's cool. 14:54 so, has anyone played the original Flappy Bird? 14:55 Yeah, okay. 14:59 So, in the, in real Flappy Bird, when you start, 15:00 Flappy is oscillating, gently, on a sine curve, until you start tapping. 15:02 It's just like, sort of a, a nicety of the game. 15:09 So, let's actually implement that right now. 15:10 So, let's get rid of let's define this below a sine-wave identity. 15:12 So, we're gonna write a function called sine-wave that again, takes a state. 15:16 This is gonna be what all our, our functions do. 15:19 Oh, actually no, there's one more thing. 15:20 I wanna come back here and refactor this. 15:22 So here here we are associating, we wanna pull, right here, we're 15:25 getting the value of current-time from the cur, from the state, as it's passed in. 15:28 Because we want to include that. 15:32 Or we want to set that to be time of last click. 15:34 There's actually a shortcut for this. 15:35 So, this is a key word. 15:37 It's like a, a symbol in Ruby. 15:38 It's an immutable thing. 15:40 It's like a little label, basically. 15:42 But these are actually functions. 15:44 So, I can put this in the function position. 15:45 So, rather than using this get thing, I can call, 15:47 current-time, as a function, on state. 15:49 Is that clear? 15:52 Is that confusing? 15:54 Maybe. 15:56 So, if we have let's say, let's, let's say x is a map, with foo going to two. 15:57 We got x. 16:03 I can call, foo on x, and get back two. 16:06 Weird, right? 16:10 But kinda handy it's gonna let us refactor this a little bit, so we just got rid of 16:11 that get, and now instead, we are using, this keyword as a function. 16:14 The keywords are functions in ClosureScript, and 16:17 I think we're still good, yep. 16:20 Yep! We appear to be still working, 16:22 let's go to reload just to be safe. 16:24 no, we broke something. 16:26 Oh, because we have a sine wave in progress here. 16:26 Let's just make sure we're good. 16:29 Yeah, okay cool. 16:30 All right, so let's implement sine-wave. 16:32 So, I basically want Flappy's initial path to sort of trace this nice 16:36 gentle sine wave up and down. 16:39 And how does that work? 16:42 Well, we'll do it like this. 16:43 The first thing I wanna do, is just for. 16:44 So, we have this variable time delta, 16:48 which tells us how long it's been since we started the game. 16:50 So, we're gonna use that as our, basically like our tick, and we're gonna feed that 16:52 through a sine function, that'll sort of give us this, this oscillation. 16:55 And it's not gonna start off very pretty, but it'll get us in the right direction. 16:58 So, here's how we define local variables in ClosureScript, time-delta, on state. 17:01 So, this right here says opens a basically, opens a, a lexical scope. 17:09 And says, within this list, or 17:13 within this scope, I want time-delta to be bound, to be bound to this value. 17:15 So, what, what it, 17:19 what I'm doing right here is pulling out the time-delta from state, and storing it. 17:20 Just like time-delta equals basically. 17:24 And now, I wanna assoc. 17:27 Again, we're, this is setting the value. 17:30 In state, I want to set Flappy's y. 17:32 [BLANK_AUDIO] 17:36 Which is just a value in there, and we're gonna set it to. 17:38 Hey, look at this. 17:41 JavaScript [INAUDIBLE]. 17:42 [BLANK_AUDIO] 17:43 One sec. That's what JavaScript [INAUDIBLE] looks 17:46 like in here. 17:49 We say, this is basically saying, hey, 17:50 js Math, call the sin function, with time-delta. 17:52 Pretty painless. Didn't have to require anything. 17:56 Didn't have to do any fancy work. 17:57 Just kinda works nicely. 17:59 People in the back, is the font size okay, or would you like it bigger? 18:00 Great. okay, so 18:05 let's look at Flappy when we start. 18:06 There's Flappy. 18:09 Flappy's freakin out. 18:11 so, this is hard to tell but Flappy is in fact, tracing a sine curve. 18:15 It's just kind of like a really spastic, highly caffeinated one. 18:19 [SOUND] This is Flappy after an Aeropress session. 18:21 Okay, so let's smooth this out. 18:28 Let's make Flappy a little more reasonable. 18:32 Let's see if we can do both here, that'd be cool. 18:34 Yeah, here we go. 18:35 Okay. So, basically I want to apply a dampener. 18:36 To this value. 18:40 To the time delta, cuz the time delta actually gets pretty big. 18:41 And so we want time delta to be a lot smaller. 18:44 Whoa! 18:45 To be a lot smaller. 18:46 So, let's multiply it by [SOUND] this. 18:48 This is not a magic value at all. 18:54 Okay. 18:59 Now, you can probably just barely see that Flappy is now tracing a nice sort of 19:00 gentle sine curve but it's a pretty small one uh,so let's let's make 19:04 that sine curve [INAUDIBLE] make that buh, result a little bit bigger. 19:09 So here, we'll multiply by 30, the thing we just did. 19:12 Let's see how that works. 19:18 Okay. 19:19 Flappy is now mellow, coming down off the caffeine high. 19:20 Things are looking good. 19:23 But we're now, we're way too high. 19:25 This, this oscillation is supposed to take place sort of, 19:27 in the, in the middle of the screen. 19:30 So, the last thing I'm gonna do, 19:33 is add [SOUND] Flappy's starting state, which is held in start y. 19:36 To this value, and then oops, yeah, and 19:41 hey, we have a nice mellow oscillation in the middle of the screen. 19:45 If we restart, yeah, there we go. 19:50 That should look familiar if you've ever played the game before, this is 19:52 roughly what Flappy does until, you start jumping, and then you jump around. 19:56 All right. 19:59 So, we have another function written. 20:00 That's cool. 20:02 Here's the thing, though, it's sort of ugly. 20:03 Like I wouldn't fault you if you said, like, this looks gross. 20:07 And the reason it looks gross, well you could probably have several arguments as 20:11 to why you think it looks gross. 20:14 my, my position is this looks sort of gross because like 20:15 the interesting stuff is kind of working inside out. 20:18 So the first thing I do, in terms of order of operations, is actually multiply time 20:20 delta times this factor, and then I take the sin of that, and then I multiply it 20:24 by 30, and then I add the start y, and then I store it in this state map. 20:29 And so, like the actual flow of operations is kind of hidden, and you have to sort of 20:34 become a little bit of a list [UNKNOWN] yourself to figure out what's going on. 20:38 It's not totally clear, and so my position is that we can do better. 20:41 So let's do that. 20:46 So closure script has this great operator. 20:49 In fact, actually a macro. 20:52 And a macro is something that rewrites code. 20:54 So if you like metaprogramming, macros are like metaprogramming plus plus. 20:56 so, when we compile this code, there's actually a phase 20:59 where the macros in ClosureScript get a chance to manipulate code. 21:03 So it it gives it a, a thing, they say here's the, here's the original code, and 21:07 macros go, they tear it apart, and they reorder things, and they put stuff in 21:10 different places, and they say, here's the code, Now compile that, and run that. 21:13 And it lets us do some really interesting things, like, 21:17 kinda like change syntax, basically. 21:19 So here's what it can look like. 21:20 So, we still have a sine wave function, it still takes our state, but 21:22 now we're gonna use this thing called a threading operator. 21:25 A threading operator says, I want you to take a value and stick it into a series of 21:28 expressions, or a series of forms that are gonna come next. 21:31 So first we're gonna grab our time delta out of the state like we did before. 21:34 Okay, and now I want you to f, the next thing you need to do, 21:38 if you look above, is multiply that by our, 21:42 our smoothing factor, our dampener, and I'm gonna do that this way. 21:44 And this actually, will take, well, the way this works when you see this arrow, 21:50 it says, okay, evaluate this form. 21:54 We're gonna get our time delta, take the result of the value in that form, and 21:55 stick it right here. 21:59 Basically feeds it, threads it, I'm gonna move that to the top so 22:02 you can see that better, threads it into this spot for us. 22:05 So, now that I've redefined sine wave, let's see, woop, it blew it up. 22:11 Where is our error? 22:15 No protocol so, 22:23 oh right, because sine wave needs to return. 22:30 We need to take this value, so let's take this value. 22:33 We're basing, 22:36 the issue is that we're not returning the map that we promised we'd returned. 22:37 So let's assoc state flappy-y, and 22:40 this will take the time delta, multiply it by this, and then feed it right here. 22:45 So, this map, this thing, 22:51 this little weird arrow thing is called the thread [UNKNOWN]. 22:52 It threads it into the last spot of all the forms that remain in the pipeline. 22:54 So now, fingers crossed so this may work. 22:59 See. [SOUND] oop. 23:02 [LAUGH] Flappy's fell from the ceiling. 23:07 I think, yeah, okay. 23:11 So we're back to where we were before. 23:12 Where we are now actually, this is just multiplying, 23:13 we're not taking the sine yet. 23:16 But you'll see Flappy is slowly moving down, 23:18 because he's being multiplied by, this, this, dampener, again and again. 23:19 So, let's come here, and now, 23:24 the next thing we need to do is to call sine on this, right? 23:26 So sine, jsmath of the result, which we don't need to specify, we just, 23:28 it just knows it's gonna feed it in there, and now, you can see, 23:32 flappy's back to its like, gentle but small sine wave. 23:36 Now we can, the next thing we do is multiply that by 30, right? 23:40 So you multiply it by 30, now we're here. 23:43 The next thing we need to do is add, just the start and save and bam! 23:45 Pretty good, right? 23:51 So, this function that we just wrote here, is equivalent to the one above it. 23:53 These two sine-waves do the same thing, but one is inside out, effectively from 23:57 order of operations, and one perceives linearly through a series of forms. 24:03 This is one of the niceties that Lisp gives you, Lisp in general, 24:07 the half macros. 24:10 They give you the ability to sort of rework the, 24:10 the syntax when it makes sense for you. 24:12 This is sort of a limited use of, hey I can like, I can decide how to 24:15 reorder these forms and what this macro does when we call this, is it, 24:18 in fact, really rewrites it to be this. 24:21 The output of this, 24:25 of this macro is this code that then gets, gets compiled and executed. 24:26 So, thoughts? 24:31 Questions? 24:33 Emotions? 24:34 This, thumbs up. 24:36 I had a double thumbs up right there. 24:37 That was awesome. That's a good emotion. 24:38 >> [INAUDIBLE] >> Yeah, the question is, can I- 24:39 >> Rules are rules, questions go into the microphone. 24:42 >> How about, can I just, can I just repeat them? 24:44 >> No, I would much rather have them speak into the microphone. 24:45 >> Why was it? 24:47 >> If you insist. 24:48 I was just asking to make sure if you could, 24:49 yeah, delete that out since now you've, you've put in there so- 24:53 >> In fact, yes. >> And this is, 24:56 this is a dumb question, but since I have no experience in [CROSSTALK]. 24:57 >> Please ask dumb questions, I love dumb questions. 25:00 >> Do you still need the, the def as well. 25:02 I don't know the difference between def and defn [CROSSTALK]. 25:03 >> Oh, such a good question. 25:05 That's not a bad question at all. 25:06 So defn says, I'm going to, I want you to bind a function to this name right here. 25:08 So defn says I'm going to give you a name and 25:13 an ARD list and a body and I want you to associate those things. 25:15 Def just says I want you to map a name to a name, map a name to a name, 25:18 so because identity is already a function, just define, anytime someone 25:24 references sine wave, just, instead, replace it with this function. 25:28 But down here I want to say, 25:31 I want to define a function called sine wave so I need the defn. 25:33 The defn actually expands to this, def sine-wave is 25:37 a function that takes state and then blah, blah, blah. 25:42 So yeah, I could re, 25:50 we could rewrite this is, this right here, defn I believe is even a macro. 25:51 I think it just rewrites it into this. 25:54 Good question. 25:58 Not, not a dumb question at all. 25:59 Good stuff. 26:00 Other questions? 26:01 There's one right here. 26:04 [BLANK_AUDIO] 26:04 >> Can, can you modify the generated JavaScript? 26:07 >> Could I modify the gener, oh, like with a macro? 26:10 [LAUGH] That's a good question. 26:12 I don't think so. 26:15 I mean, I guess. 26:15 Hm, so there's not a hook that I know of that's like, 26:17 okay now that he JavaScript is compiled let's get in there and mess with it. 26:20 This is Macros are actually make 26:25 transformation of lisp fairly easily because what you get. 26:27 So what you might have noticed which is a little bit weird is that these things, 26:31 this looks like code right here, this looks like a special thing. 26:35 This is in fact just a data structure. 26:37 It's a list. 26:39 So things in curly and, and parens are lists. 26:40 Whose first element is a symbol def, 26:42 and then a symbol sine-wave, and then a symbol identity. 26:43 And this right here is also a data structure. 26:45 It's a list whose first element is the symbol defn, 26:48 whose second element is a sine-wave, 26:51 whose third element is a vector whose argu, whose that has a state in there. 26:52 And then a series of forms. 26:56 So in fact, Lisp is written in its own data structures. 26:58 This is, there's a fancy word for this. 27:01 It's called homoiconicity. 27:02 Which is, I've actually written code that is, in fact, not really code. 27:04 This code is all data. 27:07 It's all data structures. 27:08 But I can actually evaluate those data structures and have them turn in to code. 27:10 And so because of this homoiconicity, 27:13 because I have code that looks just like the list of vec, things and vectors. 27:16 I can say, hey, 27:19 closure, here, take this data structure and perform manipulations on it. 27:20 Move the thing that's in the first position to the last position and 27:24 put this inside this and move this over there and 27:26 I'm just editing data using closure and that's, that's all macros do. 27:28 So macros are sort of made possible and easy, er, I guess easy. 27:31 There are other languages that have them, but 27:34 they're made simple because this code is in fact just data. 27:35 This is sort of a subtle thing to grasp it's one of those things that like you 27:39 hear and you're like I kinda think I know what that means but not really. 27:42 You kind of got to get in there and play with it a little bit. 27:44 So if it didn't make perfect sense to you that's totally normal. 27:46 You sort of have to get in there and get a little bit of experience. 27:49 But I can tell as someone that has a little more experience there it's a really 27:51 cool thing that, that let's you do some great stuff with the language. 27:54 You come to really appreciate it. 27:58 And all those weird parens that at first you're like why are all the parens there, 27:59 they look gross, 28:01 you start to really appreciate writing your code in data structures. 28:02 You actually do this right now by the way. 28:06 Everyone writes code in data structures, they're strings. 28:07 Your program is one long string, right? 28:10 So if you want to do manipulations on that and to write, have code, 28:12 [UNKNOWN] code you need to chop apart strings, using like reg Xs or 28:14 parsers, which is like actual languages use, right? 28:17 So we all write in data structures, they just all kind of suck. 28:20 Closure scripts, or closure lists in general, but 28:23 they're good at data structures, they're real ones that have structure and 28:25 you can actually get in there and edit them efficiently. 28:27 Good question. 28:29 Let's [UNKNOWN]. 28:32 >> So once ES6 is more widely adopted by browsers, what happens to ClosureScript? 28:36 >> Not sure. 28:41 That's a good question. 28:42 I think it'll keep working. 28:43 Do you, is there anything that pops out at you as like, 28:44 that will stop working if ES6 gets adopted? 28:45 >> Not that I can think of. 28:49 It's, it's more a lot of the stuff that you get from languages like 28:50 closure script and coffee script are now being implemented natively with ES6 so 28:54 what, what's the benefit then? 28:58 >> Yeah. >> Once most of those 29:00 things are [CROSSTALK]. >> It kind of remains to be seen I guess. 29:00 At least to me like how, how much of ES6 happens and what does it look like and 29:02 how long does it take and does closure script stand still? 29:05 While that happens, like pretty unlikely to me, I think. 29:09 So I think, there are many languages that target that JVM and 29:11 many languages that target the CLR and things like that. 29:15 We are going to have a number of languages that produce JavaScript to let you 29:16 run code in the browser and people will endlessly debate which one is better and 29:19 which one they'll like more and whose right and whose wrong and am I a jerk? 29:23 Probably. 29:26 Other questions? 29:27 Yeah. 29:30 [SOUND]. 29:31 >> How well does decompilation work? 29:39 >> How well does decompilation, 29:42 like can people go back from the JavaScript to the ClosureScript? 29:43 I have no idea. 29:46 The, in, in development mode the output of JavaScript is pretty predictable so 29:48 you could probably figure out what the original Closure script was. 29:52 I don't know if anyone's tried to do this. 29:55 in, in, production the outputted JavaScript is minified, 29:58 of course, but also it goes through the g, Google Closure Compiler, compiler CLS. 30:03 U-R-E [INAUDIBLE] and a J. 30:07 So Google has their own optimizing compiler. 30:10 So the code that ClosureScript outputs is in, 30:12 in fact, optimized to be optimized by the Google Closure Compiler. 30:14 That's not a confusing phrase at all. 30:19 And what comes out, it does a ton of deadput elimination and 30:21 it does a lot of optimization and magnification and all that. 30:24 So, which is, 30:26 one of the really nice things that comes out of that is ClosureScript, itself, 30:27 is like a handful of K, right? 30:29 Like, so if you want to send down the whole language to the browser that's a bit 30:30 of a bummer if you don't need it all. 30:33 But the cool thing is when you compile code in ClosureScript, 30:35 it then goes to the Google closure compiler, and 30:37 says, hey you never used any of this stuff over here, I'm gonna kill it all. 30:39 And so you get, you know, a, a smallest bit of this code that you actually need. 30:42 Keeps your, downloads light weight and fast. 30:45 Which is really cool. 30:47 [BLANK_AUDIO] 30:49 yeah. 30:52 oh, to your, behind, oh. 30:53 sure. 30:56 Whoa! 30:58 >> So you had mentioned that everybody has their own opinion on 30:58 what the best programming language is. 31:01 >> Yeah. >> I'm interested your opinion on, 31:02 what are the arguments or benefits of writing web apps in Closure? 31:04 >> What are the benefits of writing web apps in Closure? 31:07 So I, I don't have a ton of experience here. 31:10 I've written sort of one web app in closure where people paid for 31:12 it and money was exchanged for this, and then, like a couple others a little bit. 31:14 Go there. 31:21 And so, the benefits to me in Closure are what we've seen so far and 31:22 the same thing's in ClosureScript, 31:25 like this is basically the exact same language as Closure just it compiles at 31:27 the JavaScript. 31:30 So the immutable data structure are huge. 31:31 They basically eliminate a large class of bugs, where you hold on to something and 31:32 it gets mutated and you didn't know about it. 31:36 Like that whole thing goes away entirely. 31:38 The ability to do macros are pretty wonderful. 31:40 It's fast. 31:44 It runs on the JVM. 31:45 You can sort of sneak Closure into various organizations, 31:46 because they have JVM stuff there, but, and if so if you said, you know, 31:49 hey we want to use Ruby, like oh, we don't have like the setup for that. 31:52 All our stuff is in Tomcat or whatever. 31:54 But you can sneak Closure in a little bit easier, which I think is nice. 31:55 There's really interesting stuff happening in the language. 31:59 Like if you're, if you're interested in it start poking around at 32:01 the libraries that are coming out for it. 32:03 And the people that are going there, 32:04 to me are some of the most interesting people in the field. 32:06 So like, I work in Ruby primarily, I write a ton of Rails apps. 32:08 And a lot of really smart Ruby people that have been in the, the field for 32:11 a while are leaving and they're going to Closure, and they're really happy with it. 32:14 So, that to me is like, a huge endorsement. 32:17 People I respect and people who I think are technically very advanced. 32:18 Are really intrigued by this language which is intriguing me too. 32:21 >> What's, what's the process for integrating with external library so 32:26 let's say you wanna use moment or 32:30 some [UNKNOWN] or something like that >> Yeah. 32:31 >> Is that, is that complicated or? 32:33 >> It's not too bad so there are, a lot of people will wrap 32:36 those external libraries so there, there is like a, [UNKNOWN] wrapper. 32:40 For use in closure scripts. 32:43 So more popular languages,languages will tend to get wrapped in an API that looks 32:45 more closure scripty. 32:48 But as you saw but like as we can see right here in the sign. 32:49 This sign call right here, calling out to JavaScript, 32:52 native JavaScript is actually pretty easy and painless. 32:54 So if you want to you can start calling out to external libraries. 32:56 One thing you'll find is that this is a functional language and so when you're, 32:59 if you're used to something that's like it's [INAUDIBLE] and 33:02 object oriented language from inside a functional language you're gonna get 33:04 like a little bit of an impedance mismatch. 33:06 Right, like, it's like, this isn't quite- 33:07 it's not quite what I'm expecting. 33:08 And you'll find that like, it might ugly up your closure script a little bit. 33:10 But it's, it's not so bad. 33:13 But there is a bit of like, a parallel world developing. 33:15 Where it's like," Yeah, we don't really wanna use those external stuff, so 33:18 like, we'll build our own whatever." 33:20 The great stuff is being wrapped; there are j queer wrappers and stuff like that. 33:22 So, because, closure script is based off closure. 33:34 And closure is a functional language. 33:36 >> Yeah. 33:38 >> And I, it's a purely functional language, right? 33:38 closure. >> no, it's actually not. 33:41 >> It's not, okay. 33:43 So, would this language right here,. 33:43 What happens, what's up with the scoping on it? 33:47 So, say you wanted to call a function above it. 33:50 I assume that you have a main function that is essentially your single call that 33:51 modifies all the state in some sort of series, right? 33:55 >> Yup. >> And so what if you had a dependency, 33:58 because like you said, you have a functional program right here 34:00 that's actually calling the J S math function, which is calling another. 34:04 Function outside, so there's like a side effect there. 34:08 >> Yep. >> So how, I, I guess the thing is like, 34:10 functional thinking is a completely different than object oriented thinking. 34:12 And so how do you sort of prepare yourself for writing it in a functional way and 34:16 getting the most out of these [UNKNOWN] languages? 34:21 >> Prepare yourself for writing in a functional way. 34:24 There are a couple of good books that are, I, I, you just kinda, you need to do it. 34:25 Like there was a ti, a point in time where you didn't know how to 34:28 use object oriented programming either, right? 34:30 And like you wrote stuff like almost totally imperatively, and 34:32 you put everything in one file and there were no classes and 34:34 things like that, right? 34:36 So [UNKNOWN] kinda the same way, what I found is my program started being kind of 34:37 object [UNKNOWN] in the beginning but closure pushes you pretty quickly to 34:40 say like, you have data and you have functions, and you feed functions through 34:43 data and like, you start to think of your programs as transformations of data. 34:46 And that's basically what's happening here, right, like we start with a, 34:50 a state of the world, we feed that state through a bunch of functions that 34:52 modify it really, return new, new versions of it right. 34:56 And then at the end we render that whole thing. 34:58 And so starting the, there's a like, there's a book called The Joy of Closure 35:01 which is good at teaching you sort of like these functional ideas, but I just found 35:04 out like my, my mental model of how I, I approach things has changed over time. 35:07 To be more functional like that and its a number of ideas like okay most 35:12 things are actually data transformations, you know? 35:15 But I think its one of those things you just kinda gotta do it for a while. 35:17 I dunno if theres like, theres no shortcuts, probably. 35:19 Okay, we have seven minutes and 48 seconds left. 35:23 Lets write another function and then talk a little bit more. 35:25 Uh,We might even get to get the score done, before this is over, we'll see. 35:27 So lets talk about collision. 35:31 So right now Flappy oscillates, Flappy jumps, but Flappy can happily crash into 35:33 the ground and into the pillars and that doesn't seem quite right. 35:38 So let's write' collision' real quick. 35:42 And this is going to make our later stuff a little bit harder because we're going to 35:46 collide with stuff but that's okay. 35:48 So let's just detect if we're touching the ground first. 35:50 We're gonna, we'll get to higher order functions now which I 35:53 think are interesting. 35:55 So, collision, takes the state of the world, 35:56 like everything else, and it updates the world like everything else. 35:58 It updates the state with the, this game is running flag. 36:02 So the game is running, it goes to true when you click start, and then if 36:05 you crash it goes to false, which says, you know, stop, stop moving the world. 36:08 So the games will keep running. 36:11 The value we want to put in game-is-running is 36:13 not touching-ground state. 36:17 Now if I have been good and awesome, when I save this file, 36:20 the game will stop because Flappy is touching the ground. 36:24 Let's see if we can get his live road reloaded. 36:27 Ready? 36:29 Hey cool, so collision returned true. 36:30 Or collision rather updated game is running to false because touching ground 36:33 returned true. 36:38 Not just reverses the bullion value of whatever gets to it So 36:39 touching ground returned true, so not set false and we said game is 36:42 running to false which made this thing stop scrolling and display restart. 36:47 So now if we crash into the ground the game stops, cool. 36:51 So that's one way that flappy can collide. 36:55 Another way is if it touches a pillar. 36:59 This was a little more complicated but not too bad. 37:01 So you are, so the game is running, if we're gonna call and. 37:03 So if you ware not touching the ground. 37:09 And it was, if none of the pillars are in contact with flappy. 37:12 Right? 37:16 So we actually have a cool collection of pillars. 37:16 Pillars never go away, the just get sort of scrolled off the screen, so we can be 37:19 smart about it, but we'll just be dumb and set check every pillar and say for any 37:23 pillar or any of the pillars in contact with flappy and what does that look like? 37:26 Well, we'll say. 37:30 Not any. 37:31 So not any takes a function and a collection and it retu, it, 37:33 it evaluates and then the functions called a predicate. 37:37 Predicate meaning it returns true or false. 37:40 And so it checks that predicate against every element in the collection. 37:41 It gets fed in there. 37:44 This is probably a fair, fairly familiar concept to people. 37:46 So we need a, 37:49 and then it will return, this will return true if none of the, none of the ,. 37:50 Elements make the predicate return true. 37:55 So you'll want to say it, the game should keep running if you're not touching 37:57 the ground and you're not colliding with any of the pillars. 38:00 So that looks like this. 38:02 So not-any wants as its first argument a function. 38:02 So let's give it one. 38:05 Well, here's how you write a function. 38:06 This is anonymous function. 38:07 This is a function literal. 38:08 So it's a function that takes a pillar and it calls so 38:10 you are not touching a pillar if. 38:15 You both are in a pillar, pillar, 38:17 given a pillar and you are not in the pillar gap. 38:24 Just giving the state and the pillar. 38:29 [SOUND]. 38:35 Yes. 38:39 So, here's our function which says, I'm gonna give you a series of pillars and 38:40 I want you to return true if flappy has collided with a pillar. 38:44 And you're collided with a pillar if you're in the pillar by an in-pillar 38:47 basically checks your x position, like, are you within the x of a pillar? 38:51 And then in-pillar-gap checks your y position basically. 38:54 So, you've crashed into a pillar. 38:59 If you're in a pillar x-wise, but you are not in the gap between the top and 39:00 bottom of the pillar. 39:04 So, that's our function. 39:06 So we now need to pass the collection of pillars into it, which we'll do so here. 39:07 So this is, you can see by indenting hopefully the, the argument. 39:13 So we have not-any takes two arguments. 39:15 The first is this function, the second is the collection of pillars. 39:17 Oh, and pillars needs to actually come out of state. 39:21 So we pull the pillars from the state. 39:24 Yeah. That looks good. 39:31 So let's see if this works for us. 39:31 So crash into a pillar and hey, it totally works. 39:37 [SOUND] None of you are very impressed. 39:39 [LAUGH] There you go. 39:43 Thank you. 39:46 [APPLAUSE] I'm doing this, doing it from the fly up here. 39:47 On the fly, you get it right? 39:49 [UNKNOWN] All right? 39:50 Cool. Tough crowd. [LAUGH]. 39:52 Okay. So that's collision. 39:54 So here we have, what are we doing? 39:56 Yeah. So we have, high, 39:57 high order functions which I think is cool. 39:58 We have, sort of boolean flipping bits here. 40:01 We have and here which is nice. 40:03 This is, this is, probably what you'd expect like logical and effectively. 40:04 We have pulling [UNKNOWN] out of state. 40:08 So we have three minutes left so I want to implement. 40:11 Actually no we'll forget score. 40:13 Let's talk for three minutes instead. 40:15 Let's do like last minute questions, thoughts, concerns and then we'll wrap up. 40:16 And I'm happy to talk after this by the way I love talking about 40:20 stuff obviously so. 40:23 >> Hi, Ben. Can you hear me? 40:27 You're still writing ruby I assume? 40:30 I'm curious how you feel learning closure has affected your, the way you right ruby. 40:33 >> Yeah that's a great question. 40:38 It definitely has affected it. 40:39 This idea of thinking about programs as transformations of 40:41 data that are functional, hasn't impac, 40:44 impacted my ruby because Ruby is actually a fairly functional language itself. 40:46 It was inspired by things like Small Talk, and, which is, I guess, object oriented. 40:49 But it was inspired by a little bit of lisp in there, right? 40:52 And so, Ruby has a handful of pretty powerful functional idioms. 40:55 Like this, like, not any. 40:59 Ruby has a very similar thing. 41:00 You know? Doing things like 41:01 mapping over a collection, all that stuff, is very easy. 41:03 And Ruby has, like, these beautiful blocks. 41:05 But it's also object oriented, so it kind of has like a little bit of a marriage and 41:07 a slight mismatch, like you have some objects and you have some functional and 41:11 I have found that writing FlowJo script has pushed my Ruby more functional. 41:14 Now when I do that, I feel like things actually turn out really well, 41:19 like I don't think I've ever refactored to make something more functional and 41:21 gone, now I don't really understand it. 41:24 I find functional programming to be a little bit more disciplinarian. 41:27 It's a little bit more like I say I just want this thing done in this like, 41:30 roughly, I, I want this to happen. 41:33 As opposed to like, do all these things, move these things over here, 41:35 add this to this. 41:37 And so I, I think it's been a, a positive impact. 41:39 Also, there's a very famous quote by, I think, Eric S. 41:41 Raymond, which is Lisp is worth learning for the profound enlightenment you 41:43 get once you, sort of, once everything sort of clicks. 41:48 And it will change the way you use other languages even if you don't end up 41:50 using Lisp a lot. 41:53 And that's been really true for me. 41:53 So even if this particular Lisp doesn't, doesn't jump out of you. 41:55 If you if Scheme does, if Racket does, if any of those other Lisp, 41:58 if common Lisp does like go try a language that looks like this. 42:02 Especially like the weirder this looks to you. 42:06 The more like your initial factor is like ew, 42:08 ick, like the more you should try this out I think. 42:09 It will change how you program other languages. 42:13 >> Yeah. 42:14 >> Just a note on what you're saying, I find that my JavaScript was a lot 42:15 more functional and a side effect that it's a lot more testable as well, 42:18 so I find functional to be a lot more testable right now. 42:23 >> Beautiful, yeah that's the great thing. 42:26 So. >> Huge fan of that. 42:28 >> So my, my question is was, was, is, is, did you say this codes online somewhere? 42:29 >> Yeah it will be online. 42:35 >> Okay. >> I don't know let's do it now who cares. 42:36 Here it is. This is my 42:38 Gethub.com/r00k/flappy-bird-demo. 42:39 It's wrote full of zeroes because i chose it when I was like twelve. 42:41 How embarrassing. 42:45 Yeah so this is online. 42:46 This is actually forked from somebody else. 42:51 This is Bruce Hauman's code. 42:53 It was the original Flappy Bird that I sort of refactored a bunch, and 42:55 hacked around with and then sort of created this talk out of. 42:58 So you can go see his original if you want, but mine's a little better. 43:00 >> [LAUGH] >> It's true. 43:04 He had bad variable names all over the place. 43:05 Any other brain busters? 43:09 [BLANK_AUDIO] 43:10 >> Awesome. 43:13 >> All right. >> We just hit zero. 43:14 Well done, team. 43:15 Good work. Thank you very much. 43:16 [APPLAUSE] 43:22