SBTB 2015: Katrin Shechtman and Dave Sugden, Convince Your Manager to Adopt Scala.js in Production
Europe yeah what this is oh yes right hi hi everyone okay it was well adjusted so my name is Katrina chef money and I'm reading it over the slide and I'm from Toronto Canada and i'm david i'm from Gatineau Quebec we do work in the same company which name is bull reduce in its consultants company and we do Scala and typesafe technologies since we have clients in Scala we also sometimes we liberate about the front end that they need and we have one client that does Scala GS and we have one internal project that uses colleges so we feel ourselves comfortable with is giving this talk maybe I know why it happened I didn't stop the moocher okay so we're talking how to convince your manager to adopt Scala Jess and so manager could be anybody it could be your boss your wife or your boyfriend or your dog or that closure script guy that you know who you are every company has one and they're right closer script is pretty awesome so we believe that you can write rich clients and do effective front-end development with this ecology has echo system and we believe it's viable and it's preferable and it's a very strong claim to make because Java scripts very incumbent and people do it very well so we're gonna present some tools to enable you to convince whoever you need to to be able to do this okay so let's start the visa who are you in Harvey and we believe that you know Scala they also believes that you love Scala and the idea is that you can do only scholar because you sometimes have to do front end I don't know how many of you know Scala GS would you mind to raise your hands who already done Scala jeez okay and who haven't oh okay good so we can't go to Jenks as of now we are going to proceed with our talk bizarre because there are people who does nostalgia's yeah if you do knows colleges we have some opinions if you don't we get you going because we're hot they are going to have two demos today to repose so who are we we are hard core server side scala in acha scala in aqua developers if you are relatively new to scala GS but we've done some JavaScript so we've done some backbone and some and gorgeous and some rom the GS and some it's going on and going on so he suffered ok so I'm going to describe to you how we came to Scott yes and how many of you here had the pleasure to see Julie pits talk early today ok it was an amazing talk and before I continue this I just like to say that it was very encouraging for us to see that talk because we came to very similar conclusions from different paths and that's encouraging the way I came to the skela to scale jess was actually through skeletiger and that I came to scout tags through the play framework and play framework has a templating engine and I guess the plate way of saying this would be that it provides an opportunity to not use it I didn't like it you're writing HTML you're not really writing scala the tooling fort isn't there unless you pay for it and so I remember doing a play payment project and having to write a template and I said there's got to be a bit away and I literally tight Scala and HTML into a and bang and my life changed and I've never looked back and one man has changed the world not quite but so that man is how a li li Howie skull tags is a DSL for writing HTML and it's the same way to write HTML you can compose you can write functions you're not writing XML and so you know I just kept going back to this guy's github all the time and I remember when scholar ex came out it was with a year and half go and my company wants us to give talks at meetups and I needed something to talk about and today Julie presented a wonderful way of running to the DOM and due date doing data binding with scholar X and I put a very similar demo not as nice a service but you know a little hello world to do thing together and I presented it at a meetup in Toronto and this meetup was full of like back and acha guys who or they didn't wanna see the stuff at all like good okay and i finished the talk and from the back this hand came up this force of nature and said why would I ever learn Scala if I'm an angular dev why in the world would I ever learn scowl to write JavaScript and I didn't have an answer hood well he's claiming I haven't started to work in full bold ideas here so I had my own opinions yes and they were good opinions and that kind of thinking why why would you you've got you got your stuff set up you can write effective front-end code in JavaScript you've suffered with it so you've you know you know its warts why would you and here we are a year later and anyway so this is how we've come to this yeah so just writes of JavaScript it ain't that hard so we work at a company with a lot of different opinions and that's the prevalent opinion at our company yeah the real man is the real opinion it's a good question yeah his opinion actually is much more direct in strict but we kind of asked him not to express it as he usually expresses it so it's a stripped version for the talk it's a ploy version yeah so JavaScript guys they're living their dream right and they die and live by their setup and don't get me wrong for those who do not didn't experience ass ecology as yet you're gonna need setup Scalia's is not magic but it it's gonna make your life easier and you would like to show how okay there's also another wonderful presentation today by James Earl Douglas about JavaScript and comparing javascript in Scala and he went over a lot of these things so how he has also put together a wonderful little github book called hands on scale Jess and I'm pulling from that JavaScript it's an okay language it's not that bad you can do a lot of stuff and it has some warts and everybody's available where of them there's an industry around coating around these warts and billion blog posts and what this means in skala and double equals and scope etc but as we I think we both found out with JavaScript code in production it's it's difficult to refactor JavaScript at a certain scale and and actually two days ago that came up and i thought it was apt and i still don't know what it is i don't if i'd to describe to you what prototype based inheritance was i'd have to look at it up again like and classes coming in es6 and who's tracking that do you have time to track that and so if you're coming to front-end development and you don't know javascript you're going to have to know this stuff eventually or we'll get fit who is course geous who is it it's a it's a Twitter okay does he have many followers yeah yeah how I mean I don't know look enough okay but javascript does the platform it's you not to sell anything browsers everywhere everybody's got a browser JavaScript pretty well enabled in everybody's browser and it's an buck security when I close my browser nothing's been written to my box yay I'll take it well it's not old news um okay so yeah you want to write some print end stuff you're starting from scratch you're coming into school or you're a ruby or Java developer and you're used to pull suck setups generally now you can have to learn a bunch of tools to get going you can have to figure out what text editor you want and JavaScript tooling and kind of build paths are generally a bunch of little libraries and utilities that you got to learn and they're changing all the time and it's a pretty rich landscape the variety is huge so uh I kind of put together an example Java scripts setup so you want to be effective in JavaScript you either can have to know what about prototype inheritance or you have to get some kind of transpiler so pure scripted touch paper are amazing bayville CoffeeScript some other way of writing JavaScript you can have to worry about modules and requires kind of gone and now browserify webpack are the things gulp and grunts so you want to build you want to run tasks and npm which is this amazing package manager out there it's wonderful and as James pointed out in his talk it's a lot easier to publish to MTN in p.m. than it is to other build things testing frameworks and then you might actually want to use a framework like this is a writing JavaScript and writing to the DOM is pretty low level use something you know it's 2015 already right so pick one good luck but ok so there is a lot of into JavaScript right and whoever knows Scala doesn't want to learn any JavaScript so the idea is that you have to sort of set up already your Scala experts right there is any who is not called expert here please ok sure intermediate not know the syntax ok immutable whatever something right better than JavaScript um who is BTW expert here yeah ok so it's btx please like this it's not like this it's like this ok it's ever forever but whatever at least you're familiar with this BTW right you may be even more familiar with this be teased and all this LPM grant and golf and an p.m. on what's not so to sort is under your belt this is kind of our stab at mapping which two-thirds if you've suffered through SBT and you've bled with it you have a Stockholm Syndrome Association with it'll cover a lot of what you need so between an SVG web the actual Scala just plug in and web jars maven instead of an you're covered so the last two things you gotta worry about is a framework and some testing I so actually it's end of our talk okay whatever is joke okay so what is the final third of your setup this is the list but we are not going to fish only only with the list we are going to show you actually step by step what should be done and for the half of the people who know what's colleges is it might be boring or it might be not we'll see right so skylight GS dome in scale attacks it will take care of your HTML and your attributes within HTML we will talk about it scholar X will make you reactive we will see what it is scala g has reacted means don't reinvent the wheel we will talk about it auto wire you pickle if i'll start explaining with this light I'm not gonna surprise you be the next slide so please let me move okay so um the second part of the talk and we have another two to go we are going to talk about convincing your manager right now I rarely manage convince someone else when I don't know about the subject enough details I don't know how about you but I like to learn it first and we would like to get you through some learning curve first and it's going to be totally boring the demo is like this right here yeah it's yet another to do component but this one if you understand how this one works then you will be entitled to see Dave's amazing demo so please stay tuned okay so we have to do here we have here input we type something and it goes now if it's a suggestion oh there is a complete well almost a complete but at least it shows and it might be even that they chose from the server and it highlights right and it's pretty reactive well it's runs on localhost but whatever okay so here's the idea okay i'm going to explain what woods needed to create this boring little demo but have everything in place that you need in scala GS in next 10 minutes let's do this we are going to talk about anatomy of typical colleges up i don't think there is typical colleges up because there is exactly two up and a half out there but there is an autumn eve are going to talk about it within this repo everything is minimal which means if there are steps and you take out some one of the code it stops working why it's important because it's very hard to go through tons of code and try to learn other technologies so the minimal is good in the sense that that's why the demo is so boring the client assets in this particular demo are going to be independent from the server which means you can run it from the file column / / no server whatever the client sites still working and we are going to talk about proposed architecture proposed by who by us okay so we are going to have eight steps okay the first step make sure you share so I guess your parents talk to you when you were younger and now this is your opportunity to make it the right way not the wrong way the wrong way it's two takes javascript and to make it a back-end the right way is to take Scala and make it a front-end and here is the idea okay you take this code from our slide copied over to yours BTW to your bill taught SBT import SBT plug-in and you have cross project when you have you really really sherco decades it's totally real like you can share like it's the same like it compiles in the same place that's it yeah it's amazing I don't know okay manipulate this HTML Dom yeah epilation it's bad only this particular time is good so instead of going to your HTML file you're going to call API okay and you're going to your first for sale what is for sale it's when you do some something specific and it's actually something else so the idea is that you write Scala right but it actually it's JavaScript but you don't care you're right Scala okay and you have two options the first one is to call API and another one to insert string oh it's so type safe right now it's not I know we will get to it but the idea is that instead of writing JavaScript your writing scholar ok let's continue you've got dependencies okay in our real world no one is writing with dependencies anymore SBT it okay just take it and just call web jars who doesn't know what web jars are okay for the sake of these five people one sentence they've just is you're taking your JavaScript dependencies rope up by jar uploaded somewhere and then call your SBT to take it download it and take javascript dependences out of your jar and just use it in your HTML file okay in the idea is that you're not uploading your only downloading because we've jars already have everything that you need it has bootstrap it has jquery what's not there as a lot seifish tml education so it's part of our learning curve we are going to talk about skeletons okay we said that we have two options to manipulate our dome the first is to call it be I the second insert HTML fragment strings but it's not particular type safe so they are going to have gives which are type safe we are going to have paragraphs p which are type said we are going to have classes an attribute of g of HTML there are total typeset there is no way of making an error ok that's it now there is khala CSS and it's out of scope but the idea is whatever you have as a string call m d8 you can type safe it as well it's out its out its out of scope of this talk just because we opinionated about it and we sing the designers that C says designers the you won't go and learn Scala just because we want them to be type safe and usually the CSS comes from them and not from us it's from us just go google scholar CSS and start using it don't reinvent the wheel so when you write JavaScript you I hope for you ok I hope for use it you don't use your JavaScript directly at least jquery write me the angular maybe react backbone you're okay outdated but whatever idea is that in this case you can pick up one of the libraries you remember what facade is facade is when you write Scala and someone else it's actually translating it to JavaScript right so there are facets for jquery you're writing scala in your getting jquery on the other end you write angular almost type safety in you're getting the your javascript on the other end react who knows what ionic is okay who knows what electron is nice so ironic is the way to take your angular application and make it mobile you don't do you think you just compile electron is the same just for desktop just imagine you write Scala and you get your desktop application you write Scala and you get your mobile application I think it just amazing but whatever the idea is that the code that is there its react component we picked up react as our framework of choice as alpha set of choice for this demo and for Dave's demos that you're gonna see in eight months three sides actual okay keep your data in sync like its it goes without saying that we need to keep our dancing right but it don't want to manage it by ourselves so they are using scholar x how are we using it so if everyone participated in juice p talk actually i could go to the next slide but I don't know if everyone did so I'm gonna explain it a quickly so here is the idea you remember my little demo and we had this input as I enters the input something changes beneath because I get my suggestions it's because I have our X variables in the idea is a heaven Eric's observer and suggestion component says register our X component as I go to sparkle of constructor and when it changes please call my defense my refresh suggestions I'll be waiting to do component what it does it actually on change right it's react component it reacts to every change so unchanged everything's it should be done it's actually to update the current text that's it everything else is being done automatically and you can have multiple arcs variables just think about it treat your Ajax calls with some safety this light is kind of optional because you could call your objects without type safety but then like the whole talk is kind of optional so we follow the path of type safety actually what we can do is call auto wire and autowire means that we have this shared code that we talked on the first slide put your API there make it only in one place and then the Mexica line code look like it's a server code who can imagine that the last line on this slide is actually client-side code it does look so I called statically typed epi implement call bags that will be called in your future completes and don't forget to use RX to automatically update your client State on this your beside you just call autowire server daughter out and the idea is that actually they request the Ottawa request is totally independent from how you handle your HTTP maybe it was acha HTTP maybe it was collateral maybe I don't know what it was but the idea is if you know how segments look like and how params look like and they look in the specific way because of the API is shared it's taken care of you like it's see you don't have even to think about it you can call it through postman it's a little bit tricky you don't have to but you can just to make sure that it works and that's it those lines of code will take care of you don't know it's like RPC okay who knows who who doesn't know what our pcs a probably feel ashamed about it so everyone okay the last light so now you want to release your client to the wild right how do I say it how do i pronounce it where r okay maybe you'll do oh you did at the story I was preoccupied so you have two options right you either host your assets on the server then the actual package it is the server if your assets come from somewhere else no problem package it in some different way it's totally flexible right it's a matter of how you cope it from one place to another place do it with this BTW task okay don't do it with the sage that the idea and by the way just as clarification not we've said that we are going to use a SVG web as BTW web is very powerful plugin and it can take off they can take care of two things first it can take care of dependencies and second there is a lot of plugins it's a framework for plugins that you can oglaf I mean if I what's not you don't have to because Scala GS itself minifying in ugly Fang if you have your own CSS and you'd like to compress it maybe you'll use it it depends if you have CSS not in line not on the code notre scholars uses okay so hopefully now you have your setup you've gone through all this you've gone to katrin's github and you've gone through these steps it doesn't take that long probably it'll take as long as it took to listen to this presentation so now you got to show your prospect that this works and there's some tips on doing that you could find an internal project Julia a great example of that you got to find something people care about so it can't be another to do or you know an autocomplete suggestion you got to find something people going to use in your company and maybe like it fancy like maybe something that's more than just forms and validation so used III or some other charting charge is person and it's crucial that you own all the problems associated with your little project so you don't want to do something and go halfway and then they're stuck with well what if and why doesn't this work you got to have all the answers you so good luck you got all you got to be able to back up your claims it's not that hard i think everything we presented today will allow you to back up any claim somebody might throw at you yeah okay so he's are our tips managers like dashboards consoles so dashboard everything right a console find some part of a company that needs some interactive awareness use web sockets because they're super sexy and make sure your server pushes because that's amazing right when you didn't do anything and something pops up let's uh I'm told and always use a dark background seriously you don't undergo just starting up and think Cassandra ops center that's amazing it's serious stuff right we saw a presentation today of data centers and battery cluster and had an amazing console and it was super dark so in fact our whole talk could be summed up with use a dark background okay so we were thinking what could be what could we demo that had something to value that our client could use we could use and doesn't exist already and so we work with a cluster a lot and active clusters present opportunities because you know quite often with alkyl cluster you're opening about 20 SSH shells and you don't really know what's going on you bring up these nodes they join the cluster and you know you've written test cases and hopefully written some distributed vm test but it'd be nice to see what's going on it's specifically what are all the actors my cluster have they joined the cluster are they reachable are they gossiping and what boxes are they on because you can put some actors in the same box or not so but that a is you know we might have been inspired a little bikin by conductors GUI but it's not really the same thing it's very active specific so before we go on okay so yeah basically what we did is we wrote back end that subscribes to a cluster you tell it to subscribe to so it's gonna get all the cluster events we're going to push these to the UI with a co streams web sockets and that's like a you know 20 lines of code very easy we're gonna have a RPC with auto wire and RPC is amazing I so wonderful not have to worry about Jason we're using micro pickle as a Katrina alluded to and there there's some interesting things about micro pickle and sealed traits but they're well documented once you got over that it was fine so yeah I'm just calling a method from my client to my server like do something here's some parameters and so we picked a scale just react did everybody knows what react is right yeah okay in a sentence or less a react component take some input it can keep some state and it renders some video DOM and that's about it you nest these things and the react magic is you know create a virtual Dom it compares three differences and finds the most efficient way to actually do the changes in the Dom itself so you don't have to there's some debate of whether it's whether it's really more performing than angular or not would have it's easier to understand for me and it's very fast to get going and there's this amazing github out there by david berry called scale just react i think there's three skaldia spec stories out there this one is one we picked and it's it's beautiful he has lenses and some Scout said in there but you don't have to use them but you could you could but you don't have to and so when we're using RX for our data binding exactly like Julie demonstrated yeah so I want to acknowledge both Dave Barry and Holly and especially autocross because he's like Julie also mentioned he has a scala GS single page application tutorial just think google scholar GS spot tutorial and it's a good get a book it's very well laid out I think he's recently converted it from spray to play but that's okay you'll still it's still very usable and it's how we started and we were going like in 20 minutes you know we were up and running with this with this github so we owe everything to these three guys yeah okay so I'm going to do some real hides with the facade here so i'm using ad3d three like Julie said does some crazy math and it also has like Jake weird like select their api for you to display your stuff and you know behaviors and events I just wanted the math I'd want to be able to lay it on a coke lustre so nothing touched I didn't even want the really freaky bouncy stuff I just wanted to lay it out so i found a d3 i'll get up there's like three of them facade and this is what it looks like and I this is all the stuff i'm using my whole application and so you it's just an interface into ask algae s library and that's it and this is how I actually use it from my Scala this is an example of a scale GS react component and so d3 when it displays its force directed graph has a whole way of doing it and I wanted to be able to interact with my nodes in my graph in a special way I wanted to listen for events and you know change colors and move them around and stuff so I didn't want to use D threes API so I wanted to use reacts so I was able to actually combine d3r acted quite successfully and i just googled III and react and there's 20 guys out there got 20 different ways of doing it and I pick one and it worked amazingly so I'm just writing SVG with scout tags and I'm drawing some lengths some drawing some nodes and each of these things are little react components and it works so the most important thing is that now you get to get back to our game with the important things like readability so the top line is how we calculate all the indexes for lengths in a strongly connected graph and the bottom line is how somebody code reviewing would probably ask you to write it but this is scott sorry yeah well even a scholar yeah I know there's people that don't like the top ladle but if you're back to argue about flat map versus for that's great you're back to where you want to be right you're not too worried but yeah instead of undefined you're just like yeah you see one means no that one means why do I have to put some I know that it exists but it's not Mona so I can't use for ya right you go ok so I'll show it to you I think we're coming at a time can you hold my life mm-hmm it's not this one don't worry okay so there's my cluster I'll refresh it and I'm just painting these things different ways d 3 will run a tick and it'll recalculate distances and I've set it up so I can force that and I can just keep clicking it until it gets to be perfectly symmetrical that's not the demo just some side so let's say this is my aqua cluster ah like I got all these a condones I want to know what depends on what in aqua cluster you have roles and one way of doing service discovery and dependencies is with roles so I could say for instance this bar worker depends on bar security right so i could add a role and so this is a all scale jeaious react right now so I'm doing traditional form stuff so say bar were key bar broker depends on biosecurity i'm going to call this as and it's a distributive rudder dependency so i'm going to add this and loo look at that so i can actually see my dependency in my cluster and this little thing up here is my back-end writing unicode creole font in SVG i never thought i'd do that i normally worry about back in code and here i'm doing this and that's pretty amazing and i can see here that all the different pieces of hardware my clusters running and you can see the force directed graph running when I actually let go of my mouse I'm not calling ass ecology as react refresh I was able to scale just react as a lot of life cycle functions and like should update will update will mount unmount and I was able to successfully hook into those because of this amazing scale Jeff's react epi i'm using kila one those in oh let's kill them yeah so I'm gonna kill one of the nodes cuz that's unperfect Emma that bear with me by the way how many of you have ever worked bazooka or visakha clustering oh we're in a good company who hasn't yet okay i'm actually gonna discover a cluster don't diverge from what we said okay so here's another cluster that is actually up and I'm gonna bring one of the notes down in this cluster kill a couple there is anyone who worked with the conductor are now that's good we don't have to have a disclaimer that it's not conduct our and that you are not competing that's good oh they're unreachable so this is a WebSocket what manager wouldn't like to know that yeah and Anaka cluster of something is unreachable for a certain amount of time it eventually becomes removed and yeah that's where you clapped this is kind of a toy right now but this is a something that we did we're not front-end experts at all so we could do it you guys could do it if we could convince our managers to use the stuff so could you so is a roping up note I think we found i can say i found but i think we found two main issues when working with ecology is it's a first it's a little bit overwhelming at first they're a little bit too many parts but it's fine if like you're going to our first repo and take a look at the tags so you can follow through and the second one is actually it's still rough at the edges right so please don't ask about this please don't please please don't throw in my experience talking first time at the conference okay but it's really good it's really good I think whoever some of us who failed their startups because they couldn't figure out how to do front end is their chance to succeed you know who you are right so they are done I'm sorry create a great design okay so sorry so question was you still need a designer to create a great great design right yes indeed but the idea is it usually when you're trying to create your own startup and before you hire the designer you're going to do it by yourself and then it's going to fail right because you can't figure out quietly what's going on with this JavaScript you just go over the step right you're going directly to your success with your nice scala GS design maybe not the best but nice enough to get enough money for the designer that's how we see it all right dude is how is it actually left okay so here is the thing I've never seen company and this forest and the sense there is no company the designer would like to touch each tml if they do Zota magically become instead of web designer web developer and we would like to convert them to scala Jesus if the doodoo only see says then we we understand why Scala CS might not fit because college she says you're taking CSS in writing in Scala and it might not fit that's why it's it out of scope because our opinion is that should be better tools of managing CSS outside of Scala but still have type save head have type safety yeah so there is there is again we are from both reusable registers consultant company if you do official courses for type safe please send them over we will take care of them for decent amount of money my managers are gonna love it it was recorded right okay good now am seriously speaking it's hard to imagine JavaScript developer who is going to total earned Scala because JavaScript developers tend not to think that type safety is good or not to think about type safety though which I believe it's bad thing all right we are in Scala conference i'm not going to talk more about it so they need to be educated first in get on board in terms of type safety go is good once they understand that they will run into you right so it's a matter of educating them it's a human thing right what can you do about it i cooperated restoration okay so there's a something called work bench by Guess Who how wheelie and so it's not as sexy as some of the other ones where you know you think about changing a file and it refreshes a browser you actually have to refresh the browser but it listens to follow changes and between that and source maps and inspecting in your browser like stepping through your code you're covered sort I don't mind alt tabbing and refreshing thank you very much