SF Scala Haoyi Li 2 27 14

okay hello everyone so this presentation is titled live coding in scala js my name is howie who am i i work at dropbox writing python during the day so if anyone here is looking for a python job or wants to come work at dropbox it's a cool place and come look me up after the presentation on the side i write scala and i've been writing using scala js since about last october i don't do most of the core work on the compiler and the runtime that is done by these two guys sebastian and tobias but i'm the one who sends in all the tickets when things break because i've been the one who's been pushing scala js most to its limits so what is scala js scala js is a scala to javascript compiler so you take in scala code you compile it to javascript you dump it in chrome chrome runs it you have a website you have a web game you have what whatever you want to build that works in the browser and basically the whole of scala works so there's a cache there's a little star there to say that's not quite true but i'll go into that in a moment so basically it look the transformation more or less looks like this where you take in um scar code that's what's shown on top and you output javascript code this is what's shown at the bottom can you see the mouse yes you can see the mouse so you can see that for example the main object becomes a main dollar class which is kind of like what you see in java the method main becomes a prototype method over here it takes in an array of strings with returns a void all this is stuff to handle java's um method overloading so this doesn't do anything it just runs and exits but i'll show you some stuff that actually does do something so the first live demo tonight is called scar js games so this was the first set of projects i made using scala js and which is a set of six games that are written in scala for example here's asteroids you can run around shooting things and if you crash into something you'll die let's even crash into something there you go i died you have snake well so what's interesting about this is that all this is written using scala and if you look at what's inside the application let's say i really no i don't want to bring up the network panel um go into apply let's say i reload this you can see that the optimized blobs from all these games is why didn't tell me why isn't it telling me how big the blobs are from cache well if i control shift r it won't do it from cache well here you go the games are about 300 kilobytes of javascript so if you look at what's actually inside this i'm not sure if you can see it's like it's minified by the google closure compiler so it's not really readable so this is what you can build using scala js so back to the slides so one question people ask is like why do you want scala js well one question i would ask people here is that who here likes scala is anyone here i'm sure lots of people here like scala because it's a scala meetup but who here likes javascript okay so there's some people that hands up some people meh some people yeah some people don't really like it and these are quotes i grabbed from the various scala mailing lists i can't remember who said which one but yeah i didn't interview anyone these things said spontaneously on the internet and this basically sums it up completely like people like scala people like writing programs in scala people sometimes hate writing programs in javascript for a bunch of reasons and prefer writing them in scala but when you're writing stuff in a browser making a website making a web game making a web app like like a dropbox website or facebook you can't write it in scala because skype runs on the on the jvm and don't have a jvm in the browser but if you can compile scala to javascript you can write scala in the browser and you no longer have to muck around with crazy things like the javascript inheritance model javascript scoping javascripts this scoping all those things are solved if you just write the program in scala and the compiler will take care of all the craziness for you so how does it work basically you have a scala compiler it takes in a bunch of scala files it spits out a bunch of class files at the end scala js is a compiler plugin so it cuts in just about maybe two thirds way through the scala compiler and takes a simplified scala ast and turns into a bunch of javascript files instead of turning into java byte code so these are then bundled into a few bigger javascript files which then go through the google closure compiler which is a javascript optimizer kind of like proguard but for javascript which does a bunch of optimization to turn into a few very small javascript files which can then include on the web page so some more details the class files aren't used um and the google closure compiler does a lot of actually very advanced and very aggressive optimizations like dead code elimination what's often called tree shaking in order to remove all the unnecessary code from the program so what scar js started about la was first announced last june at scala days by sebastian the hello world was about 16 megabytes of javascript that is a lot of javascript to load on the page here's the here's a demo he showed off this is written using scala it is quite cute um i will show you how does this work yeah so that's reversi i will show you some more demos later which are also very cute by august we had it down to a smaller to a smaller bundle of javascript still took a while to recruit to reload and recompile the application by october it was even smaller i made the games that i showed you um someone managed to compile scala z to javascript everything worked the whole test suite passed um in november i made roll which is another game which i'll show you in a moment probably one of the larger applications have been made using scala js so far and you're down to 400 kilobytes december we finally have a test suite we have a we have one small cross-platform game i can show you here um let's see where is the online demo so this is a game that works both on javafx and on the browser which is quite cool because that's the point of what skylar js is for so you can play with it it's not that fun it's kind of difficult so next where we are today now you can see the progress we've made from 16 megabytes it's down to 300 kilobytes the compile edit compile reload cycles about one second which is pretty nice the whole the scala test suite passes with except for the things which are specifically java like threads or um parallelism or system dot exec i have a bunch of cross-platform libraries which i made one templating library one change propagation library one unit test library and a to-do mvc example i'll show you later so here's the next demo i'm going to show you this is roller which is a game i made last november it is also written in scala i'm not sure whether what you think about that so it runs in the browser this is hosted on um github pages but the goal is to take your ball roll left or right you can draw things on the screen using your mouse which will allow you to like climb over things for example that's quite hard okay that doesn't let me get to the target and the goal is naturally to get to the thing that's labeled goal which is kind of obvious and this whole thing's written in scholar first level is easy the next levels are pretty difficult there are a few levels so far not a lot of them but it's work in progress but so what does it mean to be written in scala so the physics is using a javascript library and if i go to let's go to lee howie. no that's wrong um github.com lee howie role so this is the source source code of the project so for example if you look at the scala code let's say we want to look at where the clouds are implemented because those clouds did not appear there on their own i had to put them there and i had to make them move so the clouds were implemented here this is clouds.scala it is a class which does some things for example over here it draws on the html5 canvas drawing a bunch of cloud images which are these svg images which i have in the folder every time you update the clouds move there is this little modulo sign so when the clouds go too far to one side they'll reappear on the other side so all this is written in scala and i can show you the rest for example here are the lasers which go forward until they hit something and if you touch the laser you die here you are see so if the if the result of the lasers like collision is the player's body you kill the player so this is basically the source code for this game for role sorry go ahead library you're writing to or calling to do the rendering on the canvas um the standard dom library it is i can show you so the rendering on the canvas should happen well i actually did show you the rendering on canvas is this guy a canvas rendering context 2d which hap which is this canvas i can't type yeah this guy so i'm just literally calling jaw image on this person i think this guy has a jaw image no this is his prototype has a jaw image yeah that's the nice thing here yes so it is a javascript library and it it is the javascript canvas library i did not install it i did not add it to a download it is this function you see here in javascript which i'm calling from scala calling it from scala looks like that which is actually very nice the ff this is what i call ffi the foreign function interface the call into javascript is very simple and easy to use apart from rendering the physics is done with a physics library called chipmunk.js so for that i had to write my own um foreign function interface which is basically a bunch of stubs let me get rid of this of functions that you can use to that each correspond to one chipmunk.js javascript object or javascript class so for example i have the vector the chipmunk.js vector chipmunt.js bb sends for bounding box i have a chipmunk.js shapes and now once i've defined these facades i can i can use them really simply like for example if i look here um which things on this piece of code are javascript objects and which ones are scalar objects it's actually pretty hard to tell so cp.vect is a javascript type um scala scala cp.space is a chipmunk js physics space which is what they use for the physical simulation um the rest is mostly scala dom dot btoa some of you may remember that as a basic c4 translator it's a javascript javascript function this which is this one b t o a yeah this guy so the graphics is just javascript graphics drawing circles and shapes logic is mostly scala the physics is in javascript so that's kind of the things you can do with scala js this application is a few thousand like a few thousand lines of javascript about 2000 lines of scala and a few hundred lines of xml which defines the defines the level layout so if you look at bundle yeah so these are the levels each one written as xml file using adobe illustrator so you draw them out to illustrate and import them and you have a piece of code which runs through and turns them into chipmunk objects so that's a bit too much detail for now all of you look very lost um so back to the presentation so the next thing is basically some live coding so now i'm going to show you how to actually make a scar js application from scratch so it's going to be quite intense so you have to ask if you interrupt me of their questions and if someone could keep the time and interrupt me 20 minutes in that would be great volunteers sure well you wanna keep time for me uh so i'm gonna sit down because typing standing up is hard so let's move the browser to one side and let's look at what we have over here this is a page which doesn't show anything because it's broken and this is a scala js application over here so this is one of the skeleton applications which i which i put on github so to use this application let's see what branch i am now i'm currently in master i say i tell svg to package.js so this will take a few moments package.js is what turns the huge mass of small javascript files into a small number of larger javascript files that you can open up in the browser without having a million script tags oh well there's nothing important down there up there so the top is just the item top bar i don't know if you really want to see that so so you can see it's pack it's packaging a bunch of javascript into a few files it's taking a while but when it's done which will happen any moment now i will be able to open this in the browser and show you a simple example yes you would um for jquery one is already written for other libraries like chip angular you'd have to write your own like chipmunk.js i had to write my own it's a few dozen lines of code it's not terrible basically every class every javascript class needs a corresponding scholar class and every javascript method needs a corresponding scalar method which has a question mark question mark question mark value okay so it's done packaging now so let's see if i can open this up in the browser and see it work so i don't know if any of you recognize this code but this code is a algorithm that generates serpent ski triangles basically you start off with three corners of the grid and every step you pick a random corner and you take your current position and move it to a point halfway between you and the random corner and then you draw a spot there in this case i mean the spot's nicely colored sorry over here so now we get that so in this biggest simplistic triangle so some of you may notice this workbench thing this is a handy tool i made that lets you do live reloading the browser and lets you get sp sbt log spam in the browser so you don't need to keep looking at a terminal so enough talking let's say i want to make this quite um let's see what i do this i save it i guess it's compiling compiling it's white yeah um what about the gray background and i want what what if i want to make it go really slowly let's say like that is it compiled it compiled now it's gray and it's really slow let's say i leave a typo in the program what happens doesn't compile so this is kind of what the experience of making stuff in scala gs is like and now i'm going to make a game for you so i'm going to leave this some of this scaffolding well i don't i don't i don't really want this for loop anymore so i'm just going to get rid of it i do want to fill the canvas let's say i fill the canvas first i need so first i need a reference to canvas so this is a bunch of code that says document.getelementbyid people already know what that is i think at least those who know javascript because the javascript dom is untyped i have to cast it to a html canvas element which then has a get context method um all these guys are statically typed because i have we have written the foreign function interface to all the common javascript functions in the most browsers so you actually get quite a handy intellij autocomplete in the editor and again because javascript is not typed after cast into a canvas rendering context 2d before i can continue using it so let's say i take instead of getting the rendering context directly i get a canvas which i then use to get the rendering context so make this let's make this look pretty let's make that look pretty inconsistent that's okay let's say i want to make the canvas black too as a background and let's say i want to get rid of this loop which is not interesting so let's let this reload a bit what happened nothing happened why did nothing happen because i'm only filling the top because i'm only filling the top right corner of the canvas i actually know it because i'm not calling the clear method which is what actually feels the canvas blacks okay so now canvas is black let's say i want to make the canvas the height and width of the window so i'm not sure how to get the height and width of the window might be this one i'm not sure so let's ask google javascript get height of viewport so that's because i've clicked this before because i made games before it's document.document.documentelement dot client height i guess width should be the same with so oops there you go fix no why is that wrong client with client with okay so now i'm done with stackover so i don't need him anymore i'm still only filling the top top left corner of the square of the track of the canvas let's set the canvas once because i don't need to keep setting the height of the same object of the same object and let's say i fill the rectangle to canvas dot width is comes first and canvas dot height so yeah now it's filled the whole thing so now i have a black canvas so questions what do we want to make with the black canvas and does anyone have any ideas what they want me to make with a black canvas no one has okay yellow triangle so let's see to make a little triangle i would say i need to use a javascript path things so i need to do context stop move to let's say i want to move to 100 100 context dots let's say line to 200 100 these numbers are pretty arbitrary and after that and you call context dots see so cleverly compiled but it's not still not doing anything let's say contact context.fail so what should this do this should probably do nothing because it's still filling it as black but if i then turn it to yellow i now have a yellow triangle yay so let's do something more interesting let's make the yellow triangle move around when i when i move my when i use a keyboard so in order to make it move let's get rid of these things i used to need i don't need anymore let's reuse this variable p i had let's call it player let's make the player live in the middle of the screen i'll start in the middle of the screen oops what am i doing scanverse.height over 2 why is it complaining it's complaining because it's like is it any point is declared as in but canvas.width is a number which is a double because javascript numbers are double so i'll just make this guy take doubles and that should do the right thing so compilation failed why did my compilation fail oh this this guy is missing there we go um but this is not quite what i want right i want to make the want to make the yellow triangle be drawn where my player is so let's say do that that's that's not that looks okay looks a bit strange um let's say one keyboard input dom dot add event listener i guess let's use on key down so equals what is what what is dom the on key down well it's event handler for the property of for keyboard down events it takes a function one keyboard event to any um so let's say i take this take e which is a keyboard event let's call it dom dot keyboard event just so it's easy to see the javascript thing that i'm talking about here um so it's complaining for some strange reason i need to do so it's complaining because using an old version of the library so if i update this to the new version of the library it will stop complaining so let's tell it to do that and it should stop complaining um bro i need to i need to tell intellij to take note of it too so i don't know how many of you use it the svt intellij plugin is great um so this will take a moment while it's no i don't need the dictionary while it's cleaning up and looking at the project and packaging everything so now it's done packaging for intellij let's go back here okay yup see so stop complaining the compilation's not quite done but that's okay um so what do i do on key down let's say i want to pop up with alert box alert 10 nope doesn't work and you say dom dot alert 10 because the global javascript name space for now for here is called dom and why is it complaining now or because i need to do something like this to make it happy okay so if i key down yay 10 10 more annoying than useful so let's say i want to keep track of which keys are down so i can move my character around let's say um val keys down equals collection dot mutable dots what do i want i probably want to set because i want the keys which are currently down dot empty let's say int um so keys down dot e dot key code dot two in because double equals yeah uh i can use html local storage so i can't remember what the api is for html local storage but i'm quite sure i've written the i've written the um ffi i have written the yes you have to and i have already written them i believe so how do i do it i need to get a session storage so in theory if i say dom dot session storage auto complete there we go yeah so it will work it will translate to what you expect so um where was my example my example was here so i it's a set so i should add it on key up i should remove it um let's refresh this because it appears have gone to a weird state okay so that still should not do anything if i cons dom dot console.log keys down and you tell to make a string because otherwise because it asks for string so 37 is left the 9 is right 38 30 40. so that's how that's how user input works so if i say um if dom dot i don't dom i want to say if keys down um what was it 37 not sure oh it's complication error player.x equals player.x plus points is that's what's called points um left should be negative let's say negative one zero so that's 37 39 would be positive one and i think 40 and 38 with the other two so 38 40 0 0 negative 1 1 yes nope uh i why is it complaining yes you're right so i should say i should actually not be trying to assign a new value text i should be assigning a whole new point at least the way i define point is immutable and i need a new whole new one okay so here i am and you can see it's moving very slowly um let's make it go a bit faster because this is pretty slow let's let's increase the frame rate to once every 20 milliseconds at once every 50 milliseconds here we are um that's probably not what you want in the game but you could you could do this in which case let's say i make one of them 100 one of the minus 100 let's make it 10 and let's say 10 plus 10 let's say okay here we are why is it not pairing um that's a good question let's see why it's not clear if you're actually calling here and filling the whole rectangle with black let's see if it actually is calling clear yep so it is calling clear uh i'm probably misusing the dom uh javascript context uh draw polygon i'm probably misusing this somehow i think it's just it's making my polygon larger and larger and i need to call here we are context.begin path there we are so so now we have a thing that can move around um so let's take a short break from the live coding and take a look at what's being done in the back end so if you look at the workbench example app you have it's a normal svt project if you well let's look at the project first it it has a the scalar js plugin it has this workbench plugin which i'm using which is what gives me the log spam in the browser here as well as a live reloading whenever the code changes um it has it has a build sbt file this is a poorly named settings from the workbench plugin which i'm using um these are the statically typed dom facade or ffi classes which i showed you which i showed you earlier for chipmunk if we want we can look at them scala js dom so they are these guys and what they do is that they give you static types for all the various things they could want to do on your brow in the browser on the html dom so if you're wondering where for example if you're wondering where alert came from that probably should be somewhere in here so def alert so this is a f foreign function interface facade which lets us call the javascript alert function with the typesafe wrapper and with nice things like um autocomplete in intellij so that's what the project looks like and we look at the compiled code so in here you see a bunch of class files like i told you earlier the scalar js plugin doesn't doesn't actually stop the class files from being generated but what it also does it generates a bunch of javascript files for example let's open this guy up in sublime text so this is the point class i showed you earlier you can see there's a whole bunch of rubbish we don't care about because it's the case class so it has things like the product arity and product prefix and all that spam um a few more things i probably won't go into them they're not that interesting over here they get packaged into a few big bundles so example.js is all the javascript files from this project concatenated together so the point class the sky js example class scala js example dollar point dollar for the companion object of the point class internal dependencies is for sub projects this one has no sub projects external dependencies is for external project dependencies so this includes the things such as our nice scala standard library which is what makes the external dependencies javascript thing 23 megabytes of javascript so if you if sublime text is nice enough to let me open this i think it's not going to let's let's open it here um film target scala 2.10 example external dependencies at javascript sorry i don't have syntax highlighting here turned on but we just like leave through you can see things like um what's interesting what's interesting here i don't know what's interesting in our collections library uh what yeah here's the here's the scala implementation of the class tags compile javascript class manifests um let's see if you can find anything useful scar dot concurrent duration that's a new thing in scale 2.10 here it is all compiled to javascript um you can see the code is extremely ugly and long but it gets compiled down to by google it gets compressed by google closure compiler which is why in the end the game is only 200 kilobytes while here's 23 megabytes so that's more that's what the code looks like let's look let's go look back at our example again and let's say we want to see the code for um here let's say so this is a mix of a some scalar function called some javascript function called the javascript assignment and some scada operations so i'm going to open it in intellij just because that'll make things easier for me so let's move this over and take this this guy is in what scala js example so the sky jx example dollar javascript file and let's just use a let's just compare it so this code here compiles down to this code here so again you can see it's extremely verbose and kind of hard to read but it basically tells you exactly what's what it does so here i call a method called clear which has a return type of void again i have to put the return type in the method signature in the methods just because in java is part of the signature it calls a bunch of methods on the contact canvas rendering context to the reason it's using strings to call them is implementation detail because that that allows it to not get renamed by the google closure compiler which does variable renaming over here is a bunch of if statements which correspond to the if statements here addition corresponds to this edition here you can see it's kind of ugly because this edition is not really addition it's actually it's actually a function call with the a function call with a dollar plus name which some of you may already know from what's itself in java um so this is basically how the code transformation looks so let's go back to the game let's what uh yup so now it's 20 minutes okay cool so i'll keep going with the application for another 10-15 minutes just because so i gave you a chance to look at what actually what what it's like working with this guy yeah we have plenty of time i have the whole hour anyway so let's say i want to make this guy shoot things well how do i make it shoot things i need a way to represent the things i'm shooting so let's keep the things i'm shooting as a list let's call them shots equals list or empty of points so it's going to be a variable of an immutable list let's let's say i want to shoot when i press spacebar i need to figure first i need to figure out how to make what space bar is so let's just print out what these key codes are and i'm going to press space bar after it reloads oops i forgot to tell it too but it has to reload i don't need i don't need to clean now because it's compiled with the right stuff so let's let the sbt turn away a bit and okay compiled ready to go over here it says it's connected so actually no it's not connected well it will be soon yeah um okay sure so let's dump this game then because i guess you guys already know how it's going to work and let's open up another project i have no but it's okay so let's open up so i don't have any example that uses futures but i can show you example using normal ajax okay so let's move to scala scala that's what i have a bunch of branches here some of which contain interesting things so please commit your changes ah let's kill everything this is actually based on jvm yep sure so i'm gonna i'm gonna show you a project which uses three libraries which i have which cross-compile from the jvm to javascript and run on both so if you give me a moment to let svt package it i'm just going to show you what they what they are on the website so kill this guy let's see so one of them is some of you may have seen this stuff before one of them is scalda rx which is a change propagation functional reactive programming library which lets you do interesting things i'll show you in a moment basically this is what it does it allows you to define smart variables which depend on other variables in this case c depends on a and b and when a a or b change the value of c will change automatically so that's it is reactive is overloaded to mean a million different things so so it is unrelated to java rx i just use rx because i hope rx made a nice variable name which it does and it means the correct thing and it's concise another project another project this user just my html templating library scala tags which generates html in both javascript and jvm so now this project is done reloading let's take a look at how it works so if i go back to the same thing let it load the first load is always really slow because it has to load the whole 20 megabytes of javascript subsequent nodes become fast because the big one becomes cached um so this is a to do mvc example that's written using um scala rx and scada tags for templating so let me tell intelli let me tell svt to cooperate with intelli intellij then i'll have nice things in the editor so the point of this is that i can use these things these variables these functions and these objects which are originally designed to run server side on the jvm and now i can use them running client side in scala including things like futures and change propagation and execution context so now this guy is done this guy should tell me it's time to reload so here we are this guy didn't want to reload properly let's say refresh it manually so what's interesting this guy's a change prop is implementation of to to do mvc some of you may have heard of it it's a so-called standard web application which people can implement in different libraries or languages in order to gauge what they look what the code looks like in that language or using that library so what's one thing that's interesting about this is that the scala implementation is 130 lines of code backbone.js is about 440. angularjs is about 240 this is from the git from the github examples and google web toolkit is 950 spread over 14 different files whereas this is you know 100 something lines of code one file live reloading works that say i don't like the starting names of the tasks i want to make them all start undone and i want to make them let lower case so let's let's see that happen so lowercase lowercase low case there we go so what's interesting about this is also that um i can do things like automatically so what i'm doing here i basically define a huge blob of html using the scala text dsl even though none of you have many of you have not seen scala text before i'm sure you can understand what's going on this is a section it's id's to-do app this is a header it's id is header not very useful but for example let's say i want to add a new add a new filter to this list of filters down here i can simply add a new filter that says um what what do i want this new filter to be called all caps i wanted the filter thing i wanted to only show tasks which are all caps so on to filter out the tasks whose text sorry whose text because text is a so-called smart variable i have to say now let's see capitalize there we go so task so this is a filter which which should filter out things only the tasks we have all caps letters in the definition there you go all caps so that did not work interesting questions why why did that why did that not work so let's let's do some debugging let's print out the different things that are being considered here and then we can see why that is not working so capitalize is not working that's rather unfortunate i think that's i think what oh is it should we should be title case yeah let's do that so map to this guy should be a character right come on tell me okay it doesn't tell me what it is i'm quite sure as a character to upper dot do i need to make string at the end i can't remember when you make string at the end let's just see if this if this works there we go so i guess the implementation of capitalize is buggy that's unfortunate i shall fix it but this i guess this kind of also gives you impression of what it's like to debug things in this system is it shouldn't that be title case i'm quite sure it should be title case anyway we'll figure it out later so um what's interesting about this is also that you can is is that under the hood if you look at the definition of this guy yeah definition of this cut and you see what's happening you let's say you go look what what how the change propagates through from smart variables to other smart variables this is not very helpful because it's just interface let's go to implementations you can see that we have you can use futures and it works perfectly fine future.sequence all this is probably more complicated than you need to understand but i guess the point here is that you can do all this complicated stuff and compile it all to javascript and it will work like if if this works if scala z works most of the things that you guys will want to do that's not particularly dependent on the jfvm will continue working so let's so this is basically what i was going to show you later but i guess you can see it now if you want to see the implementation of the equivalent thing in google web toolkit it comprises com.2.client.a bunch of files so not 14 files well if you include all the xml files it's about 14 files with some xml with a bunch of java classes which add up to somewhat more than 100 lines of code in total yeah so that was uh that's one example so let me go back to the presentation one moment so i guess now you guys have seen how it's like writing code using scala js using the using the ide how right the live reloading is pretty damn awesome i don't know if you've made games in any other way but so what did we what did we use just now we use scala js we use scala js workbench which is the live reloading and log svt log in the browser plugin i made scala js dom is as you said you need to wrap all the dom elements in static type facades i sat down for one afternoon i just typed them all out and cleaned it up later and copied and pasted all the documentation from mdn so i have nice doc strings the project skeleton is here on github if any of you want to take a look um so these are some other games i made while rehearsing for this this is a dodger dot game it's also quite cute oh i died um this is a space invader game so these are also made like as preparations as i could live code this so different games but also somewhat related um so and again if you look at how big these games are control shift r from cash no don't catch it here it is it's not too big 230 kilobytes and 64 kilobytes gzipped so that's pretty reasonable so future plans and ideas we have lots of stuff that we like to do with scholar js we have not had time on the manpower to do it's basically a volunteer effort with two and a half people with a bunch of volunteers including me making up the last half person since the only two people working on it full time um i can show you some of the cool things like the reactive ui that library actually has a subset yes um if you write it in scala js it will be compiled to the correct subset of closure so you do not need to worry about clojure j about closure um the google closure compiler no so the two things here that we can talk about one is some subset of scala does not work because it's jvm dependent another thing is some set of javascript does not work because the google closure compiler which optimizes the javascript will break it because of its aggressive optimizations so in terms of google closure compiler you do not need to worry about anything because the scala.js compiler will only output code in a very verbose format the google closure compiler understands so you saw that caribbeaver both thing i showed you earlier that's just because that's what we need to make google closure happy the other thing is subset of language that does not work let me show you that now so let's say i bring back this guy reload okay so he's back so let's say i try to do thread.sleep this should blow up in theory there okay no sleep method so because we well we stubbed out thread for some other reasons but 3.6 does not make sense in javascript so it blows up um what else does what else does not work archive actors do not work because you rely on threads and other things but there are some interesting ideas of what we can do um ignoring architectures so here's something that also does not work properly in on the jvm this will blow up with a number um what's it called arithmetic exception divided by zero on javascript it prints out zero because javascript math is broken but trying to but trying to wrap the broken javascript math to be not broken involves a lot of overhead because you keep checking whether it or not it did something stupid so you decided that okay this is maybe it's okay if you look at this if you look at scala js github um there is a issue tracking this which says number integer divided by zero does not blow up well yeah so we haven't figured out a very good solution for this yet but we are still working on it um what else does not work array index outer bounds don't get thrown so here's an array with three elements i'm gonna get a tenth element and it's gonna say it's okay it's gonna print undefined or something stupid like that there we go undefined yeah so it's not breaking the way javascript is breaking that's not a problem but it it doesn't break um it doesn't break where it doesn't break where the javascript would break but it does break where java would break like here or where jvm scala would break i have some i'm just gonna so i'm just gonna go back to the presentation for now um just to hurry up because i knew finish this and then the q and a you have more time so this guy i've already showed you this is a 2d to do nbc app it's kind of like a amalgam it's kind of like the same idea as react as react.js or as backbone.js except implementing scala this is the optimized version of the the one i showed you just now was under development so it has a 20 megabyte blob once it's optimized it is from cash no when it optimizes 100 kilobyte blob still pretty big but not terrible anymore it's reasonable i think i look at dropbox the web the website's blob of javascript is somewhere around one to two megabytes so 400 kilobytes is painful but not impossible um other cool things you want to do um so this is what i mentioned earlier early because you asked we are pretty small it's pretty small writing this stuff in scala using scala rx and scala tags and it works on the server too which is cool compared to many of the other libraries pure javascript and much more verbose these are all taken from the to-do mvc github project if you want to go take a look i did not write all of them yeah so this uses a few libraries i mentioned earlier other ideas play framework integration like this is not this is not done yet this is just brainstorming what if you could just wrap a function in ajax ajax function ajax call literally and have it be automatically serialized and sent to a remote website and one of your ajax calls it all type checked like that would be super cool like from at work one of the most fragile things you do are the ajax calls because they're all stringy type there's a ton of serialization to json dc rights json someone decides to make it a csv instead of json commodity limited every everything's very fragile what if it was type check that would be cool a web console here's another demo to show you it is under development so it's going to take a while to load because it is under development so this is what i'm calling scala gs fiddle which is an online repo in which which does exactly what i showed you earlier except online without intellij so this is the same example as i started with um let's say i want to change the colors so they're all filled to white i'd simply say white control command enter it does the right thing what if i want to take some what some of the games i showed you earlier so the um where where should i where were my where were my games there was somewhere here workbench example app there we go so let's say i take the dodge the the dodge the dots game that's not what i wanted i mean the source code so the source code is in the dodger dot branch source main scala example scargi example i copy the whole thing i leave off the package because this is a work in progress and does not support packages right now i have too many tabs here we are so i space this here command enter wait a moment and there you go it's a game the the math is wrong because the game assumes it's running full screen and now it's not running full screen so the math is barked but this kind of shows you what's possible using scala js let's see what other things i have to show space invaders so just now i was in i'm losing myself let's say i go to the space invaders branch which is here source main scala example sky example again i just copy the whole thing where was it paste it here bang let's go compile compile compile space invaders um i'm not sure why it's still tracking my cursor that's probably a bug but yeah so this is so this is work in progress but i guess you guys kind of see seaweed i guess you guys can see where the promise is and why i'm excited about this because i think this is honestly really cool um and this is one guy's worth of work part time like i do have a job so i work on this a small number of hours a week um so the example i showed you this fellow is 250 lines of code client and server so it's actually a pretty small project all in all and with the with more effort i think we can actually get a lot done with it for now but for now it's still very nascent so end of this let's go to the end of the slideshow just because so these are takeaways um i think after seeing this most of you should agree with this with everything that's been said here i honestly think there's a ton of potential here like many of the other compiled to javascript languages have a lot more manpower than two and a half people and have not made as much progress in the same short amount of time and i think many of you prefer writing scala overriding coitlin or typescript or coffeescripts and the ecosystem support is really incredible like being able to get static types in the ide when writing scala for the browser and getting instant reload on almost instant reload that you make changes is really powerful like that's something i don't even get when i'm writing raw javascript because i need to refresh the page to get it to work whereas this is really something else um so how to get involved if anyone wants to try it out it's on the internet it's over here github's got yes the mailing list is google groups forum scala js the bunch of issues i showed you earlier there's cool stuff you can make and that is it cool familiar with all the frameworks in javascript and it seems like there is some some really rapid change in javascript world so recently david nolan was a closure script guy he wrote the home which is a binding to facebook react and he wrote a couple of blog posts where he basically says like each of these remote says everything else is wrong and this is how we should do it now and it's 10 fast 10 times faster so basically he's saying that react is basically it's based on some mutable ideas right that you essentially detect what didn't change so from the reading of this it sounds like that's the right way to do it so what's kind of your look at it uh what's your opinion uh you so you're based on some underlying javascript libraries do you need to know for instance what react is doing uh if it's indeed 10 times faster would you rather try to use the skull by this to to base on what react js is doing or like do you have to track this underneath javascript things and kind of buy to the latest and greatest if you want to that's the long and short of it if you want to if you want to you can it will be work to write wrappers for all the libraries you want to wrap so currently we only have jquery and the native dom and i have wrappers for chipmunk js you guys may not have heard of it before which is the physics library i was showing you earlier which powers the game i was showing you earlier um in terms of that what i think is the equivalent of react is scalar.rx which is what powered the to-do and vc example i showed you earlier um this would be much easier with diagrams which i have here i guess i don't need this guy anymore so the idea is that you when something changes you only propagate the changes to guys who care about it and the guys who don't care like for example b doesn't need to even know so it's a slightly different model it's more it's push-based rather than pull-based instead of diffing the two completely diff instead of dipping two large data structures i am now pushing changes through the big data structure without comparing without touching the whole thing so again just more examples of basically how it works and it works this is what i was using in scholar js just now i've used it on the scala jvm a few years ago it works great so we actually choose to bind to let's say yep do you bind into a specific version because you know um currently there is no there is there are no checks so it will just blow up so if if you forget to include d3 on the page and you try to bind it it will blow up so for example this guy has this guy includes the dom the stately type wrappers for the jquery library but i i have forgotten to include jquery on the page so if i try to call jquery that's something i'll just crack it'll just fail with the error like no such method found so the the reason for this is because scala js is about six months old so things like backwards compatibility and um stable versions are still a work in progress so yep is there any way to like auto generate these bindings or if you guys looked at that um auto generating and bindings in general is unsolvable simply because the javascript people do such crazy things with the apis i don't know if you think so i certainly think so there have been some attempts to auto generate them from typescript bindings because a large number of those exist currently no one is working on it that is that is actually what i use to auto generate the dom the wrappings for dom it's like 5000 lines of code i didn't type them all myself i also generated them and fixed them up when necessary um but it's so it works it's very cool we have no one to work on it so it's just sitting there yeah so you guys aren't implementing any of any of the java standard library right so if my small code is depending on the any anything from like actual java you guys i'm gonna have to rewrite that yes and we have a small amount already rewritten so we basically rewrote the things we found we needed we're not going to rewrite like everything but we have these fellows we have these guys all rewritten in scala so for example long longs are interesting because javascript has no longer implement long in scala like how like how google closure does it um yeah so if you want to reuse for example asm the java bytecode library you're going to rewrite it in scala but if you want to use a standard standard library at least the parts that we happen to need have needed so far then it's fine yeah maybe it's a wacky idea but uh i'm gonna write my stuff and i actually want to play within the ecosystem of javascript like within being able to be loaded like by npm as a server-side code because you know yes i don't want to write in javascript and i will i want to cooperate with others that write things in javascript uh do you have you want to make a node module that's called js so you like what you want to make a node.js module using skyjs um it has been done once as once as a proof of concept and no one really followed up with it but if you would like to pick up the project it is over here a node.js module in scala.js and as in it's it's been done before like it's here if you only can clone it gran test and it'll work but we none of us are running on node i guess people don't see the value of running on node.js when you can just run on the jvm when you're on the server whereas people do see value running in the browser yeah uh how is this color js compiler um it is implemented as a compiler plugin do you know anything about how the scala compiler is implemented so the scala compiler is a bunch of code that is written in scala and takes in parasites does type type checking all that multiple phases gradually turning scala into something that looks like java and finding to java byte code and the scar js compiler is a plug-in that hooks in just after what's called a mexican phase so the maxin phase is a phase after traits are turned into classes and forwarder methods and it all lives in this folder here on the github repo and it is not a lot of code it's a few thousand lines i think it's about 15 20 000 lines of code that takes in the java like ast that hasn't been turned into bytecode yet and instead turns it into javascript and and it still goes to bytecode so that's why intellij can give me sensible autocomplete and and type and code highlighting because there is the there is a java bytecode version of the code it's just that for all the code that ends in question mark question about question mark if you run it on java it will blow up because the question my question my question mark will blow up yeah when you showed us the compiler output there were source map files it was generated by the closure compiler the source map files are generated by a scala js compiler so let's hook up let me show you let's see is this guy still running that guy's still running where is well i think this should work source maps well well that that didn't work oops but well this works scar js example lines 12 that's here well is that somewhere here looks like it's wrong in this case yes yeah so we generate source maps um they work in development for the sourcenet for the huge library we have huge javascript lobby create when when google closure compiler optimizes down to smaller javascript blob it also does a similar translation for source map so source maps also work but yeah so exception scala exceptions stack tracers in the browser is pretty cool yeah so uh i wonder so here we are in the house i wonder like is there anything scholar compiler should can make better to make this thing easier yeah like what are sort of from your experience i mean scholars improving itself yeah it's scholarly simplifying like both features of scala are the worst for the form of this translation they're welcome again i guess we we've talked about on the mailing list i think sebastian has made more noise than i have about the scala compiler because he's the epfl um so in 210 we wrote the pattern matcher partly keeping this in mind to get less insane code yeah one thing that has helped a lot is that it would that will help a lot is what's it called singular single assignments single abstract method interfaces so in the other example i had i needed to i needed to explicitly type check the colon keyboard event in the event listener because the scar compiler in 210 is smart enough to auto automatically fill that in if the functions that if the function is expecting a scala dot function type but it's not clever enough if it is expecting something which implicitly converts to scalar function type or so our js dot function is certainly different from scalab function is that it represents an unboxed javascript function bracket bracket bracket bracket like it represents a javascript function so that would not type check unless i put the annotation to force it to force the implicit conversion to work but it's 211 m8 or m7 which i've used it works great um i'm not sure what else could be helpful uh i guess one a lot of things will be helpful is throwing away what we do for java like throwing out for example specialization is a pure waste in javascript because javascript does not have the java type system and it requires you to duplicate your code 10 times in order to make it unboxed but because that happens earlier in the compiler pipeline then we hook in we end up just having 10 different versions of for example scala dot function which all do the same thing in javascript because in javascript there's no type system so i'm not sure what else there is but that's a few of the things that would help uh it depends how cutting edge you're willing to live yeah like that you are using a alpha version relying on the pre-alpha version of the scala compiler and you may have to make your own change with libraries which are zero points something which are compiled to the alpha version to scala js so if you're willing to do about to fix all your own bugs and you crop into issues when issues crop up and you're willing to compile everything from source if i like i haven't compiled it from source yet for you and put it on maven central you have to compile it yourself then sure you can use 2.11 to do it it has some nice things like 2.11 standard library is much smaller since you have 24 megabytes down like 15 megabytes for uh unoptimized version yeah what are you using for your games uh good question let's take a look i think i i started off on 2.10 and at some point i moved to well i i don't know i'm doing this in here nope it's still 2.10 i guess yeah i i do this i have experimented 2.11 but it's still pretty it's still pretty rough like the scala js itself only released a 2.11 m8 version this morning so you you literally run the cases where yes it can be done no it will be done tomorrow please wait which is something you won't do in working stable software but here things are changing so quickly that it happens yeah anybody started using uh style.js so sebastian has a proof of concept with that with scala what's called scala js actors it is still very rough um it kind of works but i i don't i personally don't feel confident using it and it's