 Hi, I am Aditya and I'm talking on Amplify your stack. So how many of you here are front-end developers? You understand when you say you are a development stack, right? You have a editor, you have a browser, you have a build system, you have a test system. Generally, a set of tools that help you be more productive. That's what you call a stack. I would say J2E is a stack or LAMP is a stack. Your front-end developer then Chrome itself is a full stack in itself. My name is not Paid, he's missing. He loves setups, so do I. I'm sure all of you do. All of you, I'm sure, when you get a fresh machine, you set up everything that you need. Browser, a test tool, plugins, like Firebar, Chrome, etc. The best possible things that you even need, that's the first thing you get. All have setups and you all love them. You can't live without them. So you're talking about setups today and how to make them more effective. But before we start that, we'll get into our foundation as web developers. When we started, I am sure this is like 95% of us. When we started as web developers, first things, or at least JavaScript developers, the first thing you wrote was onclick equal to this dot color equal to red. How many of you did that? And style equal to font fade bold. You did that, right? Everything was in line. One file, everything was there. And cool. Back in college, man, look at my page. It has red, blue fonts. It is beautiful. But two days later, you want to change the font color. And you can't find the thing. Where is it? Because you didn't use the word red. You used some x color and you can't find it. So you said, okay, I should probably move on into an external CSS file. Use some CSS rule. I should move into an external JS file. Write some functions. Probably organize code a little better. So you created main.css and main.js. How many of you created main.css or main.js or index.js? We all did. And then included the script tag and then there was a library dependency because we started working on jQuery. So there were two script tags. And then somebody told backbone is really awesome, man. So it was underscore. So four script tags. Somebody said, why don't you use some web fonts? So there was a typekit script tag and it went on and on. You have like 20 script tags on a single page. And it's getting out of hand. That's level two. But level two is not over yet. We are still struggling with our own code. Main.js. We modified it, but we're not using any version control. So the new file is called main.3.js. How about that? Somebody said, now the application needs to integrate the social media. There has to be a social integration. So there was a sci file.js. Then somebody said, you know what? There should be a fourth version. So there was a b4.js. And we got copied everything from HTML5 wallet. There was a widget.js. And it's all there. We have no glues on what these files do. Just keep including, keep bloating our pages. And we don't really give a shit about how often it gets. Until two months later, we have to fix it. And we can't figure out how to fix anything anymore. Because it's too haphazard. It's just chaotic. And we need to find a structure to how we deal with things. Essentially, if you're doing front-end stuff, we all need to find a way. It's not just a way that you appreciate. It has to be a way that everybody appreciates in common. So that if anybody picks up your code two days later, he's not cursing at you. That's pretty common. I'm sure everybody, every one of you, when you pick up someone's code, front-end code, you start with this way of work. So let's move on. Find peace for ourselves and everybody else. All our brothers and sisters own the browser. The browser doesn't own you. You do stuff and the browsers comply to it. It doesn't matter. So this is Sunil Pai's structure. I don't accept it completely. I don't expect you to accept it completely. But what he says in general is, you should have a very good folder structure. You should care about how many JavaScripts will end up with or how many CSS cells you'll end up with. Just have a very, very verbose structure that anybody can understand. There's a template folder which contains all the templates that you're going to use. It could be jade, it could be moustache, it could be anything like that. You can also have pictures that I'll talk about later. You have, let's say, tests, which also I'm going to talk about later. There are utilities that you need to do. You can have a folder called shims where you'll probably add your S-5 shims, things that are not available in the browser, but you would like them to be available. Organize your code. Don't worry about how many files these result in, because you won't be serving these files. As you saw earlier, we had 20 files. We're serving all of them. Let's not do that anymore. We have 100 files. We have a build system that can concatenate, compress, optimize our code, and we just serve that. Let's just focus on coding. Keep serving part to the deployment part. Two different things. Fixes. Fixes are awesome. They really are. Any Java developers around? Any .NET developers around? Any developers who have ever written any unit tests? So you are dealt with marking and all, right? You have a service. You don't actually want to hit the network. You mock the service somehow. You say, listen, we'll get this output, right? That same thing is true if you want to develop other browsers also. How many of you work in a team where there are separate back-end guys and separate front-end guys, and you are the front-end guy? And you had some data that you needed from the back-end guy and every once in a while say, damn, your APS broke in again. What the hell? I can't develop anymore. I'm going for a P. That's how it always ends up with, right? Fixes. A way in which you take a spec data. You say, I'm always going to get a data like this. You save that file, maybe in JSON format or XML format. If you're back in 98, XML is good. Otherwise, take JSON, store it, load it in the page and when you're developing don't hit the network. Use this data to develop. If you're building a Twitter client, take a dump of Twitter feed in JSON, store it, load it in the browser and make your client work completely with it. No network requests. You don't have to depend on third-party APIs. You don't have to depend on the back-end developers. You don't have to depend on Internet. And it saves a lot of time. I used to work in an ad platform team in Yahoo. We had this very well distinction between front-end and back-end. We didn't have something like this. Every time I changed anything in the back-end code and the compilation took about 15 minutes and the deployment took about half an hour. 45 minutes and it was changing. And of course, then we introduced this and the productivity is short. The productivity is just short insanely. It makes sense. I'm a front-end developer. I don't care about the back-end evolving. I don't care about RO or I don't care about NodeJF. I don't care what the back-end guy is using. As long as I spec out for this input, this should be the output. I'm cool with it. That's where fixtures come in place. So fixtures is actually one of the words for it. You can call it mox, call it. There are a lot of terms for it. So there is a brilliant MVC framework called JavaScript MVC. And they were the ones who introduced a JcoD plugin called dollar guard fixtures. Don't go into this code. I'll show it on the code after this. So this essentially says when you hit this UR, when you get a request for this UR, just use it. I have defined a fixture called magic. Just use that. Please don't hit that. How many people use jQuery? Use dollar dot Ajax? Had internet problems and got pissed? Because they're laughing at? The dollar didn't work? How many? Go and make such a request and wait for it to actually load. Everybody has to pay. At least some of you have to pay this, right? Can you read the code? Okay. So it says dollar dot fixture, method or root regex and function. What it says is whenever I do somewhere after this dollar dot Ajax or dollar dot get 2 to slash 1, 2, 3 or anything like that just don't hit the network. Just call this function. When you call this function, you can just return some data. You don't have to hit the network. This will take everything. Magic. Isn't it? You can do post, you can delete, you can do whatever you want. What do you? And there's another beautiful method in the fixed flag in client make. You say dollar dot fixture dot make and you say so what this does is it creates a fake data source for you which is restful and crud compliance. So you can do get to fetch information. You can do post it. You can do delete on it. You can do put all that stuff. So if you say dollar dot Ajax, you are the snap messages and you can pass data, this offset sort by this, limit so many and you can do all that crud operations on a data source in the browser. You're not hitting the server. So if you're, let's say building an application which has to show some hundred updates, email client which shows emails. Why hit the server? Why not just completely scoop? You don't even need information from the backing guy. You don't even need a dump. Just create a random thing. Just say random something, create random strings. Just fill it with random stuff. Isn't it brilliant? Most importantly, besides being brilliant, highly efficient. Do we need to remove that picture while we release the product? No. So it kind of depends on I think there is a global variable which explains if we end production or not. So you don't have to remove it. If you are on work, don't take the picture. No, if you are on a development mode it will always take from that. You can kind of what you can do is before you include the plugin you can do dollar dot Ajax as you can pull it out into another method called dollar dot old Ajax and then if you include the script tag, you can write a method that functions which I showed earlier. In this method you can say if this thing is undefined then do an actual Ajax request fetch the information. You can do a synchronous Ajax. You shouldn't but you can just give an example. You can actually fetch the information for the first time and cache it. That's also a possibility. So it's great for if you are using any of the LBC framework. Backbone, spine, knockout, angular the list is endless. There are so many LBC frameworks out there. Why? Because essentially all the LBC frameworks one of the first criteria is you write an entire app in the browser and you just interact with someone JSON format or some format. Why not just save the format, cache it and just develop completely of things. So it's really great if you are developing an application with any of these frameworks. So these pictures also work great as reference points on what should be the output for certain input. So you can write your unit tests on top of these things. I mean understand. When you are writing unit tests you need some kind of references for certain input what should be the output. You can use this as a spec to communicate between the front end and the back end team or the third party that's providing you the idea. Speaking of which how many of you actually write unit tests? How many of you write unit tests in Java script? Please do. Please do. Very important. If you are writing it's very different from writing for Java or Python and all because those things at least compile and I mean in the compilation world things break in compilation. You fix anything here and you introduce new bar there is no compilation happening and you might be screwing up a lot of things. So you won't make sure that your code is not getting screwed by someone else write unit tests. If somebody writes something new which screws with your unit tests you can blame them. So you can just say it's his fault. Not me. So this was something that one of Sunil's colleague used to say. Pictures plus unit tests is like Photoshop. Any of you ever converted a PSD to HTML or JPEG or PNG to HTML? Frequently, right? Designer comes up with this multi-layered PST and you convert to HTML and then you look at it again all tab. There's a batch of color is wrong click it again. It's a good reference point, isn't it? When you're building something it's a brilliant reference point. That's the visual part of it. When you're building an application there's a functional part of it. This is a functional Photoshop. It's a functional PSD. When you write pictures plus unit tests you ensure that anybody who's writing anything new has to comply to that design. Anyone who's breaking that can be easily caught. Anybody who's breaking that there's a build script that will say this guy committed something and it broke. Please go hit him. Please carry your baseball bag. Talks about how to write this so this thing this talk is probably going to finish really early so let's be more interactive if you have questions. Please ask. Write new bugs. Write new tests for every bug feature issue that you get. You add a new button that shows up up write a damn test make sure that it runs across all the browsers. You don't want your CEO calling you up free in the morning saying that I'm in this presentation in California and doesn't even work on i10 doesn't even work on i10 because you didn't test it. You have a Linux or a Mac box and you don't care about testing on i10 which is fine as long as it works on i10. So there are many options available. Q-Unit is used by JQA. Any other language other than Java the amount of time spent on test cases is very less compared to the amount of test programs we write for test cases in Java space, different browsers one thing is that, the second thing is if you are using some mvc or mvr libraries like DriveCon and how do you test the UI you are doing something. So when you are talking about JS testing there are two aspects of it one is the typical functional testing which is same as how you would do in Java Python anything else which is there's a pure functional expect certain output on certain input which I'm sure has to know how to do it but you don't know how to do the interaction test So what you do is there are multiple ways of doing that also there are certain frameworks that let you simulate clicks so what you can do is I will just give an example you add a button that shows a popup what you do is you write a test that simulates a click, loads the entire page simulates a click and then sees if the display property of that particular block or not is visible or not that's just it's not a good way but that's one of the ways of doing it then there is Selenium you can use Selenium to automate all your interactions so you interact with the UI in certain way Selenium will record it and can replay it across browsers to make sure that it works across everywhere just the same so interaction tests have different set of frameworks all together but as you said takes time that's only because the learning curve is different it's not the same there are async tests that you will have to deal with even if you are spoofing it via pictures there will be a callback so the test has to be async itself so there is a learning curve involved it's not the same thing as doing it in Python or Java but once you have learned those things it's pretty easy I was talking about QUnit jQuery uses QUnit entire jQuery all the methods tested in jQuery I think they have 99% coverage which is brilliant for anyone 99% coverage means if you change anything and it's screwed up it will break and from somewhere ponies will come and beat you up then Mopah and Expresso which is both on server side and client side but they are more from functional testing side they are not on interaction test really great if you are writing Node.js code JS test driver it's not JS test driver it's a project by Google it's not a testing framework it's a testing infrastructure where you write tests in some other framework and it will run all these tests across all the browsers so let's actually do all the testing for you when you write tests you just test it on one browser and this will take care of the rest it works with Selenium also why I test similar to Mopah, QUnit and all it does functional testing little bit of interaction testing and you get apps created by Yahoo for just like JS driver you write your test and then you deploy it on multiple machines so Yeti is this really crazy setup where they have a few dozen mobile phones a few dozen tablets all possible operating system with all possible browsers someone just goes and clicks and says this test run it all damn browsers available Goal deploys to each one of them all of them test and give the reply back saying done so if it's broken on any device you get a report but you don't have to write all the devices you just have to write one test as how it shouldn't when you write a unit test you're saying this is how my code should work that's what you say so you write your code as how it should work and this will tell you it's not working that way in any browser and then you go ahead and look at the code next so if you're using any of these you're making your code bullet proof there's nobody in the world the worst possible programmers who can come and screw your code the moment they screw anything you can cast them in a moment okay and Jasmine one of the best test frameworks available out there there's many more there's a complete paradigm of programming out there called TDD where you write tests first and then as I said it's like Photoshop you design everything and then based on that you write your code so you write tests everything will fail because your code doesn't work the way it should but then you give all your code to make sure that it complies with the tests as you said it takes time I assure you it will take time one to maybe learn after a while it will take almost time with anything any other unit test but after you've written the unit test it will save you a lot of time lot of you probably spend a lot of time writing or rewriting your code do you know this what is this this is a rage comics character so I'm sure some of you know rage comics do you know who is the moderator of rage comics John Rezegh the guy who wrote jQuery he can write jQuery and he has time to do all this because he writes tests and if anybody messes with his code he knows whom to blame he doesn't have to go running and fixing things he will be amazed how more productive he can get and how more time he can waste on procrastination once you write tests you don't have to keep revisiting your code rewriting your code all the time ok next step move to templating stop doing that abc plus xyz plus 123 stop doing that it's really annoying write templates write templates that can be reused across server and the client write templates that can upload processing from your server to your browser and write templates so that you don't piss off yet another person for plus plus plus plus plus I saw a person like some 8000 9000 of one javascript file it's a maintenance help somebody forgets one code somewhere and the entire file is screwed entire javascript is invalid don't do that please please don't do that it's really irritating what you do is you pick up any templating engine in jave the moustache, the ajs I like ajs because it works on the browser and the server quite well for me but there are easily 50 solutions available right now or maybe more and you as a developer should decide to yourself what you are looking for if you are looking for only server side templating stick to server side if you are looking for both probably moustache and ajs if you are looking for only client side ajs is good underscore templates are good you can use underscore templates you can use jquery templates if you are using jquery if you are writing web apps jquery template has been abandoned by Microsoft jquery template is now external it's not in the code so how are you going to continue by the code developers of jquery templates it's not in the code anymore it's just like how they are abandoning i6 support and remove it to external plugin it will still be maintained but it doesn't go in the minimal file size they want to reduce the file size how does this templating work both in server as well as in client so essentially when you say templating you have these placeholders let's say tolerabraces and you can put name or double tolerabraces and put name arrow with person pages and name inside it what it does is you write a engine that parses this page finds these placeholders looks up somewhere and it places the values into you so this thing can be done also on the server side and client side so let's say gmail there is a new email this email can be represented as markup or can be represented as json markup let's say there is a json record, some json object which represent the email you have a template that renders how it should be either you could render it using the rendering engine in the server and send the html and the browser will just say dot and html equal to whatever or you can just send the json and the client can do it for you so you are offloading the rendering to the client so when you do this you are ensuring that if you are serving to something like opram mobile you can just simply serve html from the server but if you are serving to something like chrome it can render this for you just let it render for you the question I am trying to understand is about the data structure for example I use dream path jst very often which works on json data structure but on the server side you will be using a completely different technology who is sending that json let's say I have a j2e server you have a server that does it for you so instead of sending it you can put a check which says if certain browsers which are incapable of doing it don't send json use this templating engine which will not be the same implementation there will be a templating engine for j2e there will be a templating engine for ror so you mean to say you convert the beam data structure into a json exactly you are probably using a struct plugin to do it you do it manually next thing which not exactly is my point my main point is which is the history okay I am sorry all of you saw the json website right didn't anything notice when you click on any of the links the URL changes but the page doesn't change and the URLs are still compatible the search engines can still crowd them if you look at github same thing Gmail also if you refresh the page you still come back to the same email kind of the URL kind of bookmarks where you are so you are not breaking the well when initial Ajax era started people would change the content but the URLs stayed the same and if you refreshed everything was gone so there are two things maintaining a bookmarking another is I think the last part of the I will talk about Backbone.router is a brilliant brilliant module in Backbone which wraps over its shape if available if not available it uses hash change so instead of saying my URL slash abc it will be my URL hash hash exclamation abc so it still works and atleast IA but still works on IA and pretty much all on the browser you said you are using bookmarks for generating different URLs so that you are not breaking the web so how does it work do you do something like query the whatever is left after the hash and then make an Ajax code directly to that thing so you can either make an Ajax request or since when you are hitting the server you already know that topics you can say if request is asking for resource 1 send resource 1 along render it you can same thing which you are talking about that is per history api if it is a fragment then server doesn't know it yet if the fragment server doesn't know it in that case you will have to find the Ajax request if it is a hash bang then you will have to find the Ajax request so for the fragment you are directly taking it and then including in the URL of your Ajax so let's say if it is abc.com hash applying pqr so server doesn't get the pqr anything after hash doesn't go so you see there is nothing there is just slash everything is missing but there is a pqr ask the server to send me pqr as the json response the estimate response I put it right there it is json I render it and put it that's what you do when the guy clicks on pqr2 you find another Ajax request and populate it the point that I am coming here is it is like touch.facebook.com used to be there touch.facebook.com so they try to do something similar to this what they have done is they have directly tried to get the fragment identifier and then directly put it in the $.ajax or whatever library they use and then they fire an Ajax event to their particular URL now if you replace a fragment identifier with any random URL let's say htb.com so what you can virtually do is there is definitely a vulnerability so I am just understanding how does it work without breaking the web when I say without breaking the web what I mean is if you are coming from the old data browsers you identify URLs with resources and every time something changes in the page you expect that the URL represents that with the history API that is possible if you refresh the page or you share the URL you still get the same thing across if you are using github and you go to a certain folder and it shows you that file but it doesn't actually refresh the page and if you share that file and send it to someone else the github server renders it at the server side and sends the html anywhere I am coming from and also the vulnerability is true even for any other Ajax request one way is to do different things altogether I don't think you should be answering that here that's correct I am just trying to bring that point we shouldn't be directly carrying it vulnerability people can abuse if you are not you are not sanitizing the input the bobby table thing is going to happen everywhere then first use page transitions and this week things slide across looks better right it's not just about looking better if I would suddenly change the entire page you kind of get confused user will get confused there are transitions to give a slight hint of what actually happened it's not just fancy animations sometimes it's great usability use them when necessary don't abuse them save state on the client side let's say if you file Ajax request and you are sure that this resource is not changing for the next 5 hours cache it use local storage use cache control headers somehow cache it local storage web SQL index dv so many options available use as much as possible to store stuff offline if it's not changing if it's changing do a request asking if anything has changed it's changed just to add but don't pollute the log just to add but don't pollute the log definitely if you know that certain markup is going to be used sometime don't hide it somewhere in the corner don't do that keep dom as like we can talk but probably you can save it in local storage and reload it again so when you talk about storing it on the local storage would you recommend storing the data structure which is the json and then re-rendering it or would you store the html local storage pet itself Reqna allows you only to store some key values there is a proposal for shallow copying of objects into local storage values but that hasn't been implemented yet so right now all you can do is just store strings if there is an object you serialize it as json I understand that the question is would you serialize the json and then re-render let's say using some kind of templating agent to generate the html or would you directly store the html fragment which got rendered directly into the inner html up to you I would prefer to store the html which is the 5mb limit on local storage which essentially means 2.5mb because JavaScript is completely udf16 so if you hit the 2.5mb limit which is very well possible if you are using something like facebook in that case you would probably try to keep it as small as possible and the json might make more sense but let's say a small application html is definitely better because you already rendered it 37 signals has a mobile application LinkedIn has a mobile application and they all use all these kinds of things to make really brilliant mobile applications I am sure you would have at least not seen or heard about it got popularized a lot LinkedIn mobile, they use backbone they use all kinds of fancy stuff it's not really fancy it's really really good stuff that you would be using eventually in a couple of years I am not starting using it right now deployment should I talk about this for a while because I don't know what we talked about I will talk about what I feel is important for deployment as I said earlier don't be a miser when you are creating JavaScript files don't be a miser when you are creating html, template, css or anything be generous create stuff as much as it makes sense don't overdo it just make as much as it makes sense and let the build steps take care of all their other optimizations don't pre-optimize your code beat JavaScript, beat css don't worry about it just let the build steps do its work you are not a build step please don't write everything in one file please don't concatenate please don't minify it yourself I have seen people writing functions which are more than 1000 characters now in one line why can't you make it worse and let the build tool do it for you after make much more sense so please don't be the build tool use a build tool automate as much as you can which is not just building but also testing if you are using it use pre-commit hooks make sure when you are committing there is a js-hint or js-link commit hook which makes sure that you are not writing crappy js it will make sure that at least your js code is something that other js developers would like to touch please use js-hint or js-link you can use it as a pre-commit hook continuous integration you have servers where all the tests continuously run every 1 hour so when you commit everyone a test will run and a mail will go out to everyone saying that that damn bugger screwed up everything so you can know who to blame automate as much as possible not just your deployment but also your code generation there are times when let's say you are using backbone and there is a very high possibility that when you are building a lot of similar kind of stuff there might be a lot of similar kind of code use stuff generators which kind of generates blank functions for you you fill in the logic so you don't waste time on generating the basic structure again and again it generates a boilerplate for you again and again use performance test use js perf js perf you are confused of what you should do to contact net strings should I do a plus c should I do area a comma b comma c comma dot join should I try another fancy trick there are literally I think 6-7 ways of joining strings in the house trip and you don't know which one to use go to js perf dot com create a test write each one of them run the test take the test to another browser run the test share it with other friends run it on every damn browser that is there and see where it's performance don't assume don't assume that certain thing that you know better is highly performance or it will save more time run test run performance test and unit test and all kind of test use fixtures use configurations not only on the server side also on the client side use configuration okay this let's say logging even if you forget to leave console.log in your page it doesn't screw up because it's under if people flag shouldn't be but at least view that much not sure what pages means develop boldly don't be afraid of trying new things be strong be bold be forward about what you want to do something new comes up give it a shot doesn't matter how comfortable you are with that somebody says there is a new MVC framework out there which is much much better much faster go try it be bold about it not just about trying new things also about writing your own code be bold about it have confidence in yourself what you are writing is really good if you act slowly if you act smartly make small changes go incrementally don't change 5009s in one go please don't if you are making any change and if there is a unit test missing for it please write a unit test even if this doesn't happen last night at least try to make this happen try to make every website a single page application I think the last time I said that to someone not everything is gmail why do you want engadget to become gmail it's a magazine that just serves pages like any other website but then I told him are you seeing gizmodo so what gizmodo does is you know engadget right guys engadget time to India it's the normal website where you click and then the new page opens up gizmodo used to be one of those websites not anymore it's the same code so when you click on the link if it's already page is already open you click on the link if javascript is supported updates the history fpr shows that it's a content website and even they are doing it it makes sense instead of downloading not only the 50kb of markup you are saving all the unnecessary third party javascript downloads yesl downloads you are just fetching the json object you are rendering it on the client side because server doesn't want to render it anymore and the clients can render it now you are offloading processing you are doing a lot of good to your servers and of course like if I build this tool for building this json css it's a build tool called sangam go try it though it's a shameless platform but I think it's a limited tool I had a look it's similar to it the thing is there are about 50 of these build tools out there I don't say that go ahead and use this I am saying go have a look at this the beauty of json css you can build your own build tools it's pretty easy and even if you don't use it eventually you get to learn a lot and I mean really a lot that's it click to exit questions 5 minutes how about page speed page speed Google page speed it's a great tool they rank your page and give suggestions on what is more what is the next important thing that you should do like how you have a build tool and how do you make sure that this tool does all these things even to all of the things that are big speed or wide slow or where inspector audit tab will tell you they tell you certain things about concatenate and minifier JavaScript which build tool will do for you where inspector has an audit tab which will also tell you that you have unused css there are build tools that will remove unused css let's say you are using bootstrap there are build tools that will remove unused css from your page so there are build tools that will take up some of them but not all of them so let's say any of these tools say you are firing 48 htb requests a build tool cannot take care of that in that case you have to go ahead look back into your markup what are those fortifies if there are some 36 images you have to see if you can use them as sprites instead use css sprites use images as sprites will save a lot of htb requests you can minify rather than together 16 you want to combine all of them into one the thing is not all of them if you want to combine all of them that's a great idea if you are living in Sweden where the bandwidth is insanely amazing even there 3g speeds are pathetic so you will be serving half imb of JavaScript if you concatenate all the things if you are building a real application what you should do is concatenate them logically into 4 or 5 as demand load on demand load on demand not only it's not just about when you need certain part of the application let's say if you click on settings in gmail it takes certain time to open the settings tab because the settings JavaScript is not loaded when you click on settings it loads the JavaScript that renders everything for you after that if you click on settings again it opens it's really fast of course there is one JavaScript for minimal layout for fetching the mails there is a JavaScript for settings there is a JavaScript for all the labs maybe there are 4 or 5 JavaScript friends so you have to logically decide you don't have to concatenate in one file you have to decide how logical it gets a better example would be I was doing a to-do application lately where I had to support web sql in the browser that supported web sql indexdb in the browser that supported indexdb if neither is available use a jacks packet you don't have offline application but for people who don't have offline capabilities you can fire a jacks packet so I don't want to load all the 3 modules each one of them is easily 20k do I really want to load all 3 of them and 60k so I do a dependency check do a compatibility check saying that this feature is available not features available I load certain dependency so don't concatenate everything structured logically we have all of these bootstrapping javascript classes like modernizer like head.js which loads these other javascript libraries so do you think it's better to embed these scripts part of the document itself let's say here you think the query and modernizer put in a single file and you want to load them into the rendering server side page itself or do you think it's better to load them as a CDN library it depends let's say if you use something like YLJS where many of the AMD routers are offline about AMD routers you want to have a callback when a certain thing gets loaded which is not possible if you put a static script tag so if you're using something like a script loader in that case things will be different you cannot use a CDN even if you can use a CDN it's certain versions so that things don't break but yeah so aren't there other issues like for instance if you use CDN then during development you still have to be online yeah that's one of the things CDN you have to be online of course that is something that you can figure out but the flip side of that also is that if you say building two different websites where you use the same library then obviously CDN makes a lot of sense the third part the thing that bothers me with CDN I just forgot what I was trying to say some CDNs grew up with caching a lot caching headers for I was going through so there is an app called Wunderkit which was really popular so Wunderkit was loading images from twitter so you sign up with your twitter it will show images from twitter and twitter was serving the images but cached expiry in 20 years back so every damn time there were some 50 profile pictures and it was insane there was no caching so CDN is supposed to take care of these things but there are high possibilities that somebody might be screwing up so you have to trust them which is something which I am not very comfortable trusting third parties not very comfortable what about DNS lookups DNS lookups is another problem so if you are using a CDN you have to do DNS lookup for it I will probably share so on the proposal I will go ahead and probably add a link in the comments you can go ahead and see the link so article on why why CDN sources are not that creative I keep building the perhaps any other last question often there is this I mean one of the problems in developing a javascript application is that there are multiple differences with server side one being typically the javascript initialization variables come part of the server side rendering which means you have a user name which you need to use for along with VHX that creates a dependency with the server and the second thing is typically you have the authentication especially now that you have OAuth and OpenID authentication you need to get some information before you can actually try and get some Twitter feed or something like that how do you write unit test cases which are closely dependent on other services and services let's say if you are talking about passing server sending certain information and then you are sending it again for other requests what you can do is do one Ajax request initially and cache them in local storage actually so money's point is particularly with Twitter if your app requires a Twitter login to work but Twitter is an excellent service so how do you do a unit test now you mock all of that so what happens when you do a sign in with Twitter the server requests Twitter for a token sends back to you this is the URL, hit this URL when you hit the URL then server sends back you get another token and your server says this was the first token this is the token you give me now am I allowed and Twitter says ok you are allowed to take this information that's how it works but when Twitter says take this information they give you JSON you can save that JSON and use it as a mock when you click on it you don't have to go to Twitter again you can just use that JSON object as a mock run this once that's how I do it I kind of dump that JSON when I am using a node server I just do a console.log of the JSON object and then this dump it in JSON and reuse it wherever I want the problem with OAuth seems to me very often that you can take this off time I think it's time to wrap up but this is something that I am particularly interested in a lot of people are interested in doing this yeah so typically this OAuth works at the time of execution right so let's say I try to authenticate and I find that it's not authenticated right so you at that point in time you launch an authentication so it doesn't happen that it always happens during the initialization it happens between and it goes for an authentication then comes back and then the JavaScript starts may be JSON, P or Ajax I am mainly understanding but not completely so I think we will sit together after this right that's a little more elaborate we will put you all together first this is about JavaScript caching basically if I put long time XPS header and my application is already loaded in browser and then there is a next version which I have built what is the best way to reload it in on the browser except now I go with a very complex way of handling you know some kind of a get parameter you know I use that the only way to handle it is better that's one of the ways you can use there is a concept of eTags which basically identifies when you define eTags and you reload your page instead of firing actually get request you will be requesting if the file is changed or not so only if changed that's what browsers do if you serve with eTags so this is a really ancient thing we will be doing this in the patch 1 just make sure you serve right cache control headers small question like this I encountered in a life project whenever we had too many JS files or Jesus files the entire team was working fine but once we minified and compacted it in a single thing things were breaking so there are some compressors that screw up your code this happens to the bootstrap the bootstrap code does not use semicolons anywhere so you run into JS file and compressors the code you have written is bad you are failing at minifiguring it properly so what I will suggest to you is make sure all your code is one written in old module pattern at least if you are not using AMD have ES5 strict mode enabled and pass it through JS int at least if you comply to all these things none of the compressors are going to screw up your code but the moment you start writing bad code compressors when there are these lexical parsers they will screw up basically these files I was talking about for the third party like this fit a bootstrap to .0 it does not minify it is not just your code that is going to be bad so there are a lot of for a very long time Google's AdSense was a really bad JavaScript example they fixed it in the last 2 years they used to be terrible they didn't even load it asynchronous before what you do is you take their code you put it in a module pattern put ES5 for use strict in it get all the errors in it mail them saying what are you writing you expect third party people to use your code this is what it looks like tell them be honest about it it is your responsibility of course you are benefiting out of it and you had last question ok the thing is let's say you are creating a single page app and then we have too much content in the DOM so doing a lot of Ajax calls and doing frequent DOM manipulations something like stop running the script sort of errors so either we have to clear the DOM and then accommodate new set of the tags we need to do something like that you can detach DOM of course there is a new thing coming out of the DOM you can talk about it later but in a typical DOM also you can detach nodes and put them into document fragments this is what I typically do let's say I have you guys have definitely created tabs or used tabs once in a while ok so let's say you have a tab let's say 5 tabs and 5 panels under it what you do is you do a tip show hide right don't do that what you do is let all of them show you just detach all the other panels put them in document fragment you can say document dot create fragment dot append child each one of them the moment you append child them into the fragment they get detached from the DOM and voila it saves a lot of memory saves a lot of processing that's another option I mean you have something pre rendered and you want fast switching you don't want to keep rendering it again for a tab moment I keep on second tab I don't want to render a huge log of something let's say I have a log viewer I don't want to render the entire log again I can just detach it and keep it in so why is detachment better than hiding what does it do when you hide it still in the DOM no but so what is the problem with the DOM it's still in the DOM to meet DOM elements at the time it's like I remember crockford saying that if the page is having more than 3000 elements in the DOM then we are probably doing something wrong when you have your DOM kind of applied with your CSS create something called a render tree when you have a really huge DOM doesn't matter if 90% of it is hidden huge DOM DOM tree to render tree conversion is longer it has a check what is visible when you detach it's taken off the render tree it is off DOM tree when you hide it's off render tree alone when you remove it from the DOM it's off DOM tree also it's a separate DOM all together called document fragment you can create a little document fragment when you bring it back in it's rendered all over again there so you can't avoid the rendering part of it of course it's going to be on demand you can still remove it from the memory no it doesn't you'd be amazed majority part of memory consumption is not because there's a DOM structure it's there because it has to be rendered again and again into the render tree that's one of the most memory and processing that you would take you should probably go ahead there's a review by Paul Irish about reflows and repaints you should probably go through it it's a billion dot what would happen if I say a dollar star dot length unless I'm using jQuery if you say dollar star it will look in document document fragments won't be coming document fragments are not in the document they're separate they're detached I think that would be an idea I think we're done thanks a lot guys one thing all of you guys need to know I have built it to JS website that's his work and if you want to follow me on twitter or github which I really appreciate if you want to follow me on github