Is JavaScript Becoming PHP? - Lately in JavaScript podcast episode 54

Contents

Introduction (00:20)

EcmaScript 6 Features comparison with EcmaScript 5 (2:21)

BabelJS Running ES6 in ES5 Browsers (31:39)

Strategies for dealing with multiple Ajax calls (33:41)

Fix the AJAX Requests that Make PHP Take Too Long to Respond (40:11)

Simple Inheritance with JavaScript (47:53)

Detecting Minified JavaScript code (50:30)

JavaScript Innovation Award Winners of February 2015 (59:12)

Conclusion (1:06:31)

Contents

Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript

[Music]

Manuel Lemos: Hello, welcome to the Lately in JavaScript podcast. This is episode 54.

Since the lower third extension of Google Hangouts for many months has not been my friend, Arturs thinks that I do not need introductions, but still, I'm Manuel Lemos, creator and developer of PHP Classes and JS Classes site.

Since we have this regular podcast talking about, in this case, JavaScript, it's always great to have here with me Arturs Sosins, directly from Latvia. He is enjoying the almost summer of Latvia because he is already wearing short clothes.

Hello, Arturs. How are you doing?

Arturs Sosins: Hello. Yeah, the best thing I enjoy in Latvia is that we have all four seasons. But the worst thing I enjoy in Latvia is that the weather changes so much, that one day it's hot. Other day, it's cold, and you can get very sick pretty quickly with these conditions.

Manuel Lemos: Yeah, so those changes sometimes can be problematic. Over here, it's starting to get cold, so I supposed over there it's...

Arturs Sosins: Oh, really? How cold?

Manuel Lemos: Oh, it's like 19 degrees.

[Laughter]

Arturs Sosins: Yeah, I'm sure. We swim in a water that is colder than that. It's summer.

Manuel Lemos: I never swim in summer with less than 29 degrees. At 29, it starts getting a bit cold.

Arturs Sosins: Oh, come on.

Manuel Lemos: Yeah, but we rely on the sun to warm the water here, so we don't pay expensive bill to get the water warm. But in the summer, when it really gets hot, you can go to swim in the swimming pool at midnight, which is great.

EcmaScript 6 Features comparison with EcmaScript 5 (2:21)

Manuel Lemos: Anyway, that is totally nothing related with JavaScript, which is the main topic here, so let's get with the real interesting JavaScript topics. We're starting with a site that is talking about ECMAScript 6.

I don't know if everybody is familiar, ECMAScript is the basis of JavaScript, but most browsers... actually, the most common JavaScript environment... are running ECMAScript 5. ECMAScript 6 will be totally different. I won't say different but at least a great evolution. Finally, JavaScript will look more like other languages, with real classes.

But this article here is showing the differences about the new things that you have in, I would say, ECMAScript 6 and ECMAScript 5, which is your regular ECMAScript. So, they have several things. Let's get with this so very quickly because there are many things they compare starting with constants.

So in ECMAScript 6, we have real constant. We don't have to do something like this to have a global variable that...

Arturs Sosins: ...unverifiable variable or something like that.

Manuel Lemos: Yeah. Well, I didn't even know that you could.

Arturs Sosins: Yeah, I also didn't know.

Manuel Lemos: ... object define property .

Arturs Sosins: You learn something new every day.

Manuel Lemos: Yeah. Not that I want to use that ugly code, but now, I know it is possible.

Then they talk about block-scoped variables, thanks to the new operator 'let' that you can assign variables that only exist inside those scopes.

Arturs Sosins: Not only 'let' but it's simple actually, but usually, if you use a counter i and you want to use it in the callback or in the function or something like that, you would need to define additional function to do that, because the value i, would be changed in the loop. But when you pass it as a function argument, so you could use it to right a wrong. But with the right variable, you don't need to do that anymore.

Manuel Lemos: Now, JavaScript looks more like Basic with the let command.

And also have block-scoped functions, which is a little bit weird, but OK...

Arturs Sosins: Yeah, they need to scope function... Basically, they need to do anything scope into a function scope. You can just use, or at least in the main scopes. Yeah.

Manuel Lemos: I don't like functions inside functions because it looks weird. You get lost in the middle of the code, but if you would like to have fun with that, you're fine.

Now, there are some things like they call Arrow Functions. Now, it looks more like PHP.

Arturs Sosins: One of my friends, which actually was working on PHP projects for several years, now is working on Node.js project, and I think he's trying ECMAScript 6. He's a very big fun of arrow functions, of all the reasons that we will talk now.

Manuel Lemos: Yeah.

Arturs Sosins: It is shorthanded, easier to write.

Manuel Lemos: Yeah, and it looks like PHP so if you learn PHP, you also learn about ECMAScript 6. Well, I don't think this is so similar but it looks familiar.

Then, something they call Statement Bodies, which is weird. I don't know even what this is, for each.

Arturs Sosins: It's basically the way to define an anonymous functions also.

The next one, Lexical This, is the best of all. You can switch to it.

Manuel Lemos: Which one?

Arturs Sosins: Lexical This. It is the best of all because it transfers this context to an anonymous function. You don't need to define global self variable or you need this anymore.

Though he was a real fan of this one. He dislikes JavaScript because he would need to beam this all the time or do other workaround and functions now and anonymous functions becomes like a method of the same context you are using.

Manuel Lemos: So this is for what?

