When are we gonna pair our program?

Well, this right here.

So one way to show people a language is to like put up a 100 slides and, you know,

be like oh, here are the interesting features of ClojureScript, and

why you might wanna use it.

Or you could write a real program, and show people how it works, and do it live,

which is my preferred way of doing things.

So, we are going to be coding part of flappy bird today.

Everybody know flappy bird?

You're familiar with this, right?

If you don't, it's a very simple game.

You'll get the gist of it.

So unfortunately it's only, I only have 45 minutes so,

I'm not gonna be able to code, we're not gonna be able to code,

we're not gonna be able to pair a program, all of flappy bird.

But, we can write the interesting parts.

So, what I've done, is I wrote the boring parts already.

Those parts are hidden away and cool.

And we're just gonna write the interesting parts.

So, I'll show what this is.

So, very quick overview.

What is ClojureScript?

ClojureScript is a language that compiles into JavaScript.

What is the best part about ClojureScript?

You don't have to write JavaScript anymore.

You can use a programming language, that writes JavaScript.

I know this is like I've come into the lion's den, and

told the lion like, you lion, don't worry you don't have to be a lion anymore.

You can stop being a cat.

But I think it's an awesome language.

I think you should, I'm, I'm glad to see there are people here.

I hope you have an open mind.

There are some really interesting things in ClojureScript.

And we're gonna try to bump into them organically.

Now let me show you one cool thing that's gonna happen right away.

Take a look at the label over here, the Start, underneath Flappy.

I'm going to change this to Art, which is appropriate.

And all I did was save that file.

And notice the browser, this is the browser over here, it's a Chrome, updates.

We can change it to tart, and we get that, or just start.

So, I had this really interesting thing going, which is called live reloading.

So, I have a plugin for

ClojureScript called Figwheel, which is kind of an awesome library name.

And figwheel is basically, setup a web socket connection from the browser,

to our code, and every time I save one of these CloJureScript files.

They get recompiled, cuz it is compiled into JavaScript,

on the fly, and then the browser goes oh, hey I noticed, or I guess [INAUDIBLE] hey

I noticed you changed that file, hey browser, here's some new code.

Reload that live.

And because of some of the properties of ClojureScript,

it's actually quite easy to write code that is reloadable on the fly.

And so you'll see me do some more things like that are reloading like this.

So, let's actually start our game.

And just see how how much we've got so far.

So, there have been better games.

So far collision detection, not 100% quite yet.

So basically Flappy moves to the right.

And the parts we're gonna write are jumping.

Like I can't jump right now, if I click, Flappy does nothing,

I think it's an interesting thing oh, okay, just like scrolled off.

So, if I can't jump I don't, there's no gravity,

I'm not doing any collision detection with the, the pipes, the pillars.

But we're gonna write those things, but one thing I wanna show, while I'm here,

just to show that this is pretty actually really live,

I am gonna change the horizontal velocity, and save this file, ready?

Save. [SOUND] The game just got a lot harder,

so, let all those var, I have a bunch of of sort of constants here that

determine where Flappy starts, and how tall Flappy is, and

how far apart the pillars should be, and blah, blah blah and all of those

things are in fact, I can update any of these live, and you might see me do this.

For instance, to make the game a little bit easier.

When I add collision detection, I'm pretty bad at Flappy Bird, actually.

And so, I'll like take the pillars and sort of stretch them apart.

I know you can do that without reloading, which I think is really, really cool.

But let's start writing our very first function.

And that'll start bumping into real ClojureScript functionality.

So, let's make Flappy jump.

So, in real Flappy Bird, every time you click, or I guess,

tap on your screen, it's a mobile thing Flappy's supposed to, you know,

sort of have a vertical velocity, and then sort of sink back down to the ground.

Kinda [UNKNOWN] by gravity.

So, let's right now, the rough model of this program is a very typical functional

set up, which is there's a bunch of data, at almost sort of a global level.

So, it's a big map.

It's like a hash.

There's a big map that has all of the variables of the program.

And this map is constantly being updated, basically every eight milliseconds.

And then we take all the data in that map, and we pass into a render function, and

the render function paints the game, using just that data, that, all that,

all that, everything that we need is in that map.

So this map, works its way through a series of functions, that update it.

And each function has a small responsibility for updating things.

So the very first thing we wanna write, is the map function.

So, basically all the functions that we're gonna write today,

take the entire state of the world, and then return a new copy,

of the state of the world, having affected it in some way, or not.

[BLANK_AUDIO]

So, let's write jump.

So, jump is really easy.

Now, one weird thing.

Fir, first thing to look at here.

I've defined, this is a partly how you define a function.

So, I define jump right here.

And I've said, right now, jump is just the identity function.

Identity is a function that takes whatever you give it, and returns it to you.

And I want this because,

there are other functions in this code calling jump already, and

they give jump a state, and they want back a state that's been effected potentially,

and so, identity just takes that state, and returns it wholesale.

That's a get, here's the state, nothing's happened.

So, this basically just keeps my code from blowing up, every time I click,

cuz when I click, it's actually calling jump, but

nothing happens because we just have the identity function.

