 I am running for a long time as a Python programmer and one has been also going through building stuff for 100 years. So the session is serious today is how to build rich JavaScript applications. How to do a complete gift using interface on the client side using JavaScript without depending on the server. So instead of JavaScript being an instrument on the pages, how can you use JavaScript as an actual policy layer in your application? As money was talking in the previous presentation, when JavaScript first started out, it was basically just pure enhancements for a page. So you had the page which was the main thing and then JavaScript was used to add a little bit of flash and dash. How many of you code it in the late 90s? No one? No one? So if you would use JavaScript at that time, it would be used for things like grading drop-down menus and form validations, few things like that. But nothing really intensive. But if you look at today, if we are having JavaScript as counter-level where we are having like all apps building JavaScript. And the technique, like when we said there is a lot of legacy in the way people code JavaScript, both in the language and the way people code JavaScript. So in those days, we used to have people just putting in the pages using a few functions and putting some UI. But today that kind of thing doesn't work because we have like complete apps building JavaScript. So you have like Gmail, Google Docs, all these apps which have got so much JavaScript. The majority of the functionality is actually on the client side. So before I start off with my talk, I'm just going to give a few demos, which will kind of give an idea of what we talked about in the rest of the presentation. So I'll start off with one demo, which is Badger, Madhu and Patrick just sitting in the backboard. We did this app a couple of weeks ago. And basically what Badger does is allows you to print badges for functions. So what this app does is you can upload an image and upload a CSV of people registered for coming to a event and print badges for people. So I'll just show you. So suppose I upload a template, put out a CSV and I can choose what fields in the CSV. So it then takes it to a UI where you can basically take a field and drag and drop. Place each thing exactly where you want it. So let's say I run the gdr. And you can say for the name, this is the font I want. It's all drag and drop UI. And then I go next, it automatically runs through the CSV and creates all the badges. And I can download it as a CSV. So I download the CSV and I get pictures like this, which I can then just take to the printer and print it out. So you can create any kind of template CSV. It will generate images, create as a file, give you a UI, drag and drop. And the whole thing doesn't go to the server. The whole thing is done on the client side itself. There's no server involved. You upload the file, it comes to your browser, it creates images, creates a UI, saves it, converts it to a zip. You can also convert it to a PDF, download it onto your computer. And nothing happens on the server. Everything happens fully in JavaScript on the client side, including image processing, blah, blah, blah. So this is the kind of place where we learn to with JavaScript, where we can build through the app without having to go to the server at all. So here's another example. This is one of our products. Doing this kind of UI with drag and drop. And it's possible for real-time synchronization. So when you drag and drop, it automatically seems through multiple computers. You know, the way Facebook or someone posts you, everyone else automatically gets notified. And so we are right now at a stage where you can have real-time communication, you can have which applications, you can have a whole lot of functionality on the client side. And so my talk is basically about how do we get here? How do we build these kind of complex apps? And the good news is that there are loads of libraries which you can use and leverage to build these kind of apps. It's not complicated and you can do it right now. It's not like it's coming up in two years or three years. It's stuff which you can do right now. So let's look at the first one, which is building MVC. Now in the old days, when you just put scripts, you can just create a few functions which will manipulate the DOM and that's it, right? That's your JavaScript. But today when you're building a full app, you need to have a proper structure in your app without a proper structure it's impossible to maintain the code for your app. So if you look at something like Gmail, you have mail messages, you have chat windows, you have contacts, you have all this data which is there in the UI which gets manipulated. And just storing it in arrays and lists and trying to manipulate the UI is just too complicated and it's too messy. So fortunately there's a paradigm MVC which everyone uses which is called Model View Controller. And in this paradigm, you have models which store your data. So you might have an email object. You might have a contact object. You might have a chat object. Whatever it is. It's all stored using object oriented like money set kind of object oriented, right? And whatever happens in the model is rendered in the view. So you have ways of taking that model, converting it to HTML and displaying it on different parts of the page. And then whatever the user does on the view, like he picks up what is, fills up a form, submit some data, all that happens in the controller. That's called the controller view. So what happens is you always keep changing the model. When you change the model, the view will change, the UI updates. And when the user does some action that I can change some model, send some data to the server, whatever. So there are many frameworks which allow you to port the apps using this kind of method. Some of them are here. There are lots of them. There are plenty of them. But these are some of the popular ones. The most popular is Backboard.js. A lot of people use Backboard. It's really nice. Pine is somewhat similar to that. And then you have a whole lot of other frameworks as well, which allow you to go NBC. So when you use one of these frameworks, you can say that this thing is how, this is how my email message is going to look. These are the fields. It's just like how you're doing backend programming. If you're using Rails or Python or even PHP frameworks which have this NBC on the backend. So this allows you to do a similar structuring on the front end. So you can say, when this field changes, this is the update I wanted to do in the UI. When the user clicks this button, this is the action which has to happen. And those kind of things. So any of these frameworks, you can then implement and use it as a foundation for your app. The second thing is templating. Some of these NBC frameworks have ways for templating. Some of them don't. But there are many ways of doing templating. Now in the old days, what you do is the backend, which is a server to return back as HTML or blog. Whatever is the snippet, which just gets rendered by the browser. But nowadays what happens in the apps is many times it's only API communication with the backend. So the client will send a request like giving all the email messages. For example, Gmail will say, give me all new email messages which have come after a certain day. And the backend will just respond back to the JSON object, which has all the fields containing to that request. It won't return back HTML. Now we have to somehow render the JSON into the browser. For that, you can either say, okay, take this field and insert this DOM over here and there. But that's very ugly. There are ways in which you can create templates. So similar to how you create templates on the backend. You can create templates on the front end. And there are a whole lot of libraries which allow you to create templates and make HTML out of it. So there are basically two different styles of templating. One style is like the one on the top like this. And that is you create a template file. And these are all variables. You don't have to be inserted in that point. And then later on you can tell the engine that this is the template file. This is the data. And it will insert the data wherever and give you HTML which you can put inside of it. The other style, which is this is called DOM templating. In DOM templating, you have your whole page as a template. And you just tell the with sample values for each point. So the advantage of DOM templating is it's a valid HTML. You can open it in a browser, see how it looks and things like that. And then you tell the DOM templating the same way, render it to this data. And it will replace sample values to the actual value. And it will also delete elements which are not required. So DOM templating doesn't have conditions. Whereas regular templating, you can say if users log in, display user name, helps display guest, for example. Whereas in this you will display both. You will have in your template both for user name for UI and for guest for UI. And you will tell the template if the users log in, delete the DOM for guest. Else delete the DOM for user. And it will display the other one. So you have a whole bunch of templating engines where you can send data which will create HTML for you which you can put on your output. So that saves a lot of problems. So going back to the demo right for this app, we got so many of these cards like this. So we have one template for a card and then we have all the data here stored. And we just have a template, this is the data given in the HTML. And you think that we can render all these cards everywhere. Okay, the next thing is real time. So we talked about Gmail, Facebook, Google Docs. So Google Docs allows multiple people to edit the document at the same time. And Gmail will give you notifications whenever a new email comes in without having to refresh the page. And Facebook, if anyone comments or makes, you'll get a notification immediately again without having to reload the page. So there's a big change here. The old method of communication was request response. The browser will do a request and the server will send a response. So I'll ask for a HTML page, the server will give back to Gmail. If I ask for, this is the form, data, the server will respond back with some value. But now we are coming to a point where we have two way communication. Where the server can also send data to the client without the client requesting. So that's how your Facebook, Gmail and Google Docs will work. So for that there's a technology called WebSockets which puts two ways of communication between the client and the server. But the downside is not all the browsers support WebSockets. All the newer ones will support the older ones don't support it. Now what socket IO is a framework that you can include on your page. And it supports WebSockets and it also has fallbacks. So if you're using an older browser it will pull the server. Like every 30 seconds it will open a long connection with the server which will time out only after 30 seconds. So it will open the connection within the 30 seconds that the server wants to send any data. It can send back a response of the connection. And if it doesn't get any data it will open the connection again every 30 seconds. So that's called long coding which can be used for older browsers for doing the same kind of implementation. And socket IO is a JavaScript library which will allow you to seamlessly use this with any browser. So if you're using a new browser it will use the new WebSockets. If you're using an old browser it will use this long coding method. The cool part is socket IO will abstract everything from your app. So in your app you have to only say that we are sending up a connection to the server. And socket IO will figure out should I use WebSockets or long coding. Or sometimes you can also use Flash to do the connection. So socket IO will figure everything out. So all you have to do is set up your server. You need a server socket IO server also at the back end which will handle the communication. And in your app on the front end you just say connect to the server for all the live, real-time updates. And it will work across all the browsers including IE7, IE8, old browsers, new browsers, everything else. So by including socket IO you can just add real-time communication to any app. You want to create a chat application. You want to create anything where you want live communication between two-three people. You can add socket IO and you can have that function in your app. You don't really have to bother too much about the underlying technology that it's using. Another cool thing is HTML allows you to communicate between different life frames. So if I have different frames in my app normally you can't communicate between them. This frame cannot tell that frame to do something. And that frame cannot tell some other frame to do something. But there's actually a method called post message which allows you to communicate between frames. So if you have many different frames you can do post message between all of them and communicate. So this frame can send back a status to that frame. That frame can send back a status to some other frame. So let's say you have an app which has got multiple frames. They all communicate with each other using post message. But there are some complications in using post message if all the frames are from different domains. Let's say one frame is from, let's say Google or from the other frame is from Facebook or something. You cannot communicate between them. There are some complications. But there are also some workarounds around it. So there's this library called porthole. What porthole does is it basically abstracts away all those complications. So if you use porthole you can then use these communication between different frames without bothering about cross domain, same domain, all those kind of issues. So you can create apps which have got multiple frames and communicate between them using porthole with post message. So we'll see some examples pretty soon. Then you have a whole bunch of HTML5 additions. HTML5 allows you to get standardizes on SVG, standardizes on Canvas, audio, video, a whole lot of things. And there are a lot of libraries which allow you to, which make it easy to use all these components. So how many of you are familiar with all Canvas, SVG, what of them do port? Okay, about half. So Canvas is basically an element. You can put it on a page and it's like a blank element. You can do whatever you want in it. So regular HTML you have elements which you have to put on the page and the browser will render the elements in some way. Like based on the CSS, based on the element. But in Canvas it's just a blank element and you can put anything at any place. You can drop pictures, you can position anything the way you want. You can say put this over here, put that over there. You can also register for events, like click events. So using Canvas you can actually make games for example. You can make 3D games which work inside the browser. So that's Canvas. It basically is a blank slate which you can do whatever you want. And there's an API for that. Then you have SVG which is vector graphics. So browsers support static grounds, raster graphics which is like JPEGs, PNGs and those kind of things. Vector graphics are characterized by shapes. So you can say this is a circle, this is a square. This is some text and you can increase, it's all mathematical. So you can scale it without any distortion, without any blurring. So if you try to zoom into raster graphics like PNG it will start blurring. After some zoom it will start blurring. But with vector graphics it's scalable. It can be made small or it can be made big without any blurring. So there's support for that format. And there are also JavaScript API libraries which allow you to manipulate and use SVGs. And all of these have fallbacks. Which means that again SVG is supported only in the newer browsers. But if you're using an older browser it will fall back to flash. It will use a flash renderer to draw the SVG. So you don't have to worry about it, you can just use SVG. And the library will figure out whether it should be using native SVG or flash or whatever. Then HTML file also has APIs for working with audio, working with video. And there are APIs for that. But there are many libraries which make it much easier to use those kind of APIs. So this is the final slide which is testing. Now we're talking about really complex apps in JavaScript. If you have Gmail and things like that it's highly complicated. And how do you test it well? That's like really important. So there is a library called Jasmine which allows you to write unit tests for JavaScript code. For your JavaScript code. So how many familiar with unit testing? Okay, so unit testing is basically taking one function or one object and testing that it works properly. So you would say that okay create this object and call this method with this parameter then it should be the return one. If you call it with these parameters it should be the return value and so on. And then you can write those test cases and it will run automatically. You can say that every time someone checks in a code it should run all these test cases and validate that everything is still working. Because when you're dealing with complicated code you make a change to the code. You don't want that suddenly something stops working. So unit testing is really important. And for a long time unit testing in JavaScript was a big thing. But now with Jasmine it's really awesome. So Jasmine is an example of a test which says that if you have a condition checker and if you pass some condition then the value should be equal to false. And this is just one test case. So like this you can create about 200,000 rx around 1000 test cases like this. And it takes around 5 seconds to run the whole thing. So every time you make a change to the code you can just run the test cases and run all your tests in low time. So with Jasmine you can create this kind of test cases. It has a runner which will run the test and tell you how many pass, how many fail. And we integrate it with our check-in process. So any time someone checks in a code it will automatically run all the unit tests. And if there is any failure that someone checks in a code it will break in some of the packages. It will send an email saying hey you checked in this code and this test is failing now. You screwed up somewhere and it's a failure. So that's really important. Without that you can't really build a robust application. Because it's all the time going to be chasing behind and doing deep learning. You will not be able to do any real development. So let's take a look at a couple of examples where all these things are used. So I talked about templating. When you build a viewer like this, each of these things is a template. And the JavaScript templating means we don't, if we want to change or look up this thing, we just have to change the template. And it will automatically change the look of all of this. Also we are using an MVC framework here. And so each of these cards is a model. So in our code we have an object which stores its card. It stores what is the name, what should be the color, what is the ID. So we take that model and pass it to the template which will create an HTML like this. And put it there. And then if I want to change the value, I don't change the HTML. I don't change the DOM. Like suppose I use edits to this. I don't change the DOM. But what I do is I change the model. In the model I say card, that card, the new name is this and I do save. And when it does that, so I am just changing the model. When it does that, an event is triggered which will make the UI update itself. So the UI is listening to that model. It has an event handler on that model. And when I change, edit the name in the model, the UI will notice that the model has changed. It will call the template again and generate a new HTML and put it all there. Also this thing has a real-time sync. So for example on this window if I let's say a dragon, there is a real-time sync here. So for example if I drag and drop from here in this window. And then on this window as well, at some time the card will move over there. Looks like the connection is a bit unstable. So how that works is we are using socket IO, disconnecting from the server. So we are using socket IO to coordinate all the windows together. And how it works is when someone moves a card in this window, it's in the server just the event which has happened that this card has moved to that location. And if that goes into socket IO, all the users who are connected to that page will get an event that the card has moved. And that will change the model. It doesn't change the UI, it changes the model, the card is now in a different place. And when the model gets updated, the UI automatically gets updated. Then we talk about testing here, then we have a couple more things. Okay, this is a pretty cool demo. This is using the audio APIs to programmatically generate sound. That is, it's not a pre-rendered wave file which is playing, but the code is generating the sound. It's saying put this note, this is the sine wave and so on. So for example, can you hear it? So that note is generated by the JavaScript. So that's a single note. And if we don't do something, it will be complicated. Okay, that's the code for generating it. So this is programmatically generated, it's not a wave file. So let's look at the code itself. From the calculations done in the code. So this is the function which denotes how the frequency should play. And JavaScript connects directly to your speaker and plays the sound. Okay, so let's also look at canvas. I mentioned canvas. So on top of canvas, a lot of people are doing some good stuff. One example I mentioned is game. This is another example of canvas which shows the wind speed and wind flows in the US. And because it's in a canvas, like I said, there's no concept of elements. You can put whatever you want anywhere. So what they've done is they've done an animation which shows the wind speed and the color shows the speed of the wind. So this bright white is like 30 miles per hour wind and these are like slow winds. And it shows the direction they're flowing and it's interactive. So if I hover over parts of it, hover over here, then it says in 6.8 miles per hour wind speed. And also what is the direction in which the wind is heading. So it's fully JavaScript. Apart from getting the data, there's no backend involved in this. Okay, so this is another, this is a thing called D3. D3 is a visualization library for JavaScript. It's like in using canvas. It shows the stock prices of Apple, Amazon, and IBM, Microsoft. And the whole animation is done in canvas using D3. So again, if you want to create these kind of charged graphs, in the old days, you would have to send the data to the server, the server would generate the graph and send it back to you. But now you can do everything on the front end using JavaScript. And all these are like this. All you have to do is include the libraries, use the APIs, and you can use it in your other routing source. So we'll wrap it up there. Any questions? We're getting the frameworks, exactly. Yeah. Getting all those in and out, single picture, and the run is very easy. You mean like a tutorial? Yeah, a tutorial. So each of them have tutorials. I would say in this search, Google for backboard.js tutorials will get an option. Many tutorials are there for backboard.js. It's like the most popular and it's also got a lot of tutorials and not many. Our spine.js is also a book called Designing Web Applications. It's already a book which is written by the author of the spine.js. It's got the whole book is only about how to write actions with the database here. And it also covers the other type of human testing. Whatever I've been writing, I've been writing something else. Something I've been wanting to look at when we started this. And how do I upload something? How do I upload? So the first thing is with JavaScript. Then just take out JavaScript. It'll show you how to write human tests. And the idea is like in order to test, it's very difficult to test acting code. Because it's stuff to test things which are very important. So the advantage of human testing is it makes your code modular and much more better design. So start from the beginning with JavaScript and log. If you check out the JavaScript logs, there are many JavaScript tutorials. So check it out. You can use it very strongly. The asthma is also... Timber graphics. Timber graphics. Audio graphics. You arrived at the metrics programmatically. That's not my thing. Audio coming from the code. How can I arrive at the metrics in the new stuff? These are any other... Sir, the code is given here. The source code which is generated in that song. You used to give some numerics to generate the bells. Where can I get any predefined something like the API to get the metrics for this song? It can be defined. Can't do that. So for that, you need to know the math of it. So for example, you have to say generate a sine wave through this frequency and play it. So each sound can be denoted as a wave. So when you say generate a sine wave of the sound, you will get a single... To make other sounds, you have to basically overlay all these waves. So that's all. That's all there. Thanks. Thank you, city. We'll take a quick ten minute debate. And some of us will start now. And then Adi will start.