SF Scala: Shadaj Laddad, Slinky: a typesafe Scala interface to React

SF Scala: Shadaj Laddad, Slinky: a typesafe Scala interface to React

Recording: SF Scala: Shadaj Laddad, Slinky: a typesafe Scala interface to React

[Music] so I'm a fraud at UC Berkeley I'm studying Electrical Engineering and computer science I've been programming in Scala for about the past eight or nine years and so today I'm gonna be talking about slinky slinky is a way to write react gaps in Scala with Scala GS so before I dive into what slinky is let's talk a little bit about why slinky and why you need to even consider writing your web application is gone what is that Flickr okay so wisely so the way we write web apps does fundamentally change recently so your original model is you might have a skull app you might be using play with twirl for templates so you have your database you have your web application and you're generating HTML you send that to your client and then you might have a little bit of JavaScript to make the experience a little more interactive but what we've seen recently is we've moved the process of generating HTML and all those views directly into the client so now you're offering something like a REST API that your web Clement is going to talk to you and you're not generating HTML on your server anymore and now you're gonna have a lot more JavaScript code that's going to be handling the user experience and now the way you can implement a new web is you something like jQuery so that's how we got started with doing it so you load data from the server check what's being rendered applied the adjustments work with some user input to update your state and then repeat but the problem is this ends up looking something like this where you forget to do it some HTML notes from last time that means you have a modal up there that's covering up the entire content of your application it's not a great experience and then the user just staring at a spin air while you freeze your application to wait for your server to come with a response ok that flicker is bothering me so I'm going to try a different port okay so the real question is what we're dealing with the issue we're dealing with here is we have data and user input those are the two key components if data coming from a server we have user input that the users typing and locally and you want to convert these interviews and so the answer to that that most developers use these days is react yes so react gos is a framework for writing web applications in JavaScript created by Facebook so power is almost all Facebook products now and it's used by lots and lots of companies so with react basically you treat your application as a function from data which is coming from your server user input and you're transforming it into views and so in react we call this data props and the user input state so you have components that are going to be taking in props that's coming from somewhere else you have state which is continued locally and you're turning that into something to display to the user so let's take a look a little bit of JavaScript code so I know this is SS Scala but we're gonna take a little bit of look at JavaScript code to see where we're coming from and how react is usually developed so you'll write a class that's going to extend react component you write a render function the render function is going to return the HTML tree structure which is what you're going to be displaying to the user so in this case we specified that we're going to be taking the name value from the props and then this is basically a form of string interpolation that you have in this format called GSX which allows you to have these xml literals so here now if we want to render this here we're gonna be rendering it to the Dom that's our web model and so we're gonna be constructing hello message and then here we pass in the name is Taylor so then we would see on the screen a div with a contents hello to now in most applications it's gonna be a little more complicated than that because you're gonna have your user putting in some input and you want to update your view based on that and you want to maybe send that data to the server so that's when state comes in so two state and to add state and react you have to first specify an initial state so that's what you're starting out so here we're saying that the user input starts out empty and now here in this application we're gonna be putting an input so we say okay we're going to be putting a text box the current value should be what's stored in this stage and this is one of the really interesting things to three-act where you can make sure that your you guys are always consistent by keeping track of data like what the user has put in as part of your state and so you know that whatever the user has typed in will always be stored in that state and there's no way for that to go to sync because you're controlling what's displayed in the textbox with that local state and that's what's happening when you're assigning that value attribute then we also have an Aunt Jane so you pass in a function this is just a regular callback to say oh we want to update a state whenever the user types in some new input now you guys might be wondering what does Scala have to do with this because there are lots of JavaScript developers JavaScript developers are happy development their web applications with three-act so where does what does Scala have to do this the Scala GS is a project that compiles Scala code to JavaScript code it's used by a lot of applications alexei mentioned my parents are working on an application that's an entirely Scala GIS application on the front end and it's being used by a lot of people for a lot of different things so what's go chase lets you do is you can read Scala code legis where you're printing hello and it'll convert into JavaScript it looks like this and this is JavaScript that can be executed in the browser it can be executed in environments like nodejs is even being used now if you want to use things like AWS lambda where you have a JavaScript runtime and you don't want to spend a lot of time on JVM boot ups you can instead compile your code to JavaScript and then read there for fastboot ups the important part here is Scala just outputs regular JavaScript this is not some special flavor of JavaScript where you're working within maybe a custom JavaScript implementation of a Scala VM or something like that here is outputting regular JavaScript and that means it works perfectly with JavaScript libraries and JavaScript tools and that's what really enables us to use react GS from Scala applications now you might also be wondering why not just use JavaScript after a react just is dot Jess it's not reactive scull it was originally intended for JavaScript developers and so why not just use JavaScript for all these applications now the really important thing is all the features that Scala gives you first of all a strong static typing and that's if you are still a developer you go into JavaScript you're really gonna miss that but you don't have that strong static typing and but even if you do use tools like typescript you'll notice that you lose a lot of the conciseness and Scala gives you the best of both worlds with things like type inference you can have strong static typing but you don't lose the conciseness that you expect when you're working in languages like JavaScript you get could reusability between your server and the client so if you already are writing your back-end application in Scala that means you can share the exact same source code on the front end and this is a technique that's really popular so libraries like cats and dogs maybe you pick ax which is the howie's library for converting small values and JSON all these libraries cross-compile to both JVM and javascript so that means everything that you expect on the server to be available is also available in JavaScript this also means for example let's say you have some complex algorithm that you might be running on the server as a batch job but sometimes you also want to also that work to the clients your servers doing less work here now because you're using the same language for the front-end and back-end and because you have the same Java and Scala API is on both sides and means you can just reuse the same code and then run that that piece of code on the client and Scala is does a really great job of ensuring consistency so that means if you have the same piece of code you can expect it to be it the same on JavaScript and JVM you get a lots of that advanced language features so macros while they are complicated and can cause a lot of pain if used properly they're extremely powerful and we'll see a little bit of that later and lastly an ecosystem of professional libraries and tooling so you have things like Scala test as mentioned before you have things like cats or Cersei and you have all these libraries that are extremely well developed and you also have tooling like SBT and they all work really well together and by using Scala you get to use all of these tools and so that slinky slinky is a framework for writing reactors applications in Scala so what does slinky give you slinky lets you use react from skodje's care that's the core part of the key that's what its purpose but it comes with a lot of additional features and design goals so slinky has a focus on making sure that all the code you're writing even if it's intended for react you're writing react components you can still easily use Scala libraries in this code and also it works with JavaScript libraries so there's a lot of software already been developed in the JavaScript community for react yes things like react router if you're routing between different pages in your web app and so slinky has a focus on making it super easy to use this existing libraries even though they're written in JavaScript from your Scala code and the last part is having a developer experience that is as great as javascript so if you've developed an application with javascript you'll know the experience is absolutely fantastic you can save them edit in your editor and by the time you switch back to your web page it'll be automatically loaded everything will be updated and so you had this extremely fast development cycle and so slinky has a focus on bringing that same developer experience over to writing skull apps so let's write some code so now that I have internet hopefully everything will go well so okay let's see if I can balance this okay so I'm gonna can you guys hear me okay awesome so I'm gonna go to I'm gonna create a new app so let's call this goal SF demo so this is the template this is all you need to get started with a brand new slinky project Oh make it bigger see I can just zoom in for now most of the work we'll be doing is going missus huh yeah so I'm just gonna open this up in yes kid anyway so if we can bump that up okay so this gives us our starting project so we have builder SBT so slinky apps are still built with SBT except they do use node and package manager to handle their dependencies so if I go here I'll start up SF demo I can start up my dev server so you just have an SBT dev that sets up your entire hot reloading development server and so in a bit we should see an app but we can start going through the code already so we have my SRC main Scala so let's go to the main so the main is your entry point into your application so the goal one of the goals of slinky is to make writing applications in Scala just I like it as an ESX so the API mirrors what's in es6 very closely so here what we're doing is okay we're initializing hot reloading when we're in development mode we're getting so this is just calling into the regular Dom API is to create a development in our body and then lastly we're going to be rendering or app into that container and so app is where all the magic is happening we import some CSS we import an SVG logo and then we have a component so here we have a stateless component so because we're in Scala we want everything to be nice and statically typed so when you're defining component and slinky you define what are the props so in this case we're not taking any props so that's just unit we specify that we need that's the CSS for this part and now here we're just constructing so you can't use xml literals because they're going away in future versions of scala so instead we have this style of constructing HTML trees where you're just calling functions and then you can specify like the class name you can create an image you can specify CSS and so if this is okay awesome that booted up so now I can go to localhost 8080 and that's right so this is a reactor application running with Scala juice in your browser now we can look into this a little bit we can inspect element the react dev tools pop-up so we are using react here this is not a fancy animated gif that I'm showing you guys so if i zoom in on this we can actually see the structure for app so you can see we have an app it takes no props no state and then we can see we rendered all of this we can even do things like go to the source code which didn't work this time for some reason but I can do things for example like let's say I throw an exception here because of hot reloading it will actually update and we see that we have an exception but we can we should be able to jump to the source here so we actually have full support for source maps here so if you get an exception in your skull code you can actually jump to the scala source instead of to the javascript source so you know exactly what's going on in your application what else can we do so let's modify the app a little bit so we can say welcome to react and we can say sf Scala and one of the cool things that you get with slinky is you get a hot reloading or I should not crash my application on purpose but now we see we have halt loading so without having to reload the page I'm able to get live updates and this even works with stateful application so to actually persist your state across different versions of your application so then you can make things like changes to your styling without having to go through the whole process of navigating through your app to get to the place where you are testing you for all right so that's a very quick tour of what you can do now one of the really core parts about slinky is working with the ecosystem so the the core feature of slinky that enables working with existing JavaScript libraries is the constant of external components where you have Scala code that's interfacing out to existing JavaScript react libraries so let's say you wanted to work with reactor reactor outer is a really popular library where you can handle different pages of your app rendering different components and so if you wanted to use that library from Scala code all you have to do is import reactor under Dom and then this at react object external component is where the actual magic happens so at react you probably notice also here we have app react here so this is a macro annotation so this allows you to eliminate a lot of the boilerplate that's involved it's not required for slinky if you don't want to use macros you can just go ahead and use the non react API as in the docs but this makes it a lot faster to get started with slinky so here we're specifying we have at reactor object route so we're saying this is an external component now we want everything to be type safe even though the original library is written in JavaScript that doesn't mean we can't have static types when we're interfacing with it so here we're saying the props required for a route is what the path of that route is what component we're rendering and then whether or not we want to exactly match it because reactor lets you fall through two other paths if existing exact paths don't match and then you specify this is the component I want to use and once you have that then you can just simply use your component as route path this foo component is my slinky can put it and so with these few lines of code you are able to use existing libraries and not have to reinvent your own router and these external components are really power so for example with the router no need to use that and writing it yourself you can just use your router if you want to do a data layer so if you're getting into graph QL you can just use react Apollo and actually there's a library a polar graph QL slash Apollo scala GS so Apollo the graph QL client actually has support for Scala GS and so you can write code looks like it loads so you can write code that looks like this to say I want to run a graph QL query that's going to get my rates and then with the results I want to render some elements to my screen so if you want to get started with graph QL and you want to write your web app in scala it's very easy to get started without you can also if you want to if you want to style your components and you don't want to just use CSS files you can use styled components it's a very popular library you can check out slinky styled components for an interface already implemented to use styled components and if you want to create a super fancy app where you're rendering 3d objects animated across your screen and at 60 frames per second there's actually a library called reactively render which allows you to use react to render 3d models inside your application and you can use that from scala gist code now another part of what I talked about working with this ecosystem is also working with the ecosystems build tools so web pack is a really popular bundler that allows you to take all your JavaScript dependencies put them together into a single bundle that you can ship to your users and so through this colleges bundler SBT plugin we're actually able to have SBT talk to web pack and so we're able to manage all of these different build tools that we need for a web application under one single build file now another cool thing you can do is a slinky is if you already have developers who are using javascript in in your company but you want them to start exploring using Scala GS slinky supports reverse intro so that means you can export slinky components to written in scala to javascript LED and you can have javascript developers use your scala implemented components just like there were any regular components so you can check out slinky reverse intro demo for the interest of time I want to be able to go through that now another awesome thing you can do at slinky is go beyond the web so if you have this react model normally you're outputting HTML that's what react started out with you're developing web apps but this model can be extended to views in general and so you have the ability to create native apps with Scala through slinky so here we're using react native so I have my application on the right if this is this playing okay so this is actually a natively rendered application so they're so unlike other libraries that existed for JavaScript development on native where you would just style a web view to look like a native app these are actual and native components being rendered by the iOS runtime but the application itself was written in Scala so this Scala code is compiled into JavaScript JavaScript is loaded by your application and your so you're able to create native applications using Scala now so again I won't be able to go through this for the interest of time but you can check out and there's a template for you to get started s between you should add slash create react native spell app and you just hit SBT fast dog GS and you'll have a native app running in no time so in conclusion what does think you give you you lets you use react from Scala gist code lets you use this with Scala libraries and tools so if you're using things like Searcy if you want to write your own custom logic to handle talking to your rest back-end you can do that all with exhibit the existing knowledge you have in Scala you can also use javascript libraries and tools so you can use existing JavaScript packages if you have some custom steps to import SVG's and optimize them you can use webpack plug-ins for example for that to integrate those into your build pipeline and then you have a developer experience that's as great as javascript through things like hot reloading and these build tools that all work together so super easy to get started check out the docs at slinky touch register on me you can check out the repo and we also have a pretty active community chat channel on git er but to get started if you want to just get start with the code you can just do SBT new charge slash create reacts call it out so that slinky slinky is used in production it is being used by Oracle for some of their internal apps as grant mentioned it's also being used on learner comm which actually launched today that's my the product my parents have been working on and that is a full react GS slinky application that's running in production today and now a surprise so this is a surprise even for my parent so if you've been watching the news with react you might have heard about this new concept called react hooks and so one of slinkys primary goals is to make it possible to write react applications in Scala just like you do in es6 and that includes brand new react feature so this future if react hasn't even been released yet it's still in an alpha version but today I am excited to show you a preview of support for react GS hooks in slinky so I'm going to open up slinky hooks so this is the project where we have an implementation so let's say we have an application I have my main file where I'm gonna be rendering my app body in this case I just have a regular app body so I'm just rendering a dip tree this is the same demo that we just saw so in this case I know that I don't depend on any data so I'm just storing this in a valid because I don't need a component in order to be able to render this so if we see oh I already helped the server running so let's kill that and then I'll boot this up again so if we render this we'll just get that basic demo that we saw before with the react logo spinning and then the hello world message now one of the really cool things that you can do with react in recent versions is this concept of functional components so we saw before when we were defining components is we had a class that extends component we defined a render method but with new versions of react you can define components just by implementing a function that takes your props and returns that react tree and this makes it very easy to eliminate a lot of the boilerplate involved so if it's booted up right now okay awesome so this is the app that we have right now so first let's write a component that's going to be rendering this instead of just having this be a static app body so I can do Vala component and here I'm going to import slinky hooks top underscore which contains the logic in order to implement this so I'm gonna do a functional component I have to create my prop so I'm going to create a case class so here we're gonna pass in a name to say hello to in our application so name is gonna be a string I'm going to define a functional component that takes this props and then here now we just pass in a function that's going to go from props and return the reactor II that we want to render so one of the really cool things is this is just a function so that means we can implement this as a partial function so we can do a pattern match here so you can say props name and now we're going to render this tree that we had so I can cut this out and I can render this and here I'll use a little bit of string interpolation to say welcome to react name and my SBT server has been running in the background ok so now my app body is gone so now if I actually want to use this component I can go to my main I can do app component and I just have to pass in the prompts so I do app props name equals s F and if I save this we should see it hot reload welcome to react SS Scala now here this is just functional components this is something that has existed in react it's used in production the really cool thing is react hooks so one thing you'll notice here is because this is just a function there's no way to actually and originally keep track of states here because here we're just going from props to a tree so where would we say oh I want to update my state there's no API to call that because we don't have an instance of some object here anymore like what we had when we were defining classes so react hooks are a proposed API that Facebook announced a couple weeks back in fact and this allows you to use concepts like state within functional components and it makes it really easy to write applications with a lot less code so if I want to do state I'm gonna do what is my current value of state and I'm gonna update state and this is under what I assigned this to is use state now you state is saying okay this functional component is going to be having some state that it's going to be keeping track of the parameter that I pass in is going to be my default value so here I'm gonna have a button and we're going to count how many times we've pressed the button so I say my default value is zero now state will always be the current value of with the state I'm tracking an update state is a function that takes a new value of the state so this is where react hooks comes in so use state is a hook now I can add a button where on click we're going to will do something we'll implement that later I click me and then we can also add a P tag it says the button has been clicked state times and this is string interpolation so if we go back to my app once it reloads oh not found you see it oh yeah you have to do what I implemented this at like 2:00 a.m. last night so in this API is a little new to me so we have a button it doesn't do anything because we're not doing anything on the click but we see that we have some states here now if we want to actually update it it's very straightforward here now what what we have to do is call update state we take our state and add 1 and that's it so now you have a state full application that's keeping track of your buttons and this eliminates a lot of the original boilerplate involved with having to define a state type defining an initial state method and if you look at some of the tweets around this when it was announced some people have dumps that analysis around how it changes the structure of your react components and it really helps to break apart where you're working with state where you're working with your actual views and this is really awesome change so now you can click your button and it updates your stage and if we inspect element go to react we see that we actually have a component right now it's unknown that's because we can't detect the name yet that's something I'm working on but you can see here that we're actually keeping track of the state and this is all react hooks in action so as of today slinky is the first and only Scala react.js library that has support for react hooks this is an alpha feature for the next version of react but slinky is already ready in action to handle that so this is going to be open source as soon as I get home and I have a stable internet connection I will publish it to github so try it out see what you can do with it and I can answer any questions now yeah okay yeah so the question is that in this template that we had we are rendering the reactor logo as instance of a string so in Scala GS when you're emitting these requires so in JavaScript when you're dealing with modules you create these require statements to say oh I need to import this file so when you're working with things like SVG's you can import them as just a file and then you'll get back a string which contains the SVG object and so in scala its College as the way you do that is you have to create an object and then you annotate it with add GS import so the reason we have to cast it to a string is here we have an object this can't extend string because string is a final class and so what we do is we say this is just a just object for now don't worry about the type and then we'll cast it later because we do know that we're going to be returned a string when we try to import this SVG file yeah so it's learn raka calm so this is all a slinky application it's basically a website to learn Indian classical music so you can write compositions you have this interactive editor this is all but in slinky react yes you can even do things like playback so I can play music I don't know if it's loud enough but this entire application is built with react men it's pretty awesome and it's ready for you to try out today so proof that it's using react yeah this is all one giant Scala jeaious react application so try it out it's live today it was actually just launched earlier today so try it out any other questions yeah they're right there in the back all right so there are no more questions I'll be hanging around also I am a freshman in college so if you're looking for interns I'd love to chat for next summer so but thank you [Applause]