So, let's rewrite jump.

Here is how you write a functioning in Clojure.

It looks basically like this.

And I'll write it in pieces and explain what I'm doing.

So, defn, defn says, I'm going to define a function now.

The function's name is jump.

Notice something weird is happening, we have prefixed notation, so

in ClojureScripts, the very first thing you type in a set of parens,

is the function name, and then the remainder things are an argument.

So, we have defn, which is a call to say create a function.

The function's name is jump, and this is an [UNKNOWN].

You can say state, you can say world, you can say foo.

Those would all be parameters to this function.

So, I'm jump is fine here.

I'm gonna redefine it below.

If that'll work fine.

We'll just leave this identity thing here for a moment.

so, we'll say, jump takes a state.

And what does it do?

Well, it's actually pretty easy.

All we need to do is add in a couple values to this current state of the world.

So, the way you do that enclosure is with assoc.

So let's, let's look at a ripple real quick.

So, lets' say we have here's what a map looks like in Clojure.

Like, this says, this is like a hash.

This says the val, you know, key foo goes to three.

And if I took assoc of foo goes to three, and said, I want you to associate

bar goes to four, we get back, bar goes to four, foo goes to three.

By the way, these data structures are immutable.

Now, what does that mean?

It means you never change them in place, ever.

Assoc is now taking that map, and manipulating it.

And giving you back a new one, and giving you back that same map.

It is taking it and returning a new one.

This is an interesting idea.

I think it's really powerful.

We'll get into this a little bit more.

But all this, these core data structures, the arrays, the maps, the vectors,

all these things are all immutable.

So, here's what we're gonna do.

We're gonna call assoc on state.

So, we're saying, hey, state.

I want you to set a new value, for the following keys.

So, user-has-clicked, needs to be true.

Cuz now we've clicked.

Jump is like a click.

We need to set the time of last click, because we need to know,

the game needs to know, when did the user click, because that,

that length of time that's elapsed, affects how much gravity affects Flappy.

Cuz we want Flappy to jump, and then coming crashing back down to the earth.

So, we need to record when the last click was, so

that we can make some calculations.

So, record the time of last click, and I'm gonna,

I'm gonna pull the time of last click out of state.

So, I'm gonna get from state, the current time.

It looks like this.

I'm gonna actually grab a little more real estate here.

And flappy-velocity we need to set.

So, when we actually make Flappy jump we set it with a jump-velocity.

And jump-velocity is defined up above.

It's a global.

It just says, when you do click,

how much of a vertical impulse do we give to Flappy?

So, fingers crossed, we'll save this, and click, and we'll see Flappy jump.

Hey!

Flappy jumps, and is affected by gravity now,

cuz that user has clicked true, means now Flappy is affected by gravity.

Can I get a little [SOUND] you guys excited?

[SOUND] Hey!

Thank you, so we have our first function, live coded for you.

This is custom home grown, organic code hand put together for you, right here.

This is a very sustainable conference.

This kinda thing is important to all of you, I know.

So here, so questions so far.

What do you think of this?

Are you freaked out?

Are you worried?

Are you bored?

Tell me some reactions or questions or thoughts.

Yeah.

>> Hold on, I've got a mic for you.

>> With ClojureScript, do,

do the functions, do they all have to have one parameter in and one parameter out?

Or can you have multi in and out?

>> Nope it's not like Haskell.

it, it, the functions can have as many parameters, in and out as you want.

So, you can return a collection from a, a function.

There's basically one return value, I'm pretty sure.

But you can say,

I'm gonna return you a whole map of 25 things, which actually this function does.

So when we call assoc state, and

we add these three things in there, we get back the whole state map.

And the state map is actually pretty big, and

I can show it to you really quick, actually.

So, I added a thing to print the, the state map, as the game goes on.

And you can see it down there.

Data is flowing through this thing.

And we're, we're, we're re, basically reprinting this every eight milliseconds.

You can see the time delta is going up, meaning it's been long since the, the,

the game time started.

The current time is incrementing.

Our exposition is incrementing.

Things like that.

Things are changing.

But we're, we're constantly returning this map through our function pipeline.

So, you can of this like basically a pipeline of

functions that update what's going in the world.

And then we take the very final map of state, and we call, say, hey render.

Render this whole thing.

And we get what's in, in the browser.

Good question.

Other questions.

>> How ugly is the JavaScript that the compiler spits out?

>> How ugly is it?

It's not bad.

It's actually pretty reasonable.

so, there are several modes for compilation.

So, in development mode it uses reasonable symbol names.

Like reasonable variable names, reasonable function.

Keep, like maintains the function names, thing like that.

So, the code I actually the output of JavaScript is actually fairly readable.

I find my self not needing to go to it very often,

because ClojureScript actually has source maps.

So, let's actually break our function real quick.

And instead of assoc [INAUDIBLE] all this, well we'll do that, but

then we will throw.

nope, and let's see, now when I jump, let's see if that's actually through.

Put that through, let's get rid of this.

It's not assoc that.

Instead let's throw here.

Let's, save.

[SOUND] Are we actually throwing?

[SOUND] Did I filter on my console.

I don't think I am.