Arturs Sosins: In ECMAScript 5 variant, you need to define the global variable self, which will store this context, and then you can use it there.

Manuel Lemos: Oh, I see. Now, the 'this' inside is the 'this' outside.

Arturs Sosins: Yes, exactly. So it's quite easier. And less to write, so...

Manuel Lemos: So it doesn't depend the scope of the callback because this is a function, right?

Arturs Sosins: Yeah, it automatically beats this context to the callback the function.

Manuel Lemos: So this inside will not be window or something else.

Arturs Sosins: Yeah. It will be this that call the callback, that runs the callback.

Manuel Lemos: I'm not sure if this is a good thing because you probably will be confused when you start using... OK, but let me get there one day, and I'll tell you.

[Chuckle]

Arturs Sosins: OK.

Manuel Lemos: Then, there are Default Parameter Values. This is old news for PHP developers.

Arturs Sosins: Yeah, but still, one thing that I really miss in JavaScript was also this one.

Manuel Lemos: Yeah, they are catching up on PHP.

rest Parameter... what is rest parameter? It's variable length parameters? No?

Arturs Sosins: It's not like you have an array of all parameters but you may define specific parameters separately, and then... So in any REST, any mode of REST parameters.

Manuel Lemos: Right. Then, they have Spread Parameter. What is Spread Parameter?

Arturs Sosins: Well, it's basically the same as rest Parameter, I think, but only used in other context like arrays.

Manuel Lemos: Oh, in arrays. So it's like pasting an array inside another array?

Arturs Sosins: Yup, yup.

Manuel Lemos: I don't know if PHP can do this.

[Chuckle]

Manuel Lemos: I don't know, because they have adding so many features for PHP 7, and I don't know if this is part. I know there is are some variadic interfaces or proposals. Well, it doesn't matter. We're here to talk about JavaScript.

So String Interpolation is now something very, very PHP-like.

[Laughter]

Manuel Lemos: Now you can insert variables inside strings.

Arturs Sosins: No more ++ in both sides.

Manuel Lemos: I have to use + because I got used to it. Well, this is for ECMAScript 6. We are still not there on our daily jobs.

Custom Interpolation, what is this? This is weird.

Arturs Sosins: No, you can pass down expressions inside the interpolation.

Manuel Lemos: You mean this? Oh, I see. So now, you can have... Not just the variables.

Arturs Sosins: Yeah, write code inside it probably.

Manuel Lemos: Whatever is the value of this, it will be the result.

Arturs Sosins: Yup.

Manuel Lemos: OK. I don't know if PHP can do this.

Raw String Access, wow, how does this work?

Arturs Sosins: Raw String Access. No ECMA... I'm sorry, I need to figure out what it really does.

Manuel Lemos: I don't neither. No equivalent in ECMAScript 5. "Access the raw template string content. Backslashes are not interpreted."

Arturs Sosins: Oh, so it's not unescape string or something like that.

Manuel Lemos: I don't know. Foo bar... foo.

Arturs Sosins: It might escape strings.

Manuel Lemos: Could it be that when you have double quotes, it won't expand the foo. I don't quite understand this. Let's move on to something more understandable.

Extended Literals... binary and octal literal. Oh, it didn't support binary and octal. Not that I've ever missed it, but OK.

And Unicode String and RegExp, how you can put Unicode characters in the middle of your RegExp. Oh, couldn't do this. Oh well, not that I ever needed it, but it's interesting.

Then, Regular Expression especially sticky matching. Keep the matching position sticky between matches, and this way supports long input, even... Oh, well, this is complicated to understand.

Arturs Sosins: Yeah, I'm trying to compare the codes, and I don't really see the changes much.

Manuel Lemos: Well, regular expressions are often hard to understand, especially when we have two multiple matches. And that's probably, that's what this is going to be, but OK.

Next, Enhanced Object Properties.

Arturs Sosins: So if the key name equals value, it can do this.

Manuel Lemos: Oh, I see. This is interesting.

Arturs Sosins: But I don't if it's commonly used.

Manuel Lemos: So what if I want... Oh, no, this is an object, not an array. OK, I got it.

So, Computed Property Names.

Arturs Sosins: You can have a...

Manuel Lemos: A property that is the result of expression?

Arturs Sosins: Yeah. You can put it inside the definition. You don't have to create function beforehand and then edit like before.

Manuel Lemos: You couldn't do this?

Arturs Sosins: No.

Manuel Lemos: So property would have to be constant, property names.

Arturs Sosins: Yes.

Manuel Lemos: OK.

Method Properties, what is this? So now, you can just define it this way instead of declaring their function. OK, interesting.

Destructuring Assignment... Array Match, "Intuitive and flexible destructuring of Arrays into individual variables during assignment." Oh, it's like the list...

Arturs Sosins: Yup.

Manuel Lemos: When you have to return several values.

Arturs Sosins: I think PHP have it.

Manuel Lemos: Yeah. You can assign an array to several variables.

Object Matching, Shorthand Notation, "Intuitive and flexible destructuring of Objects into individual variables during assignment." So you have a function that probably returns an object, and this time...

Arturs Sosins: Divide variables. So it almost like...

Manuel Lemos: It's similar like...

Arturs Sosins: It's almost like Lua that you can return multiple parameters, unlike PHP but still...

Manuel Lemos: It's prefer objects not for array, somewhat it's similar.

