SF Scala: Irfan Ahmad & Taimur Mirza, Live-coding Serverless iOS/Android/Web Apps with ScalaJS
thanks Lexi my name is Irfan I'm a founder barrier the start of we started about a year ago called cash physics it's in stealth mode my prior company where I was a founder we were standardized on Scala except the front end where we were using javascript and one of the JavaScript frameworks called angularjs and when we started that company 2011 at that time that that's the best we could do you couldn't really get Scala all the way and so we weren't able to so about half as my previous company five years and they're growing and continuing I left to build this new company and scholars worked out great I don't think the front had worked out really great I think we ended up with some really bad choices and slowed us down a lot so a couple of years ago maybe two and a half three years ago I started to pay more attention to more end-to-end and front-end programming with Scala GS transpiled to JavaScript with the project called Scala GS we came very interested in starting to track that and build a lot of prototypes dozens of prototypes during the last two and a half years to just keep up with the technology a few months ago I became involved with an open source project that it's trying to take it a little bit further which I'm gonna talk a little bit about today and so that's what this is about and I'm not talking about anything that's sitting in production in my startup yet the ecosystem that I'm going to describe think this as a check point okay we've made some progress in the open source world so we're gonna just take a survey and figure out where it is and maybe look at an app that I've been working on based on some open source apps which we will open source as well in the next few days so think this has a check point and a progress report like I can't today report that this is ready for your you know fortune 100 production app yet okay but I see no reason like I'm at that point after the last few months of experimentation where with this particular flavor of the stack that I'm going to talk about today with them or or a different of flavor okay I think it's it's the there's light at the end of this tunnel I think it's just a matter of working out a few more kinks making the development easier getting documentation in place and so on so I feel like after this this what this experimentation I feel comfortable that for my little tiny startup that I'm willing to take the bet because I think this ecosystem is gonna grow and the long-term benefits of of a functional programming environment and Scala in the front end are worth it for me to take that I think some of you may decide differently when you see kind of some of the rough edges that we talked about today so the more and I started collaborating on like experimenting with some open-source apps on this framework a few months ago and was when I saw a Lexie back in November and I was talking about something like what I'm gonna show you today he thought hey why not do a meet-up on this and so thankfully it was just pizza there was no like tomatoes because otherwise I'd go home pretty red tonight because I think that there's a lot like I said there's a lot of rough edges think of this as a progress report my name is Brian Manley I'm a Java developer but I just started hacking I'm just learning alright alright so there's no tomatoes which is good for me but there are like this is open session I think this is there's actually people in this audience who are better experts at graphically well than I am and probably any of those things right I'm just trying to put it together and create some demonstrations and try to build a community around this that's my that's what I see my role as I'm not an expert like jump in if you see something here fun this is better way of doing that or have you thought about this alternate fair enough is it establish those as the rules of engagement I think the night will be a lot easier I also have the tendency to speak fast so maybe tomatoes would have helped maybe in that specific situation okay so there's a few things we're gonna talk about today the overall theme is can we become server less while staying in the functional programming sort of world Scala sort of world right it's kind of the highest ten thousand foot level concept that I started to play with the Whittemore when we kind of conceived of this sort of presentation a while back so server list is obviously one of those buzzwords it's hard to define but the way that we're going to talk about it is that there is client code that's either running in a browser or it's running in a mobile application right in your phone or tablet so this client code but for your project you're not running a scala web server on the other end that's going to communicate with that your client application is going to communicate with over some custom defined rest api's to get access to data to authenticate to do other things like that right so we're not doing that right so that was the experiment here I'm going to talk about instead what we're doing is we're gonna use fairly prepackaged services and some things like graph QL to be able to access our data pull it into our client maybe cache it filter it and and so on and present it there okay so this is not this server less is bigger than that right and thoroughness is it look at a lot of other things but this is the part that we're we're gonna talk about okay so what is a client in this context right so the client is in this context you can see the simulators running on the right most is the iOS simulator you've got an Android simulator right next to it then I have a web page loaded here which I'll show you in a second so that when I say client that's what I'm talking about I'm talking about a web application right that is a JavaScript application so it's it's the entire app is running inside your browser but obviously the data is not inside your browser when you load up the app the data has to be pulled in and other things right same thing with the iOS and Android apps those apps are complete apps but they need access to data they need they need to be able to manipulate things in in the rest of the world so that's the client in this context so it used to be many many years ago that for each platform you'd have to launch a separate team and ask that team to become an expert at say one of the teams might be an expert at Android application development another one might be an expert at developing an iOS application stack and then finally you've got your traditional web app team and even to this day maybe most companies have that sort of timeline I don't know many years ago people started to say hey is there a better way there's a lot of application logic that is being duplicated in Java in Swift or Objective C and in JavaScript there's a lot of logic that's being duplicated there that at least that stuff should not be duplicated right we fix bugs in three different places that doesn't make any sense now we implement places and different release cycles that's not a good user experience right if mom uses an iPhone and you know daughter uses an Android phone their apps actually end up with features at different times there's no reason why that has communicator so what started to emerge around this was a few patterns one was things like Cordoba and others where you would write your application in a single platform in a with the single language and then you would cross copilot to couple platforms so that was a rage for a while there's problems associated with that one of them is they didn't give you a native feel so turned out that somehow or the other are either people who use an iPhone and have this built-in expectation that it that their apps behave in some uniform way right there's things have to look this similar and people have studied for example subtle things like animations when you tap a toggle right the rate at which those animations and and when people get used to that toggle button having a certain acceleration that people at Apple for instance very carefully designed to kind of have the tactile feel that they want you to have if that changes in your startup's cordoba based application right somehow it it's kind of this God got this uncanny valley feeling to it right so over time people have started to say okay well we want we want native controls we wanted to feel native we wanted to be native but we still have the other problem right which is so much logic being duplicated so the other pattern that started to emerge out of this was I think more recent I think a lot of people kind of haven't maybe even quite gone all the way to this yet which is if you think about in an interesting application of a decent size there is the presentation layer right which we just talked about in the sense that there is some expectation of the experience of that right and then there's a logic so when a certain event happens right somebody toggles a switch a whole bunch of things have to happen behind the scenes right maybe that toggle resulted in some setting being change on the server some email being sent out some notification some scheduling happening you know timer being set all these other things that have nothing to do with the presentation layer but there are the logic of the application right the the business logic or the other technical logic of the application well even if you want your controls to be native oh can that at least be unified can that at least be the same so that are the practices that our development teams have developed over time and the logic that's built with that we don't we don't have to replicate features in that way three times over right or fixed bugs three times over for that right does that make sense right so it's separating the presentation logic and then the rest of the application so as applications especially mobile applications as they've been getting more interesting they've also been getting more complicated right and now especially with things like caching things like offline operations the need to be able to survive not being connected the Internet one while you go in a train through a tunnel things like that right people have started to pull more and more and more logic into these mobile apps and and oftentimes even into the web apps and classic example of that is a Twitter web app very nice nicely done Twitter web app in fact some of the technology we're gonna use today to play around are in use in production by Twitter's web app in other words if you open up a browser and you go to twitter.com the web app that you're experiencing is based on the same technologies that that they were talking about now it's not Scala yes but it is react native for the for web react native web underneath the surface okay so my feeling is that the instinct of a lot of early adopters here which is hey we want to have the same application logic doesn't matter where this called runs and we're okay having slightly different presentation layer layouts and so on I think that's that's I think that's going to survive for a while I don't there's not an obvious other kind of nice spot to be in short development teams around this so I made a bold claim what do you guys think yeah make sense try to replicate as little as or duplicate as little as possible okay so how do we accomplish that how do we accomplish this concept that for your web app and for your mobile apps your cell phone app not cell phone I'm sorry your your watch Smart Watch app and so on that you want to take as much of that business logic as much of the the the the non presentation layer stuff and you want to keep it in a single codebase right so how do we accomplish that you can't write in Java because you write in Java then you can't run it in in not easily in an iOS app right you can't write in Swift because then it's very hard to run over there and used to be you can write in JavaScript because well Apple didn't allow an interpreted language to to be put into an app and you know that was a violation of the of the Terms of Service for having an app get published on the platform so so that was a difficult thing what has happened more recently is that Facebook launched this project many years ago some of you may have heard about it called react react yes right so it's a certain kind of reactive ish way of building user interfaces and and and an application logic so that was JavaScript so as that evolved the Facebook team realized the sort of the same process that I've Illustrated for you so far we're we're in our conversation we just got to which is okay this is ridiculous you know we just have too much stuff being duplicated so they took the concepts of react Jas and they created this thing called react - native react native so what react native does is that you use very similar programming techniques as in reactor yes but they do two things that are very very interesting first of all so it feels like you're you're you're programming in reactor yes like that's the feeling to things that they did one that that the libraries underneath the surface handle translating your user interface presentation layer of code into a Android and iOS app that was a starting point okay so the the the libraries are doing that for you second of all they unified or started the process and I think it's progressing well unify the process of having universal components so whereas before if you had an Android app you know the semantics associated with having a view box were totally different there compared to to a web app compared to an iOS app so the react native team's contributions I think are significant in this regard are you know like they're all kind of the same like the intent is the same if you put you know three programming teams and ask them to build the definition of a view box or the definition of an image component that's gonna appear in a user interface and they get to never talk to each other they're gonna come up with different semantics right for how you nish initialize it with a lifecycle but that's really an accident the intent is the same the intent is hey you haven't even you need to be able to resize it you may be able to slice it in degree were able to put styling around it borders flow it not flow it you know the ideas are the same so what the region so react native team did is they said okay well here's kind of the new lingua franca of how you define components and not just the standard components that ship with the system but also components that you build so you've composed multiple components into a higher-level component you can have even higher level components that at runtime you know create components right and then you can style these components any which way you want you can publish them and other people can import them yeah that's the lingua franca right and then as I mentioned the other component of this was once you do this right the translation of those into a native feel application is done by the the underlying libraries okay all right so this journey brings us to to a point where we had the ability using react native in JavaScript okay to write in a single codebase or single application both the presentation layer and the logic of the application and the dataflow inside the app all client-side I'm not there's no server-side is all client-side it's inside your watch such that that same application could be compiled down to multiple different platforms so that's where we are now a couple things have to happen one is JavaScript like some of us can't program a JavaScript not for the lack of trying I mean you know there's some there's certain set of challenges associated JavaScript there's some ecosystem challenges there's some module challenges or some bifurcation of frameworks challenges there's some language challenges you know it's a hard to be safe inside JavaScript until you're very expert right but it's also the predominant you know language of the web so so that's something we want to look at right do we have to stay in JavaScript so there's multiple different options from there you know there's newer flavors of JavaScript that are getting to be even better over time the fundamentals of the language allow functional programming it's not very strictly enforced but you can and so there's lots of good things that are happening there that's one thing the other thing is okay you've got this app now okay it's let's say you've done a really good job of structuring this app but it's an island on its own how are you gonna get data into it and out of it right so that those are the two things that we want to talk about next so while this is going on two things are happening alongside this number one there's this movement also coming out of Facebook oh that's called the graph QL community right in the graphic world the language and there's competition for this right if you go back a couple years ago there's multiple different ways people are coming up with you know Netflix has a certain way there's people a few other companies that are trying to create this notion of hey can i declaratively talk about the data that my app needs at any particular point of time that not even my app mean it's like a component in my app means right if I'm gonna draw a row and I'm gonna have a list of rows I should be able to talk about what that row needs and then when I asked for the list of rows that I can compose the queries that the data that for each row into the list of rows into maybe higher higher level things so my queries then compose okay and out of that composition write is the final query that gets sent to the server data is delivered back and now each component can be delivered the data that it wanted right so that's an example of the sorts of things that we're starting to happen a few years ago and graph Kewell's is slowly emerged as the standard for that right it's there's a community behind it there's a standard process associated with it there's multiple different services you can now lease as a service you don't even have to put up your own server we're gonna see one of them in a moment so that's a whole graph QL moment and the other thing that happened is college is so how many people have coded Scala in this room that's three quarters maybe maybe a little bit more so the concept is very simple I'm gonna talk a lot about it and please ask questions or engage in and debate about this concept is very simple Scala is why can't we today we we used to only compile Scala down jvn actually there was a time when it wasn't just JVM right you can compile down to CLR is that right yes okay so that's not possible anymore so so so why can't we transpile our Scala code into JavaScript so the execution remains JavaScript because that's again the predominant language of the web until web assembly becomes a real thing and becomes takes off so then that way if we were able to do that a few things pop out first of all you get first-class IDE support cuz you now you have libraries and you can press dot and all of a sudden you get to know exactly what that type is and you know your IDE support becomes really top-notch because again we're used to that in Scala but the the ecosystem for IDE support in JavaScript is still lacking even to this day there's because there's a lot of ambiguity in the language right the types are not defined and so on right there's other benefits that come out of it of course you know slowly over time people have been porting a lot of libraries over to this thing called Scala GS which is this you know write and write your code Scala get a trans file down to JavaScript and so now you have a rich ecosystem of functional libraries that can be compiled down to JavaScript and it's a remarkable set of things like in yes shocking that you can run basically you can run like shapeless inside the your your JavaScript application and do type magic right in your client but so those are the two movements so so so now we bring it all together today we're gonna do is we're going to look at graph QL I'm gonna look at we're going to define some types and populate a little bit of a database with those types then we're going to look at a client application that has been coated in Scala GS using react native okay so those are the kind of the three big technologies ecology as react native and and and graph QL right and we're gonna try to maybe work together and maybe you know build some little maybe additional things into this app we'll see how far we get okay okay all right so let's first talk about graph QL the core concept of graph QL is to be declarative about your data so here is a very simple type and you can see it's kind of got a JSON flavor to it right and but but the interesting thing is that the types are explicit so as Alexi was talking about in the introduction right this is like okay this is cool we can explicitly talk about type right and and so now that enables a whole bunch of things down screen of course and so those types can just be singleton you know scalar types like strings integers and so on you can have more complicated types you can have other structs basically you can have arrays and so on okay so that's the easy part right we're all familiar people we're familiar with one and having to define a type so that you can kind of constrain your system and and argue and reason about it through the type system but the nice thing about graph QL then is that when you do a query how many people have done written like a REST API or any kind of API really not even rest you know okay so more than more than happening so you know I've had the displeasure of of doing some REST API and always ended up you know kind of contorting myself after a few months of trying to maintain this API of on how to actually add more things to it and so on and a key problem for me in a building REST API is was the following which is I have a need because my client app needs a date might needs data and it needs it in a certain shape okay so in this case for example you know my app needs a tag line that's already it's just a tag line but I don't have a rest endpoint that is tag line I have a rest endpoint let's say that is tag line name and contributions now what am I supposed to do I'm not gonna get three times the data right across the network slow down my clients my users network connection sitting in Pakistan or you know in Africa somewhere where Broadman maybe less available uh you know maybe maybe if it's just three I saw I'll say okay I'll suck it up I only need the tagline that's all I need but I will just get all three because I already have a rest endpoint for that right or if it's maybe five to one maybe I'll say you know what let's add another one which is you know just return a new rest endpoint so that I can return the minimal data that I need now the moment that you start down that process right the front-end developer the front-end team doesn't feel very constrained about the features that they're receiving from the business folks they're just gonna keep adding features and you're just gonna be running circles they're gonna running circles around your around you and you're gonna be adding all these endpoints that are different only in the shape and that was so annoying to me I mean I felt so you know I felt foolish I felt like I was doing it's dumb stupid work okay you know adding complexity adding more endpoints and now I have to go and maintain only because the user needs a different shape of the data right they just need the other interesting problem out of this for me was not just the shape but sometimes that the way nesting worked and so I would then ask my user interface developers or the JavaScript guys to go in and write handler so we ended up with so many handlers in our code because data would come in and then we'd have a process that would go and massage the data into what the the components needed right and so I had a situation and actually several times where our clients would call us up and say hey your web app and remember this is a web app right your web app is maxing 100% CPU on my laptop and this paying customer sitting there while you're trying to figure out why a hundred percent you know and it more than once it ended up being where the loop that has to go process the data to massage it into what it needs to be members of a whole bunch of string manipulation and and so on right that that with when the lot of data comes in the system you're just sitting there and you're inside the client inside the app you were you are doing the shape-shifting right and that didn't make a lot of sense so those are the two things I was very frustrated about the nice thing with graph QL is that for this type write the type that's defined at compile time type project if all you need is a tag line that's what you asked for so this is what the query spec looks like right zoom out all right so the chorus back would be hey I'm looking for things that are of type project and by the way I have a query constraint here which is their name should be whatever right okay but just send me back the tag line does that means like 20 other things that I don't need that's that's a really really nice thing but cool now graph QL has a lot of other features and obviously you know I'm not I can't claim to be an expert at it I've used it in a few projects mostly open source stuff so if if there's anybody wants to add something about graph QL and how cool it is how awesome it is or how it is not but this would please help I hope yeah of the back end that's that's awesome and you know is it say is beyond that but it's partly it's also the predicate push down right you're actually able to take the predicates and the constraints on the filters and just push it all the way down right right yeah yeah that's great that's a very important thing anybody else so I'm so why is it called graph QL no that's right that's right so this is very simple one right you have contributors who are users so there will be another type user and this is now a set of users who are contributors there right so that's a link in the graph so now not only are you able to specify queries like the simple one that I that I talked about here that are gonna be very efficient when executing the backend but your queries can now actually traverse that Network and your query spec can actually be constrained in multiple different ways including on the edges of this graph not just the contents of any particular vertex on the graph right so in that's actually pretty powerful as well so for example give me all the tag lines for which the contributor is a user named Dave Righetti all right and be able to just push that whole thing down alright don't give me any more data than I need I just need this yes so so I only know about the static queries I'm not delved into a dynamic construction of queries in the case of static queries right if you can write code that goes that that far deep you could go and execute and create a lot of work for the user and there are might be even some legitimate use cases where you need to rehearse a little bit but if it's static you need to finding it in code you know that you're going there right yeah but it's a good question I need to think more about it maybe at the next checkpoint we will talk more fun yeah okay colonel and for the for the sake of the video I'll just try to see if I can repeat your comments I'm not sure if I'll do justice but the example what's her name example that Jason gave was that let's say for this project you have a link from a link to say good related projects of type project and that that's an example of where if you're not careful your recursion can obviously create loops not even just depth but just pure loops and this that's true and that's Renee Shea mentioned that for example sangria which is a really nice implementation of a query execution interface for graph kewal written in in in very good quality Scala has the option to be able to allow you to restrict queries by complexity so that you can manage the cost carefully but both you guys are making a point guy it's a really nice tool but you have to be careful with it and you know do the right thing right server-side yes so so for example today we're gonna use a service called graph cool to some forward referencing here and they have their own implementation of a graph QL query execution interface that you can put like a regular database behind it right but the thing that understands a query and then how to optimize that query how to build a plan query plan there is one written in Scala to be executed on the server side called sangria and there's a couple of other ones yes yes does it return graphs or forests you can create forests can it return the graph yeah I think so because yes I don't see that I don't know of a constraint for that right it's just in the type system right is no there's no reason why you wouldn't be able to run a full graph I think you can but the Russian is the question is like what is the data system returning to you what do how you want to interpret it is is the I mean is there a hash code on it or not like that sort of thing right yeah it's returning JSON yeah that's right that's right but but it's fairly typed so it's coming it's coming back with a lot of other like annotations with it so that you can do something with it which is what we're gonna do with with Scala a model from this okay all right so that was a very quick tour of graph QL there's obviously a lot of other cool things but probably me maybe as far as I can get Alexi did you have a question okay subliminal you transfer that knowledge subliminally into me okay all right so so and then you know as this as we go forward we'll see if there's other things so that's one piece of technology I wanted to introduce and just encourage you to take a look graph QL org there's a really cool sort of query simulators in there that found off this page where you can interactively just type in a query and and you'll see it right away that the shape of the query that's coming back is the way that you specified it in other words the return shape you get to specify separately from the this this the type definition okay so yes yes for the one that I'm going to show you today is Graff cool as in you know the TLD called out cool it's a service that's right I never free tear that's what I'm gonna use right and it's really nice it's very pretty it's a demo as well and and you can actually get non-technical people to actually do the data entry and things like that in it right it's it's it's it's now of course you you know it's it's not necessarily at a point where you can you know do really big projects necessarily with it but it's a team that's moving very very fast for that one right and they've also open source their stack so you can run your own you don't have to use the service and then sangria's the other one that we talked about is his it's much more quarter Ranger there's no user interface that I know of that that kind of lets you do the complex things with it but you know you can write that yourself and then use sangria oh that's the library I'm not sure if somebody has stood up a service using that library maybe today okay I didn't know that so Jason said that for the viewers online that graph graph cool uses sangria in the back which is kind of nice okay and there's a couple more that that's just the one that I I tried a couple and I like the way this one looked I went with it but I'd start there oh they're not paying me so sales okay so that's one piece of technology right this is all about hey you've got an app you want to interface with the world um and you want to do it in structured way in a type safe-ish way so I encourage taking a look at graph cure for that and many other reasons the other one I want to talk about is react native so we already kind of introduced it right so Facebook project if you just search react - native on google it should come up right away so so now of course they're not you know they're talking about JavaScript because the underneath the surface that's what their libraries are right it's a very rapidly evolving so bugs get fixed fast and bugs also get created relatively fast right we're getting better but again the fact that is part of the Java scripting system doesn't help because the dependencies are nightmare so again you know for someone like me you know it's about like you know kind of sometimes I feel like you know there's a shards of ice and I'm and I'm in an ocean and the cold water is JavaScript and I'm trying to find little pieces of ice to be on so that I can be relatively safe and you know that's ecology as for me because every time I have to deal with JavaScript it just days go by and days I get days right but somebody has to do from programming cry so it has to actually get done and so we're gonna try to do is to you know put some interfaces in front of it so that Scala programmers can can actually get far with it it's absolutely production level absolutely it's it's really good iOS Android yes web is a little bit behind so you have to massage it a little bit you have to but again I come with in yes yes so the comment was about or the question was about is react native different from react yes and react native is a separate project it a if you look at the package.json of react native it depends upon react right so it's using a react underneath the surface all the various things that come with react but what it's adding on top is again this translation of you know having having the app get packaged and an apk created that you can immediately run on your Android phone for example right or that's all of that hard work is taken care of by the library yeah for the web as well but I'm like I'm saying when you go into web and I'll show you it's a little bit more bumpy the right is more bumpy and the reason for that is that it's early days so react native got built for iOS and Android first and it was a good year and a half before people started to really say hey we should really just be using it for the web as well and like it's mentioned earlier Twitter's web app the mobile web app is is maybe one of the first ones and majorly Major League Soccer moved over for at least part of their mobile web app so you go to Chrome or Safari on your mobile phone you go to MLS or you go to Twitter you're seeing that in production so definitely you know it's it's good stuff if there's just a few more pickups because of some library dependency is not nothing to do with a library it's just really the dependency the dependency management in is really nightmarish so that's what makes it hard okay but I think if your JavaScript programmer this is already pretty pretty close to heaven okay if your scholar Jay s programmer there's a little bit more bumpiness that you have to kind of get through okay all right so that's react native an example of what the JavaScript side of this will look I just one reason I'm showing this is again to give you this notion this feeling for what the components you know I talked about how you know you let's which try and standardize in this community around common components that then compile down correctly on each platform right so what you see here is you'll see text you see a view so you won't see a div is what I'm trying to really say right you're not seeing a div here you're seeing view but that on web would compile down probably to a div right and then text here again you're seeing text and of course you can add all your CSS styling to this for customizing your look and standardizing your look and so on what you're seeing text slash text not say you know h2 / h2 or P / P or you know right so so if you again if you're using react negative and you use these basic components and build your components on top of these basic components right they will correctly render in on all of these platforms so react native is also a big topic and we will try to cover it you know just by looking at code I know the only thing I wanted to mention is that occasionally you come across something that just can't be done in JavaScript or Scala GS which compiles down in JavaScript and you really just got a goal and write that one little component for efficiency or for some native hook reasons you have to actually go down and write it in Swift or in objective-c or in Java or something like that right and so it's Nate that capability is natively supported so you can go down and get to bare metal if you wanted to and then hopefully contribute that back into open source so that the next set of people can just include your library and not have to go through that hassle again right so over time many of these libraries happen that is an example of that is Maps there's certain things about Maps that you just don't want to use JavaScript for it's not gonna be efficient you're gonna want to use the native support so people have built those already okay so you are able to get down to the bare metal if you will when you need to okay so the next I want to talk about is Scala yes so I'm trying to get a feel for how much I need to introduce colleges I think we've had quite a few talks at SF Scala over the last few years talking about Scala GS and so maybe that's not something I spent time on so maybe what I'll do is I will switch and start a talk directly about this project this is open source project and this is not the only one you know there is another one that's trying to do something very similar that shutted is working on and we'll see where that goes the and so there's a few different ways of attacking this this is a library that I'm attracted to most because of it it's a very clean abstraction keeps the abstractions as as native as possible and so it's called three SR I it's short for Scala yes react interface so it's written in scala GS so we will see the Codel looks like the regular Scala code and but what it's doing is it's adding a whole bunch of facades or foreign function interface is right and so these are these are Scala libraries or Scala pieces of code right that our endpoints so that you can stay all scala but when you transpile it down the transpiler will look up in javascript for the JavaScript equivalent of that code and then call that at runtime right so traditional facade for a function interface whatever people call it these days so and we'll see an example of that so one request would be that if you like any part of the talk maybe even 1% of it maybe you can go and a star and and hopefully we get more people the reason why I asked that is I'm actually not the original author of this I'm helping maintain it as one of the maintainer but really what we're trying to do is create a community around it and getting more stars helps people you know pay attention and raises the profile of the project and hopefully more contributors coming and improve it ok so scholars yes react interface 3 please start ok so here there's a little kind of a preview what we're gonna be trying to do here and so there's an iOS app there's a web app and there is a mobile app all of them using the same library the same codebase just you know the user interface part of it a little bit different ok so that's what we get ok so let's now switch over to our IntelliJ screen and start to compile some things actually before we do that let's take a quick second and look at graph cool a couple people had queries about that so this is the U the user interface when when you go to the graphical console so you'll see your various projects right so there's some bunch of test projects that I've built here and plus my company one and then you'll see a schema so now in the schema so here's the text definition of the types okay so here I have a user type and this is the one that I created for this demo called post and there's a certain set of things that are by default added by the graphical system created at updated at those are the an ID which is a unique ID right but here are some things that I added so the description just you know a random string danger and an image URL yeah the idea is to build a little app that is kind of like a Instagram sort of an app but it's going to be extremely simple and each host there is going to have an image URL associated with it okay so what happens here is that you know for example I can go here and add a type so I can say hey what should I call it post what any ideas for what a new type for this might be I don't know project you can pretty soon you realize how creative I actually am not so we just create a new type called project we're gonna add a field I'm gonna call the feed tagline right it's a string this would be if it's an array right and and I'm just showing an example so if I say create field the text representation of that will now have the tagline as its string right and this is required that's where there's bang so that's an example of how you would very quickly go and define your typing the nice thing with this user interface that graphical team has done is that when you're adding fields you can also create these connections here and and those then get reflected in the was it they get reflected in the data model as well oh did I get 100% CPU somewhere some of these codes are not working right that's option rush I know yeah okay not sure why that's not sure enough anyway so you can set up the connections between oh there it is I'm sorry add relation so here you can come in and and specify your one-to-many many-to-many one-to-one etc between types right to construct that graph in the type system so okay so we're going to have the project and it's going to be related to all right there we go so let's say this project using Jason's example is related to multiple projects right and it's going to be marked optional oh there we go okay so the project has lots of users and it's optional create relations okay so now we'll see that the project ended up with a an array of users right and that that's actually a relationship that's known to the system right so that's how you construct the graph and then be able to query it yes you can you can yeah and then it'll kind of scream at you a little bit and make sure you know what you're talking about what you're doing but it will let you just preview the change and and execute it I'm not sure what happened there preview and then hands off there we go apply changes right so that then got reflected here is one right okay so I'm not going to go through this right now that part of it so we'll just remove that they have a pretty decent sort of evolution support as well so if you're adding things that are already in production you know there's some basic concepts around application and so on already there that's standard well I don't know about the annotation I think in the new version new standard of graph QL should have the support I believe yeah so this is should be standard on on the left-hand side this is this is all standard you should be able to take this and plug it anywhere including sangre and so on as long as the standard spec is the same okay they have other things like enums which is kind of nice certain things you know you just want a bag of things you want to select from right and so the enum support was added recently that's nice okay so now we're gonna over to data so here let's select post actually let me go and just clean this out so I don't have to regenerate my models oh yeah yeah because there's a cross yeah there we go see it did protect me it saved me from a problem so let's do that all this relations are removed okay and then we're back okay so now let's go over to data so what I wanted to do here was just to show you something really simple you know I mentioned the non-technical user could even be given a user interface like this to go ahead so remember there was an image URL so in this data entry database table here right we have the image URL you have a description and then the system creates the updated add and and the created add in the ID field so yeah nothing special just you know there's a bunch of data or a little bit of data here to look at okay so now finally they're done this really nice job of adding a playground so if you end up in the playground you can type in queries and as well as mutations to enter data to modify data and so on right in this user interface to just test out your queries and then execute them and see what happens so what I just did was I added a new image for a supercar with this URL and so if we go back to our data oops here we should hopefully see that it's there right so this supercar was just added from that query so that's so now that's an example of how in your code on the client you'll also do a mutation which would go and update a field or add-on okay so of course I'm not doing justice to a graph cool and all the cool stuff that they've built but just enough to get me started on the client-side yeah yes yes what's the concurrency model how do nuts how did I not see that question coming let's see do I understand the concurrency model here no I don't think I understand the concurrency model yeah so in other words a lock right you're basically saying hey is there support for locking this report for transactions yeah Jason right so in what so the adjustment saying was that let's say you have a so you can have a very deeply nested query I so query this mutate that as part of that mutation do this other thing right you can have like so the way I interpreted your question without actually splitting and I'm glad you're some kind of probing deeper is that that should be like all or nothing but I don't know that could have not read the docs around exactly what sangria is doing to make sure that it's all or nothing like is it actually like you know a view concurrent or not yes yes yes well that's just a regular database then right any SQL query has the same problem as long as when you send a composite know is that it's just a commit block right so in SQL you have a commit block right so you can finish one commit and do another one in the meanwhile data is changing underneath the surface and it's cons I'm not sure what you mean by session yeah transaction yeah so it's a great block right you can you can have whatever you want but as soon as that's finished you have another one that's data can change in the meanwhile right so it the we should offline the discussion of exactly what because I don't know exactly what the semantics are in the language spec my feeling is that it'll be similar to SQL yeah so it'll be only kind of view consistency of some nature yes absolutely yes and there's other extensions like there's some trigger so like if you do an update and you want the server to do it like a execute a JavaScript function because you executed a query right so those things are also there right so like your insert could be just add a new entry and then that could trigger a workflow that does a whole bunch of other thing for them all right so we have something very very simple here so we're gonna do is we're going to try to create so remember that's that's a structure type language right but it's in graph QL it's not in Scala so we want to do is first we want to do is we want to pull that in and create a scholar model out of it right so actual Scala traits interfaces objects so that when we're writing our regular application and we need to address a post and the image URL of that post right that it will come in as an import of a package that got created as a result of that translation between graph QL and Scala okay so there is a project called this thing which is integrated into my make files and so on into my bill so you don't have to know much about it but what it what this is doing is it's translating a graph QL query sorry a graph QL schema into a a package that's it's scala type check regular scala okay so what I did was I secured that and we ended up with something that should look familiar because I just showed you the graph QL so let's take a look at it okay so here let's actually go all the way down I think post is probably down there somewhere so they probably started from the wrong side I should start from the top okay so all the various functions and features associated with creating the post updating the pose deleting the pose inserting the post and so on right they ended up using this utility as actual apply methods and objects for example right and so on okay so maybe I'll just come back to this I can't know what to look for space okay so here's the mutations right so from from Scala j/s or Scala when we are going to call into the graph QL server to issue mutations right these are the all the various mutations that our schema allowed us to do we could create a user to leave the user and so on including posts on right so that's how that got translated okay so now yeah and then there's these filters which we can use I won't go into filters it's a bit more advanced that it's part of your queries you can do when you do a query obviously you want to order and you want to paginate so that's supported a result and the scala dress model creating scripts that you looked at they also create all of these supports already as part of that okay so so we've created this scala package that has the translation of our schema into scala so that now we can write standard Scala code against it okay so now let's now let's go and take a look at our mobile app okay so the first thing you'll notice hopefully this is big you know see okay so starting to look like regular scholar I mean of course there's functions here and there's objects here that you wouldn't normally be programming against or using if you're doing you know back-end programming so there is a object called Dom for the case where we're gonna compile this down to the web because remember most of our logic is going to be shared but we are going to do a separate presentation layer for the web versus say Android versus iOS whereas we have the capability to separate that out a little bit so what I'm saying here is for this mobile app if you are being compiled down to the web what I want you to do is I want you to take the react arm and render inside this can this outlet Dom element called app ok inside that I want you to take my web app and render it so we'll take a look at what that is in a second on the other hand if it is not web the presentation layer I want you to render on the screen is a totally different piece of code in this case and we'll look at that as well in just a second okay so now first let's go and look at the the web presentation layer here so in the web presentation layer again this is good some parts of this or user interface like things we don't have to understand all of them but we'll try to walk through enough of it to see where all the pieces of machinery kind of connect and create this live app ok so what's happening here is that there is a in scala GS react interface there's a whole bunch of Navigators that are supported so that inside your user interface you can navigate between places in the case of web that's URLs that in history in the case of your Android or iOS device it's a different way of doing navigations not URL or history base it's you know pagination is based and so on so ok we have this post screen that we've registered and then we have a ok well if it's not found if somebody accidentally goes somewhere else you know just bring them to the post screen and here's how you render the navigation for this screen so let's not worry about that for a second let's go to post screen right so here what we're saying is in the post screen we're saying ok whenever you are going to render this screen well what we want you to do is we want you to go and run a graph QL query because we don't have any data what are we going to put on the screen we have no data the data is all on the graph QL sat on the server side if you will it's serverless right on the database side right which is remote so we want you to go now this is not ideal because this is a scala macro and that macro as part of the compilation actually translates this into a structured query that gets executed against the back right now in the long run we want to do is we want to get rid the macro and actually have a proper DSL we just haven't had the time to go and design and strong enough DSL so that you can just write even the graph queue up part we're just beauteous all right really really want to do that and if you have expertise in doing bs else need your help because I'm not good at it and Chandu hasn't had the time to the original maintainer of this project he hasn't at the time to go and spend effort on there so we need help there but for now it's a macro and it converts this standards-based graph QL query right into a into the API calls in the back that are going to go and execute now when that query comes back as part of this query renderer right what we're gonna do is we're going to create we're gonna render a post list so now they're starting to go recursive right so what was the first thing post screen so as an entire screen that's gonna get painted called post green inside it you can have multiple things we just chose to have only one thing which was post list so now we're gonna go and look at what is post list post list is another object and in it we have if graph QL has this concept that I mentioned very briefly earlier but now you're seeing it a live action and that is that for each piece of your user interface each component you can specify the little piece of the query that it has that is its response that it knows what to do with it knows how to render in the in the shape that it wants to get it back and render it in okay so in the case of our post list what we're saying is look I want all posts actually I would you know I not not all fours I just want the last 100 and I want them ordered this way this is again this is graph QL compiled down using this macro and you know here's some other things I don't know specify a filter but here's a shape that I want it in right I want the IDs and then I want to have post data actually embedded so now what this is saying is oh as soon as the compiler gets to this point it realizes sorry the the graph QL runtime that's running inside your the web app or inside your mobile app it realizes hey I've got this thing that I don't know what to do it I know how to go execute this outer query but the inside shape of this I don't know what to do with so I'm gonna fill that in as a fragment okay based on whatever is underneath it so now we'll see what post data is in just a second so our post list starts out with this graph QL query container that has this query shape with of course something that has to get filled in okay and the one when we construct this post list our apply function is just going to create a relay element and pass this container and and of type post list okay so now we say okay so we have this post list you know where where is this post data gonna be so see if I can find it so that's good I should have been I just didn't see it on the screen there maybe it got hidden by something but yeah yeah it is a simple way I mean this is that this is Scala this is all skyline command B command B in IntelliJ yes yes right okay you're there enough oh but here we have our sorry not post list I wanted to post right okay so here we have our post and the render for that post is just doing a div right this is the the web part of it so it's doing a div and it's saying hey when you when you paint this Dave I want an image and I want a description so what is this image right so that's what's being populated by a graph QL into this scholar JS model of of this post and the image URL so let's just take a quick look at it I'm going to go to this definition Val post which is modeled it starts post let's go look at that definition okay so here we go so this is the trait that our model creator created and as you can see this is exactly the fields that we had in our model right the image URL description and so on right so if I was to go and add a new field there and maybe I'll demonstrate that in a second if I go and add a new field there and retrieve on my model generator it should add a new field here and we'll check that and prove that out in just a second okay so now let's go and trace our way back to where we were in this render function so this is the innermost function that's actually going to render the page all right now this is where everybody has to simultaneously cross their fingers because we're gonna try to see if this thing works okay so let's reload it it's loading loading loading and here we go so last time I ran this app I did not have this super car remember I ran a mutation to add a super car so hopefully you believe me that that's real but we don't have to believe we'll do it again one more time so now so we I think we had four items in there and so those four are showing up now this is extremely simple there's no styling on it obviously but let's just go back and look at the code again right what we said was we want to see the image URL as an image right and this is the image tag in HTML and we want to see the description as a text here and you can see what that is right so now let's just say hey for the sake of argument or fun you're feeling lucky so how about we add another div here already and we're going to do this make it easy to debug this and then we're going to now look to see so what's happening here is SBT is compiling that Scala source I have an old laptop takes a little bit longer and so what happened there was actually let me just go in there and show you a little bit more carefully this is I'm sorry this is small but there's a lot of stuff on the screen so when we modified that file right we compiled that one Scala file that changed okay and then as soon as that was finished the JavaScript optimizer ran on top of it and we were done that step now what that did was it created an artifact called scholars yes at Teahupoo - web das which I have this other window open here which is watching for that in the in the Mac OS file system and it rebuilt the target for the web right so when we come here you see that repeated twice right the some tag we're gonna do is we're gonna move this over just to see it in total live action and let's see how this works so here with this time we're gonna say hey we don't want the description twice we actually just wanted the URL so now I just saved that here why did I let's see I did yes and the whole process ran and this should reload okay so the the you know the developer experiences is pretty decent right you write in your code you change something immediately you see in your other window and your second monitor or whatever your webpage come up okay so that was a web now let's see about the other apps so maybe we'll come back here to our code and start at the top again with mobile app dot Scala where I had this F here which you know from dead code elimination when the target is compiled on the Android or iOS platforms right this code is simply removed it doesn't even exist in the JavaScript I just gets dead code eliminated so we're now in this else section here because we're going to compile this down and run it on Android and or or we'll try both actually so here in that case we do because the way that the standard navigation systems work on these platforms it looks a little bit more complicated but really this is just in the navigation logic right so yes yes the long-run the so so you can write a production quality app with Scala GS with react native web today you can write one for iOS and Android today what I was trying to do was a triple play write single codebase now of course what you can do is you can take all the logic in the app and create different SBT projects out of it and then include them into the web and the Android and iOS project separately right now you do and and part of why we're doing this work is we're running through the paces or trying to figure out you know what's the best way so that a single codebase even at the presentation layer okay if you're not you don't care about styling too much you just want to just go write even all of these navigators should just work as is we're not quite there I feel like we're like maybe a few weeks away from that but we're it's a little bit of both it's a little bit of both right now mostly on the lower-level side because there's very few people that have kind of gone all the way and built production apps that are three target in the same codebase so that's mostly the challenge but there are as a couple things on this colleges as well but what I'm showing you now is is actually probably more typical because the web user interface person has different sensibilities and in how he or she arranges things compared to the because real estate right so you know this is probably actually the way you probably wouldn't do it in production not the other way right okay so here you've got a bunch of navigation things I won't take much time to go through it but you know this is the main one UI explorer list screen that is being drawn here so let's just jump into that so what you see here is a again the thing gets rendered in Scala in sorry in react and react native is called the render function remember user interfaces are async right it's usually a single thread or a couple of threads that are drawings everything has to be very async right so this is the all back that we register that the user-interface draw loop rendered loop will call so at runtime this gets called and so there's a bunch of things that get drawn so let's go to look at what is being drawn here and I'm just going to reload the simulator and let's actually put our terminal window up here as well what I'm going to do is because of recording problems I'm gonna actually move the simulators over for this section of the talk so that gets recorded so what's happening here is we've got these two mobile emulators up you can see already that they are subtly different in the styling I didn't do that actually write the that's just a way that it text box is being translated on this platform versus the other right and that's the niceness of the Facebook team and the broader community around it around react native that have done all that work I didn't have to worry about the basic component styling of being different okay so so here I've got a so this is from the three projects demo project I'm all of this code for all of these things written in in Scala in Scala GS and so drawing a view as an example as a sample project write it that's it's all color code that's doing this The Navigators and so on right this is really nice that pretty much anything you can think of in the basic set of controls and components in react native are supported already including things like webview right that's just lets loading a you know that's really it actually went across the network and went to Facebook right which is nice okay so the one that I added for this to demonstrate and bring Scott bring graph graph QL into this was a component here for post screen now this is the same shape form factor as the one that we just looked at on the other side and so that query just went out to the network and brought back those elements and painted them on the screen now they're very small and there's no annotations to there because that's just the way that code looked but it's very easy for us to go and modify that and so just for kicks I will go and just quickly modify that so we can take a look at it so you go to post we see here that the stylesheet is set up at 64 by 64 but if I was to go and modify this at 128 128 you'll see that or maybe I've already missed it yes and then if we go back to our simulators and then redraw Oh which one is this one know what I did it wrong sorry you were saying oh I didn't see it okay let's try that again so that's on oh you know and then oh no see I I am a I'm in team ox and I was actually in copy/paste mode and actually it is it did actually go right I was just in copy/paste more that's my team ox was stuck because I was in copy but it but it was slow it's unusual for it to be slow huh it did it okay which one is this one oh this is Android Android doesn't reload automatically for some reason haven't been able to bug that but this one should work yep there we go so double right yay okay so so what happened there is that our query right remember we had this query renderer the outermost shell of the query was called when I painted that in touch screen the post screen mod object right but it noticed that hey there's a fragment that that has to get calculated right so so then it it took each of those fragments composed a bigger query out of it in the shape that was specified in the query sent that entire thing to the network received back the response parsed it chopped it up into little pieces passed it to all of the components drew it right so that's that's the sort of thing where this is very useful right we don't have to necessarily think through the shapes think through all of the chopping of the data and and all the composition is happening automatically because of ql okay so what do we learn from always I think that the ecosystem around this stuff is starting to get to the point where it might be worthwhile for you guys to kick the tires you know maybe take a sample project in this ecology s react interface a github repository little tiny projects that are very easy to get into much less complicated than this one they where it's just you know one or two Green's and standard Scala interfaces is very easy to get into so it might be worth just given those a try what do you guys think so I know we're kind of at the end but I always like to spend just a couple of minutes polling not pulling this wrong word but asking people you know what did you think as we were walking through it apart from you know the places where we kind of went the question above was about interactions there's actually there's kind of two ways that are starting to become actually really just one interesting way that's starting to become popular in this world which is a reactor stream sort of an approach and there's a very nice library a scholar library that is available both in your standard JVM but also especially in Scala j/s that models the communication between all the various asynchronous components of your mobile or web application as a circuit and so it's really nice you set up your circuit it's called diode you set up your circuit and then you just let the circuit run asynchronously you know throughout the lifecycle of the application so if I'm lucky I'll be able to bring that up and I only want to show the the visualization or that the kind of the mascot or whatever you wanna call it it's kind of cool diode right and then here's a model right so you you set up the way that a trigger from a button would be and all the downstream effect remember who you are you are in the single threaded sort of asynchronous environment you can't block anything there's no blocking in in the user interface at all right so setting up your application logic the messaging backend of your logic about how events are propagated using something like this is really powerful in the JavaScript world they have this pattern design pattern called the Redux pattern and there's some libraries for what's called Redux which is very similar to this as well right yeah you could you so because think of like RX RX there's some libraries that that are about this sort of asynchronous communication there's monix there's rx you could you could write yes ARCA stream is much more about that you could bastardize it I think to do something like this but it.we overkill yes so so what I didn't talk about here is but we're using it is something called relay so in the react native world is two libraries that are kind of competitive yeah that's wrong yeah so for graph QL interaction with something like react native or Elm or other frameworks there's two kind of competing libraries one of them is called relay the Facebook team wrote and one called Apollo which is the Apollo Team Road which is a meteorologist right and so they the Spirit is very similar which is take this fetching and passing the predicates and so on down to the the graph QL execution engine or the interface engine and you know handle that and then wrap things nicely right so both of them do that so in terms of like null query coming back or object not found things like that right there's some basic support on the real aside which is what I was using here I mean I have not tried up all over likely one day just haven't tried it but for basic things like that like Network inabilities and so on so that's exposed directly to you so you can handle it retry logic is handled that way as well I'm not sure if it's kind of maybe all the way to where we want it but I think it's pretty close um I don't know the spec enough to know exactly what that looks like I do know that when there's errors I you know I get to see the library level callback for that Justin do you know what the kind of life spec is for missing data or other errors in flight for graphical recorders yeah right right right yeah and and the nice thing with a library like Apollo or really is they're they're trying to handle that and send you like JavaScript or you know in our case scholars yes callbacks somewhere sure so the question was round house how are the back ends like in this example and more generally how the back ends handled where is that quadrant where is the back end running and what control you have on the workflow there and triggers and so on there fair enough fair enough way of saying okay so so what I'm showing here was a managed service called graph cool and so they have a probably standard database in the back with a graph QL interface that knows how to interpret the queries how to you know do basic plans around it and and optimize the query and then send it to the backend final storage that's right so you don't have to use a managed service you can use it on there's multiple open source projects that provide a graph query graph QL execution engine multiple of them you get to pick and you can operate those yourself if you want and in terms of the other part of your question was what about triggers on the server side like some customizations of business logic and so on at least graph QL does provide triggers so you can write JavaScript code that just like a lambda function yeah right right there is no server-side part at all in this application there's always sir I did not write the server I did not I only configured the certain server through a managed service for this purpose that's a good really good important question other comments people you know what do you guys think I mean is this worth pursuing for an open-source hacker to try to make work and when people use it how many people think we might start it or use it or kick the tires in the next 12 months or a year there's a tremendous amount of there's a tremendous amount of type level programming in the library that is creating the facade for react native called Sri colleges react native now it's not you know like don't get all fuzzy warm and fuzzy about cats or something in there but it's its standard type level stuff right I mean there's lots of traits there's lots of you know the basic stuff in there to to to make the facades with neat and clean and and connectible and so on yes on the graph okay so now I understand your question better so you talk more about the graph QL part of it not the not the libraries that we've been working with okay on the graph go outside yes I don't believe that there's parameter tribes I've not seen them adjacent have you seen parameter parameterize types or dependent types in graph q oh I don't know if I don't think I've seen it so I would say I all but at the same time I would say I don't think they're in SQL and I don't I have never come across a storage system that is reasonably queryable that lets you do the Penan types people are mature written in custom on maybe people have written custom ones but a standard one so that could be an interesting thought process to say hey you know what's the use case for that and it's not fully clear yet right in my head you know why we want that the persistent storage and query layer to have that type of type you do yes yes right yes generated yes yes yeah I'm it's not clear what the balance is I think I will see what well how'd this develop sigh I don't see any push from the traditional graph QL community around kind of going that deep in but I think it requires your raise a good point I hadn't thought about it I think we should all think about that and say hey do we want a query language interface to give us that sort of power seems seems fascinating actually yeah right right right that's very very good line of thinking let's call think about that you give an example of that okay it's a good question I think the way I think about sort of graph QL is not quite like SQL right I think of it as there is a there is the data get part of it right and then there's some amount of joins that you've kind of you were able to push down to the graph cure layer but it's not as expressive yeah you have to do it in the client basically as of Azzam now you have to the client or you you know there are some sort of yeah I think it's not as expressive as as I feel it's not expressive as going all the way to it you know like a standardized SQL um and and and and I think for most people that's okay because what you're doing is you're doing a lot of flattening in the way that you pop so for example what we're doing right our original data is not sitting in graphic you are right it's sitting somewhere else and we're populating Aker more flattened view based on what our apps need but at least right once we do that view we don't have to do more custom API interfaces like restful you know custom endpoint for that right so I think me I'm skeptical that the community will kind of arrive at needing to get way more expressive just because of the types of apps that are being built around right all right no tomatoes that was good well thank you so much and this was a lot of fun for me but remember this is kind of like an open source thing you know just so this particular project that has all three we demo and I've got a couple bugs that we were fixing right up until the last minute so we didn't want to push something up that would if you tried it it would just fell right away so maybe on the meetup groups will as soon as we're ready with cleanup version of this we will post it there and please give it a try all right thank you [Applause]