Well, that's you can kinda see it here.

So, it's not jumping to the line with the,

you may be right about that but you can see barely probably.

That these right here [UNKNOWN] dot cljs,

like I'm actually getting real source in the browser.

So, when things blow up, it blows up on the actual line of the ClojureScript,

not on the line of the JavaScript.

Which is like a super nice thing, like really good free debugging.

And you can do, like,

normal things like moving through thing, moving the code, and all that.

Yeah, great question.

>> Anyone else?

>> Yeah.

>> Yeah, could you show the.

>> Hold please- >> I'll, I'll repeat the question.

>> The rule is waiting for the microphone.

Sorry, rules are rules.

>> Cramping my style.

[SOUND]. [BLANK_AUDIO]

>> So, because ClojureScript is doing things is working with immutable data

structures, and JavaScript inherently doesn't support that.

>> Yep. >> Does that mean that if you look at

the profiler tab, you see a lot of member usage, or does their shortcut tricks for.

>> That is such a good question, and that, that so, yeah we have these immutable data

structures, which me, and I'm constantly returning this new state map, right?

And so, I must be like building up these tons and tons of intermediate things.

And it's kind of true and kind of not.

So, Clojure uses a really smart technique called structural sharing.

So, if I have a vector of a million elements, and

I change one of the very ends, or one of the mil, any,

any one of at random, rather than copying those million elements, elements and

having one changed, it insteads holds those elements in a tree, effectively.

And will chop off one branch of the tree, replace that one thing, and

point to the rest, to the the original.

Does that make sense?

So, like-

>> [INAUDIBLE]. >> Exactly the tree grows.

And so like, this grows at like log 32 of something, of like, of the size of the,

the things in there.

Like it has a very, very high branching factor.

So you get a lot of reuse.

And it actually turns out to be like,

really quite efficient, in terms of speed and memory use.

That was one of the big problems you have to solve right away when you start doing

mutable data structures, is how do we sufficiently share the old stuff?

But since the old stuff can never change,

you can safely point to it in the new data structures.

Yeah, it's a really good, that's a good intuition, a good,

good thing to ask, ask about.

And solved, I think, pretty nicely.

And the, this implementation has been copied like Closure's implementation of,

I think, like hash map tries or something, or trie mapped hashes or some crazy thing.

Has been like, they're pulling that into Scala.

And like, this, so this, this was sorta like almost a research problem for

a little while, and there wasn't a really good implementation.

And now, this is being like, sort of spreading through the world.

Yeah.

Got more.

[BLANK_AUDIO]

>> It's working, Ben.

>> It is working, right?

Also note that it hasn't blown up either.

[LAUGH].

>> It looks pretty ClosureScript looks pretty Lispy.

>> Mm-hm.

>> Is that what it's based on?

>> In fact it is, yeah.

ClosureScript is a Lisp, yep.

If you use Steam if you use Closure like so, Closure and ClosureScript

are basically the same language, they just compile the different targets.

Closure compiles to JVM, ClosureScript compiles to JavaScript.

And yeah, if you've used Steam or Common Lisp, it's a very, very similar language.

Yep. >> Are you using,

are you using something Closure specific for your view layer here?

Or-

>> yeah. Good question.

I love this.

let's, let's open this bit.

So, this is something called Sablono.

So, this is how you draw things in Sablono.

For instance, this is how you draw a pillar.

So you pass it some variables that it needs.

And then we make a div, and then we make another div, with some style, and

some height.

Here is the full, this is the full thing basically, that, that is [UNKNOWN] Flappy.

So, we have a div, with a class of board, on mouse down we bind to this thing.

So, capture the clicks.

There's our score.

A little bit of conditional here, and, here's a nice thing about this,

it's like, notice we can use like we can use Lisp sort of,

we can use this language right in our template, much like other things, but

we have a div and we wanna map pillar on pillars.

So, we're actually mapping this function up here, for

every pillar in our collection to, to sort of render each of those.

[BLANK_AUDIO]

Yep.

Other questions? These are great questions.

You guys are killing it.

[BLANK_AUDIO]

All right let's write more ClosureScript.

So, that was a pretty easy one.

Let's write something a little bit more complicated.

Let's go back to where we were.

Let's make sure jump still works.

Yeah, it does.

And then we crash the bottom.

Okay. That's cool.

so, has anyone played the original Flappy Bird?

Yeah, okay.

So, in the, in real Flappy Bird, when you start,

Flappy is oscillating, gently, on a sine curve, until you start tapping.

It's just like, sort of a, a nicety of the game.

So, let's actually implement that right now.

So, let's get rid of let's define this below a sine-wave identity.

So, we're gonna write a function called sine-wave that again, takes a state.

This is gonna be what all our, our functions do.

Oh, actually no, there's one more thing.

I wanna come back here and refactor this.

So here here we are associating, we wanna pull, right here, we're

getting the value of current-time from the cur, from the state, as it's passed in.

Because we want to include that.

Or we want to set that to be time of last click.

There's actually a shortcut for this.

So, this is a key word.

It's like a, a symbol in Ruby.

It's an immutable thing.

It's like a little label, basically.

