 Hi, so this is my first talk in Thailand and I really love the weather here, a bit harsh but I liked it because it's different. So coming to me, I'm Santosh, I work as a senior development engineer in Pramati in India and to like to make a sense of my existence, I volunteer to Mozilla as an open source contributor. I have been volunteering to Mozilla from the past six years. I worked on different projects, I contributed to different products and previously before Pramati, I used to work with Infosys and Gaian in India. So today I'm going to talk about writing JavaScript with better performance. How many of you like code JavaScript? One, two, three, four, five, six, seven, yeah, cool. So since like more than half of the people don't code in JavaScript, so I'll take the session in a way that it's like better coding practices for everyone but I'll talk about specifically for JavaScript. Sounds cool, yeah. So this is what I'm going to talk about, I'm going to talk about a little about JavaScript and I'm going to talk about a few case studies which actually helped me to like propose this talk to this conference and I'm going to talk about a few tips and introduce you to a few tools which you can use to improve your code performance. So yeah, so JavaScript is one of like the oldest scripting languages out there. It's like two and a half decades old and it was actually started as a scripting language for web pages but later on if you see JavaScript right now, it's everywhere like it was on web pages before, now it's on the server standing on Node.js and it is on VR devices and even if you have, how many of you have heard about HoloLens from Microsoft, VR devices. So Microsoft created a framework to develop applications for HoloLens which is called as HoloJS, like a couple of years back and even robots have JavaScript. So currently like JavaScript which was introduced as only for web pages, it is spreading towards like everywhere. So it's always completely evolving which makes the developer life easier and better. Yeah, easy to write and debug. So what do you code? Like do you build any mobile apps or anything? So I'll tell you my story. Like when I first started coding, I was developing applications for Windows. So for that, I had only 2GB RAM of machine but to develop mobile applications for Windows, you have to, you need to have at least 4GB of RAM at that time. So I had to install Visual Studio. I have to like install few SDKs and then I will actually go and create my application. Which is like tiresome, like if you are a beginner who is just getting started with, you're going to get frustrated because of the time it takes and the resources it takes. And the first time when I started to build my first web page, so I just opened my Notepad and created a file called as index.html and wrote Hello World on it and opened it with browser. It was as simple as that. I didn't need anything to write and debug my web pages. So that is why like people are more interested. If someone wants to learn a coding language, they started to, they start with JavaScript because it's easier to like actually set up and write your first page. And so I have been like working in a like proper job from the past four years. So my first project was like a 10 to 15 year old JavaScript based project. It was using some framework, but let's talk only in JavaScript sense. So I was working on that. So if I want to do any action or if you want to write any functionality, I used to see how my seniors wrote and I used to just copy paste it and then she make the changes. I think most of you people do the same thing, right? So then again, I joined in a startup and I built like many products from scratch. So where I actually learned how to write from scratch. And again, in my next job, I got into a five year old project where I have to like write new things and also correct existing things. So when I was going through the code base now, it's like, okay, my first project I was just a beginner. I don't know if I point out a mistake. They might repoint it to me that it is going to be my mistake. So I didn't do that. But now I like, I'm a senior so I can do, I can point out things. So that is when I got to learn about like how other developers are writing code. And I started to figure out if there are any better ways to do it. So one of the first things which I saw in all of the code base was, so we have eight tables. We have multiple tables where we get an array of 100 objects. So in JavaScript, objects are mutable. So if you change, if you copy the object to other variable, and if you change in any of the one variable, it gets replicated in both. So the easiest way every developer was doing it in my code was they are first converting my object into string. And then again, they are converting my string into object. So JSON is like, it's already a method available in JavaScript. So they were using it to do this. So I started to think like it. So if something comes so easily in JavaScript, then there should be a catch for it, right? So if there is something which you are easily doing it in any programming language, there is a catch. So I found the catch here. So I started to write, like compare different ways to copy a JavaScript. So the last one was what we generally using it. And they were other types. So mappies like, think of it like a for loop if you are not a JavaScript developer. So I was using an array, I was using a for loop for an array and then copying the things. But then if I just compare the performance, so the regular method which I'm using is like 60% slower on the last column if you see it. So we had like 100 pages in our old web app. And 100 times we are reducing the performance of our code by 60% using a non feasible method. So here I found a better approach when comparing different performance. So for this, there are many tools out there if you are writing a simple code snippet and if you want to compare the performances, there are multiple websites already available there. And I was using jsperf.com for this. And then this was one thing. So there is a catch if it comes easy for us. But there should always be something better. There should be an advantage for that method. So in JavaScript, the objects work in a different way. Here, if I want to, if I have an object inside another object. If I convert into string and then I convert into an object. It like completely converts it. Like it completely changes the references. But if I use the previous method, only the first level of objects are being converted. So I was doing like I was deep cloning it. Like I was completely cloning one object into another object using load ash. And I found that the before method which we were using is faster. So here is one thing I understood. So if you have only one level of objects, then use the map which I was showing in the before slide. But if you have like multiple level of objects, object inside an object inside an object, so then at that time, you better use methods provided by JavaScript to improve performance. And so this is one thing, like there are multiple ways to do a simple thing in any coding language. But the most like better one with best performance is which has the less steps. So I'm like both are doing the same thing. It's going to like display a text called as text summit after slicing it. So the first one, it's like a straightforward method and it was like fastest, very fast. And I included like just two extra steps in the second method. Even though the output is same in both things, the second one is like 100% slower. Just a simple step might cost you a lot. But think of it as this way. Like now we have like 8GB of RAMs and like 100 MPS of Internet easily. So we might not have found it, but what if your application is being used in a remote area where people are using 2G network? So you should write your code for everyone. Even just with the simple change, you're going to improve it a lot. And this was one thing, like in JavaScript, there are like multiple for loops. And so this one here, I was just logging every item in my array using different methods and I got the statistics here. So if you see the first one, array.map is the slowest one, which is 6% slower than the rest of the things. But I did something else with the same array loop. So here I'm copying one array to another array. So the one which was slowest in the before one is the fastest now. So let me tell you, I'll tell you the story behind this. So if you write a for loop or for each, so every method or anything will have a return type. Even map has a return type which returns an array. And the other for loops are just like it will return an undefined value. So if you are writing a loop which is returning an array, then use map. If you are writing a loop which doesn't need to return anything, then use for each or for. So this is one of the important analysis which I found. And this is one thing which we generally do in JavaScript. So our if loops in any programming language actually takes the Boolean value as an input parameter, right? So it should be either a true value or false. But in JavaScript, it can take a number, it can take a string. It will do an internal typecasting. So it will typecast into a Boolean value and then run the code. So here I stored a variable called as str, I gave it as an empty string. And if I do like compare str equal to equal to empty string, then it goes inside the loop, right? So this is one way or I can actually use not, I mean, which is common in all programming language and str. So both does the same thing, both are success scenarios. But the second one is faster because here you are not doing any typecasting. If you do str equal to equal to empty string, it will actually return you a true. So which is like there is no typecasting needed for the tip loop. But the first one, it converts the empty string into a Boolean value. It typecasts it, which will return false and that falls using the node you are converting it into true and then using it. So the other method is like very simple. It's only the same line of code, but the performance is improved in here. Just I'm comparing it with the basic code. But think about some robust code and how it's going to affect it. So yeah, so these are few case scenarios I compared when I started working on that five year old project. And when it comes to tips, minimize your scope chain. This is the first thing which I learned. In JavaScript, if you declare any variable, not inside a function, but if you declare anywhere else, it will be assigned to the global object. So now here I wrote like constant number one, number two I declared it. But in my whole of code base, if I write like window.number one, window.number two, then it actually gives me that number. Because these are assigned to the global chain. And if I'm writing an add function and returning like adding two numbers, then it is going to add those two numbers. And it will pick from the global chain. So it's like process. So first it will check for this method. If there is a number one, then it's okay. No, there is no number one. So go to the parent method. So is there a number one there? Yes, so then use it. If no, then go to the parent method and check for number one. If it is not there, then okay, this is fine. This is the top level. It will read it as undefined. So instead of that, so declare it inside your methods and reduce the scope chain of that. So if I write it, so I recently listened to a talk by other person on functional programming. This is one of the concept of functional programming. Each function is independent. If I put this function, I remove this function from this slide and use it in another slide. So it will work because it is not dependent on any other external factors. So here I'm using the local variable. Number one and number two. Number one and number two are local variables. I'm actually reducing the scope chain and using that. And there are multiple conditions in every programming language. We have if, we have if else, if else, if else. Sorry, else if, else if, else if. We have switch. So there are multiple loops. And when it comes to tips, what should you use? If you are having any Boolean comparisons, okay. So if my name is Santosh, then do this. If my name is not Santosh, then do that. So if it's only two or four scenarios, then use if loop. If else loop. And if you have different things, okay, if I'm in India. So use INR. If I'm in Thailand, use Baat. If I'm in Singapore, use Singapore dollars. So if I have multiple conditions which I have to convey, then I should use, I'll use switch. If you have a look at pictorial flowchart, then you will have a better idea on this. So this is the same thing which I was talking about. If loops actually take Boolean. So give them Booleans, not any other things so that your JavaScript code internally typecast it to the Boolean value. And keep your DOM interactions to the minimum. So we have this habit of taking the reference of the HTML element in your JavaScript, and then write events and functions on it, right? So now here, there is an input element which has an id username. I wrote key up, key down, and focus event. So when it is focused, so maybe highlight the border when I'm going to write that. So when I'm going to key up or key down, just check if it is a number or string. So all these things, so I'm interacting the DOM, I'm getting the element and doing the event. So instead of that, get the element once, so you have your JavaScript reference and use that everywhere in your application. So you have interacted with the DOM only once, so you are like, and you are working on your own local object. So it will be like really, it will improve your performance to a great extent. And avoid using jQuery. I'm not sure if I'm going to tell you this or not. But when I started learning JavaScript, so the first things I used to do is import bootstrap, import jQuery. So bootstrap to actually design my page in an easier way, and jQuery to write selectors in a simple way. So if you write jQuery, get an element like dollar off, get an element with class name focus. So it will traverse to every DOM node. It will go to your body, then again main, then again division, then H1, P1. It will traverse through every DOM node and then gets you the elements which you need. So that is why, I mean, if you're not going to use it, like not properly going to use it, then avoid using jQuery. So yeah, this is one thing which I started using, bundle analyzers. So if it is a smaller application which you're going to run it once, then you are good. So if you want to build it faster, so it's fine. But if the size of your application is increasing, then you better use this bundle analyzer. So what they do is, they analyze all the bundles, all the libraries which you are using in your application, and then give a size comparison of which library is using how much memory in your code. For example, if I'm using loadash or underscore, which many people use, but I am using it only to get the minimum value of an array. So for that simple functionality, it is better not to import a complete library, right? I'll write the same code in my own code, then it's done. Instead of giving a chunk of my memory to that underscore library. And TypeScript, so this is one of the beautiful things which I've been coding from the past two years, I guess, and I really loved it. So when it comes to Java or any other programming language, you give a type to every variable. If it is string, you declare it as a string. If it's a number, you declare it as a number. But in JavaScript, it's always, you will use the same keyword, where, let, or constant to declare available. So this is my JavaScript code. This is how I write a program to add two numbers. And if I give four and five, then it's fine, it will take it. If I give an empty string also instead of a number, it will just display me a string, four. The first one will display me a nine, and next one will be four. Because in JavaScript, it takes both the string and the number. You can add both things. So that is why this one happens. But if I write a TypeScript file, so then I'm going to declare the type of each of my variable. So in this one, I declared the number one has number, and number two has number. Then I added those numbers. So if I write, like, add of four comma five, then it adds to those two numbers. Because the function add only takes numbers, and I'm giving it numbers. But in the second line, I'm using add of an empty string or some string comma four. But we wrote, like, it should accept only number. So it will give me an array. Sorry, I think it's not visible from you there. So it says that argument of type empty string is not a synable to parameter of type number. So it throws you out an error immediately when you're writing your code itself. So this will be really helpful in other scenarios as well. So one of the other scenarios is, like, if you're writing a function saying is valid, which will return you a Boolean type. So that code will actually compile and it will work only when it returns a Boolean. So for example, if I wrote, like, is valid, I declared the return type as Boolean. If I write, like, return yes, so yes is a string. So that function doesn't work. It doesn't compile. So this is how TypeScript helps you to write better code with few failing and error scenarios. And even the IDs are great. So I use Visual Code for writing my TypeScript. So if I declared, like, conference name and, like, I declared it as Open Tech Summit, if I write conference dot, so it will give me what are the variables present in that object, which is general. But it gives the type of that variable as well. So here it says property name is string. So the intelligence in the IDs really help you if you're using TypeScript. And this is what TypeScript website sees about TypeScript. So it's a superset of JavaScript which compiles into plain JavaScript that can run on any browser, any host, or any OS. And it's open source. If I write something like this, so if you are a JavaScript developer, you might be using the latest JavaScript feature. You might be using arrow functions. You might be using the keywords of let and constant, which are there in recent JavaScript. But if you try to run them on some old Internet Explorer, your code will break because your code is still in ESX, which is not supported by older browsers. But when you write the TypeScript code, it compiles to the language which compiles to the version which most of the browser support, which is ES 2015. So if you just observe this code, so I'm using a map function. I'm using the arrow function in the second line. And the first line, I'm using constant keyword. So if I compile it, it converts the code automatically into wave keyword and the function, which is an older version of writing callbacks. So what should we do if we are writing JavaScript? What should we actually do? So let an extra pair of eyes look at your code. Even if you are an experienced developer, even if you are like a beginner, it's always good to have an extra pair of eyes look at your code. So there is nothing wrong in that because even I am a five years experienced guy. But still, I ask the junior developers to sometimes look at my code. So there is two things that's going to happen. Either he will learn from my code or he will teach me something about my code. So it's always good to let your code look at another developer. And prevention is better than cure. I think our ancestors have actually came up with this code for health reasons, but it actually applies even today. So if you're writing any code with large code bases, you better introduce some coding guidelines so that multiple developers, when you work on it, you won't clash each other's code and each other's rule sets. So this is one thing. And import only when you actually need it. If you have like, if you are importing 10 modules in a particular component and if you are going to use only like six or seven modules, so better import only those six or seven modules and import the other modules when you later use it. So it reduces your bundle time and it avoids all the unnecessary import modules in your code base. And write unit test cases. But I never thought this is really helpful because in my beginning, I never wrote unit test cases. But when I started writing unit test cases, I caught things. I caught few error scenarios, corner cases, which helped me to write a better code. Like for example, if I'm writing a button click, so I'm going to consider only positive scenarios when I write my code for the first time, right? So if I'm writing a button click, OK, I'm clicking on it. And OK, I got a pop-up, then I'll type something, then click on OK. So this is the success scenarios which I'm going to do. But when I write unit test cases, my code considers the other things as well. So what if instead of clicking the button, it will just hover over it? Or if we hold the button for maybe some longer time, or if he clicks on anywhere around the button. So my unit test cases, I was just taking it as an example. But unit test cases help you to find those error scenarios and other scenarios which will help you to write a better code. So yeah, those are some of the tips. Even there are other tips also. So once it is up, I'm going to tell you. So these are a few things. Share your code with other people. If you are doing something and if you are using a library for it, then you better use. So for example, it's like if you are using a sorting functionality, if you are writing a code, instead of that, better use some other library because they should already be tested with better performance. So if you use that code which is written by other developers, it will be really helpful. And reusability is one of the important things. If you are writing a code, you write it in a way that if you pluck it out of that code base and if you paste it in other code base, it should work as expected. No, it's gone. So this is one more thing. So yeah, I think I'm done. If my presentation gets up, I might come up with two more tips. But yeah, any questions? Thank you for your information. This is very valuable indeed. But it is a lot to take in for, say, my beginner like me. And I just thought that all that you have spoken and had given to all of us can be arranged into a book or something. So I started whenever I learned something, I have a habit of blogging it, writing a post and publishing on Medium or dev.to. So you can go through those articles. So that's a good question. If you are a beginner or a semi-beginner, you first just make sure that it's happening. So if you are writing something, OK, it's working. So that is what you will check. And go ahead with that, do that. So once your code works, then start thinking, like, is there any way I can make this code perform better? If there is any better way to write that code. So do what you're doing right now. And after writing that, just think about a better approach for that. So there are multiple books, multiple blog posts already available. But these are my personal learnings, so which might not be available, but which will soon be available when I post it. Yeah, thank you. Have you ever considered writing a book? I considered. I started, but I never finished it. Yeah. Any other questions? No questions? Thank you. At 30 minutes, please be back at 11 o'clock. So I will make my slides. I'll tweet my slides. So you can just go through the link and look at the other tips as well, which I introduced and the other tools which you can use, OK? So you can follow me at iSantoshV on Twitter. iSantoshV, yeah.