Can WebAssembly Make JavaScript Applications As Fast as Compiled Applications? - Lately in JavaScript podcast episode 56 - JS Classes blog

Contents

Introduction (00:20)

Making Music in the Browser – Web MIDI API (0:58)

Building APIs based on the JSON API Specification (4:10)

J2C: JavaScript Object to CSS Compiler (8:20)

Can WebAssembly Make JavaScript Applications As Fast as Compiled Applications? (10:38)

Bling.js: Using $ without jQuery (12:50)

JSCS - Enforce your Own JavaScript Code Style (14:49)

NPM 3.0 (20:17)

16 Years of PHP Classes 5 Years of JS Classes (24:50)

JavaScript Innovation Award Winners of April 2015 (31:06)

JavaScript Innovation Award Rankings of 2015 (38:10)

Conclusion (40:08)

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 56. I'm Manuel Lemos, and as always, I have here with me, Arturs Sosins, from the warm or cold Latvia.

Arturs Sosins: It's warm. It's warmer now.

[Laughter]

Manuel Lemos: It's not -10, right?

Arturs Sosins: No. At least not in the house.

Manuel Lemos: Yeah. Well, I don't know. I have no idea. Hopefully, it's cold, but cold in Brazil is more or less like a joke.

Making Music in the Browser – Web MIDI API (0:58)

Manuel Lemos: Anyway, we are here to talk about JavaScript and let's move on with our first topic. A new API that I just noticed that is being announced. Let me share the screen here. This API is about MIDI. MIDI is a specification for communicating with musical instruments.

Arturs, I think you have been on to music or something. What can you tell us about this? Is this something interesting?

Arturs Sosins: Well, as MIDI.org says itself that Web MIDI API is the most significant investment of MIDI since MIDI itself. So, basically, on the blog that new Chrome version now provides an access... let me maybe also try to share the screen

Arturs Sosins: OK, so new version can also provide an access to the request this or like this. This is like to request media access. Well, I haven't tried it, but it seem it would be possible to create MIDI keyboard inside HTML beside JavaScript without using anything additional. It would either connect to some internal MIDI instrument or maybe externally can get it. I don't know, I haven't seen this specification of this API.

My first idea is implementing MIDI keyboard. Probably now, many will play MIDI Music when you visit their web site or something like that.

Manuel Lemos: Yeah. Well, I don't know. Probably, you are able to compose music using some standard samples or maybe not standard samples or whatever.

Arturs Sosins: That was really digitally, MIDI digitally generated sound.

Manuel Lemos: Maybe you can program the music dynamically using JavaScript. So this Web API is supposed for something that you can communicate from the browser with some instrument or maybe some emulation of instrument.

Arturs Sosins: Imagine the music changes based on the speed you scroll the web site. Like a Doppler effect.

Manuel Lemos: Oh, I see. Well, let's wait and see. This is very new. It was sort of announced last month, so let's wait and see, because there is already an API for audio but it's basically to define audio samples, not exactly communicate with instruments or compose music. I don't know. Let's wait and see where this goes.

Building APIs based on the JSON API Specification (4:10)

Manuel Lemos: So moving on with the next topic, now, we're going to talk about something called JSON API, which is a specification for building APIs in JSON. From what I could gather, this would be a way for you to tell how you want your data returned from APIs. I'm not sure.

Arturs, what did you get from this?

Arturs Sosins: It seems to be something like that. That basically, no, not what data... But basically, it's a way, it's a specification that APIs could follow and implement answering to this request of the specification that would indicate which fields they want to have returned, which subfields, how sorted they want it and stuff like that.

I don't know if many implement it or not, but this seems to b like a way to tell REST API that responds to JSON that you should require, or it should return some fields or should exclude some fields and stuff like that. So in order to minimize the data that you want to transfer and display it through AJAX request or anyway you would request it.

Manuel Lemos: So this would be useful for what? For people implementing APIs? People calling APIs?

