 So The road to ember data 1.0 Interesting name for a topic. So ember data is 1.0 has been coming for a long long time. Currently, it's in our Beta 0.0.9 or something like that We are expecting it to launch sometime soon So the reason why I want to pick up a topic like this is because I feel ember data has quite a value proposition for Applications that we build generally and it can really help us Achieve a lot without writing a lot of code. So Before I get started how many of how many of us are Rails developers? okay, and How many of you have used ember? amazing so The good thing about ember as such is that the creators of ember are also regular committers for Ruby on Rails so The convention or the structure that you see for ember is very very similar to that of Ruby. So let me get started So what is the agenda for today's talk? The agenda is very simple that we are trying to build an IMDB like application, right? So you have a list of movies. We'll just you know load all the movies You can see the actors for the movies, etc, etc So if I look at this particular data, I can like just click on a particular movie and I can see the details for the movie. I can click on the actors I can see what the details for the actor and everything like that the way I'm going to go about this particular talk is that We'll start building this application using jQuery first, right? We'll not get into you know all the hype about ember and Everything like that. So we let's start with jQuery and see what the app looks like if you try and make it on jQuery, so obviously I don't want to code right now. So I've already Created the branch. So if you were going to make it on jQuery, how would we do it? Just the core ideology and anyone Ajax calls Yes, and then DOM manipulation from your code So that is exactly what I did as well So let me just open that one up. So this is the kind of Code that I had in this is my index HTML and it's a very basic HTML. It has The home page. So let's look at the JavaScript part of this particular thing right so Just for the sake of Simplicity and readability. I have created an object for movie a Class like structure. So it has 90 title summary, etc. Then I have a function which can basically load all the movies, which is an Ajax call So it's not the conventional Ajax dollar dot Ajax because I have wrapped it up inside an Ajax object of my own You have a load movie and you have a long list of translators Then which will just take whatever you get from the response and map it to your object for it So you really don't know what does your service going to return to you, right? So it may be returning underscore values. It may be returning camel cased values It may be returning you values in a snake case But you really don't want to be writing code to manage all of that multiple times. So what I have done is I have like You know brought in the concept of a translator, which will just translate these things for you and Then I have the logic for displaying all of the movies. So I iterate on all of the list I start writing a lot of HTML inside so what is the problem that this thing creates for us that I as a JavaScript developer now have to be aware of How exactly should I write my HTML? What are the classes should I use? So now I am very very tightly bound to The HTML right at the same point of time. I'm also very very tightly coupled to the services and Not only that I have ended up a massive JavaScript file, right? So That is one problem that we probably that is one problem that we definitely see with writing things with JQuery that you write end up writing too much code. You are literally doing everything by hand So that is the reason why frameworks were invented in the first place So that you can actually go ahead and leverage the work that somebody else has done for your own benefit So let's try and introduce ember so What I did next was that I ported the JavaScript JQuery application on to pure ember. Yes, right? So before I go into the code I'll just talk a little bit about ember. Yes So the ember. Yes is built very very closely on the concepts of routes, right? What do I mean by routes by routes? I mean that To identify a particular state of a particular application you have to look at the URL It means that I can pick up this URL and I can give it to any one of you and when you open it in your browser You'll see the exact same state that I am seeing right, so What do we despite the fact that it being a single-page application the URL has to maintain the state? apart from that and ember is a model view controller like structure ember again is built on top of On a very object-oriented fashion, so you have concepts of classes you have concepts of objects Plus you have concepts of things like computed and observable properties. So does anyone know what computed properties are? Seriously, we I thought we do angular and stuff No Does angular not have computer properties? Okay, so ember does plus one for ember So that's binding. So what do I mean by computer properties is let's say for example What's your name? Swapnil Krishna Krishna so Swapnil Krishna. So let's say that the service says gives me two fields first name and last name Swapnil and Krishna, but on the on the On the view side what I want to display is mr. Swapnil space Krishna, right? How would you normally do it? You just probably just go ahead and say mr. Space first name space last name Which is kind of crappy, right? Why can't you just have something called as field name which listens to first name and last name and updates its value accordingly? So that's a computer property the advantage of using something like this is say you have something like price So I can attach some a rupee symbol or a dollar symbol based on localization And it will still change whenever the price value changes. So that's a computer property, right? So I'm pretty sure angular has it, but Plus one for ember anyways oops and Yes, so we look at the HTML file for ember now ember uses something called as handlebars to do the templating bit So what we do is we start with how many of you have worked in a spirit net? Brilliant two three spring Much more so you have something like a master page here, right? So the master page displays a particular syntax So this is going to be the layout of a particular page. You're gonna have a navigation bar I've used bootstrap for this and then this particular outlet here is where your content will be rendered right handlebars is a very lightweight templating framework things like moustache and J template are also built on top of if not using completely handlebars And then I go ahead and define every possible route that I can have So I say I have an indexed out which is Which will be displayed when I am at the root location, which I have pretty much is taken from the HTML jQuery so right now this entire HTML can be essentially developed by the UI guy and I have no interference with him whatsoever So he created using whatever his logic being and all I'll do is when when I get it on my side I'll just start writing these Handlebar syntaxes, so I say a link to syntax will replace will replace into an anchor tag Then I can bind attributes the source for the movie So I know that just the handlebars part of it and I'm just replacing Picking up and replacing parts of the HTML without actually knowing what classes to use what margin and what padding that I should Be worrying about so the first level of decoupling comes here right that I don't really worry about what my HTML guy is gonna say Right and I just put all of my views in one particular place And that's about it So let's look at the JavaScript now So oh, this is weird Sorry about that So over here what we can see is that I have a very similar model as I had earlier Right the only difference now is that I'm inheriting from an ember object instead of just writing the model by itself So everything now becomes an ember object But the first interesting thing is something that we notice right here, right? So you have something called as an ember person and Ember actor and ember director. Sorry app actor and app director now inheriting from person so considering an actor is a person and A director is also a person. This is the first place that we actually see an example of Inheritance right and that is a computed property the full name function returns first name and last name right now what happens is When I look at the routes I can basically see that I am doing a dollar dot get jason It's prefixed by an ember dot dollar for a reason. It's because When I do a dollar dot get jason it returns a promise to me and then I can basically just translate convert everyone into an observable ember array, which is the ember dot a and I bind it to the view so what binds the view initially is just the promise bit So nothing is rendered yet the moment I get the response. I go ahead and bind that response to view as well And similarly, I just go ahead and write the logic for you know, what are the coming soon movies? What is the what is the logic for the trending movies? Etc. Etc. But even after doing this I realized that I still have this translator You know that is still bugging me Because now even at this point of time. I am still tied down to the service layer. I have not yet achieved complete independence Right, so let's quickly have a look at the example using ember developer tools So looking at the developer tools. I see that This particular call has been made The response for which is returning me a massive Array of data so I'm on the home page and movies has actually returned me a list of actors and a list of directors for the movie as well Am I displaying this on the home page? No, I'm not but the service is still giving me an embedded response and I'm still taking that payload and that's heavy for me So this is just five or ten movies imagine a Much bigger list with a much a much bigger list of actors this payload size could be bloated up massively And there is nothing I can do about it even right now today when we write applications with embedded relationships we Always get all of the data and then probably figure out some way of Caching or storing and maintaining and relating all of this cash data that we have got to somehow try and improve the performance Right, which I feel is still crappy So let's go ahead and have a look at ember data So ember data basically works on top of ember So it leverages everything that ember does for you and more so obviously you have your services and you have your application Right, so how does a standard request work? So the application basically Talks to a store and the store basically gives you a record So what's a store a store is essentially a list of records a box in which you can store all of your records Right, so the application says hey I want you to give me a movie by the ID or by the name Hunger Games, right and then the store says Okay, here you go this is the movie by the name Hunger Games and this now goes to the application and the application just does the data binding and This plays it perfect. It's amazing, right, but I Still have not leveraged the power of ember data now, right? So let's bring in ember data. So the moment I start using ember data What happens is when I go to the store the store returns a dummy and empty record to the application There is nothing in the record. It's empty. It just says that the record is still loading But here you go. This is the record that he can use eventually, right? What it does in the meantime is it uses an adapter and a serializer right, so why the plane and the envelope is because the envelope The serializer will basically serialize your response so the job of the serializer is essentially to read the JSON and understand it transform it into the type of the record and Take the record and transform it into something that service understands and the adapter basically just does the calling bit Who to call where to call how to go that is done by the adapter So now after step one completes now ember data kicks into action. So ember data says adapter Get me the movie by the name hunger games. So the other says got it. I can do that I understand what you are a line need to go to I understand. What is my host name? I can pretty much form a query on my own cause the services the services says here you go adapter Now the adapter gives all of this data to the serializer the serializer says, okay I understand how to parse this particular thing. Let me just unwrap it and give it to the record But now while unwrapping it is just updating the record which was already bound to the view So you're using the same record with updated data the data binds and the handlebar renders itself right, so Ember data becomes completely asynchronous from your entire process. It really does not care about Waiting for the response, right, which sounds pretty cool to me And now this record is bound back to the application So Have we When I when I mentioned in the beginning I said our dependencies are primarily to html services So how have you resolved any dependency on html? Obviously by using handlebars But have you resolved any dependency on services before we get to that? Let me just quickly demonstrate the ember data code and this is ember data So I loaded this response now. Let us have a look at a very interesting thing that just happened here So, let me just refresh this Okay, sorry about this one. Yeah So over here we see that there are movies call has been made but notice actors and directors are now just numbers I Have not gotten the entire response for the actors or the entire response for the directors But just the identifications because I am not using actors anymore has my model changed not at all Have my service is changed not at all Nothing has changed, but ember data is not smart enough to just say This page does not require an actor. I will not load this actor. This page does not require a director Let me not load that as well so How does ember know when to load it? So let me just try and click on a movie So the moment I clicked on a movie a lot of calls were made So a particular call was made to a list of directors and a list of actors as well So this thing now from the first response what ember did was it said that I know this movie has actors A B and has director C and it just kept it kept this information with itself Once I trans once I went to a page which was now using the actor Ember data was modern today. Okay, fine. These are the actors that you are going to use But now let me just go back to the page and see if I make any extra calls So now I'm here No, nothing else was loaded Right, you still have the same list of actors and directors because ember data Has an inbuilt caching that it is implementing So it knows that once I have loaded actor ID 10 actor ID 10 has not changed and let me just keep it with myself right so this huh Someone say anything so let's look at the code for this so Starting from the top you see that you basically have the model So the ember dot object at extend has now just changed to a DS model extend so what is the DS DS is essentially the data store that we spoke about and When I say create an object of type DS model and every attribute of the object is now Either a string or something like that So very very similar to what we had already written except for the fact now that ember can actually track the type of model So for the earlier case when I was using pure ember Yes, at this particular point of time, I would always have to translate The release date into a type of date I would always have to say new date release date new date release date I would have to keep doing that or create a function or something which does that for me But in ember data, I don't do anything like that. I just say that release date is a type of date and That is all So an ember data is smart enough to know that if you are a type of date, whatever responses I get I will just bind it to the type of date and I send it along and When I look at the translator bit of it. They are now gone. There is no need for a translator Because ember data manages the translations for you. So I have typically reduced my lines of code massively Right. So looking back on ember again We see that the way we were getting the responses was we were doing a dollar dot get json and Controller dot set module translate movie a massive massive massive line of code, right and Looking at this particular thing say for example actor. I say store dot find actor and that is all so Have I mentioned a URL anywhere? What service do I want to hit? What host name what namespace I haven't because ember data works in a similar way as ember jsu used to convention over configuration So when I have a route called as actor Ember knows that I will have When I specify a model called as actor. I need to hit a service which is slash actors and That is all ever needs to know Now Obviously if you're writing services in a good way That's very useful. But what if I am not really doing that? So currently in this example, we know that I am accessing the file from the file system But my server is actually running on local host So if I just say slash actors, it will do a file system slash actors, which is wrong It will not find anything. So how do I just point it to local host? Either go and make sure that I change every URL at every part particular place that I would ideally do with the jQuery object Right, but no, I don't need to do that. So all I need to do is I just need to specify at one particular place That my rest adapter needs to go to local host 3000. That is all So changing it at one singular place. I can now change my URLs in any particular way that I want. I am not dependent upon the URL to be configured in a particular format So if tomorrow you come and say, okay, we have moved our URLs from this particular server And we have moved it to the AWS server The JavaScript guy just goes and changes one line and that is all you really need not worry about writing anymore So we are moving closer and closer to us decoupling ourselves from the services as well but the biggest problem is that say you are a developer and Somebody comes and says I want you to start developing this application. What's the first question? You're gonna ask Okay, give me the response. Give me the service response. Otherwise, how I'm gonna code my JavaScript, right? So you would ideally need something like like a mock that will help you code as close as possible to the services and Not be really dependent upon the services and that's what we call fixtures Right. So using fixtures. We can actually remove the dependency on services So what are fixtures fixtures are exactly what it sounds. It's fixture data So looking at the very particular example that we were still looking at you see that This thing has all of the list of movies and everything that We can possibly have right. You have your ID summary title actors directors all of it is bound together, right and Notice that over here. I'm just saying actors one and director one I'm not really writing. I'm not really binding an actor to it because that is all that ember requires since I know that I can essentially code according to that, right and What do I do now is I just say that my adapter is a fixture adapter So I will not make any calls to any services and I will just make sure that I am fetching data From the fixtures. It's that simple, but okay fine now We come into a situation where now the services are ready, right? So Now let's have the services So how much effort do you think it is going to take to now, you know, incorporate back the services any idea? How so now we've been using fixtures till now. We have made sure that we point to a fixture adapter Over the top of your head, what do you think we should do now to make sure that we're now hitting the services change the adapter? You think it should be that simple it could be that simple It's actually simpler than that to be honest, you just remove this line You don't even need to remap anything. So by default the adapter for your application is the rest adapter So if you don't specify an adapter, it is a rest adapter. So over here, I'm specifying an adapter Hence, I'm overriding the default configuration. So by just commenting at this line or deleting this line That's it. That's all you need to point back To your services. How many think that's cool? nobody Yeah So So now let's let's talk about some very simple customizations that can happen. We can you know have How would you go about writing a custom host name or how would you go about writing a custom API or how would you handle changes in response? So the way ember data has been created is is that you as a starter getting your app to run on ember data is very simple, you know your initial setup time is Very small, but at the same point of time they have given you every tool that you would require to build Everything that is custom. So just you if you want to customize a host name You just reopen the adapter and you write the host name in front of it If you want to create a custom API, so for example, let's say today your apps are running on version one slash Whatever you are, but tomorrow you choose you change to version two So what change needs to happen on your app is that you just go reopen the adapter and you just write it again So how exactly would you do something like that would be? So you will say the application adapter So you just extend The rest adapter and you'll say the namespace is now say V2 and That is it and with that particular change all of your services will now start pointing to Slash V2 slash whatever was the URL that they were thinking about what about so I just mentioned that when you have a model called as actor Ember says that I'm going to hit something called as actors. So it is doing a pluralization for you. So let's take an example of city So ember is dumb, right? It's gonna say city plural cities CIT ys Which is unacceptable, right? We cannot have a plural of city as cities because that's not how I'll make my Services so ember gives you something called as an inflector The inflector allows you to customize your pluralization. So you just say that the plural of city is cities now, how about something which is uncountable like I Don't know rating rating is not ratings rating is always rating. So you say ember inflector uncountable rating and That is it. So every customization that you are thinking of doing or would want to ideally do in a in a simplistic scenario is all one line only Now let's say that today you are getting a response in a very in the format that we just looked at But tomorrow you want to really go ahead and have something like side-loaded Relationships so does anyone know what side-loaded relationships are? Can you tell me what side-loaded relationships are? Yes, exactly. So when I get like an embedded relationship a embedded response like you get the entire actor So I don't take and give the entire actor to ember data directly what I do is that I strip out the actor bit and I strip out the director bit and just pop in the IDs in The exact same fashion that ember wants it and then ember will load it and display it just the way it wants to So it really will not go and fetch the actors the second time like we saw earlier that it was actually going and saying Get actor 10 get actor 11 if I get an embedded relationship I can maintain the asynchronicity that ember gives me along with not actually having to make multiple calls Another beautiful feature that came out with ember data 9 is that just the way we saw that you know When you have say 10 actors we would be making 10 calls, right every actor one call You can actually specify that I want to club all these calls together By doing this you make just one call and instead of doing a slash actor slash one or two You do a slash actors question mark ID one or ID two or ID three so ember does that bit for you as well and It just pretty much becomes that simple. So this was the get bit. So, you know, just get calls and everything So how would a create look like or an edit look like? so Let me just quickly find that No, sorry missed it too small So I have an edit here and I say that my edit is done So when I say it it is done I just get the current model and I say save and that is it So when I say model dot save a put is sent to the server with the ID that I have saved and The body is the response Is the changed object? So let's have a look at the example So I'm going to remove these two lines and I'm going to open the embedded application So this particular ember data that I had loaded earlier was running on fixtures And you would see that this has made no calls whatsoever to the services, right? The XSR is empty the one that I had loaded earlier now that I have moved it on to the actual services Wow, I didn't go as expected How do I do a control F5 this? Particular call that I had made should ideally have loaded Data Which it doesn't seem to have I don't know why it's not working. I have no clue why it's not working right now So no, it's not working with the services for now. It is still referring to the fixtures Probably something that I am missing on this particular thing really sorry about that So, yeah, I was talking about customizations That's that's about it that I had in mind the reason I chose the topic to be something like the road to ember data is that I actually wanted to walk through the steps of Creating an application from say jQuery over to ember.js and then finally to ember data and just try and say How easy or how difficult it is to go from jQuery to ember data and how easy it makes our life as developers That would be all from my side. Thank you