But these are actually functions.

So, I can put this in the function position.

So, rather than using this get thing, I can call,

current-time, as a function, on state.

Is that clear?

Is that confusing?

Maybe.

So, if we have let's say, let's, let's say x is a map, with foo going to two.

We got x.

I can call, foo on x, and get back two.

Weird, right?

But kinda handy it's gonna let us refactor this a little bit, so we just got rid of

that get, and now instead, we are using, this keyword as a function.

The keywords are functions in ClosureScript, and

I think we're still good, yep.

Yep! We appear to be still working,

let's go to reload just to be safe.

no, we broke something.

Oh, because we have a sine wave in progress here.

Let's just make sure we're good.

Yeah, okay cool.

All right, so let's implement sine-wave.

So, I basically want Flappy's initial path to sort of trace this nice

gentle sine wave up and down.

And how does that work?

Well, we'll do it like this.

The first thing I wanna do, is just for.

So, we have this variable time delta,

which tells us how long it's been since we started the game.

So, we're gonna use that as our, basically like our tick, and we're gonna feed that

through a sine function, that'll sort of give us this, this oscillation.

And it's not gonna start off very pretty, but it'll get us in the right direction.

So, here's how we define local variables in ClosureScript, time-delta, on state.

So, this right here says opens a basically, opens a, a lexical scope.

And says, within this list, or

within this scope, I want time-delta to be bound, to be bound to this value.

So, what, what it,

what I'm doing right here is pulling out the time-delta from state, and storing it.

Just like time-delta equals basically.

And now, I wanna assoc.

Again, we're, this is setting the value.

In state, I want to set Flappy's y.

[BLANK_AUDIO]

Which is just a value in there, and we're gonna set it to.

Hey, look at this.

JavaScript [INAUDIBLE].

[BLANK_AUDIO]

One sec. That's what JavaScript [INAUDIBLE] looks

like in here.

We say, this is basically saying, hey,

js Math, call the sin function, with time-delta.

Pretty painless. Didn't have to require anything.

Didn't have to do any fancy work.

Just kinda works nicely.

People in the back, is the font size okay, or would you like it bigger?

Great. okay, so

let's look at Flappy when we start.

There's Flappy.

Flappy's freakin out.

so, this is hard to tell but Flappy is in fact, tracing a sine curve.

It's just kind of like a really spastic, highly caffeinated one.

[SOUND] This is Flappy after an Aeropress session.

Okay, so let's smooth this out.

Let's make Flappy a little more reasonable.

Let's see if we can do both here, that'd be cool.

Yeah, here we go.

Okay. So, basically I want to apply a dampener.

To this value.

To the time delta, cuz the time delta actually gets pretty big.

And so we want time delta to be a lot smaller.

Whoa!

To be a lot smaller.

So, let's multiply it by [SOUND] this.

This is not a magic value at all.

Okay.

Now, you can probably just barely see that Flappy is now tracing a nice sort of

gentle sine curve but it's a pretty small one uh,so let's let's make

that sine curve [INAUDIBLE] make that buh, result a little bit bigger.

So here, we'll multiply by 30, the thing we just did.

Let's see how that works.

Okay.

Flappy is now mellow, coming down off the caffeine high.

Things are looking good.

But we're now, we're way too high.

This, this oscillation is supposed to take place sort of,

in the, in the middle of the screen.

So, the last thing I'm gonna do,

is add [SOUND] Flappy's starting state, which is held in start y.

To this value, and then oops, yeah, and

hey, we have a nice mellow oscillation in the middle of the screen.

If we restart, yeah, there we go.

That should look familiar if you've ever played the game before, this is

roughly what Flappy does until, you start jumping, and then you jump around.

All right.

So, we have another function written.

That's cool.

Here's the thing, though, it's sort of ugly.

Like I wouldn't fault you if you said, like, this looks gross.

And the reason it looks gross, well you could probably have several arguments as

to why you think it looks gross.

my, my position is this looks sort of gross because like

the interesting stuff is kind of working inside out.

So the first thing I do, in terms of order of operations, is actually multiply time

delta times this factor, and then I take the sin of that, and then I multiply it

by 30, and then I add the start y, and then I store it in this state map.

And so, like the actual flow of operations is kind of hidden, and you have to sort of

become a little bit of a list [UNKNOWN] yourself to figure out what's going on.

It's not totally clear, and so my position is that we can do better.

So let's do that.

So closure script has this great operator.

In fact, actually a macro.

And a macro is something that rewrites code.

So if you like metaprogramming, macros are like metaprogramming plus plus.

so, when we compile this code, there's actually a phase

where the macros in ClosureScript get a chance to manipulate code.

So it it gives it a, a thing, they say here's the, here's the original code, and

macros go, they tear it apart, and they reorder things, and they put stuff in

different places, and they say, here's the code, Now compile that, and run that.

And it lets us do some really interesting things, like,

kinda like change syntax, basically.

So here's what it can look like.

So, we still have a sine wave function, it still takes our state, but

now we're gonna use this thing called a threading operator.

A threading operator says, I want you to take a value and stick it into a series of

expressions, or a series of forms that are gonna come next.