Object Matching, Deep Matching.

Arturs Sosins: Oh, it's same, only it was deep matching.

Manuel Lemos: Yeah, so I guess, this will get the properties and the values, right? No?

Arturs Sosins: It will store the values in a separate variables rather than in the object.

Manuel Lemos: Oh, I see. So it's to get the variables from object properties, OK.

Arturs Sosins: Like a... object.

Manuel Lemos: Yeah.

Object Matching, Parameter Context... well, this is tricky. "Intuitive and flexible destructuring of Objects into individual parameters during function calls."

Arturs Sosins: Do you remember, in previous podcast, we discussed a method that it is better to pass an object, rather than separate variables because the amount of variables may change. So if you add anything you won't break, it cause it is an object. But this way, it automatically will create variables from provided object, an object that you have passed. Your passed object creates the variables with the property names.

Manuel Lemos: So if you pass these values, like an object like this, it will automatically assign two properties.

Arturs Sosins: It seems so, yes.

Manuel Lemos: And the properties would be private or public?

Arturs Sosins: Good question, probably private, because...

Manuel Lemos: Because it's like declaring "var" not "this". And this is a function... Sorry, I'm not sure if this makes sense. This is a function, not an object. Although, often, that's how we call an object. So it's like passing the variables.

Arturs Sosins: Yeah, it's basically, similar like previous ones that object is divided into variables. Only, you can do that on the opposite level when you pass to the functions.

Manuel Lemos: Yeah.

Destructuring Assignment... Fail-Soft Destructuring... list, yeah.

Arturs Sosins: So it automatically will help undefine this variable or undefined error or something like that.

Manuel Lemos: Oh, I see. So if this D is not defined, it will assign it to undefined. OK.

Arturs Sosins: It won't crash. It will just be undefined.

Manuel Lemos: And then, modules, Symbol Export and Import.

Arturs Sosins: Oh, I think that comes from Node.js mostly.

Manuel Lemos: Yeah, but Node.js is still ECMAScript 5, right?

Arturs Sosins: Yes.

Manuel Lemos: So internally, it defines, if you have the exports, it's probably...

Arturs Sosins: It uses its own module... Module module... module that is named Module.

Manuel Lemos: Yeah, I see. So you can now import and export variables. And those variables, they become more like global or... What is this?

Arturs Sosins: Yeah, it seems they should be. Well, if you look at it in the context, Node.js, yes, but here, probably you can import variable to the specific scope that drops,the global object.

Manuel Lemos: Object, right?

Arturs Sosins: Yeah.

Manuel Lemos: OK. Default and Wildcard. Oh, it's like export everything from something to... Well, it's everything, not just some variables. And default, well, what is default here?

Arturs Sosins: No explanation.

Manuel Lemos: Yeah, that's weird. So default here. Well, I don't know but it's probably something equivalent to this.

OK, now, Classes. Finally, yay, now, we have classes, like 15 years after PHP. Some people say that PHP only have classes in PHP 5. What? So PHP Classes was wrong in 1999? No.

Anyway, so now, we have classes, and that way, we can have constructors. So now, it looks much nicer than before.

Class inheritance will be really simple. You just use the extends class inheritance from expressions. Wow, this is more complicated. How does this work? Is it to define expressions? You can combine classes.

Arturs Sosins: Yeah, basically, you can extend from whatever aggregation returns. It returns like some of combined class. It define the class on which they extend on their own time.

Manuel Lemos: Yeah. This is not very evident but OK.

Base Class Access, so you call the super method.

Arturs Sosins: Yup.

Manuel Lemos: Unless you haven't. So you no longer have to have a... How would you call a super method in... Oh, the prototype. But you need to know the parent class, right?

Arturs Sosins: In previous versions, yes. In the new version, it seems...

Manuel Lemos: You just call it super.

Arturs Sosins: Yup.

Manuel Lemos: Static Members, oh, this is all PHP. Static, so you can call class functions without creating an object.

Arturs Sosins: Yeah, so one of the biggest problems was always to pass this context to all these functions. And now, they create static function that won't have this context specifically.

Manuel Lemos: Yeah.

Arturs Sosins: It's interesting.

Manuel Lemos: Now, you can have getters and setters, so you no longer have to create functions called set this on there. That is all good. You could that, setters and getters. This was already possible in ECMAScript 5, never used it.

Arturs Sosins: It seems kind of similar, only through prototype.

Manuel Lemos: Yeah, right.

Now, Symbol Type, what's this? Symbol types, unique and immutable data type can be used as an identifier for object properties. Symbol can have an optional description for debugging.

How does this work? No equivalent in ECMAScript 5. I don't know, I didn't get this one. This is too advanced for my tiny brain. Did you get anything from this?

Arturs Sosins: Well, it always seems to be something to generate an identifier for an object, a unique one, but nothing more than that.

Manuel Lemos: Yeah, Global Symbols. Global symbols, so symbol is now an object for defining global symbols. Is that it?

Arturs Sosins: Yes, it's a static method. It seems to be. It had static method before that would...

Manuel Lemos: So symbol is a built-in class or something?

Arturs Sosins: Yes, probably global. Global symbol is global. That's it.

Manuel Lemos: OK.

Iterator & For-Of Operator... so now, you have an iterator that goes through all the... How does this work? Lets fibonacci, Symbol.iterator... OK.

