2.2 Transfer Your Model to Falcor

All right let's see how we can now begin to transform this very simple JavaScript, kind of JSON representation of our model and start to bring in Falcor and see what that is actually going to buy for us. So as you can see here I already have my script reference to the Falcor library, and now I want to begin to use that. And it's actually very simple to integrate it into our model here. And I'm gonna show you how to do that right now. So instead of just creating this simple JSON object here and assigning it to model, I'm actually going to create a new instance of a falcor.model, and we are going to pass into that an object. Now yes, this is an object here that we've already created, but this is not the object that we want to pass into falcor. What we need to do is we need to pass in a very specific object that's going to represent everything that we are trying to encapsulate into our model. And the way that we do that is we pass in another object. So I'm gonna pass in another object. And I am going to wrap our entire object that we've already done in here. But now this time, I want to specify a property in here that is going to be very specific to Falcor and that property is going to be called cache. And now the reason that I'm doing this is because within the world of Falcor you have a lot of this caching in a lot of these things built in to take advantage of some of the nice features of your browser, say, like caching to be able to reuse data that you already have and not always have to make requests back and forth. A lot of that thought has already been done for you. So in order for you to initialize a Falcor model that already has some data in it, you need to actually pass in an object with the cache property name and then pass in your model object. In our case, this todoList list object, we're gonna pass that in as the cache. Now once we've done that, that is pretty much all that is gonna be necessary for us to actually build our model. And then from that point we've actually completely built a Falcor model. Big deal though, right? What is that going to do for us? Well that changes a lot of things. That's gonna change the way that we access the data into our model because obviously at this point, this is not going to work anymore. But like I said in the previous lesson, what we want to be able to do is retrieve a very specific piece of information. In this case we want to get the name of the first to do item in the first to do list that's found within our model. We want to retrieve that information without going through too much trouble. We'd like to be able to retrieve it in a similar way that we would retrieve data straight out of our JSON object. Well, let's go ahead and do that. Now we do have to make a slight change here in the way that we access this information. When we're using Falcor, we're actually going to now refer to some methods or functions on our Falcor models. And we can say now model. And if I wanna retrieve some information, if I want to retrieve a singular piece of information, I'm going to use the getValue function or method. And then I can in, a very similar way, simply specify a path to the data that I want to get. So I can say I want to get the to do list, as you can see I'm specifying this all as a string because that's what I'm passing this information as. Literally saying give me this specific piece of information with that JSON object. And I'm actually going to just copy this here. We'll copy and we'll paste. We'll give this a semicolon. We no longer need this information. But what do we get back? What's actually coming back here? Well the way that Falcor works, when you access this model is based on the concept of javascript promises. So which means that Falcor inherently is asynchronous. So once I make this call, I need to provide to it some function to run as soon as it returns back after this promise has been completed. So I'm not going to be doing things like var result equals, because that's a synchronous model. I need to access this asynchronously. So to do that, I'm going to save .then which is going to say once that promise has been completed, I want to execute this function where I'm going to get back a value because remember, I'm getting back a specific value here. I'm asking for name here. And I'm gonna get back this value here. Then once again I can simply say console.log (value) with a semi colon. So let's go ahead and save this, and let's jump back over here to our browser, and let's go ahead and run this. And we're gonna get back here undefined. And interestingly enough, if I jump back over here the reason that I got undefined is because by just doing this little transformation after you come down here and take a look at my path, the path changes a little bit because I'm no longer referring to model anymore. Model is my Falcor model. My first step into my JSON object is going to be whatever is inside this cash property. And so I don't need model anymore. Now I can get rid of this model and simply refer to my object tree here, my to-do list list. And I can refer to it now straight from that point. So now let's go ahead and save this again. Let's come back and refresh. And once again you see I get, Watch Tuts Videos, and that's the same exact thing I got before using straight JSON syntax. Once again I can switch this over and say one again. Let's go ahead and save that. We'll pop back over and I would assume if I were to refresh my page I would see get a great job. So that's pretty cool. That's nice, but what does that really buying me? Like I said one of the first things that that's buying you is the fact that it's asynchronous. So no longer am I worried about having to create new variables and try to get these values as they come across synchronously. I can now chain a lot of these calls together and say go and retrieve this value, go and get the name of this list. And once it's done, once I've got it back, go ahead and print that out. And this is a very common model that is being adopted widely across many JavaScript frameworks. And so many front end developers are getting very used to writing code this way. And it's just a very natural way for that flow to organically appear throughout your client-side application. The second thing that this is doing for you, like I said before, isn't it interesting that I just made a request to a Falcor model. And I was able to be very,very specific about the piece of information that I wanted, I wanted to go into a specific item within an array. And another specific item within a sub array and get a very specific property. And then I wanted to output that property. I didn't have to retrieve the entire model into the client and then have to dig down into every specific piece of information. I was only given back the value that I specified. So now we're starting to get into the whole concept of I'm not retrieving an entire resource, an entire JSON object. I can be very specific and pointed about the piece of information that I want and I'm only going to get that. So that's a very good start, but let's see where else we can go with this whole Falcor model concept.