So first we're gonna grab our time delta out of the state like we did before.

Okay, and now I want you to f, the next thing you need to do,

if you look above, is multiply that by our,

our smoothing factor, our dampener, and I'm gonna do that this way.

And this actually, will take, well, the way this works when you see this arrow,

it says, okay, evaluate this form.

We're gonna get our time delta, take the result of the value in that form, and

stick it right here.

Basically feeds it, threads it, I'm gonna move that to the top so

you can see that better, threads it into this spot for us.

So, now that I've redefined sine wave, let's see, woop, it blew it up.

Where is our error?

No protocol so,

oh right, because sine wave needs to return.

We need to take this value, so let's take this value.

We're basing,

the issue is that we're not returning the map that we promised we'd returned.

So let's assoc state flappy-y, and

this will take the time delta, multiply it by this, and then feed it right here.

So, this map, this thing,

this little weird arrow thing is called the thread [UNKNOWN].

It threads it into the last spot of all the forms that remain in the pipeline.

So now, fingers crossed so this may work.

See. [SOUND] oop.

[LAUGH] Flappy's fell from the ceiling.

I think, yeah, okay.

So we're back to where we were before.

Where we are now actually, this is just multiplying,

we're not taking the sine yet.

But you'll see Flappy is slowly moving down,

because he's being multiplied by, this, this, dampener, again and again.

So, let's come here, and now,

the next thing we need to do is to call sine on this, right?

So sine, jsmath of the result, which we don't need to specify, we just,

it just knows it's gonna feed it in there, and now, you can see,

flappy's back to its like, gentle but small sine wave.

Now we can, the next thing we do is multiply that by 30, right?

So you multiply it by 30, now we're here.

The next thing we need to do is add, just the start and save and bam!

Pretty good, right?

So, this function that we just wrote here, is equivalent to the one above it.

These two sine-waves do the same thing, but one is inside out, effectively from

order of operations, and one perceives linearly through a series of forms.

This is one of the niceties that Lisp gives you, Lisp in general,

the half macros.

They give you the ability to sort of rework the,

the syntax when it makes sense for you.

This is sort of a limited use of, hey I can like, I can decide how to

reorder these forms and what this macro does when we call this, is it,

in fact, really rewrites it to be this.

The output of this,

of this macro is this code that then gets, gets compiled and executed.

So, thoughts?

Questions?

Emotions?

This, thumbs up.

I had a double thumbs up right there.

That was awesome. That's a good emotion.

>> [INAUDIBLE] >> Yeah, the question is, can I-

>> Rules are rules, questions go into the microphone.

>> How about, can I just, can I just repeat them?

>> No, I would much rather have them speak into the microphone.

>> Why was it?

>> If you insist.

I was just asking to make sure if you could,

yeah, delete that out since now you've, you've put in there so-

>> In fact, yes. >> And this is,

this is a dumb question, but since I have no experience in [CROSSTALK].

>> Please ask dumb questions, I love dumb questions.

>> Do you still need the, the def as well.

I don't know the difference between def and defn [CROSSTALK].

>> Oh, such a good question.

That's not a bad question at all.

So defn says, I'm going to, I want you to bind a function to this name right here.

So defn says I'm going to give you a name and

an ARD list and a body and I want you to associate those things.

Def just says I want you to map a name to a name, map a name to a name,

so because identity is already a function, just define, anytime someone

references sine wave, just, instead, replace it with this function.

But down here I want to say,

I want to define a function called sine wave so I need the defn.

The defn actually expands to this, def sine-wave is

a function that takes state and then blah, blah, blah.

So yeah, I could re,

we could rewrite this is, this right here, defn I believe is even a macro.

I think it just rewrites it into this.

Good question.

Not, not a dumb question at all.

Good stuff.

Other questions?

There's one right here.

[BLANK_AUDIO]

>> Can, can you modify the generated JavaScript?

>> Could I modify the gener, oh, like with a macro?

[LAUGH] That's a good question.

I don't think so.

I mean, I guess.

Hm, so there's not a hook that I know of that's like,

okay now that he JavaScript is compiled let's get in there and mess with it.

This is Macros are actually make

transformation of lisp fairly easily because what you get.

So what you might have noticed which is a little bit weird is that these things,

this looks like code right here, this looks like a special thing.

This is in fact just a data structure.

It's a list.

So things in curly and, and parens are lists.

Whose first element is a symbol def,

and then a symbol sine-wave, and then a symbol identity.

And this right here is also a data structure.

It's a list whose first element is the symbol defn,

whose second element is a sine-wave,

whose third element is a vector whose argu, whose that has a state in there.

And then a series of forms.

So in fact, Lisp is written in its own data structures.

This is, there's a fancy word for this.

It's called homoiconicity.

Which is, I've actually written code that is, in fact, not really code.

This code is all data.

It's all data structures.

But I can actually evaluate those data structures and have them turn in to code.

And so because of this homoiconicity,

because I have code that looks just like the list of vec, things and vectors.

I can say, hey,

closure, here, take this data structure and perform manipulations on it.

Move the thing that's in the first position to the last position and

put this inside this and move this over there and