Arturs Sosins: It seems to be similar to the each() function used in jQuery and others.

Manuel Lemos: Yeah, I get it.

Arturs Sosins: I don't know. No, it's not exception. Yeah, in each iterates, but this one is next that you...

Manuel Lemos: You have function that you can define the next element, then you iterate.

OK. Generators, so generators are something that also was added in PHP. It's a sort of a return point with yield. This will return a value, but once it iterates to the next, it goes right after here.

So this is an iterator. 'For' uses an iterator, and then you can use yield to return one value, and when you get the next, it resumes here.

Generator Function, Direct Use... this is tricky. Well, can use yield, but I don't know what is the difference. Well, do you have any clue?

Arturs Sosins: Not really.

Manuel Lemos: It seems to be just like any generator.

Arturs Sosins: Probably just showing off different context of usages.

Manuel Lemos: Yeah.

Generator Matching... this is also tricky to understand, but OK. Maybe we should move on faster to those that we understand.

Arturs Sosins: OK.

Manuel Lemos: Generator Control Flow.

Arturs Sosins: I won't even dive in.

Manuel Lemos: Because there is asynchronous, supposedly asynchronous programming in the style of coding. I don't know if this is something that we want to understand.

Map/Set, WeakMap and WeakSet... these are data structures that maps are like arrays that map values. "Cleaner data-structure for common algorithms based on sets" of objects, of values. I'm not sure I understand this, but OK.

Arturs Sosins: So it's basically arrays maps are objects, and why would there be a difference? I don't know yet.

Manuel Lemos: Yeah. Maybe we can discover that in the future and get back to this article.

So let's move on as we reach to the end. ...that's the same thing based on algorithms, based on maps. Weak-Link is also confusing.

Next, Typed Arrays... now arrays can have types... the values.

Arturs Sosins: Probably to speed up things.

Manuel Lemos: So what does this do? Just initialize this?

Arturs Sosins: Yup. You have a int array or float array, it's probably they work faster than a common array.

Manuel Lemos: Yeah. And they have constructors that you can get to the values.

OK, New Built-In Methods, Object Property Assignment... this is to assign properties of objects, I think.

Arturs Sosins: I guess, yeah, an easier way.

Manuel Lemos: Let me see. Oh, wow, what's this? This will assign two objects to... No, wait. Wow, now, you see. I'm very confused. .

Array Element Find... this too find the values inside arrays. This is interesting.

Arturs Sosins: You know, like a filter, only short-handed.

Manuel Lemos: But find X so X is larger than 3, so you can return a value. OK.

String Repeating, OK, it's very similar to PHP. You have str_repeat. You can sort of join several strings with repeat.

String Searching is similar to the array except that it's for string.

Arturs Sosins: Yeah, the other... with this functions that everyone was asking for. On StackOverflow with these ones

Manuel Lemos: Right. Now, we don't need to ask on StackOverflow.

Number Type Checking, it's just to check if...

Arturs Sosins: The input is not...

Manuel Lemos: Yeah, and if it is valid.

Number Safety Checking... wow, safety feature. What is this? Oh, if it exceed this though?

Arturs Sosins: Correct. These are all are floats.

Manuel Lemos: Yeah, if they need to promoted to float.

Number Comparison, wow, you need to compare name, numbers. We couldn't do that before?

Arturs Sosins: Or dropping numbers.

Manuel Lemos: Oh, well. This is because of rounding? Floating point? I don't know.

Number Truncation, I see this is... There was ceil and floor to do this. Yeah.

Number Sign Determination... you will determine if it is...

Arturs Sosins: Positive or negative.

Manuel Lemos: Positive or negative.

And then, Promises. Promise is promise. I'm not a fan of promises.

Arturs Sosins: I don't know. They are actually quite common in most jQuery...

Manuel Lemos: Yeah, because they didn't have... Yeah, we didn't have much choice to deal with the success or failure of asynchronous operation, so if you throw a promise, throw, but it's returned a promise. It's not an exception so we don't throw it.

Promise Combination... never. What does this do?

Arturs Sosins: Basically, you could have store more of them, and then probably do something when they all end or something like that.

Manuel Lemos: Oh, I see. This is useful when you have a multiple parallel operations.

Arturs Sosins: Exactly.

Manuel Lemos: Oh, I see. That's promise. So it will call this when all this reach to a promise, right?

OK, Meta-Programming... this is going to give me a knot on my brain. Because I know what is meta-programming. For me, it's a way to generate some programming from another programming, but in this context of ECMAScript 6, there's no equivalent in ECMAScript 5. So if you do this, I'm not sure. Declare valuables with a...

Arturs Sosins: So basically, you can provide some kind of method. Well, you define a method that would handle stuff when you're accessing properties that don't exist on objects. So, for example, you see that foo is defined, but proxy.world is not defined. So it went to the function, you would do something in the function to define the 'world' or set it.

It's like methods in Lua, similar things happens, and it's a nice thing.

Manuel Lemos: I don't think we have that in PHP. But if you have it in Lua, good for you, because you're a big fan of Lua.

Reflection, Oh, not...

Arturs Sosins: You should be. You should be a big friend of Lua. It came from Brazil, I think.

Manuel Lemos: Yeah, I heard, but that doesn't mean nothing because we are not using Lua for anything. But I heard that is used to script games, right?

Arturs Sosins: Yeah. Not only, if you want to use a scripting language combined with C++, it's the best for those things.