Arturs Sosins: Both. It probably useful for bandwidth and speed, but both parts should be implementing it. The server should implement the data request, and the request should implement the specification to form the request specifically so.

Manuel Lemos: Right. If the server doesn't implement it, the client cannot benefit from anything.

Arturs Sosins: Yeah.

Manuel Lemos: It seems useful but it's still not very clear if this is just to how you want to return data or take parameters. It's not very clear.

Arturs Sosins: I think that next article shows a great example of URL of how you can request something.

Manuel Lemos: Yeah, I see.

Arturs Sosins: So, there you provide which fields to include, like include from people with first name and last name and sort everything by date, and probably to specify some different filters that you could filter the information. All in the sense that you request only information you need in the format you need.

So to minimize the job, you have to process information and minimize the data you have to send. I think that would be the basic guideline for the said API specification.

Manuel Lemos: So, basically, if there is some libraries or some support on the server-side to benefit from this specification, it would be interesting because people can follow this specification that is being standardized, and they can expect the date the way they need it. So it is interesting.

Arturs Sosins: Let's see if it fix anything whenever we use it or not.

Manuel Lemos: Yeah, it takes adoption. I’ve seen some APIs, maybe LinkedIn or something that you can follow more or less this convention of specifying, "I want this fields and fields separated by a comma," and they return those fields.

Arturs Sosins: Sound something like that. Exactly.

Manuel Lemos: That's probably a way to standardized on that.

J2C: JavaScript Object to CSS Compiler (8:20)

Manuel Lemos: So the next topic that I wanted to comment is about an approach to create style sheets, either dynamically or programmatically, because we standards like Sass... Well, not standards, we have approaches like Sass and Less, that you can use as sort of template syntax, but this JavaScript object to CSS Compiler is basically here to create style sheet definitions.

Arturs Sosins: In your browser.

Manuel Lemos: Yeah. This is for the browser?

Arturs Sosins: I think, yeah, it could be run in the browser. I don't see any limitations.

Manuel Lemos: Yeah, because the output is this. "You can play with the code samples live", where is the live? Oh, I see, if I change here, I did not realize this is a text input.

This is interesting. It can be useful as an alternative to Sass or Less, because Sass or Less, they can be implemented on the server-side.

Arturs Sosins: In this way, for example, the same Twitter Bootstrap has many predefined constants to use, and you could use them in the website and then download the sheets that you need and stuff like that.

Manuel Lemos: Yeah. I get the point. They even have some weird values here.

Arturs Sosins: Yeah, so it would not clash or something like that.

Manuel Lemos: But then, you need to have somehow, to get these names to use them where they would be needed, right?

Arturs Sosins: Yes. So that's the process, also. First, you generate CSS, and then you use it.

Manuel Lemos: I think this is interesting. Let's see. It seems to be new. I have not seen anything like this before. Let's see if some people will start adopting it and it becomes useful to other people.

Can WebAssembly Make JavaScript Applications As Fast as Compiled Applications? (10:38)

Manuel Lemos: Now, we are going to talk about another topic, which is related with WebAssembly. WebAssembly is a sort of an attempt to define more efficient JavaScript. We have already asm.js, which is basically a restricted JavaScript form that would result in faster JavaScript being ran. And it has been used by many projects. Those that converts C++ into...

Arturs Sosins: Yeah, like Emscripten.

Manuel Lemos: Yeah. It has been awhile since we didn't talk about them because every project was based on that.

Now, the idea is to go further and actually define a real assembly language to, I think, define binary, right?

Arturs Sosins: Yeah. So it would be like binary syntax, and probably it could be like coding in an assembler.

Manuel Lemos: Yeah, probably there will be compilers. Well, they play some tricks here with the CSS and things disappear.

Well, anyway, there is an effort to create a specification, a community group to design what will be the WebAssembly.

Arturs Sosins: So they basically only just started doing this and there is nothing yet to show, to try. It's just an idea and people are working on it.

Manuel Lemos: Well, it's the next step to make the Web faster except that it won't be based on text. It will be based on binary assembly, I think.

