scale.bythebay.io: Irfan Ahmad, Live coding server-less, single codebase iOS, Android and Web Apps
you so this is I have to confess is the first time in my life I've given a life to live coding session I'm pretty nervous right before I came up here I did something so maybe we'll work together and and figure it out I hope there's nothing recorded I guess it is my son said he wanted me to practice last night I love any role time he came over he said you really should practice this and he said I want you to practice with me and the way it's gonna be and I said don't dumb it down you know I'm he's coding now so he's he's getting used to trying to get him Scala he's doing some Python so yeah for a for a while i forbade Python in the house but then the school insisted on it and then that was kind of bad like you know so nobody else in his school gets Scala yet so but he's getting into it so when he watches this video he's gonna be really mad at me because his like what were you doing dad yeah embarrass him ahead of time okay so the overall theme there's not kind of two things I wanted to talk about today and see if we can come up with a way to demonstrate them one of them is obviously that Scala being full stack has taken on a totally new meaning in the last few years right so some awesome work done by the community members to extend the reach of Scala from the JVM into the browser with Scala yes and then more recently with Scala native trying to actually get rid of the JIT work did JIT step so that's been really exciting I'm not gonna talk to us : later today but we will talk about Scala yes so my interest in this was because my previous startup 100% based on Scala took the bet back in 2011 all of my friends laughed at me and say hey what are you doing taking this esoteric language and trying to build a company around it the company's successful and you know my estimate from all the previous projects I've done in my life and this five and a half year experiment at that startup was the number of bugs was just so much lower than everything we were used to before took longer to bring things to production because you have to onboard developers but but just really high quality so however the front end the user interface was not in any structured language and you know we're not gonna do JavaScript bashing here because Rawls kind of used to it but the problem that I was having all morning trying to get this demo working was actually nothing to do with Scala nothing to do with anything sane I just had to do with JavaScript ecosystem being as messed up as it is so hopefully one day that will improve but in the meanwhile we have to suffer through so my previous startup that was a huge problem because you know we were fully structured everything made a lot of sense in the server on the server side but came into the client-side you had to be a JavaScript and we played with lauded for frameworks and a it just it was hard so then I was motivated that for the next big project I do so my new company that we're gonna try to do Scala end to end I'm gonna dis college yes and my experience so far with the Scala GS is been really good of course some once in a while JavaScript itself kind of leaks through the abstraction and it's ecosystem comes to get you so that's one thing more talk about like the end-to-end nature and hopefully we get through a little bit that code the other thing is graph QL so my other pet peeve for many many many years was rest I've never been a fan it's always been one of those things where you spend so long trying to morph your brain into this one way of doing things and then you add a few more you have you need a few more api's and all of a sudden the whole thing just you know it falls apart so this is personal opinion I just never I tried I tried I just could never fall in love with this so last few years there's been interesting movement it's not many we probably heard of this called graph QL and the idea with graph QL is that you describe your your data as a an interesting little schema and you try to set it up so that different aspects of what your needs are around your sale user interface or an API right you can project down to some part of the graph that represents your schema so it's not as powerful as other ways it's not as it's a little bit opinionated but as you get more advanced in its usage they've got they've done some really good work with it so so the part of the motivation for this came out of worked on a Facebook of course now it's open sources lots of really cool projects around it so the project I'm gonna be looking at with you here live is a really cool service called graft cool graft cool and and so I'll show you how kinda you can set up your scheme and then we'll use it live but here's graphical org so you describe your data with some types and some relationships and then you ask for just the subset of the data that you're looking for so in this case for example I might say hey give me projects with this name and and and that tagline and then you know my results come back in a JSON exactly the way that I describe and so now the other thing you can interesting you can do here you can compose these right so this could be a sub query that gets embedded inside a larger core so hopefully we'll see that in a second and there's much more to be said about graph QL I really encourage you if you ever end up needing to do especially user interface programming especially in programming where you want to have the user interface code actually be a real application not just a bunch of you know gobbly goo and JavaScript I'll take a look at it I've been having a lot of fun with this okay so now I said we're gonna start with this so this is graph cool it's a free it's a graph cool is a managed graph QL database service recently that's the combo contour so you can actually run this sort of a thing there's three or four different open-source ways of running this without needing to go across the internet to these guys but I rely on data they have a really support model and and there's a good community of people and slag to get help so the way this is structure for graphical and I actually don't know anybody who works this is not an advertisement for them I've just been enjoying doing it is if you set up your schema and I'll show you a couple of the other things so the schema here this is default this constant like internal internals of the system you don't have to worry about it so what I wanted to do was to create a type so we're gonna create a type called post and then later on we'll write some code in ecology has to come and go across the internet hopefully and get get this Instagram post sort of service to work for us so we're gonna create this post here so you'll see right away at the bottom can you guys see this okay it's a little small small little big is that okay good balance okay so you'll see that as soon as I did that this type annotation or type description came into the schema here so what I want to do now is I want to say go add some field so let's say they call it the description field and it's a string so I'm not gonna go through whole thing doing this way but I just wanted to show you that that's all of this is doing it's just giving a user interface behind it so okay so then what we'll do is we will go and fit all of that in okay so okay actually before that let me go and delete this okay so while this is happening how many people have played around with Scala here so far how many people who did not raise their hand do JavaScript coding or have ever had to do JavaScript coding okay so you're my target audience you're the guys who I need to impress okay this is taking a bit of time not quite sure why but we will come back to that so I'm gonna introduce now is a project that's my starter project here is called Scala GS react interface so obviously in the in the realm of the user interface there's a bunch of things that you have to do to interface with the dog to interface with the rest of the world right you can't just stay inside your little scala bubble this garbage is bubble and so that forces you to kind of either say okay well I'm gonna natively program against the browser or I'm gonna use one of the frameworks so if Facebook did a great job with this framework a few years ago called react.js and more recently with the react native and just been phenomenal advancement now hopefully you know these things have a lifecycle to them but so far in my experience that's been pretty nice system to work with there's a lot of immutability concepts already built in the difference between react is that react is a JavaScript oriented framework and react native is a framework designed so that you can write your applications and present them inside a mobile phone inside say an iOS phone or Android phone as well as inside a web app so right once that's the vision right once and be able to retarget and kind of works you're actually kind of you know starting to actually work so the iOS and the Android part I've been working for a long time the web part has been very tricky to get right in a nice easy way and that's starting to get better so there's a community project called the Scala GS react interface which as you can tell takes colleges and provide the bindings to be able to use react native it through scholar Jasmine so this is a really really nice project I highly encourage you guys to please star it it's not my project I on the Gator chat to help out here and there but it's a really our project by Chandra who works out of India and a few other people and so it's very rich I mean it takes a while for me to even scroll down is actually a second page of repositories inside this github project and all of them almost are really nice mud very nicely modular aspects of being able to interface with react native and other things in the browser okay there's also Gator 8 projects where you can get started pretty easily and there's several examples there's this particular community that's doing this college if reactor interface is very very small right now so just as a mortal warning all right you're gonna have to get your fingers dirty but it's just done well it's just it's done really well and I and I'm hoping that this conversation today actually encourages you to give it a shot and actually contribute to the community as well okay so let's see did how many times you have to click you're deleting this post I think he I think you died let's go here okay he's gone okay so we're gonna come in here we're gonna add our post model here apply changes okay and then let's go into the playground here and what that lets you do is just lets you insert into the actually any kind of mutation you want to do any kind of queries you want to just play with them before you put them in that code so I have this one already ready and this one is creating a post which is what we just created the schema type for a post and filling in a couple of fields we're just gonna play that I'm gonna come out here and look at data and your post and you'll see now there's an entry so that's what we just did okay so now that we have introduced very very quickly graph QL we've introduced this project that I'm going to be using to hopefully do some coding here and then we've seen the visual way of setting up your graph QL schema I'd like to now switch to actually looking at this more closely okay so this project I will publish it because it's the first project that I found that well I did not find a single ready-made starter project that had both the iOS Android as well as web worked out for react native and with Scala GS so once I clean it up I will publish it and hopefully it'll get listed somewhere in a couple days as part of the Proceedings of this conference so so watch out for that but it is based on a starter project and that one I will leave a pointer for as well it's the way that these things were organized right all of these it's very hard to see but I will zoom in on the code when the left in the project bar here is very hard to see but all of this is just traditional you'll recognize it as traditional Scala Java way of doing things so you got source main Scala and then our packages we shall start to go through but on the outer side here on the outside right there is a bunch of things that are more traditionally JavaScript so there's an assets folder right with some JavaScript already put in here so this is a JavaScript library that I've imported these are outputs that are going to be used by our iOS app and our web app I don't have an Android test here to show you but but that's that's the output that gets generated by this colleges I guess compiler or transpiler and okay and then and then also you'll see things that again you know like the we Escala people kind of intend to hate you know there's these JSON files that are setting up how the JavaScript side the react side of the project is gonna be set up there's nastiness in here that you know just it's just horrible horrible stuff but you got a you got a you know if you're going to do user interface programming you have to do JavaScript ultimately you have to compile down the JavaScript and you have to play with with you have to interact with all the libraries so this comes with the territory but it's horrible stuff okay and then you'll see you know index J s you know in this particular case all it's doing is thankfully not you know it's just importing our our output JavaScript file here so there's other things in here that are needed by the JavaScript part of the world and of course we have our build SBT so you'll see here and all the example outside that the triple percent is the Scala GS way of having the library as the scholars yes versions the library is being pulled in and and then very nice in Scala GS reactor interface is very nicely motorized so you have the core that's separated from the mobile on the web which is really nice and then the universal components being split up from web specific components the web routing being split out from other routing and so on so it takes a little bit to get it set up if you're trying to do both a native react native iOS Android app as well as a web app from the same codebase it takes a little time to finesse this and get it quite right but I'll publish this project for folks to get started okay one really really nice thing that Chandler did is he created a platform plugin for scholar just to react interface which is what this free project is and so a lot of the complexity that you'll be used to have in these SVG files now is taken care by that plugin so it's this is starting to become really nice okay so let's let's get into it so what we're gonna do is we are going to look at our core main file here which is I just didn't rename it it's mobile app but in fact it's actually for both mobile and and the web stack and you'll see that in a second so just like normal you know we have an object and then we have in this case it's a main we need a main at least the way that colleges react interface works that's the the thing that gets executed by the JavaScript runtime once you load it in okay so that's how it finds it so right at the top you can see that one of the plugins here the three platform plug-in has a function which is an is web or is iOS or is Android and so that's our first four point here if you are doing a web if this has been if this is if this question is executing in context of the web we want to render to the Dom we're going to pick up a in element in our HTML page which is really just a shell called app and that's where we're gonna inject ourselves and the thing we're gonna inject into it is something I've added in this project called web root just some modifications to existing starter projects so so let's take a look at so is this clear so far what's happening here alright this is if you see if you see any kind of you know even in JavaScript environments where you're trying to insert an SVG you know you look you find one of the Dom elements by its ID and you inject yourself into it so that's what that is okay and then the rest here is the non web part so my hope is that as this evolves that we'll be able to actually combine the two into one it's almost there but there's a few little problems that are preventing that from actually working and again it's actually JavaScript side it's not scholarships at all so eventually we should be able to just get rid of this is web and then play with the Dom directly instead we should be able to just play with directly our bindings against react native and do have a common code even at this layer but it's just not at least I couldn't make it work okay so in this else here you'll see in the app on this side right now that I'm gonna demonstrate is the stock app it doesn't have the graphical modifications that I'm going to show you on the website so but all this is happening all that's happening here is that there is a navigation functionality that react native provides that we have built bindings for or trans risible bindings for and that's alright okay so we'll come back to the iOS one in a second let's focus on the web one so obviously the core function the important function here is web root so let's go and I'm just doing command B and IntelliJ and we'll go straight there so this this route is made in made up of a it's a it's a routing wrapper and as you if you've ever done any UI programming you're aware and I'm not a big program or actually but now you you were gonna try to have some sort of a router so that you know his things like history word for word back works but also that it links between different parts of your app work so and that's what this is so so in a Prout's here we've registered a screen and so let me actually show you the imports here first so you'll see there's no magic here so genres three web browser code is just creating bindings for the underlying react routers okay so that's all this is right most of the code is actually JavaScript it's just the facade that's been created here okay so here we've registered a screen called posts and and there's some not found 404s and some other code here which we ignore for a minute and so this is a key thing so let's go to post screens gonna zoom in there okay and then in post screens a couple of things going on first of all po screens is the the shell that will draw our page or in our app basically it's the outermost thing here and you'll see this query render in here so this is the graph QL query system and this ecology has bindings for it this is brilliant like imagine doing this coding in in JavaScript right I mean one little typo and you're gonna be all over the place but the fact that we can use our we can use it you know the full capabilities of a typed facade you know really useful and so if you're wondering what query renderer is you know tap onto it and here's the definition of query renderer and that just makes encoding for a complicated thing like this pretty easy and so could the query renderer is just getting it's ultimately always going to go and call some JavaScript but at least you'll see what types are are being used and so on and how do you have to pass in what the returns aren't on okay so we're back to post post screen here and ignore a bunch of this right I mean so relate our environment actually live you can be able to show you really that environment here is just setting up our ability to communicate on the network getting the right HTTP library integrated and and so on right so that's just a fetch function here again pretty common if you don't like programming or JavaScript program okay so this is the most interesting thing here which is the graph QL thingy so one day we will have proper bindings for graph QL to be integrated directly into scala gist but right now that's just not it's just like the way graphically wall gets compiled inside react native in in in the normal world before you take the leap onto scholars yes that's just not that's not how it works so there's been discussions about trying to make a proper facade for this but so far nobody's done that and so the way that this works is that there's actually a macro that looks for the tag graph key well I should only show you you'll see here all right so that tag then gets CAMAC a macro expanded and and and convert it into a query that gets stored which then the JavaScript side of the world the graph QL JavaScript components then convert and we get models out of it back and I'll show you what those models look like so this is the part that is like again nasty ideally in the next you know your two hopefully once this stuff settles down we'll have a really nice abstraction for this but what this is showing is hey there is a graphical query it's called this and there's a viewer and every query in the Facebook way of doing graphically well has a viewer section and then this dot dot dot is saying that we're going to insert a different fragment of a query inside it the nice thing then is that the higher level post screen shell does not actually contain the query details that are needed to actually show things those will be coming from the next component down in the user interface so this here is a national pointer down again really nice to be able to do this in in in Scala syntax so here we're just doing some error checking once this query gets executed returns which you can ignore for a minute and then then we draw and return the post list component so somehow this has to get filled in and the next component has to get drawn on the screen so let's look at post list post list here is just like in most things in react native you have a render function and you'll see our div tags here this here this odd-looking thing is actually just a library that that has provided a + symbol so that you don't get collisions from other normal Java or Scala code that you might be writing so and also kind of really cleanly identifies that you are actually dealing with daaamn tag so this is a div tag here and some stalling on it and then so for some reason IntelliJ gets confused about this particular thing I've tried it like I mean I if I add a dot as instance okay so this is a live coding part the scary part react node I think yeah okay then it goes away it should just grab it because once you expand it just somehow gets confused by this is one of the few things that this gets confused by otherwise intelligence being really great okay so this is defining a div tag and then we're then if you look down here this here is the posts viewer fragment of the graph key walk query that we saw up here so we said okay please insert the post viewer here in this post screen file and now once we actually go to the post list component you'll see hey there's a fragment post for your that gets pulled in okay so now there's another component that's gonna get pulled in here we can know that for a minute and so this here is a graph cue ball query already you can maybe kind of start to see that there is this kind of nested thing going on here where each component describes so this this is the post list component so you can imagine an Instagram list that's gonna get drawn out by by this component and but each this component here the that's the list which is composed of multiple different items is defined by like this so the nice thing is that let's say in the future you change your mind you say look I don't want just ID for that node that I'm gonna get here in fact I want the description as well or something like that right so you just add it here you don't have to go somewhere else each component then becomes its own maintainable unit so there's another fragment that's pulled in here called post data and see okay what what's going on here so so the the way that the post list is being drawn is okay ignore this stuff it's gonna be hard to quickly over it but this but I will talk about in just a second so there's a array here that's being mapped and then and so that's the results that are coming back from the query okay and these are the edges and we'll see that in a second and then we map over them and then we create a post so obviously that's in the new UI component that's gonna get drawn and that's the one that corresponds to post data here and so let's go take a look at that so this is the post object and here there's the final image being drawn from the query results that have an image URL in them as well as a description so this is the final thing the innermost post details that are going to get rendered on the screen as this is like hierarchically composed and of course right away you'll see that there is this post data query fragment that is sitting here okay so to make the react native world the graph QL world and the Scala GS world the trade offs and the Scala GS react interface library or set of libraries is that all of these queries are compiled and converted into converted into Scala models okay so and that's really really really powerful so post data right on this post here with ID image URL and description has corresponding you must have noticed it here you know elements here so let's go look at models dosed so this file here it's hard to see if it's called graph QL models or Scala that file is automatically generated by the tools that come with Scala just react interface and so this is automatically generated again so as you're coding you have the ability to take this untyped unstructured messed up world on the other side of the JavaScript and we can put some structure around it so this trait that got automatically generated it has all of the elements that we created in our schema that happened not magically just a script that ran so right here right so we had all these things so ok great questions so when I add something to this schema should I do it ok so what's gonna happen well let's see all this work oh no the field danger must specify the migration directive because this type of changer has become required okay so let's say let's go and create it here and type I must have made a mistake danger oops no not that yeah so that post at field danger string field okay so now we have that oh the mistake I made was I made it required but I didn't do a migration path right because it wasn't required before so that would be a schema problem so this should work okay so what's gonna happen now is that [Music] let's see so can you see this okay so there's a script that I showed you very briefly that did the conversion which I will show you again before I run it it's not not list anymore okay so let's go grab it this is when I was painting discussed right right here this thing so this is an NPM package okay which to which you give this URL which is the URL that I have for my remote location of my schema that just got updated okay and then there is and it spits out into a graph QL file which then we pick up and take another NPM package which converts that into Scala and spits it into this location which is where we were looking at the posts files over here a second ago we were lose this file that's auto-generated came from that nasty little piece of code okay so we're gonna do is we're going to now execute that code okay all right word let's see what damage it did okay so now we come back here this just got you saw it refreshed okay so that got updated so now we look for danger danger it's there okay so all the associated properties associated filters associated traits basically and well this is these are filters and then somewhere down there will be a trait or a field I guess yeah okay that make sense okay so now if we were to actually be so bold we would go into one of our files and we would say hey you know this is dangerous oh yeah okay yeah okay that answer your question Oh [Music] yeah not sure why that is actually that's kind of odd because they're both strings yeah maybe afterwards we can go figure out it this is some mismatch right right right right right so let's go look at this models outpost models dot post does have danger and undeath yes I've got on rabbit thank you you actually got it from spot-on yes and yes okay and so there's a clean way of pulling the string out of the undef yes just option just just you know just just fold it yeah yes that's right so to be able to go all the way with this we would have to come here and actually add danger there and otherwise it won't be populated like it'll be in the scholar side as that undef but nothing on from graph QL is going to actually be populating it so it'll just be empty I think for required ones I think that should complain one on the mismatch maybe afterwards when we can actually try that out and see what fails okay all right so hopefully start get the hang of kind of how this stuff works okay so so where were we we were looking at the post we started off the post list okay so maybe we should see if this now runs and does not complain okay so we are able to answer this again the JavaScript part of the world that so we were able to compile not just the scholar side but all the rest of it and then we're gonna go in here and let's see if we can look at the data in our post make sure everything looks fine and that's not allowed this is fine okay so how we're going to oh there you go so that's the image that we had put in there right so just to thank you so now it will prove that that is exactly the way it should be we're going to go in here we're going to run that a second time supercar number two and then I'm gonna come back to our application and we should see - all right so this is working so end to end right it's college is bound by or using react native facades this is a reacting native application running inside the browser using graph key well to get data from a remote location but do it in a way that's nicely structure so that each each unit composes and there's no one like bigquery that you have to go and deal with the alternative to the graphical way of doing this here would have been the the the little field that I modified I've I would have changed everything right there would have been one massive query that was somewhere that I'd have to go in and change that's really nice to not have to do that okay and then so like I said right the the same codebase has the iOS as well as the web part we've been looking at the web part let me quickly show you the iOS part so this is my SPT window here if I pause that for a second you'll see that I'm continuously compiling the iOS dev target as well as the web dev target the web dev target is the one that we just when we added danger to our models you know we recompiled both the dev and the iOS versions but we haven't looked at the the iOS version so the iOS version is running in a simulator so the way that works is that once you have a once you want to test you go in and run this command called yak native run iOS which already done and that brings up your simulator so here's our simulator for iOS for the iPhone and so if I reload it is you'll see that that actually runs and to prove that this is real I can come in here and now switch over to the iOS part of this application and change something so that we can prove that this is real this view style there we go okay so well first let's prove that this is actually working so we say Fu's demo here and say that we should see we should see ok recompilation happened and we should see that recompile ok so that's working right agreed at least the code path is actually compiling okay so before today's demo I was not able to do the graph key well part of the iOS app was not able to get it done there's not really there wasn't enough good documentation so I kind of mostly got it there but not all the way so my hope was that I be what I was showing here was a single codebase doing graphical both for for iOS as well as for when we saw web but the way this was supposed to structure was when you clicked here you would see a list of posts the way that you said they saw for the web app but that's not working yeah probably a few more hours we'll be able to figure that out ok so we talked about a lot of things thoughts comments so my target audience to the folks who currently do JavaScript but don't use Scala GS for the web at least like forget the iOS part what do you guys think questions [Music] so the way that I am doing it I'm not using Scala libraries right now I'm used I'm trying to use as much as possible react native and that's you know for people willing to do react native you know that's what you have so the components are run-of-the-mill react native come public all of the components that you see here right they're not Scala they're actually JavaScript underneath the surface right so the amount of Scala code that you're actually writing it first but it's not going to be too much of the in the UI it's going to be in the logic okay so and that will be a little bit slower because you are actually you know you're transpiring from Scala to a another language so it's going to be a little bit slower I wouldn't be surprised if it was 30% slower the question is in your app you know what percentage of the time is being spent in that and then how much time are you spending right and the nice thing about doing this in Scala jess is that you write your application the way you would write a back-end application or a server application right you have proper you know if you're doing object orientation in your proper object orientation otherwise you have nice structures you have you know the way different parts of your app interact right it's very nicely cleaned yeah so it's it's just like it's amazing writing user interface apps that are is clean in architecture and design so I'm willing to take a little bit that hit for that developer productivity and then and then being able to come in JavaScript is kind of closer to write one sort of thing so this is not so over the last three or four years the dead code elimination has gotten really good and you know your overall sizes for apps you know it's not like you know most most people on their web app at least that's where this size is a concern right you know it's always funny you know you go to the homepage there's like this big animation that's running in the background and then we're wearing about six kilobytes JavaScript app so it is gonna be bigger but again it is part of the trade-offs what do we do one final there was a question who won't find one maybe No okay I've been involved in a in a project to build on top of the CMS some rad code and they the rap people seem to not be kicked not care that they're Rick that you know whether or not they're react application is loaded on pages that it this night we're going to be used up and I'm sitting here that doesn't make sense you want to have the load is as simple as possible for each page and they say well it's still 28 K and so it's like that's you know they're they're forcing their the client to load more than they needed to to look at individual pages so there's still a lot of optimization needs to go on it's gotten better I mean it's getting better I mean the dead code elimination is getting really nice and writes it it's just it's just getting better I honestly I wouldn't not do it for those reasons anymore that you know that that is current as of a year ago there are lots and lots and lots of applications that are incredible there's a couple of those out there there's not that many yet yeah okay thank you thank you so much you