I'm just editing data using closure and that's, that's all macros do.

So macros are sort of made possible and easy, er, I guess easy.

There are other languages that have them, but

they're made simple because this code is in fact just data.

This is sort of a subtle thing to grasp it's one of those things that like you

hear and you're like I kinda think I know what that means but not really.

You kind of got to get in there and play with it a little bit.

So if it didn't make perfect sense to you that's totally normal.

You sort of have to get in there and get a little bit of experience.

But I can tell as someone that has a little more experience there it's a really

cool thing that, that let's you do some great stuff with the language.

You come to really appreciate it.

And all those weird parens that at first you're like why are all the parens there,

they look gross,

you start to really appreciate writing your code in data structures.

You actually do this right now by the way.

Everyone writes code in data structures, they're strings.

Your program is one long string, right?

So if you want to do manipulations on that and to write, have code,

[UNKNOWN] code you need to chop apart strings, using like reg Xs or

parsers, which is like actual languages use, right?

So we all write in data structures, they just all kind of suck.

Closure scripts, or closure lists in general, but

they're good at data structures, they're real ones that have structure and

you can actually get in there and edit them efficiently.

Good question.

Let's [UNKNOWN].

>> So once ES6 is more widely adopted by browsers, what happens to ClosureScript?

>> Not sure.

That's a good question.

I think it'll keep working.

Do you, is there anything that pops out at you as like,

that will stop working if ES6 gets adopted?

>> Not that I can think of.

It's, it's more a lot of the stuff that you get from languages like

closure script and coffee script are now being implemented natively with ES6 so

what, what's the benefit then?

>> Yeah. >> Once most of those

things are [CROSSTALK]. >> It kind of remains to be seen I guess.

At least to me like how, how much of ES6 happens and what does it look like and

how long does it take and does closure script stand still?

While that happens, like pretty unlikely to me, I think.

So I think, there are many languages that target that JVM and

many languages that target the CLR and things like that.

We are going to have a number of languages that produce JavaScript to let you

run code in the browser and people will endlessly debate which one is better and

which one they'll like more and whose right and whose wrong and am I a jerk?

Probably.

Other questions?

Yeah.

[SOUND].

>> How well does decompilation work?

>> How well does decompilation,

like can people go back from the JavaScript to the ClosureScript?

I have no idea.

The, in, in development mode the output of JavaScript is pretty predictable so

you could probably figure out what the original Closure script was.

I don't know if anyone's tried to do this.

in, in, production the outputted JavaScript is minified,

of course, but also it goes through the g, Google Closure Compiler, compiler CLS.

U-R-E [INAUDIBLE] and a J.

So Google has their own optimizing compiler.

So the code that ClosureScript outputs is in,

in fact, optimized to be optimized by the Google Closure Compiler.

That's not a confusing phrase at all.

And what comes out, it does a ton of deadput elimination and

it does a lot of optimization and magnification and all that.

So, which is,

one of the really nice things that comes out of that is ClosureScript, itself,

is like a handful of K, right?

Like, so if you want to send down the whole language to the browser that's a bit

of a bummer if you don't need it all.

But the cool thing is when you compile code in ClosureScript,

it then goes to the Google closure compiler, and

says, hey you never used any of this stuff over here, I'm gonna kill it all.

And so you get, you know, a, a smallest bit of this code that you actually need.

Keeps your, downloads light weight and fast.

Which is really cool.

[BLANK_AUDIO]

yeah.

oh, to your, behind, oh.

sure.

Whoa!

>> So you had mentioned that everybody has their own opinion on

what the best programming language is.

>> Yeah. >> I'm interested your opinion on,

what are the arguments or benefits of writing web apps in Closure?

>> What are the benefits of writing web apps in Closure?

So I, I don't have a ton of experience here.

I've written sort of one web app in closure where people paid for

it and money was exchanged for this, and then, like a couple others a little bit.

Go there.

And so, the benefits to me in Closure are what we've seen so far and

the same thing's in ClosureScript,

like this is basically the exact same language as Closure just it compiles at

the JavaScript.

So the immutable data structure are huge.

They basically eliminate a large class of bugs, where you hold on to something and

it gets mutated and you didn't know about it.

Like that whole thing goes away entirely.

The ability to do macros are pretty wonderful.

It's fast.

It runs on the JVM.

You can sort of sneak Closure into various organizations,

because they have JVM stuff there, but, and if so if you said, you know,

hey we want to use Ruby, like oh, we don't have like the setup for that.

All our stuff is in Tomcat or whatever.

But you can sneak Closure in a little bit easier, which I think is nice.

There's really interesting stuff happening in the language.

Like if you're, if you're interested in it start poking around at

the libraries that are coming out for it.

And the people that are going there,

to me are some of the most interesting people in the field.

So like, I work in Ruby primarily, I write a ton of Rails apps.

And a lot of really smart Ruby people that have been in the, the field for

a while are leaving and they're going to Closure, and they're really happy with it.

So, that to me is like, a huge endorsement.

People I respect and people who I think are technically very advanced.

Are really intrigued by this language which is intriguing me too.

>> What's, what's the process for integrating with external library so