Manuel Lemos: Yeah, for embedded programming, I guess.

Arturs Sosins: Yeah, true.

Manuel Lemos: OK, now, Reflection is about getting object properties. You can define properties. You can get properties of an object. You can inspect them, I think. So this is useful for writing debuggers or writing code that inspects something inside your objects and do something useful with it.

Arturs Sosins: So maybe we will start having proper debuggers for JavaScript.

Manuel Lemos: Right. We'll see. I think there are good debuggers.

BabelJS Running ES6 in ES5 Browsers (31:39)

Manuel Lemos: Anyway, this is a long comparison. We spent a lot of time, so we need to move on, and we are going to move on talking about another thing that is related with ECMAScript 6, I think. This Babel Project that I' going to share the screen here.

Arturs Sosins: Basically, if you all feel that we were just discussing how you can use all of this stuff somewhere in the future, then you're wrong. You can actually use it now.

Manuel Lemos: Yeah. Oh, now, I'm feeling... Oh, that made my day. Now, I can use ECMAScript 6. I tried all the confusing new things that they have.

So I guess this is a transpiler, right?

Arturs Sosins: It's what it's called, yeah.

Manuel Lemos: So you get some JavaScript in ECMAScript 6 syntax, and it converts it to ECMAScript 5, so it can run it now, without waiting for your browser support.

Did you try this project? It seems you are enjoying a lot of this project.

Arturs Sosins: Yeah, well, it was actually again from a friend, that I told you before. We were talking about it. He said he will really get ECMAScript 6. Then I asked, "How do you use it then?" And he pointed me to this project. He basically uses it with combination of his Node.js. It's Node.js compatible and they're converting the code.

So you can write a cleaner the code, and then it gets converted, but you already have a future based on node.js to catch up.

Manuel Lemos: So you can get the future earlier.

Arturs Sosins: Yeah.

Manuel Lemos: Yeah, that sounds fine.

Arturs Sosins: Actually, one interesting, how would they implement a thing that have no like ECMAScript 5?

Manuel Lemos: Yeah, well, at least you can try it now, and maybe you can know what it's good for. So this is just to briefly mention this project.

Strategies for dealing with multiple Ajax calls (33:41)

Manuel Lemos: So now we move on to another topic. Let me share the screen here. "Strategies for dealing with Multiple Ajax Calls".

So when you have a page and you have different types of possible interactions, you may have to deal with concurrent AJAX Calls to your server. And then, you may have some race conditions that may cause your AJAX calls running in parallel to return different results depending on which of the calls was returned first. So one call may be started first but then, the results may come later because for some reason, one call wasn't done fast.

So this article is presenting different situations and possible solutions to deal with certain conflicts. So we have here a page that can have buttons. Now, they are using GIF animations to show possible situations.

So in this case, this is simple case, when you have two buttons, and the button that you click first returns the results first or not.

So in this case, they are showing here that the request for the second object was returned... the request for the second call was returned faster. So the first will override the second. So, that is if you don't do anything that would cause the... Now, there is this alternative on which they disabled the second button.

Yes, right. They disable all buttons, while the AJAX request is being processed. So this is one way to avoid it.

Another solution, which is... I'm not sure. Do they disable?

Arturs Sosins: Yeah, they cancel the request. So it works the first request, then it clicks on the second. The first request did not do anymore. They abort it, and only execute the second.

Manuel Lemos: So until the first request is returned, they cancel all attempts to call second. But I don't know if this is intuitive for user.

Arturs Sosins: No, no, it's not like that. It's like you click on the first one. It's making the first request.

Manuel Lemos: Oh, cancel the first request.

Arturs Sosins: Yup, exactly.

Manuel Lemos: I don't know, which solution do you prefer?

Arturs Sosins: Well, I had maybe a little similar situation developing Backbone.JS single Web app, a dashboard which load multiple windows. Basically, there was this integration that were so many data that it took too long for it to load.

And we refresh like every ten seconds, so Ajax requests just piled up. It could not respond within ten seconds but it already executed another one, another one, and hang the whole database.

So yeah, it's something that you need to check if there is already a request for specific information. In my way, we would rather not make the second call, but wait for the first one to execute because it would be the same information. But in this case, it would be other information in the same space, so it makes sense to cancel this first call.

So it's all context-based on what you need, but the main point is that you need to think about it. That if you are fetching the same information multiple times or will put different information in the same space, there are different cases that you need to handle.

Manuel Lemos: I think I have used something like that, for instance, in package pages.

Arturs Sosins: Above the file list?

Manuel Lemos: Well, when you have page that shows the package, and the package has many tabs, the package page... For instance here, all these tabs switch...

Arturs Sosins: We don't see your screen if you are showing anything.

Manuel Lemos: Exactly. Silly me.

All these buttons or tabs, for instance, if you click here, there is an Ajax request to load this code for... Demos, I don't have demos. But I have screenshots.

Arturs Sosins: What happens if you quickly switch tabs?

Manuel Lemos: No, they're quick...

Arturs Sosins: It seems it caches the result, right?

Manuel Lemos: No, in reality, this tabs are already in the page. So they remain in the page. They just are hidden. Now, here, for instance, this is a screenshot. And what it does is just make parts visible or invisible.

Arturs Sosins: But I think when you're viewing the files, then you're holding the files is via Ajax calls, right ?