OK, let's see how this goes. We just first mentioned this topic.

Arturs Sosins: So next, instead of classes submitting to JS Classes, people will be submitting binaries.

Manuel Lemos: Binaries, right. Or not. Let's see.

Bling.js: Using $ without jQuery (12:50)

Manuel Lemos: Next topic it's kind of more of a curiosity, a short code snippet that will please those jQuery fans that to for some reason can't use jQuery. It's called Bling. It's a code snippet that will implement the $ like you have in jQuery, but without jQuery.

Arturs Sosins: Basically, the snippet you see is the whole of the implementation of this library, just a couple of lines, but it provides a great deal of functionality. The most common functionality that we use, the selectors on the foreach, stuff like that.

Manuel Lemos: Yeah, because nowadays, we have DOM function calls that can provide a lot of the functionality that was implemented in jQuery because it was not standardized in past browser version. But man y years after that, people are moving on into this.

Arturs Sosins: Yeah, that's the main point. Probably, it won't work in older versions. It should support the older ones.

Manuel Lemos:. It won't support IE6.

Arturs Sosins: Yeah, of course not. Nobody does.

Manuel Lemos: Yeah.

Arturs Sosins: Even jQuery don't do it anymore, I think.

Manuel Lemos: It's not just the $, it's also the on() function just to register EventListeners. It no longer uses that syntax that we use to make it work in IE, right?

Arturs Sosins: Yeah, like two different ways to add in an event. So, basically, it's the same if you are using like extension browsers.

Manuel Lemos: Right. Even IE is no longer called IEs. It's called Edge, so things are changing. I hope it's for good.

JSCS - Enforce your Own JavaScript Code Style (14:49)

Manuel Lemos: OK, now moving on to the next topic, we are going to talk about coding styles and rules. Let me share the screen here.

So here, we have this JSCS, which is basically a library to implement rules. You can adopt rules that are common to certain libraries, I think. I'm not sure if this is what this means. Who uses JSCS, but you can customize the rules. If, for instance, you don't like certain rules, you can customize them.

Arturs Sosins: Yeah, they are mostly not like JSHint or JSLint where there are rules to try to allow you make less errors in the code.

Manuel Lemos: Mistake?

Arturs Sosins: Yeah. It's more about like a coding practices, like if you click the rules, there will be the list of different rules like require space after keywords, or will require space after object keys and stuff like that. So that would be the style of the code, .

Manuel Lemos: I think the interesting part is that you can customize the rules, because sometimes we don't like certain rules. For instance, if you have tabs or spaces, but there is a rule that says, "Oh, no, you should use four spaces," but if you use tabs or something else, being able to override that rule and get to the point of things that really should be worth noticing, it is great because you stop avoiding...

Every time I go in JSLint, I usually do that by pasting code in the site. I have to tick those options that I want to use.

Actually, the latest versions of JSLint, I think... they used to have options that you could put in your comments and they would preset those options, but for some reason, it is no longer there.

Let me... JSLint, here it is. OK, if I use tab or spaces...

Arturs Sosins: Do you want to share the screen?

Manuel Lemos: I'm not sharing the screen?

Arturs Sosins: No.

Manuel Lemos: Why not? I have no clue. OK, you have spaces. You have tabs. I can't use tabs here.

Arturs Sosins: Yeah, it's hard to use them in the browser.

Manuel Lemos: OK, there are no functions, but if I use... How do I put a tab here?

Arturs Sosins: \t, maybe. I don't know.

Manuel Lemos: No, I mean in the editor as whitespace.

Arturs Sosins: Copy?

Manuel Lemos: Yeah, I have to do that. I have to copy from some other program. Where is it? Well?

Arturs Sosins: Oh, yeah.

Manuel Lemos: It doesn't like black?

Arturs Sosins: But also use spaces, no tabs.

Manuel Lemos: OK, so I used to put here to take the...

Arturs Sosins: Yup.

Manuel Lemos: Just to say... OK, I have no warnings. But in the past, I think there was a way to show the options so I don't have to click the messy spaces, not tabs.

