 Okay, so thanks for being here. This is a introduction to Blackboard.js. So first, let me ask you a few questions. So, who is developing web apps? Good, great. And who is using GQuery? Excellent. So then my last question is, did you feel like this guy at some point? I mean, your code is becoming very large and it's like a bunch of spaghetti code. I mean, you don't have so much more fun because it's not maintainable anymore. So, one of the solutions to help you get maintainable code is to use this tiny library called Blackboard.js. And I will not give you a theoretical demonstration. Demonstration, I want to go deep into a practical example. This example is called Super Top Friends. It's like, you know, this first application on the social network on Myspace or early on on Facebook. You log in and then you select your best friends. And then you can tell everyone, hey, look at my best friends. So, this is the first page of the application. It's not using any server, it's serverless. So, let me log in on Facebook, you can see the second page. So, let's see, we have on the left our friends and on the right we have the reader of something, our top friends. And I can just browse to my friends and say the best one. So, I have something in my browser. First one, I'm going to have this one. You can choose like this. And once you have set the top friends, there's a button, you can click on it and you can click on this button and that's my best friend. So, very simple app, this app is the other thing. It means that usually you create your markup and then you add your callbacks and at some point you get messy because you don't know what is the beginning, how it's working on. Here it's not really driven. It means that first you take your application, you analyze it and you say, okay, that's my data models. And then when people, users interact with your application, they will directly modify data and this data will send events and views. So that's why we use four different data, the models, the collections, the views, and a router. The structure of this super top friends app, you see it very simple, there's only one HTML file and then we have a bunch of JS files, the collections, models, views. So let's begin to delve into the DM. So the first thing I want to show you is the router. This is really entry point of the backbone application. It's represented like this. You create your app, it extends backbone.router and then inside you can define your words. So for each key value of this root object, you define the root. This is the root of the application. You see this is the first page. And for the value landing, you tell, okay, for the root, when I type the root URL, I'm going to the landing application function. And then for the second page, okay, if you type dash, hash friends, you will go into friends function. So pretty simple. So then let's analyze this application. We have two data models. We have the friends, of course. So each friend is a picture, a name, and inside there's also an idea of Facebook ID. And there's also a winners model. This winners model represents the five best work friends. Let's begin with the winners model. So winners model just extend hash board.router and inside I can define default values for the data that will be inside. This is not mandatory, but it's good practice to work. So that when you go to the root, okay, this is the kind of data I will store. So you see I am my five best work friend with some default values. I also initialize the function, for now there is not so much to do. Then let's go back into our order. This is how we initialize winners model object. Winners model is a new winners model, but it's in the initialized function. Then we have our friend model. This one is almost empty. There is only a initialized function because you can store whatever data you want in a model. You can even add them at runtime. You can modify them so you don't have to specify the defaults. Then this trend model, we create a bunch of them. We don't know how many of them we create because they come from Facebook. And to handle them, we use the collections that we call friends collection. And this friend collection, maybe it's possible to create this model and to store them. This is our collection. So we can initialization, we extend the value of the collection. And inside, there is an important property. We specify what kind of model we can store inside this collection. Here it's a friend model. Then we have also access to them. Here we need this because we interact with the Facebook API. So we need some problem to set the access to them. Here, this is the neural web. This is a function that becomes a string. I think it's also a string. And you can see that I will be using it to define where I fetch my data for my collection. This is from Facebook, graph.facebook.com. Slash this, slash friends. I initialize it like the real-life model. But it's a problem. What is interesting now is that when we're going to Facebook, you see that I'm calling the fetch method of the friends collection. This fetch method will implicitly use the URL I defined previously to fetch the data. And for each of these data, out of the collection we created. This is an example of the kind of data we received from Facebook. So you see it's a narrative of key-value objects. So for example, there's Michael, Simon, Ken. Okay, so. So the collection will create a model for Simon, the friend, a user for Kerminal, et cetera. Automatically, you will get some models in your collection. So then, we have our data, our collections. We need to begin to have some views. The function is the lighting view. This is really the first screen we see on the app. The first thing is, first you see the lighting view is connected to a friend's, is linked to a friend's collection. So to understand this thing, because it's very simple, you can just instantiate your lighting view and you specify what collections will be in your collection. But this is my friend's collection. Then, here, this is the code for the choose, the lighting view. As usual, we're going to have all the views now. Inside, there is EL property, which is important because it's, you tell the view, okay, we will get attached to the dog at the view, actually, select dog. If we go now to the index, let's change that file. You see, I have defined a div with the it view entry and all my views will be attached here. Then I have this life function. Inside, you can define a template. You can use whatever template you want. This is one of the strengths of a backbone. It's very flexible. Here, I'm just using some underscore template, very simple one, and you find, okay, you can find this template at this selector, then the view template. We go back in the HTML file, you see, this is my template that I define directly on the page, very simple. And then, for each view, you have to define a render function. When it's time to work, it's going to send you this render function in the code. And inside, you see, this is the way that you specify, okay, here is the HTML that you will use to render the page. You use your template and you specify your HTML. You see, we just got this render function in the router again, when the landing function will be called, and the view will be attached in the term directly. We have the landing function, as you recall, this is the first result of the presentation. How close? This is with the landing view. We will see our templates that will be rendered in HTML. So now, we want some interaction. When people then we click on this button, we want the user to get logged in to Facebook and want to take this access token so that you can get this friend. You see, my ID is login button for this button. And we go back in the landing view. This is how you specify events, I mean, user events in this region of the code. We just specify, okay, if there is a click on the login button, then you call this function, click login button, which is just here. And as I do some Facebook initialization, I don't want to cut into details because this is about the background. But basically, we store our view into Facebook and we store this access token in the collection each time user click on the... Finally, there is a convention that if you want the default behavior of the widget to get applied, you can return true. If you don't want the default behavior, you return false. But that doesn't mean it means that, okay, this is an anchor and I specify the href, go to the friend's page. So I want it to apply. You click here, you log in to Facebook and you go to the friend's page. Our friend page. This friend page, this is like the friend's view, which is linked to the collection because we need to render these friends on the left and also to the winners because we need to render them also. This is almost specified only if you initialize the friend's view, which is a new friend's view. We specify the model that we used in the collection and this is the code for the friend's view. Pretty similar to the linear view, but surely it's something interesting in the initialized function. It's that we listen from events from the models. This is where all the data driven is working. So the first line is specify that, okay, if the model that we use is triggering a change event, then we want the view to render itself. So I think this change event is called which time there is a change of attributes. And then the second line is a bit similar, but the convention is that, okay, if the collection trigger reset event, which means that the fetch function has been called and then all the friends model has been created, then we will want the page to render again. And if you go back in the middle in our friend's function, you see here that we're not calling the render function of the friend's view, but we're calling the fetch function of the friend's collection. Because we have defined this event, this binding of events that each time there is a reset from the friend's collection, the page with the friend's view will render, okay? Then we have also the render function, basically, this is the same as the render view, but we have some more properties that we give to the page because we want to customize the view with different friends. And then for the events, we have basically two user events that you want to handle, the key on the checkbox, it says 100% friends. And the key on the published one. And you see for the checkbox, we will go to the click choice and for the publish, we'll go to the click publish function. So basically that's how this app is working. You want to see the growth is available on the GitHub. So why using it? Why using it? It's very small. It's not like a huge framework that you have to put in a lot of time to learn. It's more like very small. And I hope you get a lot of fans for the first one. Because it's only six kb, and then customizing is what they want to handle them with. There is many ways to do the things. So it's very flexible. Then there is no assumption that you are going to do the same for the people in this kind of stuff. You should see this for HTML and CSS. It's that difficult. And at the end, we have a more modern new code and it means for us to do it first. The fun is more of a long time. So some problems with the upgrades and carries. I think the main one is missing. Because, I mean, if you're creating a app like Gmail, you don't really care that the Google code is coming through your app. You don't want that. So it's okay to be struck by all of this. But in the case of do something right now to Google, Google closed the code. Because the features are on the client side, with JavaScript and the code will not execute the JavaScript, it will be a problem. But I guess there are some projects working on that. So that you can maybe use this experience also on the server side. So who is using it? That one is becoming one of my channel now. Because there's a lot of companies using it. Like, can I get a new person, new start-up sites, Postgres, or big companies like Groupon? Even 18 is using it for the mobile application. Also, it's quite popular on GitHub to see some of the best of the most popular sites in the world. So I guess it could get used more and more. Let me conclude the presentation with some resources. As you can hear from the show, the presentation. You can have a good e-book, if you'd like to learn something using e-book from this guy, how to use money. Also, there's good videos on PIP code to start running it. Yeah, that's a good question. What exactly does it do? HTML, generate, focus, and promote, that is how many people run it? And make friends, running. Yeah. So the question is how to change that into... Basically, this one, this template is very simple because there is no attributes inside. You cannot change it. So it's basically, you have the HTML, this is the HTML you will get. But then you can, for example... Yeah? Just one more question. Why is it in the script tag only? Why don't they do it? Because when you're using the ID of the streamer, right, your HTML is just here, you can just give it an HTML of that, that. Yeah. So why isn't the script then not in the top of it, which is just here? Okay. So, I mean, the question is more, why is it in the .jtdx.jml file? Why isn't it in the script tag? It's not some other... I mean, it's very simple and there is not like 50 different templates, so it's not a problem to store them in the main file. And also you can do things differently. You can store them on the separate files and then you can load them with agile request. But if you don't have so much templates in your app, you can store them directly or like... Is it in the script tag in this order? Okay. Why would it not in the script tag? Yeah, yeah. This is something, any tag? Yeah, you could do that in any tag, of course. You can add it in any tag, but in the script tag, okay? You just have to tell it to the browser, okay, this is not the browser. So you put whatever you want to. If you're in the spec template, there is like... It's not a template, so you change the template. The template will be better. Yeah, it will be easier. Who set the frames as to what did something? Show me how to do it. You only need to just say, okay, what is your selector? Okay, when there is a click event on this element in your DAW, call this function, which is here. So you can have click, you can have mouse enter, mouse over, I mean, whatever you want to do. The question here is that this DAW HTML does not work? Ah, this... Line 13. Yeah, yeah, yeah. Okay. So how exactly does DAW come from? How is it working from here? Okay. So this dot dollar EL is a shortcut for this dot EL parenthesis that you put the dollar at the beginning. So basically some jQuery balancing. And you specify, okay. Now you, here is your HTML. You call this template and this template will get the HTML. Because basically here, you tell, okay, my template is there and compile it, then when I call you and compile it and store it here. And this is a function and you call it and then it will get you the HTML. Do what? How does it work now? Yeah. And it's up on the DAW. You want to take it off and run it. Yeah, go ahead. You say, why a backbone? You told me you put the feature hold back on six feet or something. Why a backbone? Why not savvy or some other simpler framework? Yeah, there's a simpler framework, right? So why a backbone? Simple, simple. I mean, yeah. I looked at different, for me it was more like, okay, do I, will I take some huge framework like Ember or something like that? Which will be maybe one megabyte, you know? Or do I take this small library which is only six KB and you call the talking, they're very positive about it. And the author of the library is saying, okay, there's many ways to do things. So you're not stuck into one way of thinking. And I tried it and I think it's very interesting. Since it's always a single-page application, XT is one of the big problems. So any best way of ASC about this kind of application is there's a pancake website. Yeah. So I'm looking back. So I was on one site, should we search for a search engine or something like that? Yeah. There are some problems. You get some edge agent space application. What's the best way? I would say it would be good to work with node.js on the server side. And if there is a way to reuse these views that you have on the client and you render them on the server, then we're good, you can see the pages. But I'm not there yet. And there is not much yet, like very mature projects. It is probably around the server. If the same, you're okay. I mean, another one, so I was thinking that there's something better. Yeah, this is my first one. It's in the back and let's see if it works. So does it perform well with that view or not? So the question is, does it perform well with other backend technologies? I would say, there's no interaction with the backend because it's only JavaScript files on the client. I read people that rewrite applications with backbone and they said, oh, now it's more maintainable, it's more structured, and it's faster. So, and how? It's more like what we use to code JavaScript. I have one script to add to your page. Are they enough for documenters? Yeah, the documentation is quite good, quite nice, but at first it's a bit, there's some concepts that are difficult to grasp. Just look at the read documentation. This is why some people, some videos to use to start.