 I wonder if you can access this URL if not then so be it we can live it out but that would be nice yeah it's working you got this picture oh that's cool okay so as I stated in my talk I want to talk a little bit about backbone and use that to to only write your models one time and then have the same models in the client and in the server this can be very useful if you was supposed to make an application where you want to do online collaboration so work together on a document or anything and that is shared so can you try to switch on the light just press the light button here so that works it just turned on the light on my machine so I'll show you how that works is how many of you are familiar with Node.js or anything okay so quite a few so the Node.js server here is started so that's fine I'll take you to the code that's behind this this is the application that runs on Node.js it's only a few lines of code as you see I'll just go through the code and explain you how these things work so the first thing we do here is create an express web server which is just a Node.js module oh yes can you also put off the light is it okay now okay so what you see is I create an app that is based on the express module that is just a web server module in Node.js you can just install it by using your Node packet manager a few lines here first I tell the web server that anything that has a dot star at the end so for example dot png dot css or whatever will just be passed through as a static document so that way I can serve static documents next step I configure the express web server to use the jade engine jade is a template engine and by default it will it will try to find layout.jade this is the template that is called layout.jade it's just another way of writing html much cleaner and as you see I just load a bunch of scripts in my client and I have a few diffs in I don't know if you're familiar with jade but this just stands for diff classes background diff ideas room and that's basically it you just saw the the room the virtual room here I create objects rooms there I will store every room that is being created so when you go to something else after the slash you will create a new room in the application so that happens when this app dot get is being called by any client a request will come it will take the room ID which is everything basically behind the slash and it will create a new room and you will see here that I will that I made a class which is called room and two things I do I pass the room ID and I pass a reference to the socket IO library which I loaded oops here I loaded the socket IO library socket IO is a library which takes away every hassle to make web socket applications so you can use it both on the client as on the server it's very easy you just import the socket IO library and you say listen to specific port number or web server and here at the app is my web server so what will happen any client that will come will instantiate a new room or if the room already existed then it will just take the existing room and it will render an empty page based on the layout so that's it so when we go to the web page view the source there's nothing more than just a small piece of html here again you see that it loads the socket IO javascript and it also loads my post.it.js what I called it so let me go to that piece of glasses don't just take this for granted here I do some some little things to have this script work on both the server and the client so this basically says well if we're in Node.js then and require the backbone library and the underscore library otherwise it will be loaded through the html page itself so now here comes the backbone part backbone is a very easy library to create models and views in the in javascript it takes away all the hassle of creating how do you say um creating objects that are that can connect with each other and also have a few extension on each model so just an mvc kind of pattern but then in javascript so this you have to understand that these classes are both run in the server and in the client so nothing no double code it's just the same piece of code let me first take you to the room model what you say is you say backbone dot model dot extend and you can create your own model which is based on the backbone default model basically it takes a few functions initializes the most important one it's being run every time you create a new model and as you saw in the app i passed the the socket argument the same we do in the client so in the client there's just a small piece of jQuery document that's ready and create a new room object and again we do the same the only difference here is that we say i o dot connect which means connect to the existing socket on the web server so when you come to your initialized method both on the server or the client this will happen only on the server part so it's still being run on the client but the client is not getting any connections at this point but still it will call the initialize events method for the current socket on the client so let's skip over this really fast it will here we'll just send some messages to the to the clients like how many clients have been connected so that's the clients connected part so we take a look here i think i put a number somewhere here's a two so that means that only he and me are connected if i would open up another another tab three clients will be connected i don't know if you see it properly here here's a tree so how does that work the connection takes place on the server a client is instantiated the client will send first the lights on or lights off method so that is to tell the the user that in this room the light is on or off basically and it will send the amount of connected clients then on the initialize events function i have created all these events so there's a lights on there's a lights off there's a clients connected and there's a node event well what happens when we when the any node comes in so i made a function here that whenever you double click you can create a small message say hello yes so i don't know if you see it now but it should have come come through yeah so one yeah he's creating another node here so what happens is um whenever i double click and that that is all being taken care of by jQuery in the the room view so i have a room view object backbone.view.extend same as a model but you create a view it also has an initialize method and it has an important property which is the element so that refers to the current element in your page it can be an existing element but you can also create new elements if you want so what happens here some magic but basically the double click event on the element will tell the which is it it is connected to to set a node and set a node means update the current node or create a new node so let's go to the set node method what does this do first it tries to get the current node if it exists so suppose there is an id which is a global identifier that it will just get the current node from that list if it was not there then it will create a new backbone backbone model which is called node it will set the the room property so that from the node you can always access the right room and then it will add the node to the to the list of nodes depending on if we told the function to broadcast it will tell the socket to send a message to the server saying hey there was a new node and then there is a very convenient function called tojson which serializes the current object to the json format so then what happens on the server side it's still the same piece of code that's being run on the server side so the server will get this socket dot on node event and then it will say again okay a new node has come so let's parse it and it will again call the function set node so what i really wanted to explain here is that it is very convenient to write the same piece of java script that runs both on the server the client or any other client that is connected so just every time the same pattern happens the on node event is coming in it calls the set node function so it creates a node in the in the object on the server and then again because it will broadcast it will again send it to all the clients actually that that happens here so i i have an if statement here if the socket dot manager is there so if this is a server then broadcast it to everybody that is connected to the current server so that is why when i and put some text in here that is why it now is being sent to the server the server will instantiate that same node the only thing the server doesn't do is create a view because the server doesn't have views but on this computer now it will create a uh a node again so out of the framework that is called uh j now now.js i didn't take take time to look into that but they even take away more uh more features like this so it makes it more easy but i just wanted to explain how the socket IO works great with background um we use this in a in a live application where people work on the same document whenever they create elements to that document they will be synchronized and on the server of course you have to take care of saving it to a database or anything that i didn't do in this in this demo but that you can do easily also using mongo db or anything like that um i think i went through it quite quickly um so i will give you some time to interact or tell me what to explain further on this is there any questions so i thought that the backbone does something already which made sure that uh the models in the view and the server as i kept it synchronized that that is true that is um that is true uh backbone by default um has a very good restful api um so if you would connect it to a server that is restful uh that backbone is also great for making um standard mvc web applications i haven't done that in this case because here i'm using making use of socket.io and that just helps when you want to do um live applications where every event has to be submitted live to the server and back to any other client but backbone itself doesn't break if you don't have a restaurant api no backbone you can you can use it and backbone they have support for for restful but they you can also use it in many other ways because it's very light it's not that big and you can use it in whatever you way whatever way you want so that's how you do it can you please explain a little bit more on socket.io uh how it is set up etc yeah um it's actually very simple um i'll just take the socket.io website because i think they so here they have a great example of how to use socket.io on the servers you say require socket.io library and listen to a certain port port and then whenever you get an event say connection um something will happen you'll get a socket reference and on the socket you can say um email the message send the message to the connected clients yes yes they will stay for the for the time that the the client will be connected yeah but they use web sockets for it so the web socket protocol i even don't know much about it but it's um it takes care of all the connection handling the great thing about socket.io is that it um they also have some wrappers for the clients uh even in older browsers it should work so if the browsers have flash support they will flash uh use flash um i think even ie 5.5 should work so it's quite convenient it's web sockets but on the older browsers they emulate it of course because older browsers don't have support for web sockets so web sockets is not even a standard yet because all the browsers are still fighting about which standard they should be on but most browsers have uh most modern browsers have a socket implementation web socket implementation um but still they use different protocols and the great thing is that socket.io takes away thinking of that so on the client client part um it's the same you connect to say local host and then whenever news message comes in you do something with it so it's a really convenient way of writing events so with this you could easily make a web application a chat application on the web or anything like that it's a very convenient way to do it does backbone have bindings to any other languages um now it's pure java script what do you mean with bindings well some part of the server might not be in node.js so how do we get a similar capability a backbone you don't have to run it on the server uh backbone is uh basically just a model model view controller pattern in java script so if you use it in node.js that is your choice if you want to use another server then that's that's cool but once you want to use java script then backbone is a great mvc better yeah that's the i did that on purpose to just show the benefits of backbone um in in the sense that you can use the same models when that is needed of course in um in in real world applications you would probably split it up a bit but still you would use the same modules could you repeat the question really clearly uh you was asking if um um if there would be any problem if you have the same backbone script on the server and the client in terms of maintenance or support so i would say that in in most real life applications you would make classes that would um would be generic for clients and server but the whole event handling part probably you would do it differently than how i did it and that is actually because i really made this uh quickly and i um i put it every everything just in one one file of java script that is being parsed by the server and the client yeah what what what common is is your models yeah that is actually what i try to explain here that you can use the same models um especially when you use a database like mongo or something you can store these models directly to the database and use them in the same way on the on the client again so that is convenient about it sorry i have not benchmarked it but if you read if you look up the benchmarks by socket io with noj as you can easily run a a chat application with thousands of users just on my macbook that would work no problem yeah so in production when you're actually using this and you're using the same backboard models how do you uh you know actually make sure that parts of the module are different part of the module are the same um that you could do that by just um um we didn't really come up with a pattern for that but what you can do is um either have different models for the server and the client and share the common models um or inside your model you could work with something wherever you check if it's the server or the client something like that like i did here with if socket dot manager something like that you could do but i really did it quickly here but of course you have to work it out into a real world better yeah yes whenever the user refreshes the page it will try to connect to the same um server and then everything continues because as you see here on the initialize um um see basically the initialize events method will will run and then again the events will be uh handled no the data of course the data will be lost when you don't store it on the server but because everything is being synchronized on the server and all the clients everything is the same everywhere so then we don't have the problem but of course when you would have some data in the client that you didn't submit to the server and you would refresh the page then you lose your data but that is uh quite logic if the user goes offline it comes back on uh that socket i will make sure that you know it reconnects as as soon as possible yeah socket i will take care of of that re reconnecting part and everything so is there any complication with transactional integrity multiple clients updating the model at the same time um i guess there would be in this in this current example i think there would be so you would you would have to come up with a pattern where you take care of what you're doing because i'm just updating the models and whoever comes first will update it and probably if we click together on um um on the light button something strange will happen i mean it's just who comes first see we can uh don't double click since node is invented there's just one thread so whoever comes first wins it just serialize that node yeah whoever comes first wins it yeah it's it's all whoever comes first if you want to create a pattern for that then you have to extend it a bit but like i think that wouldn't even be too hard if you um in our um real life application we also handle the sessions so the current user sessions and then of course you can do some checks on whoever is doing this and is he allowed to do it and then you can take care of it sweet spot for backboard the sweet sweet spot where would you use it more than other others backbone is there's multiple sweet spots um um the sweet spot that i wanted to show is that um it's java script and it runs in no jazz and it runs in the in the client but it has many more sweet spots like for example the restful integration which is really great i could show an example of that also but i don't have much time for that but um normally what you can do with that is um just create your mvc pattern right from one piece of java script then on the server part whatever server it is you take care of handling each request and you have a it's just a very nice way of writing uh models um let me clarify so if you are the impression i got is if you are having a shared state that's simultaneously broadcast across number of clients exactly then probably this makes a lot of sense if every client is running uh let's say his own shopping cart it may or may not be so useful so in that sense what kind of applications is backbone more useful for than others then then you would more talk about just regular web applications uh where you want to create in the in the web in the website itself you want to create a kind of an mvc pattern then it is really great also so it's not not said that backbone has to be used in the in the way i just proposed so just a clarification on that the shared state i think you are implementing yourself right as exactly so it doesn't have to do with the models the shared state implementation is something here so you also have another 15 minutes if you want to demonstrate something um yeah but i don't know if i have done i know that would be too too hacky now so if anybody has some questions we could we could try something so you have a suggestion but otherwise i think it's it's quite clear um you was asking in the live application what kind of storage we're using um actually in that application we're using um draw box that has to do with this particular application they wanted to share documents and work on those documents together and because these documents have one um they they run in the same file format and also these users of these applications would use the file system to access these files draw box was a very convenient method of doing it but other examples that i have worked with this manga dbe or will this create any kind of issue when we are using a uh app cache method mechanism for html files like all my application is like is cached on my browser site that is on my mobile device so when it goes on the mobile device all my js and everything is stored on the mobile and it will never go for to the server to get the js file as well my html and js will be almost cached at my browser okay so will this socket.io might create an issue with my connection or anything because the simplest example comes in i need to give a rest api for if i open an ajax request if it is cached on my browser it will never fire an ajax request because it's an process scripting i don't know if you if you use the restful pattern that's something different than socketio if you use the restful pattern it will do post to the server so those posts will never be cached by your client so then there wouldn't be any issue so it might actually go and connect to the yeah yeah it should i mean there might be some issues but normally it should just work i mean your the html we hear the javascript they're aesthetic but everything that's happening is dynamic and that will be used by posts or in this case sockets and sockets will also never be cached yeah not only sockets but will it connect to the server cleanly just without any impact to be done yeah i suppose i don't see any issues so that's it so you mentioned a couple of times about something you're dead but using a draw box to share documents and work collaboratively is it online but can we see it um i don't think it is online um no i could try to run it down so i don't know why the front is so strange now i think it cached something talking of caching anyway here you see a list of files these are called btfl's which is a bowtie format so this is the kind of document i was talking about so whenever i open a btfl there are some connection issues okay that's a shame i can show it maybe it crashed this is really a local version so i don't know not much chance that i can show it but normally it would show a diagram bowtie diagram the bowtie diagram is something they use in the world of risk management um and you would be able to edit that diagram uh lively sorry it's crushing excuse me can you repeat any other template in the apart from jay um no apart from just html yeah i worked with moustache a little bit and there are many things even backbone has support for i think moustache um for the view part but jade is very convenient if you use it in collaboration with uh no jays and express web sir is backbone and socket io cross browser compatible mostly mostly socket io um works uh in most browsers and back home also i don't know the exact browser support should work in any modern browser okay um thanks