One to Rule them All Aaron Bedra

introduce something new how about closure who's who's looked at a tried closure okay few more hands down so I'm gonna show a bit of closure code today drink my slides and I'm going to assume y'all in the closure which is not the case but I'll try to explain the idea what I really want to talk about is just the general ideas of what closure brings to the web and I actually want to show you a few things new like closure scripts but also some ideas that closure script brings to the table in terms of client-side code in particular JavaScript so without further ado I have a double agenda today so part of it is talking about closure on the web and the other part is actually more about realizing that JavaScript is going to inevitably take over the world it's going to reach everywhere it already has but that doesn't mean we have to kind of take that lying down I want to talk more about different ways to approach JavaScript on the web so first we want to talk about closure and I don't know what closure brings to the table and closure is a fantastic functional programming language it has it really has a foundation of rich data structures for those of you that have looked at closure you may have noticed kind of the differences between Lisp and and and/or a common list when scheme and closure itself and it really lies in the data levels the the foundation kind of amplifying what lists brought to the lists lists brought to the table and adding additional things see the vector the map the sets giving you a more rich data structure set to work with but also making those data structures persistent and there's really really an incredible amount of power in those data structures and it's absolutely what makes language we can solve problems this way but I don't think we can solve problems lots of ways I think that that's kind of a generic statement but it's meant to be that way closure is a general-purpose programming language it's it's meant to solve all kinds of problems here we're gonna talk about its application on the web but in reality just like a lot of the other languages we use it's about solving all of our problems and good the good thing is that web problems are actually included in the set of all problems so we're good but a short aside I want to reduce the components that make up closure on the web and that really is kind of the the very the very basic the foundation and then kind of how it's built out so ring ring is the kind of foundation layer I'm enclosure how many of you are have programmed in Ruby before I heard of Rach kind of the middleware layer Ruby on Rails this point but instead of a standalone library ring is very very similar to rack and Ruby it's kind of just a very simple kind of in-between that handles requests and then will be able to farm them out Ruby on Rails has adopted rack as its foundation as well and you'll see other libraries enclosure using ring as it sizes foundation so it basically treats endpoints as functions and you get a requests you can stick a arbitrary number of handlers in and you get a response and you send that response back it is treated very functionally it's really just application to functions once the the servlet bits are are understood and a basic header looks like this now this is using ring straight out there's no additional libraries and additional wrappers this is just this is just ring in the plane basically we define a function and we give it an argument list or a set of arguments in this case just one the requests we grab the things we care about so closure has a D structuring form called keys it just says in I have a map of things I these are the keys that I want you to grab out and these are the things I care about and then what I want you to return is a set of things a status some headers and that are an actual response body so the response body comes back as a string and is in a sense a lock so this is a very very simple request and I guess request handler it actually assumes no routes know anything it's just very very plain but this is the idea and we could add route the idea of routes to a ring application but you can see it actually gets pretty cumbersome we have to do lots of conditional logic kind of control flow it quickly becomes kind of unbearable if we were to have a big web application so small web services things like that we could do in ring with no wouldn't really know no problem know overhead but down the line you'd see hey I might need to have more than one end points I might have 2,500 at that point we have a lot of logic going on and so creating an abstraction works very well in the scenario so that's abstraction originally is called composure composure is basically just as another small set on top of ring it's not that big at all maybe a few hundred lines of code but it gives some really additional or I guess some additional things that make a little bit more powerful a bit more easier to consume what is what is being spit out so the one thing is macro magic right it's it basically takes all those routes the wrapping decisions and gives it you a nice little macro to use called def wraps and you give it a list of routes the first thing is the verb get put delete post the route you want to apply the verb zhù and it can actually be astraying a regular expression several several ways to define routes you could have nested routes etc all kinds of things that support that a list of arguments that might be passed in which in this case is nothing but you'll see some more later and then what gets returned the string and this actually turns us into a ring response down the rip down the road so you can it turns into the right status the right headers you can actually use you can actually return a ring a map back if you wanted to control what happens and say no in this case I actually want to return a 420 to you and I want these things to happen you can return just that map and it will say okay I'll forget about that just return the map to ring so you can override that gives you a little bit more control over what's happening so composure gives you a routing system on top of that a few other things but really this is the kind of power in composure have a world right just if you wanted to have an example in composure this would be hello world we create a namespace we pull in this thing called ring adapter jetty which is just the embedded jetty adapter for ring ring has lots of different adapters there's stuff for everything there's Tomcat and GlassFish and I think there's even a JBoss adapter at this point manga or mongrel the web server all kinds of things you can add in there it's just a nice little composable interface so you can hook up to so a jetty was kind of the default originally composure was built without string and I had a little standalone jetty embedded thing in it and so it just kind of defaults to this and you can use it so we define a single route and they tell jetty to run on port 80 and a little join falses if you were doing this on a repple and would give their a pile back to us on a blocking indefinitely so this is basically hello worlds and this is what you get back and this is how you would write it but we can't do things without some notion of being able to intercept a request and and and do things to it right we need to be able to ask the questions about what information we've been provided and you can push that down into your application but what you actually want is a set of composable functions that end up giving you the data that you want when you get to the ends the end the final processing state you don't want to have to do that every single time you know if you have a login then if you have cookies and sessions and additional questions you want to ask you'll want to do that in every single function obviously you want to do that kind of a for your final processing state so middle well let you do that this is not a new concept but ring has this concept of middleware and it's transferred in through composure so middleware and this this piece of middleware out here actually is straight from rings core it's called rap cookies it says give me the cookies basically and so it takes a handler which is just the chain when the request comes in it's a handler and so on it gets passed all the way down and until they're done it returns a function so it's a function that accepts a function and returns a function and that function takes the requests modifies it in some way and then and then calls it or in some cases just returns nothing say stop right it was an authentication thing or an admin processing thing at this part is this user allowed to access slash admin right you wouldn't return the function you just return a response so you know you're not allowed a redirect or something like that you might return some some other thing so middleware when they when the funke's returned the handler says oh I should keep going go to that go on to the next handler and call that one now when it stops it stops and their and their responses return so when you fall out with middleware you have to return some kind of response otherwise things get a little weird so ring has a common set of middleware I want to know for it what params are passed in so give me those you can actually say I don't care about them and they would never even show up keyword params is what takes these strings and turns them into keywords keyword a lot easier to deal with that's what enclosure so there's just give me the params actually keyword Isis forum so I can work with him in a in a little bit more elegant way cookies multi-part so all the things that make up a general web app are here and you can use these in your written applications you can use as a composure but there's a kind of so common composer said well alright I'm gonna make this easier for you to consume so composure is another having a little piece here where you say okay great I want to expose an API this would be a web service so give me the keyword brands really is the kind of the idea here but allow them to be nested and so API is a very similar or very small subset of information just expose a small endpoint but give me these these middlewares provide it for me if you wanted to do a full scale web app you might want more so it hasn't one called site that says okay I'm gonna expose what I expose in the API along with things like multi-part params and session and cookies etc and so they're limited but they give you a nice starting point if you want to if you want to work that way so HTML template II it's always a an interesting thing how many of you have used a template system in HTML before all of us right what is the common response what do we always fall back to you we essentially we have a program that writes programs it is code generation but what is this the standard idea kind of the JSP idea right we have we have mostly HTML with some kind of substitution language and we run that through and it generates the final result there's all kinds of things like that and it's not just data via their string template there's tons of libraries out there for HTML that code generation in here we have a library called hiccup and this is not by any means the end-all be-all of closure Web Apps but it actually takes the idea back into closure data structures so you actually write ax expressions and they emit HTML so this little macro and HTML macro and you give it a closure vector and it says I want an h1 and I want the contents to be high and it returns the element so there's lot of power here because you have the whole power of the put closure programming language inside of your your your templating language now that's not a new concept either right we've been able to that for with many languages for quite a long time but what's more interesting is as we go through this you'll see kind of composition and some interesting things you can do with when you have hiccup or when you have your language as your HTML template language as well so additional things right if I want a link I can say a and give it some optional arguments this map is optional arguments so if I want an ID or a class or something like that I can add it so you can have shortcuts and just like you would normal HTML all the same rules apply it's just some shortcuts but the composability is really interesting here is that I can have a function which is at the bottom you see I have a an endpoint slash they calls a function home and I have a layout function but when I want to pass it as this disclosure vector that contains what the HTML is going to be so we have a nice iterative thing right we have a ul in under the list and a bunch of things that will get rendered inside that list so I can just use closures structures to make this happen so I guess I can map over the set of all in this case labs and make a URL for the lab so I might have a set I'm reading or set of labs to click through so hiccup gives me the power to kind of go through and and map over these and produce the result I never early closure here everything here is closure it's the closure data structures close your language the cool thing is I'm not switching my ideas on my context I'm just using closure the whole time and composable routing right so that I'd far mister you'd see a few more ideas of how the routing works and we can define our out so we can also extend them so at the top we see the composure routes at the bottom these little things you see route files right not found one gives us 404 is the other deals with actually serving static assets at the bottom I might want to add to those routes so the little arrow operator is a thread first operator it just says take everything from the first argument process it and then feed that as we as the first argument to the next function so it just says I want to add logging I'm gonna come I'm gonna stop logging on to my set of routes we're also very composable this way because they're just functions so the comparison implementations is interesting it's just functional concepts we don't have configuration we don't have there's a lot of things we don't have here and some would argue that's actually a doubt you know kind of a pitfall but I think having these small composable features it's much more powerful when you're creating a large system you know built on simple abstractions it's easier to reason about a system than a really big complex thing when you start with simple you can you can develop things and have control over those things I think a little bit better than you can when you start with something that has too much complexity to begin with so finally they're easier to test right we have functions pure functions are easy to test in this case I'm actually pulling the function or test from a project called lab rebel which is one of the closure learning tools labral provides a set of exercises you can work through and basically a repple that you walk through and do these labs this is a test to make sure all the labs render or render properly give me a 200 ok cliff I were to call each one of these URLs I'd get the right response the cool part here is I'm just saying you know I'm just calling these functions as if they don't have severe functions right you saw a little home function there there's just similar function for rendering a lab I don't have to introduce the state I don't have to introduce anything but just the things that function needs to process so isolates what I want to test and they can become a lot simpler so there's lots of ways to solve problems on the web though I mean only if you raise your hands about closure what other things are using to solve your web problems Ruby on Rails lifts spring what what you guys using for jQuery what else sorry spring okay spark jutsu ITER Gengo yeah there's lots of ways to solve problems and they're all great I mean we're solving problems that's the best part we're making people money or making ourselves money and that's that's a really important part here this is what closure provides at the moment there are other libraries that I'll show you at the end called Noir that actually is another set on top of composure that gives you some more creature comforts and things like that but that's not I mean the culture on the web is interesting and it's maturing and I think it's it's a little less mature than a lot of the on essentials and solutions out there and it'll get there but there is one area where we got I guess we haven't really evolved yet we're all polyglots and like we're almost hopelessly probably glad which is really cool I mean I think it's amazing I love programming languages I'm a total language geek I love to see what other languages are doing but there's one thing we just have to kind of Nord we haven't actually addressed JavaScript what what is the commonality right we all unify on JavaScript all these you had Springhead giba GWT we we end up unifying on javascript why two runs in the browsers so does it assembly language runs on all our computers to the most this time see I mean like yeah that was those were on computers - hmm it's well known everybody knows it right it's it's it's yeah it's pretty pretty much they're generated codes harder debug that's a big deal right not installing additional things right although Flash's installed on almost every computer at this point it's still something has to be installed yeah you don't have to you know you don't have to rely I know and you can that's okay too grimace it flashes what how did it yeah I mean so a lot of people have said I'm done with flash I mean even Adobe said we're done with mobile flash you know the future is html5 but that also extends the future to JavaScript I mean javascript is going to be the thing we have for mobile devices for everything else we don't have to accept that as the end state right we can we can build languages that emit JavaScript or or kind of extend what JavaScript can do and we asked why why really why do you want you why was it a good idea to move to Django or to GWT or to spring I already use jquery why do we do that what did it give us speed what kind of speed speed of development speed yeah it made us more productive made of salt we were able to solve our problems more quickly sometimes it actually gave us other advantages too but we're trying to solve problems faster and more elegantly the fact is and I will say this is the fact the closure rocks and JavaScript reaches JavaScript has real reach and I think that I mean now this is my you know I'm part of the you know Lisp weenie crowd saying list solve all your problems but in reality and there are a lot of things that JavaScript needs improvement improvement on I think that we all write terrible JavaScript I write general JavaScript I would imagine most of the people in this room also a terrible JavaScript there's only a few a few people that I know that right good JavaScript it's we have another local language right Douglas Crockford a great book about JavaScript the good parts right and it's always next to them in the end you know like Barnes and Noble you'll see JavaScript like this giant book on jobs like this big and then JavaScript the good parts right next to it's an awesome comparison I was take a picture of it but the problem was when I heard a little language and there's a lot of subtleties about the language that are spitballs they're confusing and I think things that write JavaScript for us are great and so we all decide language but I think there's extensions as well so we took closure on the road this last summer and we said hey look closure is an interesting idea the jvm was an official target and I think managed runtime or the virtual machine is a fantastic way to development languages there's lots of things you get for it and the JVM has been stellar and obviously it has its drawbacks but we need to move forward and so we said all right great let's make closure run on JavaScript and yet well CoffeeScript already did some of this right it's like ok great we're gonna we're gonna give you this new language on top of JavaScript how many crazy views CoffeeScript it's pretty cool right I mean it's it's it's that extra separate productivity CoffeeScript writes better Java scripts that most of you will ever write it knows the nuances of JavaScript and knows how to work around them the first time I heard some CoffeeScript and I saw the jobless about it admitted I'm like that's really odd javascript and I look deeper I'm like oh wait that's really correct JavaScript that's the way it should be written I've been doing it wrong this whole time let me now ready do that anyways but it just kind of reinforced that but CoffeeScript stops there right it writes good JavaScript for you but there are a lot of things it doesn't do and so there's yet another set of things as web developers and as client-side code becomes more and more popular that we don't have right closure script has a closure reader in it how many of you familiar with the idea of a list breeder or or kind of so what does it do what does that reader let us do it allows us to interact with what kind of what the compiler right so there's that that's that step between you or the text textual reputation of your code and the compiler and the reader sits right in between there and it's what takes the data structures that you the things you tight on this either in your Apple or in the code and converts them to the data structures the compiler takes it in and then compiles so it has a full closure reader so that means right closure data is actually viable as a wire protocol so we can take these data structures that are in closure that our ice-rich set and we can actually just use them instead of JSON or XML kocha data is a lot more powerful than JSON or XML right sorry I see I see a potential question or interjection it is so I am I making a very broad assertion and a very strong statement but I think there are a lot of things I want to pick on Jason when I'm gonna pick on XML XML extensible it is may not maybe not the prettiest to look at but I think there's there's there's a lot more behind XML than there is among JSON have you ever tried to do a schema for JSON and it's an interesting but it's interesting JSON is an expressive enough because what are we representing when we pass JSON data around what is the only thing we can get in JSON listed list and furthermore what what is the data contained in those lists strings that's it we're done we stopped close your data is more powerful than that I can I can assert that and that can be a truth the rest of it is open to interpretation but closure data structures become data structures at least you speak that language right away there is something more powerful there so clocha data is a wire protocol is interesting right we can take I mean and this is assuming either we're using the closure we're something we're admitting quota data structures or we're using closure on the back end but when you turn that into your wire protocol the same data structure instead of you know if you want to return a map as your response you just return a map as your response or set and that's it there's no more there's no communication there's no what about what did I mean what really mean the our glue code becomes these data structures and there's there's no there's no ambiguity about it it's what I meant what I meant to give to you right XML and JSON are men there's new languages right part of becoming hopelessly polyglot is that we have to find a way to talk between all these systems and this idea gives us the ability to kind of say no this is what I really meant I really really meant that I didn't mean this representation of that I meant this now we need polyglot right we need we need a glue language JSON and XML haven't been fantastic and if you aren't using closure than sure there might be different ways to approach the problem but it introduces the new concepts and I don't think it's unique to closure but I think the closure script has unique advantage here right now in this space but there's a couple hidden gems and something that makes closure scripted very interesting especially in the mobile space this is Google closure this is nice and confusing huh so yeah closure with ask Google Google's closure it's a really interesting JavaScript library but the most interesting part about it is it actually is compiler have anybody looked at the advanced compiler it is amazing it is actually one of the coolest pieces of tech out there and the fact that given it just for free I mean people I would paid I would pay lots of money for this thing the tree shaking the the code elimination the evaluation it is amazing what it can do so culture script emits JavaScript in the style that Google's advanced compiler actually can can shake all the way out so what we end up with is emitting a bunch of JavaScript and then it just reduces it down so the whole entire language the closure language gets compiled to a JavaScript file and then your code gets compiled to JavaScript file because it combines it all evaluates it all finds out what you did or didn't need and then only spits out when you absolutely have to have it on the program and then minify zip not other stuff could do anyways so a full closure script program when it's compiled and then gzip could be like 30k let's include the entire closure like closure script language inside of matter so makes an interesting mobile target because I mean right now we have broadband on our desktops are powerful and then you know you just you throw like five minutes of JavaScript and they use it without even thinking about it but when you get to a mobile device that's to become a little bit trickier and we have to be able to do kind of the deal with that and so a lot of these JavaScript libraries are gonna become too cumbersome to use on mobile devices there was a question in the back we're talking about kind of a nice serializable format with extra information including things like this is the advanced compilation stuff doesn't include any of that that's meant to be production system I'm not going to ask any questions about it it is very very to the point it evaluates to what it needs to you let's say if you have a function a JavaScript function that says has basically an if branch and ultimately if you evaluate it returns 40 see what Google closures advanced compositor do is say function returned 40 seen it more when you generate the when when the script generates the JavaScript so it does not give you a stock information yet so that might come along closure script has it was released in July this last year and so it's very very very new very very alpha at this point so but I think a lot of those things will come along and it needs to be able to play very well with JavaScript and that's the end that's the end state anyways so it wouldn't be I wouldn't be surprised if that came along but the fact that it works with the advanced compiler is amazing it takes a giant gnome out to generate a code if you were to generate an app and one file you might have eleven thousand lines of code before you know it but what it's all shaking out its might be you know 100 all ice and compressed there's something even more something more interesting and something more relevant to the Lisp world but I think it's something that if you haven't played with it before it's really amazing and somebody talked about today having the environment with you all the time you know you didn't do you don't just modify a program you actually modify the running environment and you're gonna work that way it's the repple the browsers are connected repple if four acts for instance so closure has a ripple most let's have our apple and so we actually have something similar to this with developer tools right with Firebug or with the Google the chrome come developer tools we have an apple right we have an eval print loop we can type in and we can watch things happen and and because if we can kind of do kind of live coding and and you can change things but we have an honest-to-god repple with kosher script and can actually connected to the browser and I actually it's really hard to explain but it's really really impressive to show off so I'm just gonna show it to you guys so I'm gonna start my web app up here and I'm gonna start a closure repple and what we're gonna do is actually modify the screen here just a little bit try to make this just a little bit bigger so what I have here is closure script code on the bottom right let me bump it up once not so right here I'm saying I want to connect my repple I'll show you the JavaScript that I admits in a minute it's actually not that interesting but what I'm gonna do is launch a close your script repple now somebody sent my closure repple into a closure script ripple down at the bottom here I have the my grapple has been transformed into this closure script ripple when I reload my page here my browser's not gonna be connected to that repple so if I type something in to the repple let's say + 1 + 3 so Florian surcharge what actually happened was that evaluated on the browser and came back now to prove I have nothing my sleeves here let's do something more interesting I'm interacting with my browser via my closure script Apple and I can develop him this way I can write my code this way so I can interact with the page let me set up an environment here where I'll pull up a couple things in and let's append something to the Dom so we did was we grab we say Dom opens grab me the shat form which is just the wrapper around this little form here and append hello to the end of it more importantly I have to want to do things when stuff happens so let's say I'm gonna wire up at a listener and say when I click on that that's that shot button and do something in this case I'm going to say a.j is alert but it's good I'm gonna pass in a function I say when this happens run this function so now when I click it I have that and just like anything else i refresh this page all those changes go away and I'm back to normal if I could click the button again you know we're out I'd have to save this and compile it and run it and all that stuff over again but I have this ripple and I can just you know something happens I can refresh my page and thought over so again if we wire that up we're back to where we were before so this is a really important step when you're writing Java scripts what is your workflow like what do you do right you write your Java scripts you switch over to your browser if you refresh your page you figure out whether it works you might open up your Ella / tools and type in sums up and it didn't work and you have this cycle back and forth and what you're doing is disconnected right you don't have a you're not you're not at the level of the browser you're not you're not there interacting with it so what you get is something much more interesting than this and it's this live environment this notion of I'm actually modifying what's happening in my environment right now instead of doing something and asking the question of it this has been around the list of this idea has been around list forever and it's small talk especially as well small talk is a wonderful environment you modify and these concepts are great when you transfer them to a new medium and the browser connects ripple is is that new kind of way of doing it it is very complex there's a lot of stuff going on and I am the last person that's going to be able to explain it all some of my colleagues or elements are actually the ones who wrote it and it's really interesting what happens the code is really interesting if you're interested you I should encourage you go read it but it uses a lot of Google closures cross cross sites are similar to policy manipulation stuff to basically make your browser a server and kind of post connections of both ends one to the and I guess kind of n state in the browser and one in your repple it's actually kind of running a server behind the scenes good question not yet that is totally in the pipeline now being able to do let's say Internet Explorer Chrome Safari Firefox have seven or eight browsers open all attached to the same thing hitting a button and watching it happen at once that is absolutely the pipeline that doesn't you can't do it quite yet but yes absolutely it is something that is being experimented with right now and that would be an amazing way to do this you know how do you test everything at once well you just test it all at once you connect didn't go so certainly on the table so what I want to do is kind of show you what a typical app might look like so I want to show you the app that I have here this little demo thing there's not much to it but and then I'll kind of show you a more not not much more advanced there's a little bit more advanced and I'll talk to you about a kind of way to deploy your your web base closure code in a minute to you so let's go to this here and I'll make this bigger so it's a little bit easier to see so this is a web framework called Noir and this is kind of the second abstraction on top of ring it's there's bring composer than Noir is built and composure that gives you a few more creature comforts in particular these macros def page instead of defining your routes in a route section you just define these functions and they have your routes and then you define what you're going to return so the same idea I used to take up if I wanted to define a post I could say you know I might say post like that and so on there's plenty of ways to to deal with this but ultimately it's an another step in evolution here and so the author of this library Noir also run a library for coders couldcould Pinot Pinot Noir and it is a cloture script library that uses the same ideas and macros but it extends the idea of closures data as a wire protocol even further it has an idea called remoting and what you actually do is call the functions like you would in closure you don't actually set up an AJAX call and and and do the response and everything you actually just call the call the function as if it was a closure function you had in your library all together there's no disconnect you literally just write closure code and it sets up all the transfers for you along the way so what would you end up is a really cool way of just writing your code and forgetting about what's happening um and so some people might cringe oh that too you might want more control over it and at that point you should just use the standard controls but if you want to kind of eliminate that idea or let me get the overhead of doing that you can and so there's interesting stuff there but I'll pull up another app here let's example something I did for Heroku it was really go through oku they're kind of they're a their hosting company but they're they kind of they resell Amazon ec2 instances but they make it just drop dead simple to do your deployments so you want to go to production with an app you just check in code and it knows what it is it realizes oh yeah you checked in a ruby app or a rails app or close your app let me deploy that for you and resolves the dependencies and it deploys the app and when your servers get to slow you say web-scale 10 and it boots up 10 servers and now you have the ability 10 servers it's a really interesting manage platform I have no affiliation with ROP I'm not that's not a sales pitch I just actually really like what they do that's really interesting and so I did an article for them about how to build a closer web app and deploy to Heroku this is actually that app so it is a nice little toy ok I guess but the idea is you type things in and out comes the you know the uppercase version of that thing it's not much but it involves a database it involves the kind of the general things you do in a web app and it actually uses just composure on the backend so it's more of a building from the small pieces of the small abstractions and when we get into it you'll see a similar structure and let's look at the controller here we see our rats you know again at slash and a post-it slash and just to small things right when we have of it an index give me all the all the shouts and when we want to create something go ahead and and create it so when it's not blank and whatnot all these things you want to do go ahead and create it and similarly in our models they define what my database connection looks like and I might define it in a different place if I want to have lots of models but just so you get the idea I divide it here here just says get returned me everything and then create says insert values something interesting you can do is actually pass closure maps to the data to the data structure kay this is just it's called Java JDBC it's a closure can strip line bury what you can do is actually just get a closure Maps and as long as the maps line up with the things that database it just throws them in there you don't have to do any additional things so you could have basically a set of maps a set of a hundred map and so here those on database for me and shove them along it'll go ahead and marshal that out for you so there's interesting abstractions in some of the contributors and this is actually the the next abstraction away this is just the wraparound JDBC for closure the same guy that did Pinot and Noir that a library called sequel Karma I'm just called karma and it's in even better abstraction it's it's a wonderful way of talking about on your data and so he defined he has the nice declarative kind of style of like has many and belongs to and it kind of creates entities that way and lets you select multiple things and kind of you can control the amount of magic you want so you can kind of insert yourself where you want the super control or just let the abstraction to handle everything so it's kind of evolved in really interesting ways and one of you is say a couple questions about things you have here and then dive into the JavaScript that just generated my closure scripts because it might be interesting to see what happens on the other side kind of what happens on the other side of the sausage grinder so let's talk about this part we'll have some questions and then we can move on to the JavaScript piece if we end up with more questions then we can cut the JavaScript piece and I can show you something else but I would love to get into it if we can so questions so I know terrific examples I'm not supportive either but we use Jas and you referenced alert yeah that's right that's the that just like yes it's like the window what is saying is I actually want to invoke this javascript thing um so there are some things in JavaScript like console.log an alert and things are just kind of part of JavaScript and I just that just kind of giving me a window to invoke it it's saying just call alert and you all show you under the hood what happens when when you say that and what compile to you and then it says follow-up to that is there you had some references to like get element those are I guess those are part of the yeah so not exactly let me make that a little bit bigger here so what I actually did here was I pulled in closer to that Dom and so what I did here is there's there's actually a wrapper called error function I'll get it all in it's just a wrapper among gube Dom which is Google closures Dom library so there are some things that are a little more cumbersome to use directly and so this is just a wrapper that says I'm gonna make it a little bit easier a little bit more closure like to consume this particular thing does yes and actually you'll find a preference for using Google closure library to do JavaScript enclosure scripts because it emits sane enough JavaScript that Google's advanced compiler can then just shake it out its library and it's very misunderstood because what happens is you end up with a ton of JavaScript I mean the reason the advanced compilers around is because you end up with like five Meg's of JavaScript and that's insane and you wouldn't put that in production but the advanced compiler says okay great what do we need out of that and we'll shave it down into something that's production worthy and so a lot of people misunderstood it and originally I said wait why would I ever want that much JavaScript it's like fine include the whole thing use the advanced and Pilar and shake out what you need so if you try closure script and first see that you'll go oh my god that's so much JavaScript groaneth events compiler and you'll see the difference you don't use any external you absolutely can you can definitely use external javascript libraries one of the biggest arguments is I can't use jQuery with closer scripts yeah they're all yours yeah and so there there's definitely some Interop concerns the biggest interrupts concern is what happens what kind of what is this what is the style of JavaScript is written in jQuery for instance Google's advanced compiler cannot shake out it's written in a style that just doesn't really rock so you don't get the advanced compiler benefits with jQuery it won't shake it out but you can absolutely use it there's really there's no no there's no gaps here there's no I can't use the X or Y if the JavaScript library you can consume it yeah yeah yeah jQuery style is yeah Jake where style was interesting the library itself would consume ability of the library is is pretty incredible a lot of people will switch to jQuery and and I quite like jQuery but I've found it not necessary anymore after I had closure scripts and there's actually additional closure skip libraries being developed right now by one another why colleagues at relevant flute band of Hearts doing a jQuery like closure script library kind of gives you those Dom manipulation libraries or functions you've missed or or might miss if you had jQuery so kind of kind of giving you a little bit more power there what about asynchronous events in the browser you said Pinot Noir or whatever you can call functions it sounded like you call them synchronously or behave synchronously like are there abstractions in close your script to deal with pipelining like you're loading something from one URL as part of the page another URL other part absolutely Google Google closure library has a lot stuff in it and you just turn to the Google closure library to solve those problems they've done a really interesting set up stuff there and from what I've seen it's a look it's actually quite a bit more advanced than everything else out there it's just a little bit more cumbersome to use so there's there's more there's more power there's also more more like more baggage it does absolutely not a whole lot so let me let's do this I'll show you what it turns into so it's [Music] so we returned a map for this function and then we'll go ahead and compile it and I'm gonna compile it with no advance compilation you'll see you'll see just the regular JavaScript the Close Grip admits this way it's a little bit easier to do crack the advanced compilation was just pretty pretty nasty to sift through any one of the comments before has generated JavaScript can be hard to compile or I mean hard to understand so what you see out of this is a function called Q cannot views that welcome Q Khan so what you actually noticed here is namespacing you actually eliminate the global namespace not in JavaScript but you actually have names visibility here when you define these packages you have a way to your namespace things which is actually kind of pain in the ass in JavaScript the global namespace thing can get you but what it is return a function and it returns something all clj s scored object map and so basically these data structures are defines or admits the JavaScript Karma plans the instructions are just built in JavaScript JavaScript can do all these things haven't been built that way so c l-- j ask or the compiler and the other underlying things implement these data structures in javascript not in JavaScript directly budget enclosure script the whole thing's basically self-hosted it says its closure in closure or very very close to that so what you see here is this weird little square which basically there's there's kind of a delineation of what's happening and it's kind of more of a token and this is what happens is what gets returned so we say this object map from objects and then the data that we pass in here so does that help a little bit okay browser JavaScript HTML button yeah absolutely yeah this stuff could all work with you know back in services as well um I mean traditionally there's some kind of web server that you communicate with the the socket stuff in JavaScript really isn't there so I'm talking about directly connecting to a socket image the whole web sockets thing you saw you're talking I mean like an interoperate between C++ or from a browser to a web service on down to a desktop application oh you mean kind of like the like the embedded browser kind of apps yeah and so interesting side effect of this is also that nodejs which is kind of the server side javascript thing and more importantly v8 closures could operate with these as well so if you're looking for script ability you're looking for which kind of limit of the JVM startup time you can use close your scripts and node and then you have nice quick scripts written in closure there's other things to write if you wanted to write a C or you had kind of a C light heavy library v8 is very very nice and you can link the NCBA when you're compiling stuff soon actually right kind of cross-platform C code using closure script in v8 because you can link against it so there's actually a whole bunch of additional benefits the closure scripts when it comes down to v8 and node other things that were kind of on the edges but have people started using it that way I'm just curious you know how does the compiler start to build up over time and take more time away from that cycle and then as it scales like what would be the story that I might say the management for example to say well you know because so you actually have a tight cycle at compile time - it's a little bit different so you can actually interrupt on-the-fly compile your closure scripts there's functions that do that there's a build function just spits out close your script you wouldn't use the advanced compiler in development mode gives you you want to debug it so you wouldn't have an additional time of Google's advanced compiler so at the moment you're only using the closure script compiler which is a very small thing that just uses right now and in its JavaScript there's not a ton of overhead here the more code you write obviously take longer but there's not a there's not a lot of compile time there additionally there's whoa what Casteel just watch basically a little script you run in the background every time you save a file just real recompile your JavaScript at save so you can do it from the repple it's not it's not doing the so what it will do is when your one file is say it'll recompile that one file or if you have the addition authorizations turned on there simple which says make it all one file and there's advanced which may make it all go on file and do the nice advanced evaluation entry shaking depending on the level of optimizations you put in it will take longer if you turn them all off you just get that one file recompile because you're just just the one file it'd be like saving the one file and basically what sealed a swatch does is keep a JVM instance running so you don't have that spin up cost so it's just the amount of time it would take the closure compiler to spit out the JavaScript which is not that long it's it's pretty pretty trivial but in the end you're absolutely right that's going to get bigger and it will take longer to compile I think that's true of any system anyways and I think that in the people our JavaScript library or large JavaScript application you're going to want to package it some way you're in the end you'll still have to compile it to production you wouldn't want to ship that the way it is in particularly what are you like you want like the kind of a pitch to management of why I would use closure scripts right now or yeah so for example right now they have all the tools for doing no static code inspection and you know having obviously there's you know testing here these sorts of things so and and I come from an area where you know they're just getting water so right now is it just a paradigm shift is there it's it's absolutely a shift right now that the shift in productivity and expressiveness and corrects JavaScript I think the most important thing is correct JavaScript we do so many awful things the name of writing JavaScript it and such bad JavaScript comes out the other side I think the most important takeaway here is either really double down and learn JavaScript or find a way to emit JavaScript that actually will run the way you think it will and not without all these little edge cases that can I come out the other side which is to say if you really learn JavaScript that's fantastic I think there's just some additional things you can ride but CoffeeScript can help you with that just writing good JavaScript piece as well I think or my right now I actually i don't think i'd recommend closure in production at this point they're coming closer script so i closure I would recommend infection close your script I think it's tilt in you this is a new idea it's still being shaken out I think the browser Apple is a really interesting way to write code in the client-side but I actually think right now for production you can there are people doing here right now in production I think there's still a lot of rough edges if you're if you're out a big team and you have a lot of people who aren't interested in doing this on their off time and hacking and and then kind of improving what's happening in the ecosystem I don't think it's a good idea because there are still enough rough edges and and lack of creature comforts that would be distracting if you have a team of people who just want to like just tear through it because they see advantages that's cool but I think it's a different a different set of people who would take close get in production right now and actually succeed I think once those rough edges get worked out then absolutely all bets are often and and continue on but if it's one of those things we have to saw the management I think you're probably safer in the CoffeeScript world at this point or something like that that right job is good for you what about the butter support one question the second question is you've probably talked about that what is the minimal runtime that needs to be in the browser another you know the fourth-floor script the world so first about debug ability this is one of the refuge's still there's still a lot of things to be worked out in debugging closure script and that's absolutely one of the by the the roughest edges at the moment as far as run time just a browser I mean I'm not sure it's it's just JavaScript no there's no additional dependencies it's just JavaScript the point is the dependencies are on the developers machine not on the clients machine the dependencies for developing closure script it's the JVM it uses Java because uses closure yeah on the browser there's no additional things required it's just JavaScript and it's the idea that javascript is part of the way we're going we wouldn't want additional dependencies that would kind of ruin the idea of of leveraging JavaScript designers as fast as enemies is concerned is the imperative of knowledge which is how's I that kitchen oven is for companies this new structure is basically how because we provided and this is more of a closure on the web question than closest critic Euler's how do you how do you work with designers so there are lots of different ways there's a library called end live which is actually just HTML you ready HTML the designer HTML and CSS and what you can do is in your code you have CSS selectors I think it's kind of that's the idea there and you just say select this element and replace it with this code and so your code will take the template and just throw things inside of it so they provide the structure and you provide the the back end the back end server side generate HTML and so that's an easier way of working with designers because they work in their native language you work in yours and that the other side is a nice common ground and they can say yeah this CSS selector will give you this elements and they can give you a nice little divide however at relevance we actually had our designer you take up a little bit and he's picked up really fast he just just saw right into it without too much question you know your mileage may vary I don't know there's also other things that are coming all the lines Hamill is actually been one of the things that designers have adopted quite a bit now Hamill is kind of a middle mole CSS you kind of view it's super more white space based template language our designer in Pickler has just picked that up and and he that's what has been his favorite things and I mean I've even contemplated writing amble partial for closure because I think there's there's power there I think whatever empowers your designer is actually what you should use and there's options enclosure for basically all of it what do you wanna stick with HTML or go something a little more powerful or a little bit more abstract I think whatever your powers your designer is the right choice and I you just have to kind of feel that out I wouldn't default to plain HTML I think there's a lot of things you can gain out of using additional tools but obviously what your designers comfortable with it's really the best the best choice because you don't want them to be angry about something you forced on them because then you know bad things happen it's you know happy people make better environments so make them happy but also make them productive I have just a couple more minutes other questions well when I'll put the code which codes not money so in the back I would just use closure closure has more production ready platform there's more development time there for production code closures absolutely ready there's nothing I would you know say bad about that coach our script besides a little bit to go and I mean I would run that out I would use that to write client-side browser code and that would be kind of where I stopped there's other edges there if you want to do scripting with nodejs and things you can do that kind of stuff there but if you're looking at back-end server side code I would absolutely say in a production system closure it would be where I would make the divide aside you closure their closure scrip for the browser much more now assume that you have the language before throws like JavaScript on font and and no chess but now the question comes from their sovereignty what we're not put well until your same language involved and both sides we're developers they get confused about whether they notice something that's going to be in the browser officer kind of yeah that's kind of it it's not fun kind of so is it a packaging thing for example so you have you make sure that people know where the car is gonna run so I mean in this particular instance there were steel Draper's to see ljs the extension of the file is you say see the s files are gonna get picked up by the closure script compiler says a files will be picked up by the closure compiler and that's where the difference ends you could package it differently you can do different folders that's kind of up to your I guess up to your team I mean with GWT gear a little bit more kind of boxed with this it's it's however you want to place it out so you might have two folders clj and clas in your app and code it gets rather the browser goes here code the gets run on the server goes here you can do it however you like but if you intermingled all the files like I did in my example the separate compilers will pick up the right thing and just go there won't be you don't have to think about it oh absolutely so closure has complete and full Java interact so anything that Java can do closure can also do and the Interop is is very concise it's very neat it exposes a little bit of the java ism and in java but at an advantage it doesn't have the additional layers like some of the other jvm languages do that tried to proxy and produce new methods and new ways of Interop it's either very direct Interop and you'll see enclosure code alot you'll you won't see a lot of rappers you'll see a lot of just direct job ran around when it makes sense so you can do a complete and fold java Interop which gives you all of the you know TCP layer Interop and everything that comes with java and all the libraries Java libraries that you had so if you have an existing Java system you can pull in all of your libraries you've written it just you know and anything that's that's there is consumable by closure not closed your script obviously but but my closure my then that's it that's 11:35 so thank you very much [Applause]

from infoq