 So, this is it, this is the final talk. It seems like it's a long day and you've been all waiting for this talk now. Okay. So, your ID cards might not have my name because I'm a last-minute replacement. Actually, this talk was going to be presented by Samir Fegel, he's the founder of R2, the company where I work, and I'm a full-stack engineer over there. We are JavaScript everything, server, backend, database, everywhere. So, we are a company who's building cool products in the financial inclusion space, that is a CRM and a landing platform for microfinance companies, NBFCs, and small banks. Okay. So, we have cool stuff like Aadhaar and going on stuff. And, yeah. So, we use Ember heavily for our client-side applications. And so, I'm going to tell you about using Ember to build a real ambitious application. Yeah. Okay. So, what is this? If you go to the Ember.js website, it will tell you that it's a framework for building ambitious applications. What is ambitious? Okay. So, you want to learn any new framework, new NBFC framework. You Google, you always come across this site, 2DMBC.com. But I'm sure it doesn't get you any far than just explaining what is views, routers, controllers, etc. Okay. But let's look at some of the applications that are built using Ember. So, it's Zendesk, Travis CI, Discourse, Heroku dashboard, Vine. And they're all huge, massive client-side applications. So, all the crying about client-side single-page applications don't work for public-facing websites. That's not true. Let's see how we can try to build something similar. Okay. So, let's try an intermediate example. So, what gives us the credibility to do this talk? So, our platform has just on the client-side, just on the Ember side of things, R has all these numbers, so many files, so many routes, so many adapters. Okay. And we have like five big applications which are wired together, and they run as one application. Okay. So, what are the important elements if you want to build a big Matthew application? So, one is modules, and then second is you need to have real data. You can use mock-up data, you can use client-side, JSON files, but it will only get you so far. And the third is you need to have custom views, because you will have components which are repeated everywhere. You need to build components which you can reuse with minimal amount of coding, and for this, obviously testing, and unit testing by what I mean. So, let's do a demo first. So, there's a disclaimer. It might be not safe for work because we are using 9GAC to build this demo. So, let's go to the demo. Okay. So, what we have done is, it looks like a fairly simple demo. So, what I have done is, so last night I used 9GAC API, pulled some data, so about 100 posts. I don't know what are all there in the post. And I'm showing some of them, the top 10 of the trending posts here. And I have a search feature which will do a loose-in search. That is a full-text search. Okay. So, let's see. If I go here, it shows me some picture. It shows me some picture. It's like the usual ones. Then I do, okay, I do Batman. It gives me something. And I do something. Maybe I will do Apple. Okay. So, I'm getting, so all these data, they are not local. They are in a live database. Not in a live database. They are in my local database. But this application can go into production right now with minimal effort. I can just say Ember build and it can be pushed to Amazon or whatever. Okay. So, how do I go about it? Okay. So, this thing, Ember CLI. Abhimanyu already gave a great talk about Ember in the morning and he explained really well what Ember is, Ember data is, why it's useful. So, this is one step ahead of that. So, Ember CLI is the best thing that has ever happened to Ember since Ember, Ember data, Ember runtime, Ember metal. There are so many things, but it has combined all of those nice things and it's a utility. It has Ember and Ember data internally. Okay. So, let's look at some of the features that we already know as JavaScript developers that they are not necessarily related to Ember. So, as it's compilation, this term might be familiar to people who are coming from the Rails background. So, it's basically what your grunt or gulp or all these things do. So, every JavaScript project you have to do, minification, concatenation, what else. So, then you might be using libraries like CoffeeScript, Handlebars, less as, stylus. So, you have grunt test to run all of them and then you have test which you, again, which are part of the grunt test. But Ember CLI has all of these out of the box. You just need to import them and just say run or whatever the command is and it will do all of that for you in the minimum amount of time. Then modules. So, Ember CLI internally uses something called as ES6 module transpiler. It's an open source project built by square payments and the good thing about this is you don't need to use require or AMD. It's not that these things are bad, but it's following the same syntax that is specified by ES6. So, tomorrow when browsers implement ES6 features, you just have to remove this library and everything will work as it is. So, you can just say import, controller, name, export, controller, name, that's all. And you can write your code for each separate section. You can write them in separate files. They will all be modules. And Ember is already very heavily convention over configuration. So, in the router file when you say, okay, go to this route, go to this control, go to this route, it knows which resource to pick. It knows which controller to go. It knows which module to pick up. So, Ember has already these features and ES6 module transpiler gives you the ability to write all these components in separate files and all the wiring will be done by Ember CLI. You don't have to worry about the wiring. So, as a developer you would want that your code is separate and it is in modules, which this gives you. Okay. And so, another thing about modules is you always have a case where you have built some feature, say suppose, like I showed you the search box, and you have three, four projects going on, three, four applications going on, and you want that component to be shared by all of them. So, what is the thing you do? You just copy that code to each of your projects. And if you make a change in one, you have to make the changes in all of them. So, or else you push it to GitHub and you lower it and you can still use it. But the easier way here is Ember CLI gives you the ability to create applications, like all these applications and add-ons as separate Ember projects. So, I just say Ember new app one, it creates a new Ember project. I say Ember new app two, it creates a new project. I say Ember add-ons components, it creates a new project. And I can say, okay, app one needs some component, app two needs some adapters by specifying just in the package.json. I have to just give that relative path and these projects will take the components that are necessary from the add-ons project. And you have to understand that all of these are separate Ember projects, they can run independently. So, you can test them independently, you can build them independently, but when you're building the first project, you will get whatever is dependent built into the first project. And when you build the second project, whatever is dependent on the second project, from the add-ons module, that will get built. So, development is independent of the add-ons. Like when you build them, the add-ons things won't be built again. Because they are already tested and running independently, you don't have to worry about them. But when you're building for production, you will get whatever you need exactly as it should be. Okay. So, let's go back to our demo and see how this is done using Ember CLI. So, this was the code that I... It's a simple node script which used 9gags API and pullData and what I did was I just pushed all of those to CouchDB. Okay. So, let's go and see how it looks in CouchDB. So, CouchDB, if you're not aware, CouchDB is a document store database and it's pure JSON. Beeson or what else? I don't know. It's pure JavaScript. It's pure JSON. And it has HTTP APIs. You can call this document directly by calling... by doing curl get of this ID. Okay. So, if I just give this... If I do just a get on this, you're already getting it on the browser. You can get it on the command line or in any program. Okay. So, I pushed each post to separate document in CouchDB. Okay. And CouchDB has something called as design documents. So, what design documents will give me is I can have views and I can have separate functions to do my full-text search. So, I'm using something called as CouchDB Lucene which allows me to do the full-text search without having to worry about the coding of it. And views will give me aggregate of... I can write some conditions which will run through all the documents. It will do a map reduce and it will give me a set of documents that I'm interested in. So, right now I'm saying... So, right now I'm saying by-votes get me all the documents and sort it by... Not sort it by, but I'm saying... I'm calling a view which tells me give me all the documents which are by-votes. So, I'm getting this document. This is document one. This is document two. Document three. And I want to show this data like Abhimanyu showed you in the morning. Ember wants data which is... Okay, I'll come to that. So, this is basically all the data in CouchDB. So, this is what I was talking about. So, this is the data that we have. We have one... This is one document, not the entire result of the view. This is one document. It has an ID, caption something and it has an images array. It will tell me, okay, this is the normal image, and it will give me a link and this is a hugely nested... not that huge, but it's a nested JSON document. So, this is document that I have. Just focus on the images array. And this is the array that Ember expects. Till before Ember beta 10 Ember data beta 10 it was expecting all the IDs in the parent document and just the document separately again side loaded. So, this is called a side loaded JSON. It wanted an ID for each of the nested documents. But now with Ember data beta 10 it's supposed Ember JSON also, but still it needs an ID. So, how do we get from here to here? And the thing about Ember is because it's convention based you don't... You shouldn't fight it. If you fight it, it will give you more pain. So, what do we do about it then? So, the answer is you have to write your own custom adapters. So, you once write the adapter and I'll show you just how the adapter is done. So, one thing you might not have noticed. We are not having a back end language anywhere. We are not having node or Java or Ruby or whatever on the back end. We are directly pulling it out. We are doing this same in our application. We are just having a node back end for security purpose. We authenticate each URL and then we forward the request to CowsDB and whatever CowsDB gives back, we just use it as it is. Okay. So, Ember... So, the default rest adapter that Ember has, that doesn't support that won't understand this result that the view is giving us. The hugely nested JSON document. In my controller, I am saying whenever I do a query, I am specifying some parameters, some path parameters, some query parameters that CowsDB is accepting. CowsDB is saying if you go back to this, if you look at this URL it's saying underscore view sorry, underscore design slash list, underscore view by words. So, all these parameters that whatever CowsDB expects we specify in this component, in this controller and then we say, okay find do a store.find instead of saying just post, I say I am giving it a different name, I am calling it as post-lucy or whatever. And that is some adapter. So, if I just look at that so just the post one it's saying it's not extending the rest adapter the default rest adapter, it's extending a data adapter and post-lucy it's extending a lucy adapter lucy, we are calling it for the lucy adapter. So, now whenever I use these models in my application, they will be following these adapters. So, someone asked the question in the morning what will happen if I am having two or three different services. So, it's easy, you have to just create different adapters but just specifying this won't work you have to actually define what the adapters will do. So, let's take a look at what the adapter is. So, the adapter is extending the rest adapter as it is but it is just overriding a few functions that we need. So, if you remember from Abhimanyu's talk in the morning, adapter looks for the URL and here serializer transforms your JSON string into ember model format. Okay. So, my data adapter is extending the rest adapter and I am saying over at the build URL so whatever parameters I passed in my controller those parameters I am constructing the URL. Okay. So, I am saying if it is just an ID, if I am saying store.find post, comma ID then it will be this URL because it is cos db flash document ID but if it is a view, view is a map reduce output then it will require a design document URL. So, I am getting that from the first line or if it is just an ID this thing or else so we are overriding all the minimum modifications to all the default functions. So, this is the build URL but for every CRUD operation function that you can do you can do find, create, record, update, delete. We are doing all the minimum modifications that are required and the output you get so I am calling this URL so when I do a refresh it is going to the post route and it says that it has to fetch the post model which is in the data adapter. So, this URL is constructed instead of just if the rest adapter would have called the localhost slash js foo slash directly the document ID but here it is constructing this entire URL and then I get back my response so this is my response now it is and the serializer takes care of converting the JSON string into my ember model format so let us take a look at the serializer once so what the serializer will do is it will do the same thing it will just do the minimum modification that we need to do on the default functions so it has something called as find query I am going through if I look at the JSON again I am just interested in the rows not the entire document I am just interested in this arrays and I need IDs in each of my nested JSONs so what I will do here is I will go through all of them here and for each of them each of the rows I am saying get me just the row.doc and I am calling an add ID function to that and in the add ID function I will look at the parent if the parent has an ID I will pick that ID add some count to it and then return the document so however deep nesting I have I will always have a unique ID and then my ember will be happy so let us go back to the demo so this was the default view I am doing a search in this but when I do a search again so I am doing this search this time it is calling a slightly different url earlier it was called as underscore design something underscore list underscore view because I was interested in the view output but this time I am interested in the because I am doing a search I want I am interested in the Lucene output the CowsDB Lucene output and the CowsDB Lucene output looks like this but now I am having a separate adapter for Lucene so when I am doing the search it is doing a store.find on the model which is extending the Lucie Lucie adapter that is what I am calling it and I get the response in a similar way and I just have to create these adapters and serialize this once and then I need to forget about them whether it is coming from Lucene or whether it is coming from view and I should just keep on writing my ember code as it is so one more thing I mentioned about custom views in a Matthew application so ember has a very nice feature called as components Angular has directives I guess so components we are already using a library that is called as Twitter to type ahead it is available but you cannot use it directly because it has to be emberified you need to have it as a component so that you can just use it anywhere as you want you should just give the input and it would give you the output and you can pass it like a regular ember function so what we did was so this is the component class we specify what class names it should have what are the default values and whenever some action happens on it this portion did insert this portion is the default code that the Twitter type ahead expects it is the default jQuery input output I am just monitoring for this when content changes if someone else changes the content then it should load again I am observing it all the time and then I say whenever it is selected just send an action and the component will get it back so I should just go back here if you look at this part this is all I need to do once I have the component ready it has a lot of parameters but it is most of the time it is always the same it has class names and the placeholders but apart from that the content you can see that it has content called as search results and the query what I type that is a query so every time I enter a key the action in the component is triggered it will do all that the Twitter type library expects it to do but because it is extending a model that is sorry it is working on a model that is extending the loosing adapter it will do a back end call it will do a loosing search on CouchDB and then get the results and the search results will be populated over here and then everything is just like a normal table nothing else and testing for the last two days we have heard many times how unit testing is important so I am not going to repeat on that but Ember CLI already has a testing framework so it has a qunit version of it it is called as Ember qunit you don't need to worry about how to configure those tests where to write it it already gives you a folder I will just quickly show you so these are the three modules that I have data, app and addons app and addons were just created by saying Ember new you can just say Ember new app1 addons and all of these got created and app again has something called as test already inside it in the unit folder you just need to write your test cases and when you run them you will know whether all of them are passing or not so that's it any questions I have uploaded this entire demo in github you can download it the adapters and serializers which I showed you was just a part of the entire thing that we are using in our company we are looking to open source it if you are interested you should get in touch we can help you