Arturs Sosins: Could be. I don't really know.

Manuel Lemos: Yeah, but OK.

Well, anyway, this is just to use JSLint, but we are talking about JSCS. The idea would be to develop a tool that would look at your code and find things that break the rules. But here, the idea is to have some exceptions so you could alter your rules and the base of your rules, and it will work the way you style your code.

Well, I think JSLint, I think they took it away. They probably try to be more drastic and not tolerate, for instance, different types of whitespace.

Use space, not tabs. So they decided that now, you need to use spaces. What if I use different var at column 0? Yeah, I cannot use spaces. Not if I use... OK, yeah, now, still, it wants me to use colons here.

NPM 3.0 (20:17)

Manuel Lemos: OK, anyway, it's just interesting. I just want to mention that. So now, we're going to move on to another topic. Let me share the screen here, and this is about npm 3 that was released 14 days ago.

npm, as you may know, it's a node package manager. So you can install packages from repositories... npmjs or maybe some other... and this is Version 3.

Well, I really don't know. I've been using npm whatever needs to be installed with npm, but I really don't know what is the importance of this new major release.

Arturs, have you been following this? Anything you can...

Arturs Sosins: Well, that's only a Beta, so it's not production-ready. Something might change, but there are a couple of interesting features there. There are breaking changes for the ones with developer logins for npm, but probably, it won't relate to many of you.

But what the cool features there is that, for example, if you have installed dependency, and the dependency is missing some other dependencies, npm install would reinstall them and would try to fix many things if the package is broken. For now, we just need to delete them and install again.

The interesting thing that it would try to install all dependencies in the maximal upper folder in your node modules, so if two different dependencies have same sub-dependencies, they would not be like a copy of these dependencies in each folder separately and taking twice as much as space, but rather a dependency in upper folder and will hope you are reusing them.

Of course, I don't know how they would deal with different versions, but that's, they promised that it will work. It will have a little, better UI like a progress bar of installation and would install lots of packages simultaneously rather than one by one, so it should also be faster in that case. All in all, that's basically all there is.

Manuel Lemos: Yeah, well, personally, I don't know. Something that I heard is that in previous versions, you would not be able to install nested dependencies, right?

Arturs Sosins: No, it was possible. I think there was cases of circular dependencies that would not work, but probably it's a rare case. Usually, at least, as I install it from package.json, not like in string-specific, it usually install all nested dependencies, too. Only, as I said in this case, it would try to install them so they would be shared between multiple dependencies.

Manuel Lemos: Yeah, well, anyway, I think it was worth mentioning because this is a major release. For those that use this a lot probably noticed some differences.

I've been using npm where packages need to be installed with them, npm like Cordova or PhoneGap or whatever. But after that, sometimes you no longer use npm, you use Bower or some other library to install.

Arturs Sosins: For browser dependencies, yes.

Manuel Lemos: Browser dependencies. So it no longer applies, as long as you can install Bower, it's all right. We use npm to install Bower and then...

Arturs Sosins: That sounds like you use it to install Internet Explorer it to install Chrome or something like that.

Manuel Lemos: Exactly, that's a good analogy.

Anyway, OK, maybe there are more things to mention. This is just a pre-release, you call it Beta. I'm not sure if Beta is the word, but, OK, it's written. It's Beta soft right here. So, pre-release, you can call it Beta.

16 Years of PHP Classes 5 Years of JS Classes (24:50)

Manuel Lemos: OK, let's move on. The next topic is about just to mention that last month, it was the 16th anniversary of the PHP Classes site. As you may know, PHP Classes is the basis of JS Classes.

Just to mention, coincidentally, it was also the month PHP completed 20 years, but that's another topic. We talked about it in the PHP podcast. So if you want to know about it, just go and listen to that.

Related to that, I'll just mention something that is still missing in PHP, that is somewhat related with JavaScript, which is the fact that currently, most JavaScript implementation are based on ECMAScript 5.

