 Hi. I'm John. Yes? Great. So I will be coding a little bit, so if you want to come a little in front, it's better. I'm very happy to be here. I would like to thank Sensegeek for organizing such cool event and also all the other events. Today I will talk about AngularJS. So just before going into the subject, let me tell you what I'm doing in Bangalore. So I'm the co-founder of Minch. Minch is a Swiss startup, and we specialized in web development and UX. And one year and a half ago, we went in Bangalore with only this. Back in Switzerland, we sold everything, and we came to the Silicon Valley of India. And we're very happy about it. We settled here, and now we're based in Indira Nagar. We have offices there, and we're looking forward to expand in the coming months. Also, we're organizing the Bangalore.js user group. So if you're there next month, November 17, you should come. You can go on Bangalore.js.org to see more details. OK, so let's go to the talk. Around 1995, when the web was becoming mainstream, we had these tools, HTML, CSS, for doing documents, static web page, and basically web apps at this time were run-trip apps, like you click on a button, you wait, and then the server reprises you with a new page. And then suddenly, we have this Ajax. With this, you can do like really full-fledged apps, like Gmail, for example. And because you can update partial view of your page. And then suddenly in 2005, it's, wow, we have jQuery. Finally, a good unified consistent API, so that we can do these Ajax queries, and not worry about, will it run on this browser or not. And more importantly, we can do now with jQuery DOM manipulation. So that, yeah, we've been doing crazy apps with this. And our app.js files, you know, is becoming like 1,000 line long, and suddenly it's 2,000 line long. And when it's 4,000 line long, we feel like this. Because too much jQuery leads to spaghetti code, right? Because it's not meant to structure your app. Fortunately, over the years, we have some new libraries helping us, like underscore. It's not really helping us to structure the code, but we get some functional programming that we can use in JavaScript, and it helps to reduce the number of line of codes. And we have also Backbone. And this is with these three libraries. Finally, we can create web app with a structure. Personally, I'm using Backbone almost every day. I find it really awesome, and you can do great apps. But if we look at this stack, you know, it's based on jQuery, and we pile up libraries on top of it, and we get in our code a lot of this kind of jQuery selector, which use CSS selector so that we can write code and attach it at certain parts of the DOM. The problem is that this CSS selector, they are used for styling, so not for attaching code. So for example, if the web designer of the page decides one day to change a class name to another, so container become foobar, then the code breaks. And that's bad. So what can we do about it? So let me ask you a question. What would you feel if today I tell you, okay, you're not allowed to use jQuery anymore? Yeah, I would feel like that also. So this guy at AngularJS, they said, okay, HTML is good, JavaScript is good. These are good tools, but jQuery, maybe we should just use it to style the page or do animation. And they find these tools good, HTML and JavaScript. So they just want to add some stuff on top of it so that it's better for us to create web apps. So let me show you some code. I hope you can see it. So it's a simple HTML5 file, and I have included three different files. One is a bootstrap CSS so that it's a bit nicer. And then we have the AngularJS file and AngularResus file, which will be helpful later on. So let's begin with the Hello World example. So I'm just writing these double calibrations, which are the way out you output stuff in your HTML with the Angular syntax. You can see on the output on the right it's not working yet. It's because we need to tell Angular where is our app. So for this, you can specify the ngApp directive. For me, I just want to tell Angular, okay, my app is all my files. But you can decide to put it at some point in your... just select a small part of your HTML. So another world example is not complete without the world, right? So you can see you can do a small expression like this, even use filters that Angular gives you so that you can uppercase strings. There is many more. Let me then show you an input text. Input type text like this. And what I want to do is to type text inside so that this text is displayed somewhere else in my HTML. For this, I can add the ngModel directive on my input. Let's call it... this is my query model. And then I can just use this double calibrations syntax and do something like that. So let me just add something. Let me shorten the input with... thanks to Bootstrap. Yes, okay. And you see I type hello. It's there automatically. So it's really kind of decorative programming. You just say I want this and it's working. If I have an example with... this is the same thing with jQuery, right? I type something and it's up here. You see it's very much more verbose. It's really like imperative programming. You should really say, okay, do stuff like this. I need to go back. So let's continue now. What I want to show you now is how to do a very simple movie search engine with the help of the Rotten Tomatoes API. So let's do that. I will first add a button so that I can submit my query. See the search button like this. And I style it a bit like this. And I want to align a bit things. I add a form horizontal class around. And it's better. Okay. Now let's see how I will display my results. I will display them with a list like this. I will display... Each movie will be an item. Okay, movie one, movie two, something like that. I don't want the bullet. So I style class. Okay. But now I want to do something a bit smart and use the Angular facilities so that I can get all this list of items programmatically. I can use the ng-repeat directive like this and tell, okay, display all movie in my results. Okay. And I do this. Okay. And for this, I need to write some JavaScript code. And I will create a controller. So let's call it search controller. And each controller in Angular receives a $scope variable, which is the link between the HTML, the views, and the code. And for example, I will say scope.results. It's an array of movies. Let's put some movies. Do you know this one? And maybe another one. Blooper, which is quite cool. And it should work when I tell where the controller will be applied. So to make it simple, I just say, okay, my controller will control all the body and all what is inside it. Yes. You see, we have our two movies. And I only had to write this. So if we have many movies, this will work. Now let's use the button, the search button. So when I will click on this button, I should receive the movies, right? So I use the ngClick directive. And I will use the search function. And I can specify the search function in my controller like this. And what I can do is that when I click the search button, I get the results. Yes, it's working. Okay, so now let's really connect with the Rotten Tomatoes API so that we can get real results. For this, I will declare Rotten Tomatoes variable. And I will just copy-paste some code here. Good. So basically, what I'm doing here is specifying a resource with the API entry, some API key and telling Angular, okay, this is a JSONp request like this. And I need to tell Angular, okay, in my search controller, I will use, I need the service resource. I just add it on the parameters of the controller like this. And then I can just fetch the results when I click the button. Yes. I do a get, and I specify my query. Queue is another parameter to the API code. And my query will be coming from the last code.curry, like this. And it's not working. It's not working because I need to specify, I need to tell Angular, okay, this service, this resource, where does it come from? So first, I need to name my app. Let's name it MovieSearch. And then I can connect my creator Angular module with the name of my app, like this. And specify that I will... I want to use the NJ resource. This is coming from the Angular resource files, the second one I linked. And now, I hope it will work. Yes, I get some JSON directly. So here, this is an example of what the Written Tomatoes API gave me. So you can see that I don't get directly the movies. I get them on the movies key. So I can change that. And also, we can see that in each movie, there is a posters key, and inside we have several images. Let's use these images. So first, in the results, I want the movies key. And then I want to display some image, a poster image, from the movies. And I don't want to type each time the query. So let's hard-code it. Let's make it Superman, like this. Let's see what happens. Yes. So we get now... For each movie, we get an image. And let's make a proper image so that we can see the picture. Internet is working. Okay. I think... Oh. Image source. No, it should work like that. Okay. So let's continue a bit. Maybe it's an internet problem. I might not know. But what we can add also is the ratings. So I can see in ratings that creating is rating. I have something interesting. Oh, okay. It's internet. So internet can be so. Please don't use internet. Okay. So I can see all the Superman movies that have been done. You see? Quite cool. Let's just add the critics. So for each movie, the ratings, the critics rating. Let's just see if it's ratings, critics rating. Okay. So now let's pray. Okay. It should work with the critics movie. At some point, maybe. Okay. So basically, yeah, we saw that we are built to make some kind of such engine. Pretty simple one. And... Yeah. Maybe we... I'll try again. Okay. It's good. It's there. The rating is maybe not out yet. This is why we don't get ratings. We see that the latest one, they are certified fresh. So we should see them. And then becoming, yeah, the Superman 3 and Superman 4, we should avoid them, right? It's rotten. So let's go back to the presentation. And so I showed you quickly bi-directional binding of models. Basically, you can under the controller and also the HTML access the models. We have seen rapidly how to do a REST accessing a REST API. And also we have seen directives, which can be element name, attribute, or class name. And basically what you can do also is to create your own tags. So for example, I could create the movie tag. And then create a template for this movie so that this movie tag becomes some more complex HTML. That's a very nice way to do templating, I think. So I then go back to the question of the talk. Is it time to drop everything off for it? Before I ask you guys what do you think? My opinion is that if you are already using backbone and you took some time to understand and everything, maybe it's not time yet to use it because the documentation is not so consistent yet. But it will improve, I'm sure. And also, I would say if you go to the backbone, for example, Git repository, you see there is very little files. This is quite cool. You feel good when you see this. And when you go to the Angular site, you see there is many files. And even if you look, there is your Ruby files, Java files. You don't really know at first why this is there, you know? But at the end, we just include the... that these JS files in our HTML. Okay, thanks. And so see if you have not used backbone yet, maybe if you feel adventurous, maybe it would be good to jump directly with Angular because your code is really less code than even with backbone. And I think it's pretty cool if you try it. Okay, thank you. Thanks. So what is your opinion, guys? Do you have questions? So I just wanted to understand the performance implications. So it looks like internally the JavaScript would be scanning the entire document to scan those fields, right? Exactly. When you were working on it, did you feel any performance implications? Not really. On mobile, I felt that it was slow. But I think also mobile with some issue with the clicking, you know, is like this. They add maybe sometimes some delay or something like that. So that would be something to check. But I don't think it's quite fast. Okay. The second question is the NS or NG, the tags, attributes you were adding. Is it not making the entire HTML as a non-standard? Yes. Is it not a non-standard way of using HTML? Yeah, it is. But there is several ways to make it like valid HTML. For example, you can write data dash, NG dash, or like namespace, NG namespace, something. So it would identify the data hyphen NG as well, the AngularJS framework? Yeah, yeah. There are several ways to write these directives. Okay. Some of the ways they make your HTML valid. Okay, thanks. Just good, yeah. So you just make a normal assignment over there, scope.query is equal to Superman. How does AngularJS actually respond to this event? I mean, does it use ECMAScript 5 getters and setters or something? This line. Yeah, I mean, how does AngularJS work? Yeah, so basically here, there is a nothing called, right? So you don't get your data directly. But AngularJS is like smart, and then when it's getting the data from the remote server, it will do what you want. That is, populating the results variable. Is it the question? Yeah, no, my question is you are reading from the, you know, from the JSON resource, and then you have that line over there that says scope.results is equal to Rotantominters.gov. So it's an equal to, I mean, it's an assignment, right? Yes. Yes. So when you make the assignment, Angular needs to know that scope.results, this variable has changed, and then it needs to update the... Yeah, yeah, yeah. Right. I used knockout.js before this, and in knockout.js, you have this concept of observables. Yeah. And you have to kind of call the setter function. You just do an assignment. It doesn't work. You have to call a setter function. And then, you know, it does that, right? Yeah. So basically, they scan your, they compile your HTML, and they know all the variables that you have, your models, and then they set up some kind of watches over there, and then they continuously watch if there is changes, like they recompute stuff or so. And if the new result is different from the old one, they know, oh, we have to change the HTML. Oh, okay. We have to update the DOM. Okay. So it's running a background loop which checks for changes. Yeah. And then they optimize so that it's not, like, slow. Okay. Thanks.