let's say you wanna use moment or

some [UNKNOWN] or something like that >> Yeah.

>> Is that, is that complicated or?

>> It's not too bad so there are, a lot of people will wrap

those external libraries so there, there is like a, [UNKNOWN] wrapper.

For use in closure scripts.

So more popular languages,languages will tend to get wrapped in an API that looks

more closure scripty.

But as you saw but like as we can see right here in the sign.

This sign call right here, calling out to JavaScript,

native JavaScript is actually pretty easy and painless.

So if you want to you can start calling out to external libraries.

One thing you'll find is that this is a functional language and so when you're,

if you're used to something that's like it's [INAUDIBLE] and

object oriented language from inside a functional language you're gonna get

like a little bit of an impedance mismatch.

Right, like, it's like, this isn't quite-

it's not quite what I'm expecting.

And you'll find that like, it might ugly up your closure script a little bit.

But it's, it's not so bad.

But there is a bit of like, a parallel world developing.

Where it's like," Yeah, we don't really wanna use those external stuff, so

like, we'll build our own whatever."

The great stuff is being wrapped; there are j queer wrappers and stuff like that.

So, because, closure script is based off closure.

And closure is a functional language.

>> Yeah.

>> And I, it's a purely functional language, right?

closure. >> no, it's actually not.

>> It's not, okay.

So, would this language right here,.

What happens, what's up with the scoping on it?

So, say you wanted to call a function above it.

I assume that you have a main function that is essentially your single call that

modifies all the state in some sort of series, right?

>> Yup. >> And so what if you had a dependency,

because like you said, you have a functional program right here

that's actually calling the J S math function, which is calling another.

Function outside, so there's like a side effect there.

>> Yep. >> So how, I, I guess the thing is like,

functional thinking is a completely different than object oriented thinking.

And so how do you sort of prepare yourself for writing it in a functional way and

getting the most out of these [UNKNOWN] languages?

>> Prepare yourself for writing in a functional way.

There are a couple of good books that are, I, I, you just kinda, you need to do it.

Like there was a ti, a point in time where you didn't know how to

use object oriented programming either, right?

And like you wrote stuff like almost totally imperatively, and

you put everything in one file and there were no classes and

things like that, right?

So [UNKNOWN] kinda the same way, what I found is my program started being kind of

object [UNKNOWN] in the beginning but closure pushes you pretty quickly to

say like, you have data and you have functions, and you feed functions through

data and like, you start to think of your programs as transformations of data.

And that's basically what's happening here, right, like we start with a,

a state of the world, we feed that state through a bunch of functions that

modify it really, return new, new versions of it right.

And then at the end we render that whole thing.

And so starting the, there's a like, there's a book called The Joy of Closure

which is good at teaching you sort of like these functional ideas, but I just found

out like my, my mental model of how I, I approach things has changed over time.

To be more functional like that and its a number of ideas like okay most

things are actually data transformations, you know?

But I think its one of those things you just kinda gotta do it for a while.

I dunno if theres like, theres no shortcuts, probably.

Okay, we have seven minutes and 48 seconds left.

Lets write another function and then talk a little bit more.

Uh,We might even get to get the score done, before this is over, we'll see.

So lets talk about collision.

So right now Flappy oscillates, Flappy jumps, but Flappy can happily crash into

the ground and into the pillars and that doesn't seem quite right.

So let's write' collision' real quick.

And this is going to make our later stuff a little bit harder because we're going to

collide with stuff but that's okay.

So let's just detect if we're touching the ground first.

We're gonna, we'll get to higher order functions now which I

think are interesting.

So, collision, takes the state of the world,

like everything else, and it updates the world like everything else.

It updates the state with the, this game is running flag.

So the game is running, it goes to true when you click start, and then if

you crash it goes to false, which says, you know, stop, stop moving the world.

So the games will keep running.

The value we want to put in game-is-running is

not touching-ground state.

Now if I have been good and awesome, when I save this file,

the game will stop because Flappy is touching the ground.

Let's see if we can get his live road reloaded.

Ready?

Hey cool, so collision returned true.

Or collision rather updated game is running to false because touching ground

returned true.

Not just reverses the bullion value of whatever gets to it So

touching ground returned true, so not set false and we said game is

running to false which made this thing stop scrolling and display restart.

So now if we crash into the ground the game stops, cool.

So that's one way that flappy can collide.

Another way is if it touches a pillar.

This was a little more complicated but not too bad.

So you are, so the game is running, if we're gonna call and.

So if you ware not touching the ground.

And it was, if none of the pillars are in contact with flappy.

Right?

So we actually have a cool collection of pillars.

Pillars never go away, the just get sort of scrolled off the screen, so we can be

smart about it, but we'll just be dumb and set check every pillar and say for any

pillar or any of the pillars in contact with flappy and what does that look like?

Well, we'll say.

Not any.

So not any takes a function and a collection and it retu, it,

it evaluates and then the functions called a predicate.

Predicate meaning it returns true or false.

And so it checks that predicate against every element in the collection.

It gets fed in there.

This is probably a fair, fairly familiar concept to people.

So we need a,