But in ECMAScript 6, there is the await keyword that allows you to develop code that will run asynchronously. You don't have to deal anymore with the callback hell.

As we mentioned before, I think it was io.js that is starting to implement the ECMAScript 6 features. So I'm not sure if the await keyword is already available, but if it is available, it would be interesting. I think that will make Node.js, in general, more interesting as it is today because dealing with the callback hell is...

Arturs Sosins: A hell.

Manuel Lemos: A hell that is a hell.

Arturs Sosins: For lack of better analogy.

Manuel Lemos: Yes, exactly. This was mentioned in this article because PHP does not yet have the await keyword on the main implementation of the language. But there is the Hack language that is implemented by Facebook that already has something like that. So, it's possible that PHP will play a bit of catch-up on that.

Anyway, the reason I mentioned it here is that since there is sort of a competition but what the development environment will prevail in the future for Web development. We know that JavaScript is making progress a lot.

For instance, for mobile development, hybrid applications are mostly based in JavaScript. Some emulate the Web environment, like Cordova, PhoneGap, and some others. Just the JavaScript part with CSS but without HTML, like Native Script as mentioned also before. So it will be interesting to see how the future will evolve.

Anyway, I also mentioned this article because there were some developments that took place in PHP Classes, also affect the JS Classes site. Namely, the Package Recommendation System, that also exists, but unfortunately, in JS Classes site, it's not so popular. It hasn't been used much. But there are some package recommendations there.

The Innovation Award Championship of the Nations introduced last year has been motivating a lot more developers to send their packages, not many but more.

Last year, France, as a country has won. We didn't even comment much about it, but unfortunately, the winner of the Innovation Award for some reason disappeared. I don't know, I hope nothing bad had happened to him, but he stopped replying. I don't know, we didn't even mention much about that.

Anyway, the JS Classes site, one recent feature implemented there is if somebody submits a request, and then somebody wants to provide a solution that is not yet approved, now, there is a way to submit that package that may be in a queue. When the package is approved, it will be automatically listed as a recommendation by the author that submitted it. It is interesting.

There are some developments that do not apply to the JS Classes site, but the future plans that will be implemented will affect both sides, basically about the search system that will be more flexible, do not have so much limitations as the current one, and also have them provide better ranking of the results. Also, in the future, it is planned to have package recommendations appear in the search results.

The PHP Classes site completed 16 years. The JS Classes site will complete five years in August. Long time. Unfortunately, it does not run as much, but it's OK, it has been useful to many people. I hope it continues to be even more useful.

JavaScript Innovation Award Winners of April 2015 (31:06)

Manuel Lemos: Well, those were lots of books and lots of articles, but we finally reached one of the last section on which we comment about the Innovation Award. Let's start with the Innovation Award of JS Classes.

We start with the nominees of April. They were voted in May, and in June, the results came out. We have in April like seven nominees, many packages at least for the average of the JS Classes site, which is great but will give us lot more work to comment about them.

Let me share here just to give you an idea. OK, here they are.

OK, of these seven, which ones would you like to comment, Arturs?

Arturs Sosins: Let me share the screen, and probably to zoom in also, right?

So first one I wanted to comment is an interesting package by Andras Toth, which is called WDE: Web based editor for several programming languages. I was actually looking for something that I could write code online in, and it seems to be using some existing tool and extending it and implementing different features and even some testing using PHP integrations.

I wanted to try to see a demo but it seems their demo account was changed, and I can't log in. So it says log name or password, but still, I wanted to mention it.

Andras got one year server license IP for this package.

The second one I wanted to mention is Gianluca Zanferrari's package JavaScript HTML Table Excel Export. So what it does, it does an interesting thing that it takes a current HTML Table in the HTML Code and formats it in a way that it could be exported and used in Excel. In case of Internet Explorer, it also uses ActiveX control to even launch the Excel programs. So if you want to allow users to edit HTML tables in Excel, that's the way to go.