Manuel Lemos: Some files. Well, for instance, here. If I click here, I would need for this to be slow enough. But I can't. If I'm not mistaken, if the code is already loading a file, it will not attempt to get another file.

Arturs Sosins: OK.

Manuel Lemos: So it's sort of a cancel, right?

Arturs Sosins: Yup. It seem the same as in the article.

Manuel Lemos: OK.

Fix the AJAX Requests that Make PHP Take Too Long to Respond (40:11)

Manuel Lemos: Now moving on with another related topic, in this case, it is an article that it's also related with this because it might cause these problems. Let me share the screen here. Wait, here. Let me increase the font. Increase, increase. OK, that's large enough.

This is an article written by Eslam Mahmoud from Egypt, if I'm not mistaken. This is an article that had some repercussion. Actually, many comments because many people had face this situation. So they have liked this articles.

In this case, it was published in PHP Classes because it was a PHP related matter. Regarding articles I'm going to mention something that I also mentioned in PHP podcast, but since not everybody listens to the PHP podcast, I'll mention something relating posting interesting articles.

But first, talking about this article, he talks about AJAX requests. AJAX requests are fine except that in PHP, there can also be some race conditions depending on whether your script takes too long to return or not.

But what Eslam has been talking about in this article is the PHP Sessions in PHP, by default they are implemented using files. Because usually, people only use single-server, and so all accesses to scripts that use sessions will store and retrieve session data from files, from the same files.

What happens if two scripts ran on the server? Could be same script but two instance of PHP script attempts to access session variables, which we... by locking the file.

So if there's one request, it only call the session_start() function, it will lock the file for that user because sessions use cookies to identify the user. And if the same user, I mean, the same browser, calls the server, it will identify that it is the same user by recognizing the cookie.

What happens with PHP sessions is since they use file locking, one request may start a session and lock the session file. The second request that attempts to do the same will be on hold, and waits until the first request returns, finishes. Maybe if it is executing an operation that takes some time, so it will hold the second request.

So if you are using AJAX requests, you may wonder that the second request is on hold because of the first request that he did not finish. So, this is caused automatically because most people are not aware there is this session locking thing.

So the effect that happens is that you send one request, it will send another request. And none of the request return for awhile and when you return the second, after a while, when the first request is returned, both request are returned at the same time.

So it will prevent you to take advantage of some parallelism, even for instance, if two AJAX requests are updating different areas, a first request can block the second request. So the solution that ...

Arturs Sosins: Is to use Node.js instead of PHP.

Manuel Lemos: No. The solution is to unlock the session file when you are no longer accessing session variables. And this is done with...

Arturs Sosins: You can access them after, but you can't modify them after.

Manuel Lemos: No, if you call the session_start() again in the script, you'll lock the session...

Arturs Sosins: Sessions, yeah.

Manuel Lemos: You'll lock the session variable again, so you can write to the session variables.

Arturs Sosins: Then, yes, yes. I mean, after session had close, you can't modify them, until you call session_start() again.

Manuel Lemos: Yeah. So when you use session_start, you can utilize the sessions array again with the previously said values. If another parallel request change those values, that's what it loads.

So the solution is to call e session_write_close() which is basically to unlock the sessions without having to wait for the script to end. Many people were happy, "Oh, I didn't know it was caused by that. Now, I know."

Other people, "Oh, instead of using file, if you use databases, you don't have that problem." Well, that's because you are not locking database accesses, so probably have problems like when you change multiple information on a database, and you don't use transactions.

So you should use transactions when you need to assure integrity. So that's why people are saying, "Oh, this works in databases better because they are not using transactions."

Arturs Sosins: All those count as all transactions. I should say, have a MongoDB about them. Because I have once.

Manuel Lemos: They don't have transactions, or they don't have explicit transactions?

Arturs Sosins: Any of them.

Manuel Lemos: Because maybe if you are relating documents, if you change the documents, multiple documents related, aren't they blocking their access when you save them until you close the connection?

Arturs Sosins: Single document writing is an atomic operation. Multiple document writing is not. You can isolate the multiple document, updating that others won't see the changes until they are finished, but they are...

Manuel Lemos: So you are saying there are implicit transactions.

Arturs Sosins: Yeah.

Manuel Lemos: It's just a matter of isolation mode?

Arturs Sosins: Yup.

Manuel Lemos: So OK, you are not avoiding the problem. You're just using a different transaction and isolation mode that SQL database will also support. But, OK, never mind.

Anyway, this is an interesting article. I just mentioned here because this was related with the previous topic.

Simple Inheritance with JavaScript (47:53)

Manuel Lemos: So now, moving on with another article that I found interesting. It is related with something that we mentioned before, except that it is interesting for those that are stuck in the ECMAScript 5 world... how to implement inheritance in ECMAScript 5.

So there is this article here, Simple Inheritance with JavaScript. They've shown us some diagrams here. One way of implementing inheritance is to use the prototype, and you can change the behavior of the functions or variables.

Arturs Sosins: By the way, I think it's the only way in ECMAScript 5.

Manuel Lemos: I don't know, could it be. Now, you made me think.

[Laughter]

Arturs Sosins: What I like about this tutorial, I remember a couple of years ago, we needed something like that, I started searching, and there were so complicated tutorials on inheritance that actually...

Manuel Lemos: Nobody...

