FREELessons: 10Length: 59 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Moving Falcor to the Server

Finally, we'll take the Falcor model that has been living in our static HTML page and move it to the server. I'll show you just how easy it is to move the source of our data from the client to the server. We won't even have to change the way our data access code works in the client JavaScript.

2.7 Moving Falcor to the Server

All right, so we've finally gotten to a point where we have a simple web server up and running, but now we want to move some sample Falcor logic including our model over to our server. So that our client, or at least our HTML and JavaScript running on the client can then connect to that remote server and get back information, doing our get, get value, set value, things like that. So let's see how we can transfer some of this information around from the front end to the back end. So here's some sample Falcor logic that we've kind of dealt with before. We've got all our references and our json graph built out here. We've also got our GET requests down here to get back the names and completed and all that sort of good stuff. Now what we wanna do is we wanna push this stuff from the client over to the server. And it's actually really easy to do. So we're gonna start by copying or actually cutting all of this Falcor stuff, including the model. We wanna get that out of here and we wanna move it over to our server side. And we're gonna put that inside of our index.js. So we can pretty much just drop this anywhere in here that we want. So let's go ahead and paste it in here. So we have our model as well as the reference to our ref function. So that we can create references to our to do's by ID within our model. And so that all lives over here, now granted, this is a little bit of a very simplified example. Obviously this data could be coming from anywhere. It could be coming from a database, it could be coming from a web server, anything like that. This is just hard coded to keep things very quick and simple. So now we have this over here, we have to think about two different things. We have to think about how does the client make a request over the network to get at these resources. And how does our web server actually, service one of those requests and send back the appropriate responses that we've been getting before and that's where things get a little bit interesting but it's not overly complicated. So the first thing that we wanna do is from the server side, we want to expose what's known as a route within our web application and provide a handler that's gonna handle those requests, to return some sort of data from the server. Well thankfully, in the world of Falcor, we're given this falcorExpress, which is middleware that's going to help translate requests into our Falcor model, and then return the appropriate results. And it's actually extremely simple if you all you're dealing with, so far, is a model. And we have a model, but now we need to kinda handle those requests coming in, get that data and send it back in a meaningful way. So we're gonna come down here to the bottom and right before we do our listen, we are going to add in a new route. And the way that we do that is we use app. Which is actually a reference to our express instance. And we're gonna use the use function again, and this is gonna create a new route. And now we need to define what that route looks like. And you can really give this anything you want, it's typically gonna be / something, and we could put in a word. We could call this any sort of name that we want and you're gonna see if you look at a lot of sample code for Falcor, a lot of times was used is model.json. So we're just gonna leave it as that because that's kind of an accepted route to use for this. But now we need to define a handler. And it just so happens that falcorExpress provides that handler. So we're gonna say falcorExpress.dataSourceRoute. And that's gonna be our function that's going to take in another function which is basically like a callback function. That's going to take in a request as well as a result and then within here, we need to define the body of what it is we want to return based on those requests coming in. Now those requests coming in from Falcor can be very complex and there could be a lot of things going on in there. But luckily for us, there are some helper functions that are defined similarly to this data source route here that's going to help kinda hide all that complexity. And push it all off into the Falcor library so it can handle those things for us. So all we need to do is once a request has come in to model.json, we can pass it over to falcorExpress which is gonna take care of that request. And all we need to do is return our model.asDataSource(). And that's it from a server side perspective, that's all we have to do all the complexity of figuring out what properties, and what pieces of our model are being requested, and how to return the fragments of json, or values, or whatever. All of that is being encapsulated and hidden behind the data source route and as data source and that's all we have to worry about. So we can save that. Now, the next thing we wanna do is we wanna augment this index.html and stop it from being static and actually have it return data that is coming back from the server, so what we wanna do is we're actually gonna copy all of this. We're gonna say all copy and we're gonna stick that into here. And we can close this for now. And we don't really need to save those changes, right. So now within index.html, this is what's gonna be served from the server. And our model is gonna continue to be the same. We're gonna continue to issue GET requests and we're gonna get the name and completed, just like we did before, and print it out to the console. But now what is model? We took away the model, we've cut it out of here and it was basically just us hard coding a new instance of a Falcor model while we still need a model but we're gonna create this a little differently. We're gonna say var model is gonna be equal to a new instance of our falcor.Model but in this case, we are going to initialize this a little bit differently. So before, we were just hard coding some data into the cache and so we were doing it this way, but since we don't wanna do that anymore, we really want that cache to be initialized from the data that's coming back from the server. And in order to do that, we need to point our Falcor model to an HTTP data source that's out on the web somewhere and it just so happens that it's gonna be pointing to our web server here. We are going to initialize its source property and this source is going to be a new instance of a falcor.HttpDataSource. So it's actually going to map very similarly to what we created on the other side as the model being a data source. And now we need to give it the location to go or the route to go to for all of the requests that are being done down here like the gets and the get values and the set values and things like that. And the path is going to be exactly what we configure down here on our app server, /model.json. So we simply say /model.json. So now, all of these requests are going to be sent from our client using JavaScript to our server over here. And then once those requests come into this endpoint, that request is gonna be handled by the Falcor middleware and we're gonna return our model as a data source. And all the translation between the incoming request and the outgoing result are all gonna be handled for us. So simply save this. And we're gonna come back over here. Let's go ahead and stop our node server and just restart it, so that it gets all of our code changes. And now, we're gonna switch back over to our client here and I'm going to reissue this request. And now instead of getting Hello Falcor, you can see now I'm getting printed out data. And I'm getting that information that I was getting before where I'm getting the different todoList and everything like that. But this time, instead of it actually coming from our local machine, there are requests being sent out. And you can validate that by taking a look at the network traffic in the developer tools in Chrome or whatever your browser is. You can see the first request came through as localhost and that got back the full HTML document. As you can see right here, here's our source code. And then it also made that request out to go get the falcor.browser.js and that's that first script reference at the top here, and then it made a GET request to the model.json endpoint passing into it. The paths that we were defining within our JavaScript and it got a response coming back of this right down here that you can see. So now we have gone from a point where we were really just hard coding our model in our HTML to pushing that model as being generated out on the server. And then ultimately being sent back based on whatever requests are coming in from our client. Now once again, like I said, this is a very simplistic example. This data could be coming from anywhere but this is just a very quick and easy way to show you how to get up and running, by how to get up and running using the Falcor library with a node and express server.

Back to the top