Manuel Lemos: Yeah, actually, if you're not in Internet Explorer, it still will open file and make it open Excel, if you're on Windows or whatever is compliant in your platform.

Arturs Sosins: The last one I wanted to mention is Jackson Knowlton from the United States. He developed JS Sortable Table. Well, I think he's actually one of the rare developers who actually put a demo on it. As you see, it's a simple sortable table that could be applied to any table in your HTML and provide it certain function.

I think that's basically it. Oh, and yeah, he got one downloadable e-book of choice by O'Reilly for this package.

Manuel Lemos: OK, on my behalf, I also would like to talk about a few packages. Let me share the screen here. The first package that I wanted to comment is one that is interesting. Fortunately, I also have a demo, which basically is an analog clock. Well, the demo was supposed to appear here, but it doesn't. Maybe the author removed it.

Well, anyway, let's see if I can open the screen. Oh, it opens, but not when...

Arturs Sosins: Not like in IFrame?

Manuel Lemos: Inline, IFrame.

Well, anyway, as you may be able to see here, it's an analog clock. It just uses some CSS tricks to rotate the pointers, and it gives a nice effect.

OK, the next package that I wanted to comment is GPS2Country. This is very interesting because usually...

Sorry, I forgot to mention that the previous package was published by Suresh Kumar from India.

The next package that I wanted to mention, as I mentioned, is GPS2Country. It allows to determine the country at a given longitude and latitude. So it take the latitude and longitude, and this package by Dusan Boskic is able to determine if that coordinate is inside a given country.

This all is done without creating a remote Web services. So it contains information about the boundaries of each country, and then it tells if a given coordinate is inside that country or not. So it was a great package.

The next package I wanted to comment is the Dots and Blocks Game implemented in JavaScript, which is interesting. We don't have demos but I have a screenshot here.

Arturs Sosins: So two-player, it means playing on the same screen, not like online.

Manuel Lemos: Yeah. This is interesting because... I didn't know about this game, but it is always interesting the way that some people implement these games in JavaScript. In this case, as I mentioned, is for two individual players playing against each other.

Finally, the last package that I wanted to mention is an array generator by Stephen Chapman. And this is to initialize arrays with special sequences, special values, ranges, and ranges of numbers, ranges of letters.

This is very convenient because sometimes, you have the need to prepopulate arrays in a certain manner, and if you have a solution that addresses those cases, it is always useful.

This package was, I already mentioned, by Stephen Chapman from Australia.

JavaScript Innovation Award Rankings of 2015 (38:10)

Manuel Lemos: Now, let's take a look at the Innovation Award rankings so far for 2015. So far, Andras Toth is leading individually with 4 packages and 15 points, followed by Suresh Kumar with 3 packages and 10 points, then Gianluca Zanferrari with 1 package and 7 points. Then, also with 7 points, Dusan Boskic.

And then, there are several other authors with just one package but less points... Jackson Knowlton, Danish Satti, Mostafa Abd-El-Hamid, Diego La Monica, Stephen Chapman, and Arturs Sosins.

[Laughter]

Manuel Lemos: Well, by country, this thing's actually more or less tied to who is leading because, unfortunately, JS Classes does not have many, many authors submitting packages, so many of them just represent their country all by themselves.

So in first place, there is Hungary with 4 packages and 15 points. Then, India with 3 packages and 10 points, Serbia with 2 packages and 7 points, Netherlands with 1 package and 7 points, and then United States with 2 packages and 7 points.

I think United States is probably the only country that has more than one participant in this ranking.

Then, there is Italy (1 package and 4 points), Australia (1 package and 4 points), Egypt also with 1 package and 4 points, Pakistan, also 1 package and 4 points, and Indonesia with 1 package and 3 points.

Well, we have had lots of contributions. JS Classes have been raising a lot this year, so we hope this competition becomes interesting.

Conclusion (40:08)

Manuel Lemos: So with this, we practically ended this podcast. I'd like to thank you, Arturs, for coming once more. Next month, certainly, we'll have more interesting JavaScript topics to talk about. On my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]