and then it will return, this will return true if none of the, none of the ,.

Elements make the predicate return true.

So you'll want to say it, the game should keep running if you're not touching

the ground and you're not colliding with any of the pillars.

So that looks like this.

So not-any wants as its first argument a function.

So let's give it one.

Well, here's how you write a function.

This is anonymous function.

This is a function literal.

So it's a function that takes a pillar and it calls so

you are not touching a pillar if.

You both are in a pillar, pillar,

given a pillar and you are not in the pillar gap.

Just giving the state and the pillar.

[SOUND].

Yes.

So, here's our function which says, I'm gonna give you a series of pillars and

I want you to return true if flappy has collided with a pillar.

And you're collided with a pillar if you're in the pillar by an in-pillar

basically checks your x position, like, are you within the x of a pillar?

And then in-pillar-gap checks your y position basically.

So, you've crashed into a pillar.

If you're in a pillar x-wise, but you are not in the gap between the top and

bottom of the pillar.

So, that's our function.

So we now need to pass the collection of pillars into it, which we'll do so here.

So this is, you can see by indenting hopefully the, the argument.

So we have not-any takes two arguments.

The first is this function, the second is the collection of pillars.

Oh, and pillars needs to actually come out of state.

So we pull the pillars from the state.

Yeah. That looks good.

So let's see if this works for us.

So crash into a pillar and hey, it totally works.

[SOUND] None of you are very impressed.

[LAUGH] There you go.

Thank you.

[APPLAUSE] I'm doing this, doing it from the fly up here.

On the fly, you get it right?

[UNKNOWN] All right?

Cool. Tough crowd. [LAUGH].

Okay. So that's collision.

So here we have, what are we doing?

Yeah. So we have, high,

high order functions which I think is cool.

We have, sort of boolean flipping bits here.

We have and here which is nice.

This is, this is, probably what you'd expect like logical and effectively.

We have pulling [UNKNOWN] out of state.

So we have three minutes left so I want to implement.

Actually no we'll forget score.

Let's talk for three minutes instead.

Let's do like last minute questions, thoughts, concerns and then we'll wrap up.

And I'm happy to talk after this by the way I love talking about

stuff obviously so.

>> Hi, Ben. Can you hear me?

You're still writing ruby I assume?

I'm curious how you feel learning closure has affected your, the way you right ruby.

>> Yeah that's a great question.

It definitely has affected it.

This idea of thinking about programs as transformations of

data that are functional, hasn't impac,

impacted my ruby because Ruby is actually a fairly functional language itself.

It was inspired by things like Small Talk, and, which is, I guess, object oriented.

But it was inspired by a little bit of lisp in there, right?

And so, Ruby has a handful of pretty powerful functional idioms.

Like this, like, not any.

Ruby has a very similar thing.

You know? Doing things like

mapping over a collection, all that stuff, is very easy.

And Ruby has, like, these beautiful blocks.

But it's also object oriented, so it kind of has like a little bit of a marriage and

a slight mismatch, like you have some objects and you have some functional and

I have found that writing FlowJo script has pushed my Ruby more functional.

Now when I do that, I feel like things actually turn out really well,

like I don't think I've ever refactored to make something more functional and

gone, now I don't really understand it.

I find functional programming to be a little bit more disciplinarian.

It's a little bit more like I say I just want this thing done in this like,

roughly, I, I want this to happen.

As opposed to like, do all these things, move these things over here,

add this to this.

And so I, I think it's been a, a positive impact.

Also, there's a very famous quote by, I think, Eric S.

Raymond, which is Lisp is worth learning for the profound enlightenment you

get once you, sort of, once everything sort of clicks.

And it will change the way you use other languages even if you don't end up

using Lisp a lot.

And that's been really true for me.

So even if this particular Lisp doesn't, doesn't jump out of you.

If you if Scheme does, if Racket does, if any of those other Lisp,

if common Lisp does like go try a language that looks like this.

Especially like the weirder this looks to you.

The more like your initial factor is like ew,

ick, like the more you should try this out I think.

It will change how you program other languages.

>> Yeah.

>> Just a note on what you're saying, I find that my JavaScript was a lot

more functional and a side effect that it's a lot more testable as well,

so I find functional to be a lot more testable right now.

>> Beautiful, yeah that's the great thing.

So. >> Huge fan of that.

>> So my, my question is was, was, is, is, did you say this codes online somewhere?

>> Yeah it will be online.

>> Okay. >> I don't know let's do it now who cares.

Here it is. This is my

Gethub.com/r00k/flappy-bird-demo.

It's wrote full of zeroes because i chose it when I was like twelve.

How embarrassing.

Yeah so this is online.

This is actually forked from somebody else.

This is Bruce Hauman's code.

It was the original Flappy Bird that I sort of refactored a bunch, and

hacked around with and then sort of created this talk out of.

So you can go see his original if you want, but mine's a little better.

>> [LAUGH] >> It's true.

He had bad variable names all over the place.

Any other brain busters?

[BLANK_AUDIO]

>> Awesome.

>> All right. >> We just hit zero.

Well done, team.

Good work. Thank you very much.

[APPLAUSE]