 This is pretty much what we do. We have a cloud platform. So what kind of companies We are designing a thing. Someone who has an animal. So we need to design a map. They use us to explain how can that customer do financial planning. How can they loan today, the same money tomorrow, letting each other's attention to do the proof there. So we are about 5 years old and we are a young company. We are about 4 people. We have 3 kids and we have almost months and we are planning to have an exciting class. And we are looking to grow to about 10 people in the next 3 months. That's almost 1.5 times the current size. Anyway so that's a quick intro about us. So I typically program on Android and only by listening to that I jump into the web side of things in a big way. I figured out this, I found this new platform called Play. If you guys develop in Java, then you just check it out. It's called Play platform structs and other things that I don't know about. And then one day I was looking at the solution. We were trying to look at the company that is doing the main thing in the opposition. See what it means. It's all about what it means. It's all about how it's going to be. Some of you started to think that we are going to see the last 100 years and all that. So I really wanted to explore those things. And that's when I feel like we are going to knock out the ideas. So how do you guys sort of program with J? What's the most complicated thing? It's kind of pop-up plug-in for your support item. So similar stuff. Everyone sort of goes through this. And suddenly, so when you figure out J where you get it, just do everything with knockout. So knockout is designed in something for it as a model, view model item. So what that has is a VM model. So view is the view that you want to represent. And model is your data. There's something called a view model which fits in between the two. It's like an adapter. So knockout in a front-end platform where there's something in the right side. It can be rendered as you suddenly start realizing that you should just do the things on the one-line interface item. Start scratching. For you to keep your page up-to-date all of this for you. So today what I'm going to do is to show you some of the cool things that knockout does. And I'm going to take an example. So if you guys have your computers slash knockout, it doesn't look as good on this right now. But basically you have a stream of your cup from this streaming API. And some distance back. And I'll give it a number, one, two, three, depending on the list. And I'm plotting them on the map. I've taken ui's icon because the location API seems to work better than the ui's. You can see that the button word disconnects up there. So at any point when I stop the feed. Additionally, I can say something in here. Where is this feed coming from? So you can see that I'm clicking on the button and I'm moving. So let's take one example. So you can see that this feed belongs to this particular marker. This feed belongs to this particular marker. I have a small cross-sign here. And I'm just going to click on that. And another one. Simple. This is easy. Can you see that one is updated? One and so on. So this is sort of the overall thing that has gone into this. Okay. So what we do is. Okay. You will see that there are two options. Zip and tap. Like we can come out higher one. Okay. And open it up. Go into public slash stand alone. Another folder structure. Go into public slash stand alone. And there's an index. This opens up and up. Okay. It's a little slow because I've hosted it on a very small instance. So what I was doing is that's a front page which is talking to our servers that we have hosted on EC2. Which is running the WebSocket program. Okay. So it gets feed from Twitter. Passes it through WebSockets. And it gets rendered over here. Okay. Cool. So what's so special about knockout? Right. Now I thought about being in slides earlier. But I realized that it would be just about, again, replicating, you know. We want a tutorial to last on a blog and some sort of a page which you can search for. Right. So I decided it would be easier to store this here. I'm sorry. Public shouldn't have to be lazy. Public shouldn't have to be lazy. No. Public slash stand alone. Okay. Go into what I was helping you. So it's asking for your Twitter attention. Yeah. Yeah. It's going through ourselves. Okay. Yes. Can I use that? Yes. Okay. So I want to first show a few things about knockout. Yes. Okay. Why is it so impressive? Right. So this is a website called knockout.com. There are some really easy. Right. Suppose you have an example where you have to show a list. Okay. So it could be list of any items or whatever. And you have the condition that you should only add five items. Five items. You can't have more than that. Right. Or you would have counted only liitems. Right. And things like that. So you're taking at least three. Right. So your button could be like an add button. If you see that all it says is data bind equal to enable colon. Myitems.count is less than five. Okay. Did you guys figure this out? So you're saying this button can be only enabled if the size of my count is less than five. It will meet that condition. Okay. Otherwise it needs to be disabled. Right. In jQuery you would have to look at the add event, then do a count event and then do a sort of update event through the button. Right. So three step process. Knockout is able to remember you know what is happening to your data. And then as soon as there's a change it affects that change. Okay. So because isn't that impressive? It's valid. You know we have other events with this line. Right. It's saying data. So this is what takes you to an interesting point for observables. Observable. Okay. You can subscribe to changes for a single item or you can have it. So it will monitor the state of those items and automatically call events and update your UI. Okay. This is a very simple example if you can see over here. You have something for us. You have a plan. You have one. Okay. Kindness is something that you can start with. This is very simple. Right. You have your html here and you have your JavaScript right below it. Now I'll come. What I'll do is actually I want to. So you saw visible. Right. You saw simple thing like enabled visible. Similarly you have other things like text. Okay. So suppose you have a field which you want to show the count. Like the counterfeits that you have currently in your system. Right. You can directly instead of doing dollar you know finding that selector and saying dot text equal to something. Over here you can directly say that what are your computers what are. Okay. Is this readable? I can't do it. Is this readable? This is one thing. Right. What is the view. I want to make it. Sorry. Can you pair with this? This is okay. Yeah. Yeah. Okay. Okay. What I've posted on Github. It's actually a clear thing of it's thought. Okay. Over here I'll give you some instructions on how to run it. Good. The players also really. Okay. So, as you can see we have used both this wrapper, right. So, first of all we explain the basic container and in that I will explain how we have used this north out place which we will put it. So, if you remember they were to, so there are two containers, this is a map container and then this is the sort of your tweets container, right. Now, the map is very simple we have just used basic map code to put in a map over here. Now, this part has again two parts, it has a login box where you can put in your middle credentials and then it has a list. Now, if you are connected, right, if you make a connection, so if I make a connection and my web socket opens up it should automatically go into a disconnect mode, you know you don't want to show your login mode anymore, right and subsequently the tweets, okay, so cool. So, this is your map container, right, this is readable text, this is all sort of garbage from our point of view. Now, here we start over here, okay, so this is my form, right, this is where I am asking for the username and the password, but you would see there is an interesting thing called visible and I have put a variable saying status, right, so if the status is false that is if you are not connected I want to show this form, okay, it is just as simple as this one line, right. Now, for the disconnect box, right, so if the status is true that is if we are connected I just want to show the button, right, the danger button, okay, fine, I come down to the tweets, little list, so I have, I send this over here, okay and you can see, right, all it says is make a template, okay, use the template called tweet and this is a list of tweets that I have, okay, so for each item in this list, draw this template, okay, now as and when the list gets edited that you add an element it will draw it, if you subtract an element it will draw it again, okay, you do not have to know when, who added and what happened, okay, so this is sort of the overall structure of your form, I mean from an HTML point of view, okay, let's go down and let's look at our new model, okay, so I have an object called tweets, okay, this is my class of functions whatever you really want to look at it, I have two elements, one of them is called a list which is an observable array, that is I want to monitor the state and the other one is called a status, this is I want to know whether we have connected or not, right, so this is two sort of variables, now let's look at what happens when I want to add it, so a tweet comes from somewhere, okay, all I do is I say list.push that particular JSON object, okay, as soon as this happens this goes back to that piece of code which says, you know, let's look for the template, right, okay, as you can see as a script tag, in a script tag called, you know, text slash HTML, right, this is only done with HTML, okay, absolutely, you could do anything, it's just that it needs to be available when it's drawing it, so what that means is it needs to be loaded before it has been loaded, right, you would have seen the way we've written the code, we've written, but we have this particular HTML code and after this we have a JavaScript code, the reason is because when the page is loading, as the page is loading, knockout reacts to data icon bind statements, so if this HTML, if this JavaScript structure was above, right, he would have said wait, I don't have any of this property, so the moment you put it behind below it, it starts updating the values like this, okay, and so one important thing, when you are trying to learn an experiment with knockout, please use the debug version, okay, so again knockout has two formats, the minify JSON version is 13 kb, but the debug is obviously much larger, so you won't know what errors you're facing, right, I mean those of you who work with jQuery minimum, the kind of problem they are, anyway, so when I get this template, okay, what does the template say, so you would have seen, we have these green, so they look like yellow over here, but we have these green and we have a sort of a blue tag, right, what is the difference, the difference is when it's green, it actually has a marker associated with it, it has a geo-coordinate, when it's blue it doesn't have a geo-coordinate, you know, an explicit latlong, right, so I can click on the green ones, now you remember the data is coming like a JSON object, right, extremely well-nested, it has sort of, yeah, so if you can see my page, you know, see look at my cursor over there, over time you will see it will start slowly moving on, it keeps loading data, it keeps pushing data, right, because it doesn't support WebSockets, you can't directly put it into your HTML page, so I couldn't just give you a sort of HTML and say here use it, I had to host a server and show it to you, so the span element is whatever it is, right, check out this key support, right, so you see data by visible if data.geo, so that is the JSON object has something called as a geo, you know, that object should not be, should be null, if it is null then make this visible, okay, and what should be the text, the text is nothing but the position of this particular item in the list, right, so it automatically gets 1, 2, 3, 4 and all that, if you delete it automatically gets promoted up, right, I haven't done anything else, it's just this much, right, and similarly if you look at the other guy, the green box, you know, the green box has something called as, you know, droid if geo is present, I could have said not null and drop this, and again the position part, and I added another feature called click, okay, so this is the function to be called if there's a click, okay, now why is this so cool, I could have just written on click or whatever, made this a button and all of that, right, now if you guys remember in jQuery, whenever you have a click event, and you do this, right, what does this stand for, it stands exactly, the element from which the event is getting triggered, right, so again I could have done that over here, so I could have done that over here, but the problem would have been that I would have not got the data, the latest data of this particular item along with that event, you understand, so if you have a list item and the object keeps changing inside that list, and when someone triggers it, you want to know what is that most updated version, we are using knockouts click event tracker, okay, so what do you do? I'll show you, see populating a marker on a map is just basically saying add marker to the map, okay, it's not really using knockout, it's when you do it, so I'm doing this while I'm rendering this layout, so as soon as you see a tweet here you would have seen a marker, a corresponding marker as well, okay, just keep this in mind, okay, just remember this click pan to function, this is when you click it will pan to that particular part, I'll just complete this block so that we all have, okay, this is very simple, we are drawing the image, we are putting the image, right, image tag, SRC tag is coming from directly the JSON structure, right, similarly the text, that is a tweet message is coming directly from the, sorry, there is a screen name is coming directly from there, right, and this is your tweet, right, so text, so this is the actual tweet, this is going to just display the text over there, right, now the amazing part is you can just directly use variables like this, right, earlier I did data.geo, I could have just said geo, I can just say text, right, so it will actually go into the JSON object and it will pull out the element text and the text could be an array, it could be a map, it could be anything, right, so you can directly start using how you reference JSON objects over here, and this is finding the delete, we have a cross, I showed you how you can delete, and again this also has a click event, okay, which is using data byte and not on click, okay, so this is how we draw the element on the right, okay, we are almost done, the only part that is left is markers for the map, this is very interesting, what I have to do is I will skip through, you remember I showed you this function called band2, right, now band2 can take two parameters, data, event, and event will have the reference to which particular object got clicked, okay, but I am only interested in the data part of things, I have just taken one variable, one argument, this data is the most updated element data in that list, that JSON object in that list, right, so all I can do is directly I can say, I have added the marker, basically I created a marker and I put it back into the JSON object, okay, and I said, go to that particular position, right, now this is, see in jQuery, if you are done on click, you would have got that particular element, then you would have found out where in that list is that element and then done, or you would have used the dot data property of jQuery, or you would have put some extra class or some other shady thing, right, over here we don't have to think about anything, no question? Yeah, so I could have done it differently. Yeah, sir, if you want to see my add, right, so I am sorry, let me just go back up here, if you remember this, this is how you were hydrating through the list, right, you are calling it a tweet template, and then another third property called after render, so what is done is after render, so what is done is after render, after render, after render, after render, after render, after render, after render, after render, after render, so what is done is after rendering each element, it will call this particular function, add marker, okay, now add marker is defined like this, so add marker takes elements from our data, okay, in that data and checking, data is the JSON object that we have got, which directly are put into the list, so I am checking whether it has a geo object, or whether I have already created a marker for it, you know sometimes when you are reordering, you don't want it to redraw the marker again, because you will get two points from the same point, right, that is for the same way, so what I do is I get the coordinates, and then I generate a lot from of it, and then I sort the marker, and I sort the marker into the data itself, okay, I did this over here, right, I update this data object over here, and this is updating the entire list, okay, this is it, right, so what this allows us to do is generate really complicated UI, without having to know, you know, the overall sort of where do I put it, into the overall scheme of things, right, I don't need to know which position do I belong into that list and stuff like that, right, and remove marker is fairly simple, right, so we just remove the marker, and I just do data marker equal to null, and finally I say list dot remove this, remember I was saying this, the j query this, remember we were discussing that, over here this reference that particular item in the list, okay, so this is a little complicated, so if you can, you know, avoid, I mean fully understand what does this mean, so if I had found this function from another object, this would have meant that particular object, okay, so that's why what we do is we create a variable called self, I had talked about this earlier, we create an element called self, what self does is, it will store the original context of tweets, so if I ever want to know the supermost of element, right, I can always use self, but otherwise for all the other purposes I can use this, right, cool, so I think what would be good is if you guys can check out the project, you can simply check out the project and I think the server is up and running, or you can run it locally, right, this is the sort of reason for that particular problem. Any questions, thoughts, comments, have you seen something better? I'm talking on my own, I'm talking on my own, I'm talking on my own, so there's a stack overflow question, and both sides of the argument, both sides of the argument, right, so it's very good when a single page you write, you know, which will support a lot of the entire FTC object, see you write, if there's an issue in the background, it requires you to write a lot of words, right, whereas a knockout, you can just simply start, okay, so that's one different reason, the second is, now, so now you may argue that, okay, if you can't do every season, that's a big problem, any.js, which you can connect, are not being led up there, the second is that explicitly, the backbone.js does not bind your data and view together, you need to write a lot more, so if you are writing a UI, which requires you to constantly make exact sequence in the game, and you want the UI to automatically adapt, with very little lines of code, if you're building a complex UI, a single page UI, use backbone.js, all of the two backbone.js is for an older project, and therefore has, you know, a much bigger developer community, but knockout is getting there, for finity, yeah, so it can be any.js, at the end of the day, you can convert anything into JSON or JavaScript object, right, so whether it's text, XML, etc, but you can connect to azar, it can be any object, even if the user types in, you can also use that, that's also stream-OK. Cool?