Why ES6 isn’t always faster
Video Transcript
00:00We're in a new section and in this section our focus is
00:04over holistically JavaScript without specifically
00:08focusing on e es six or five.
00:09Besides this lecture, which we are gonna talk about
00:13a little bit about, the question is, is ES six faster?
00:16And we're gonna find the answer to that in this lecture,
00:19but throughout this section we're gonna talk about
00:21arrays and how to improve them.
00:22Overall. We're gonna talk about the power of reusing instead
00:25of recreating and about immutability.
00:28Now it's a concept you might not be familiar with,
00:30but by the end of this section you will be,
00:32and you'll understand why you really want
00:34to add immutability into your developer arsenal.
00:38With that said, let's jump, oh, one more topic I forgot
00:42to say, is that we want to avoid memory leaks, obviously,
00:44and we're gonna take a look at how do we do
00:46that within react.
00:47So with that said, whew, that was a lot of topics.
00:50Let's jump into the first one, which was about ES six.
00:53And the answer is ES six is not always faster.
00:56The reason is very simple
00:57that browsers are currently still evolving to get ready
01:00to run on E ES six.
01:01So they're not a hundred percent optimized for them,
01:04by the way, nor is using babble
01:06that transcribes down into ES five
01:09because it adds a lot of stuff into it
01:10and sometimes it's not the most efficient
01:12as a browser natively would do.
01:14With that said, I wouldn't focus on it too much.
01:17I would just worry about building an E es six
01:20because from a performance perspective,
01:22you wanna also be ready for the future,
01:23but it's good for you to be aware of it.
01:25That's why I'm giving you this notice right now.
01:28Beyond that, what I want you to focus is on how
01:30to improve your code performance instead
01:33of choosing a lower language to improve your performance.
01:37And for that matter, we kind
01:38of talked about it throughout the last few.
01:40Um, and by the way, I see you're a typo on my end.
01:43I'm sure that our publisher will fix it before it goes live.
01:46So regarding our, um, how do you approach performance?
01:50I wanna just wrap it up. First of all,
01:53whenever you're calling a function often, then good,
01:56take a good look at that function to see
01:58what could you do to improve it.
01:59Anytime you're using a loop, take a deeper look
02:02to understand how could you improve that loop
02:04to reduce its complexity or even get rid of it completely.
02:07Last but not least, conditions
02:10and local references as they relate usually to a loop
02:13or a function, but generally speaking.
02:16So it's kind of like layers of
02:18reducing complexity from functions that are called often
02:21to loops that are that call a lot of things
02:23to conditions, to local references.
02:25And that's how you take your step back
02:26going deeper and deeper.
02:28So for example, inside of a loop, the priority
02:31of fixing a condition is incredibly high, such as inside
02:34of a function that is called often
02:36and so are local references.
02:38Well, if you have a function
02:39that is called once in a million years,
02:40maybe not as important.
02:42So it's really, that's where you find that resolve of
02:44how to figure things out.
02:46With that said, let's jump into our first lecture
02:49of the section as we talk about ES six versus ES five.
02:55Alright, I wanna recap
02:56and you know, the, in the, as I'm recapping,
02:59It's something that's kind of annoying me is our input.
03:01Let's just add a little bit of bootstrap CSS here
03:05and let me just push it to pull from extra small devices
03:09and up to the right, making sure
03:12that it will always be on the right side.
03:13Okay, so I want to recap what we were talking about
03:17and I kind of wanna close up our conversation about,
03:21in general about ES six related enhancements.
03:25Now, generally speaking,
03:27when we're talking about ES six feature enhancements
03:30and I, I provided a link inside of the description
03:32of the section, you'll have your really good breakdown
03:36of different features and how are they better or worse?
03:40But generally speaking, for example, arrow functions,
03:43which are functions that bear within them, their scope.
03:47Just as a, a slight reminder,
03:49let me see if I have any arrow functions here.
03:51Uh, I do not. Let me go into a button.
03:57Nope, navigation. Oh wow, we don't have any arrow functions.
04:01Alright, so let's create quickly an arrow function.
04:03Let me show you what it is.
04:04Now, generally speaking,
04:06an arrow function is used in a situation where we need
04:09to send a function to something that is external to us,
04:12but we wanna make sure that its scope remains
04:15or we just want to type less.
04:17Now the process of creating this,
04:19and imagine that we have your, some sort of a callback
04:22method that expects
04:24to get a function now natively we would type, function
04:27and provide parameters, open close brackets
04:30and so on and so forth.
04:32In ES six, you have a shortcut to that,
04:34that Otto adds an extra feature.
04:36And the shortcut basically is creating this, um, shorthand
04:41and it really just cuts down a little bit of typing,
04:43especially in a situation
04:44where you don't have any even parameters
04:47or if you have parameters.
04:48It really, the whole point is making it smaller.
04:50Now, above that, the arrow functions will have a this inside
04:54of them that will be the, this of the enclosing element
04:57on contrary to a function that is just being sent by nature,
05:01it would lose its scope.
05:03And that is by the way, the reason why inside
05:05of our navigation, inside
05:06of our app more accurately we went up above inside
05:09of our constructor and we always set ourself a bind
05:12to make sure that our function will remain that function
05:15that was there before as we're passing it along.
05:18So generally speaking, when we're talking about arrow
05:21functions, their performance is basically the same
05:23throughout the different browsers.
05:25Even if some browser, there's, it's running slower
05:28and then these type of enhancements, if you get to a level
05:31where you have to make these minute changes
05:33and minute configurations,
05:34well you're in a situation already that you really have
05:37to tinker, but generally speaking you don't really
05:39have to worry about it.
05:40Same applies also for classes.
05:42By the way, classes in general are slower in a lot
05:45of different browsers while generally speaking,
05:49because it's new right now
05:50and there's transcribers that are being used
05:52to transcribe those classes down
05:54to ES five, ES five generally
05:56Is faster and even not using classes at all is faster.
06:00But the problem with that is that we wouldn't be able
06:02to use react efficiently.
06:03We could have, but we really wanna move on
06:05to the best technologies that we could use
06:07and as they mature,
06:09they're gonna become faster and better working.
06:11So for example, if you're talking about you have a big issue
06:13in your on Firefox
06:15and you have to run it, you'll see that
06:17that bible transcriber slows everything down by 62 times.
06:21So it's 60 times, 62 times slower than if you would not
06:24use objects in classes.
06:25Well classes technically, technically speaking.
06:29So basically we're, what we're basically saying is
06:33that only in those situations and you might want to go
06:36and enhance your E es six down to ES five,
06:38but generally speaking you don't have
06:40to worry about those type of things
06:41unless you have something that is crazy intensive.
06:44And in that situation, you'll probably have
06:45to do a little bit of testing to figure out where, what
06:48and why you should use elements.
06:49So for example, in react, if you have,
06:51let's say you're navigation element is refreshed a hundred
06:54times a second, then maybe it would make sense for you not
06:57to use classes, but instead of that directly use objects
07:00and not transcribe it down.
07:02And those are the type of situations that are
07:04beyond the scope of our conversation about performance
07:06because it will really be specific to your
07:09situation and your needs.
07:10Because don't forget our ES six code is being transcribed
07:14down with Babel, which creates things in its own way,
07:17but it tries to do it as best as it can.
07:20Now generally speaking, when we're talking about
07:22performance, the first thing you want
07:24to do is anytime you call a function multiple times a second
07:27or often or it's used often, then start there
07:30and try seeing what could you modify and optimize in them.
07:34If it's creating local scope variables in there, great,
07:37that is a slight improvement, especially
07:38for something that's being called often.
07:41But more than that, inside of those functions try to isolate
07:44for loops and then see if you could take a complex if
07:47statement and make it a little bit more less complex
07:50and the less complex or even removing the
07:52if condition if possible.
07:53For example, if we weren't expecting oto an other other
07:56condition, we wouldn't need an if at all.
07:58In this case, we, we switched it down from two cases
08:01into uh, any other situation.
08:04So really the your, your goal really in this type
08:07of situation is to try to isolate and figure out,
08:10and by the way, we could have used a switch oto here
08:12and created something that's a slightly better.
08:14'cause if conditions are always a tad more complex is we
08:18could have created a switch
08:19and put our map value right inside there
08:21and in that situation then create.
08:23So that would be slightly even better
08:25because then we would have basically a case
08:27where if the map exists, if it's true, if it's false
08:31or if it's only if it's true,
08:32if the VA there is a value there or there's no value there
08:35and, and, and, and those type of things you could play with
08:38to try to enhance further and further your elements.
08:40Generally speaking, the less loops you have,
08:43the more cached information that you have on things
08:45that are running often, the more you're gonna
08:47improve your performance.
08:49So in a situation where in this situation,
08:51because of the construct of how React works,
08:53where the render needs to start from scratch each time,
08:56we can't assume that all the children are the same
08:58because the parent might change the children.
09:00So we must have that loop inside or that render method.
09:04But because React is manipulating Dom itself
09:07and we're not the ones manipulating the dom,
09:09then it's gonna really boost up our performance in general.
09:12But if we take these type
09:14of loops onto a server into a situation
09:16where this content cannot change again once it's actually
09:18been created and the user is gonna use it again,
09:21it makes sense to cache that information.
09:24Okay, so that's it about that and that's it.
09:26You know that we're starting to move away from React stuff
09:28and ES six stuff throughout the chapter into general
09:31JavaScript tips and advice on how could you modify
09:35and improve just further your code.
09:40In this lecture, we really wrapped up the previous section
09:42when we were talking about E ES six,
09:44but in the remainder
09:45of the section we're just gonna talk about
09:46JavaScript in general.
09:48And our first topic is gonna be about
09:50how do you improve arrays
09:51so they will run in their most efficient way in JavaScript.