Arturs Sosins: Yeah, the ask me more questions than I had answers from them, but this one is actually quite neat, and it lets you easily understand how we can achieve. Maybe in a little hackish way because of how the prototype is in a language, which is ECMAScript 5, but still you can do what you want here.

Manuel Lemos: Well, I think there are more ways to implement inheritance. It's not just changing the prototype. For instance, if you pick an object from a class, then you can create another object...

Arturs Sosins: Which could be separate properties or something like that.

Manuel Lemos: And then, change the properties, right?

Arturs Sosins: Yeah, you could do it.

Manuel Lemos: It's probably not very efficient but still works. I'm trying to think about this because I don't recall I've ever use any form of inheritance because I think all these are hacks, so better use a clear programming mode. Well, that's just me.

Anyway, this is an interesting article because it talks about simple inheritance for those that won't use classes and don't know that they can use ECMAScript 6 emulations or transpiler like the Babel project that we mentioned before.

Detecting Minified JavaScript code (50:30)

Manuel Lemos: So now, moving to another article. This one is something that I'm not sure if this is really useful for anything but it is still interesting, which is when you are using code that is minified.

This article was written recently and basically, it tells about what is minified the JavaScript code, things like comments are removed, white space are removed, the names of local variables and local functions are shortened.

So one way that he thinks it is useful to detect minified code is to use regular expressions. I'm not sure if this is what the...

Arturs Sosins: This is how Regular Expression works in ECMAScript, JavaScript, Coffeescript.

Manuel Lemos: Oh, this is not to detect. This is just... I was not getting that part. He just test this as regular expressions to test some code inside.

Arturs Sosins: Yeah, so this is a minified = /param/ is that the actual test. So you put this in your code, and if you run this code in Unminified, it would be false. But if you run this code in minified mode, it will be true, because as he explains param, parameter will be renamed to p or removed to true based on what minifier you had.

Manuel Lemos: So it is... This is the minified code that is test?

Arturs Sosins: No, there is no minifier code. It like you put a runtime boolean into your code to see if it runs in a minified mode or not. You copy the snippets and put it in your code, and then you can minify the code. It will be true. Makes sense? No, it will be false.

Manuel Lemos: You mean, you put this code inside your minified code?

Arturs Sosins: No you put it inside your code, and then you can minify it. And then, in the runtime is unminified will be false, and then you'll know that you're running your code in a minified environment. It's like a macro.

Manuel Lemos: This is odd because, well, this is a regular expression that has param. And they calls test, and the test takes a function. I'm not sure what is this.

Arturs Sosins: Well, the main point is... Maybe I could show you one example. Let me share the screen here. Do you see my screen? Anything? Not yet, probably? So let's start asking. No, it's too long.

Manuel Lemos: I don't know, maybe I'm getting old. This is getting too confusing for me to understand.

Arturs Sosins: So, let's to put this code. It seem like... I don't know, can you see in this?

Simple, and then here we go. Simple function, if we alert it now... I misspelled it. So it will say true, it is unminified, right? Oh, because it is.

Manuel Lemos: But where is the code that you are testing?

Arturs Sosins: There is no code. We are testing that the code inside this script is minified or unminified. So let me find any minifier... I don't know if being spot will be OK or not, probably it will. So we take this code and we minify it. So let's not minify it that way. Let me minify it this way. It should minify all this code. It should output alert as false. No, because the whole code is run and minified. There, you see. No, it does not make sense.

Manuel Lemos: That's what I thought.

Arturs Sosins: We need to minify it. Is it normal or Uglify it.

Manuel Lemos: OK, Uglify.

Arturs Sosins: Make Uglify, Uglify, Uglify. So we have this function. Here again. It's not like that you provide the code and it detects if it's minified or unminified. It's more that you check if your code is running in a minified code or unminified code. So if we minify this, it produce this code.

So this is code running in an Unminified environment, and it's provides Unminified true. And if we minify the code, and run the minified code, it automatically detects that our code is Minified. Makes sense?

Manuel Lemos: Because you are... Sorry, show it again, please.

Arturs Sosins: So, for example, let me, let me... For example, once I showed your code loads some kind of dependency, like jQuery. Yes?

Manuel Lemos: Yeah.

Arturs Sosins: Probably, you can asynchronously load jQuery using JavaScript, right?

Manuel Lemos: Can you break that alert line so I can understand what it is.

Arturs Sosins: Break. So in a minified code, they...

Manuel Lemos: What is it that transmit but didn't?

Arturs Sosins: Do you see anything?

Manuel Lemos: No, I can see. So the difference of this code is that you don't have the param operator?

Arturs Sosins: Yeah, because it was minified, it was removed, because it was not used in the use in the function. So Minify removed it, and that's why the test says now that it's false.

Manuel Lemos: Oh, I see.

Arturs Sosins: The idea is for example you are using... You have some kind of ad that uses jQuery. In the bug environment, you want to use full jQuery, but in the production environment, you want to write minified jQuery.

So you have this variable, and then, somewhere in your code, you just code if is unminified, then you code for jQuery... minify jQuery, and then it will automatically your code in the production, and we will go into this case and code minified jQuery.

Manuel Lemos: When you use that code that evaluates the... Is this the actual code that you want to test?

Arturs Sosins: It' something that you put in your code. Like you just put this one thing into my code.

Manuel Lemos: OK, that is a test... You have to pick jQuery and put that code there.

Arturs Sosins: Yeah, so, for example...

Manuel Lemos: Oh, you need to alter the code that you are testing. It's not that you can do it on somebody else's library.

Arturs Sosins: No, no, yeah. It's for your own code. Like a macro, you know, like you define a runtime variable.

Manuel Lemos: OK. Now, OK, now, I get it. It's not the general solution for any minified library.

Arturs Sosins: No, it's to internally use in your code.

Manuel Lemos: OK, so the trick is to put some redundant parameter that is not used inside the function. So that's why when it gets minified, it disappears. OK, now, I get it. It was not so hard, after all.

Arturs Sosins: It was just another usage that you would not expect, right?

Manuel Lemos: Yeah.

Arturs Sosins: So, it's not basically harder.

Manuel Lemos: OK, now, I get it.

JavaScript Innovation Award Winners of February 2015 (59:12)

Manuel Lemos: So now, we are going to move on with the Innovation Award winners, this time starting with the JavaScript Innovation Award.

We'll be talking about the nominees of February. So packages that were posted in February, then in March, they were voted, and then in April, the results came out. So now, we can talk about them.

And for JavaScript, we started getting more packages fortunately. As I've mentioned before, there has been a growth in submissions and this month, we had three nominees.

Since the first one is written by Arturs Sosins himself, Arturs, would you like to start and talk about your package.

Arturs Sosins: Sure. Let me just switch window. So, basically, what this JavaScript component does, it allows you to control your TVs, different TVs that are listed there... Philips or LG... from your browser.

For why such class? I can answer that. I worked on other third-party project MYM.io, which stands for Make Your Magic, where we develop magic band controller to control different devices. My objective is to integrate it with third-party services.

So I started with TVs, and interesting fact that they all share the same environment that you could all do in JavaScript. And I thought, why don't let's create such class?

So basically here it is, and probably, I can't really demo anything right now. My TVs are off, but you can select TVs, and then it would query what keys it could send or send a text, and you could do it from your browser, if your TV supports it. LG, NetCast, and Philips to be with JointSpace API, which I think all the newest TV have.

Manuel Lemos: Yeah, I think I found it very curious and innovative because I have never seen anything like this before. I didn't know you could control a TV from your network. I suppose TVs have Web servers to accept those request, right?

Arturs Sosins: Yeah. You can discover old TV using UPnP. Unfortunately, you can't do in browser. That's why you need to set IP address directly. But then, yeah, they are controlled by the REST APIs or WebSockets service, stuff like that.

Manuel Lemos: So you don't have any means to discover the IP address automatically. You need to see it manually.

Arturs Sosins: Yeah, because HTTP request can't send this M-SEARCH header to make UPnP device respond. And even if they respond, they can't receive it. Basically, there are lots of problem in communication, but all others is possible.

Manuel Lemos: Yeah, well, it was very interesting.

And on my behalf, I also would like to comment about the other two packages. The first one is from Ovidiu Bokar from United Kingdom. He created a simple package that can help you to put links to share webpages on social media pages. And this package that's what it does, and it uses the Bootstrap library to show some nice icons near those links.

It's a very simple package, but still innovative compared to what you have on site. So congratulations for Ovidiu Bokar, and he picked a downloadable book by O'Reilly.

The other package that I want to comment, this one is not trivial to understand. It is a package by Jason Gerfen from the United States. He has been a nice contributor with several nominated packages.

What it provides is a package that use Node.js to monitor the activity of, for instance, a group of servers, so it connects to those servers via SSH, and it monitors the changes on log files and brings the content of those log files to a central server.

So, that's basically what it does, and Jason sent a package for this. We don't have many Node.js packages, so they are always welcome here because Node.js is reasonably popular. So I encourage everybody else to send more innovative packages based on Node.js as well.

JavaScript Innovation Award Rankings of 2015 (1:04:50)

Manuel Lemos: Now, regarding the Innovation Award of 2015, actually these rankings already considered packages published on I would say March, right?

And given that, we have here in the first place, Suresh Kumar from India with two packages and seven points, Andras Toth with two packages and four points. Then, Arturs comes with one package and three points, then Ryan Silalahi (one package and three points), then Ovidiu Bokar (one package and two points), and then, Jason Gerfen with one package and one point.

By country, the ranking is more or less...

Arturs Sosins: Basically the same.

Manuel Lemos: Basically the same because we still have few packages. It's basically the same countries. So you have India, Hungary, Latvia, Indonesia, United Kingdom, and United States by this order, with the same points and packages that we mentioned before, because there is practically only one author per country that is listed that submitted packages.

Well, next month, since we have more packages being nominated, this will become more interesting.

Conclusion (1:06:31)

Manuel Lemos: OK, with this, we practically ended the Lately in JavaScript podcast. I like to thank you again Arturs for coming, and for clarifying this very difficult problem of understanding what the heck you were doing with minification. It was a simple solution after all. I just thought it was that for using general libraries, and it isn't.

And the same for your great explanations on differences between ECMAScript 6, ECMAScript 5. So are you going to use ECMAScript 6 starting now, maybe with Babel?

Arturs Sosins: I don't know. I have to wait to it.

[Laughter]

Arturs Sosins: What does it take anything else again?

Manuel Lemos: Your time is short. Start playing with those things that consume time.

OK, thank you again for coming. On my behalf, that is all for now. Bye.

Arturs Sosins: Bye.