Building Better Web User Interfaces with Web Components - Lately in JavaScript podcast episode 46 - JS Classes blog

Contents

Introduction (00:20)

Web Alarms, Presentation and StandBy APIs (1:56)

JavaScript and V8 TurboFan (9:28)

Are Web Components Ready for Production Sites? (11:04)

Guessing the Element the User is Going to Click with jQuery Aim (14:11)

Extract Relevant Content with Unfluff.js (17:40)

Comparing HTML strings with DOM Comparator 20:38)

Loading Single Page Apps Faster with Pegasus (24:30)

Cheerp: New C++ to JavaScript Compiler (27:02)

Detect if a Function is Native Code with JavaScript (28:50)

JavaScript Innovation Award Winners of June 2014 (32:41)

JavaScript Innovation Award Ranking of 2014 (38:02)

Conclusion (39:45)

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 hangout. This is episode 46. 

Since Google Hangout is having the bug of the month of not showing the lower third, let me introduce myself. I'm Manuel Lemos, the creator and developer of the PHPClasses and JSClasses site.

And today, I have here with me another anonymous person from Eastern Europe. Hello, Arturs. Now, you have to introduce yourself because Google Hangouts does not want you to be famous.

Arturs Sosins: I don't know, actually, I think I can enable that feature, so it must be something on your side. Let me try, just to prove you wrong.

Manuel Lemos: Well, I don't know, because last month, you also were not able to enable. I would love to be proved wrong. Maybe that means that you have a different version of something.

Arturs Sosins: Yeah, that's possible. I don't know. So, is it on?

Manuel Lemos: No.

[Laughter]

Manuel Lemos: No, it's on now. I don't know what is the difference. Maybe you are just using Windows or something.

Arturs Sosins: Yeah, probably.

Manuel Lemos: I think it's something.

[Laughter]

Arturs Sosins: Probably something.

Manuel Lemos: OK, so we are here today to talk about the latest interesting things that had been happening in the JavaScript world.

Web Alarms, Presentation and StandBy APIs (1:56)

Manuel Lemos: As always, I'm going to start with several topics that we have ready here to comment.

I'm going to share the screen here. OK, let me see. I'm trying to share the screen but let's see if this works. Share.

Arturs Sosins: It works.

Manuel Lemos: But I was having a hard time switching the windows here.

Anyway, I'm going to comment first about this article, interesting, that was published in the SitePoint site regarding new JavaScript APIs  that I have not heard before, that probably was specified recently.

There is one for Web Alarms, another for Presentation API, and then there's another for Standby API.

And this is interesting because these APIs seem to be geared more towards applications that eventually will be running on mobile devices, because I think some of them do not make much sense on desktops or notebooks.

Arturs Sosins: Yeah well, for example, Web Alarms API would allow you to receive an event when you get to the specific time. For example, you can now schedule shadow notifications.

It's like the way it works on notifications on the mobile phones, basically. It can say, "Two hours from now, or exactly at that time, please notify me or something."

Manuel Lemos: It's like a cron. Would this integrate with any alarm applications that you have on your mobile device? Because I'm not sure if you can, for instance, having multiple alarm applications installed, and which one would it use?

Manuel Lemos: Something standard?

Arturs Sosins: No, I think you can because they all registered that for system time, so they can present maybe in different ways the alarms. You can have multiple alarm apps on your  phone, so why not here?

Manuel Lemos: Yeah, multiple different sets of alarms, each application would manage their own alarms. not necessarily the same. I don't know if maybe, I'm just not sure, if this would be the case Probably, there's one central set of alarms that different applications can manage.

Well, OK, if this is something that they were able to implement as a standard, maybe there's a common set of alarms that you can actually program. And in this case, you would be able to program it from JavaScript.

So the next one, Presentation API, it seems to control where your current screen is going, I think.

Arturs Sosins: Yeah, it's something similar like that. Basically, what it does is you show a web page on your device or desktop, and then you show your web page on the projector. It allows to communicate between those pages, so you can manipulate from one page, manipulate the other, or something like that.

Manuel Lemos: Yeah, this could be interesting for applications.

Arturs Sosins: Creating PowerPoint and Notes, so you can see Notes when you present it.

Manuel Lemos: Through your Chromecast device.

Arturs Sosins: Yeah.

Manuel Lemos: I have a Chromecast and it's cool for watching videos. You can control it from different devices. The Android version is not working very well, because it doesn't let you control the size of the subtitles, which is important when you prefer to watch a movie with subtitles.

But anyway, I think this API would also be able to control at least part of the functionality. Probably not subtitles, or things like that that are probably very specific to the screen device that you are using.

And then, there's the Standby API that seems to be able to...

Arturs Sosins: Basically, it won't lock your screen while it's idle. You don't do anything, but it still won't allow the application to lock your screen like keeping it awake.

Manuel Lemos: Is this for  screensavers or for when you put your devices in suspension?

Arturs Sosins: That's a really good question. How it's written is this is to be for phone devices to lock screens, but maybe...

Yeah, this prevents devices from entering power-saving state, turning off the screen, so I assume it could work on Windows, too. But I really don't know if it would, because it's managed somewhat differently, unless it exposed some operating system functions.

Manuel Lemos: Yeah, I think in this case, it is probably to integrate with those events when you push your mobile device power button, and that it does not shut down your device but it just suspends the activities.

But once there is some input activity, it gets back to the... Well, it starts working again, as usual. Your applications will resume where they were before. It's not like those when you suspend your computer and shut it down. It still needs power to work on.

Anyway, these are interesting APIs. They seem to be targeted to allow Web applications to integrate better with the functionality of mobile devices. I suppose these are not yet available.

Arturs Sosins: I think they're mostly drafts, probably, although it's good.

Manuel Lemos: Even an unofficial drafts. But it's always interesting to know about these APIs. So if you would like to take advantage of them, you may be able to already take a look and  start testing them, probably in the latest versions of browsers that implement them.

JavaScript and V8 TurboFan (9:28)

Manuel Lemos: OK, moving on with the next topic, now we are going to comment about something that is just a curiosity.

We are probably not going much in-depth about this, which is the latest version of the V8 engine that is used by Chrome and also Node.js. Basically, they call it V8 TurboFan.

Personally, I don't have much more to comment than this because this is really, really low level. They say that it provides performance improvements, but I would not go much further from that because this is really low level on the... I would not have enough knowledge about this to comment. I don't know if you want to comment anything, Arturs?

Arturs Sosins: Yup, the only thing I want to say is that V8 was a great breakthrough in speed. So, if it said that it could make it even faster, more performance, then maybe Web is really is going to be a cross-platform environment, the media.

Manuel Lemos: Right. There's really not much more to say because we always appreciate the fact that it is going to get faster, but in reality most of us do not really care how.

[Laughter]

Arturs Sosins: Exactly.

Are Web Components Ready for Production Sites? (11:04)

Manuel Lemos: OK, so moving on to the next topic, on which I'm going to comment about the state of Web Components.

For those that are not familiar about what this is, Web Components are basically a way to implement custom tags in your web pages, that probably make the HTML more readable. You replace some complicated tags with simpler ones and then you can define the behavior of those tags using some JavaScript code.

There is this article here asking whether the Web Components are ready for use in production sites. Basically, what they comment is that this is all fine, but if you rely on this, it may not always work well in all browsers.

But they mentioned that there is one big site they know that is already using it. In this case, they mentioned GitHub, which is using a time custom Web Component that they are using to show certain information.

But this is really, really not very important because the way it works, if Web Components are not enabled, it still work fine, and probably you will not notice any great difference. Well, this is just to say that you can implement your custom tags.

Arturs Sosins: HTML tags, yeah.

Manuel Lemos: But probably not really for something crucial that may not work in all browsers. I don't know, if anything.

Arturs Sosins: There should be an old version to support it, then yeah, not a good idea. It's a nice and cool trick to provide a Web interface if you used to create a special <div> element and then, put a lot of JavaScript in your functions, modify the divs and now, it's as easy as simply creating the tag and let the JavaScript take care of it and provide some values through attributes.

So it's an easier, nicer and cleaner interface. But, yeah, probably not ready for production especially with the backwards incompatibilities.

As we discussed somewhere in previous podcasts, it uses DOM mutations, and yeah, as we discussed it earlier, the support was only in the latest browser versions.

Manuel Lemos: Yeah, well maybe in three years, we'll decide it's OK to use this. Well, anyway, at least we know that GitHub is using them, but not really for something critical. Or else, they probably would not really use it in this way.

Guessing the Element the User is Going to Click with jQuery Aim (14:11)

Manuel Lemos: OK, so moving on to the next topic, we are going to comment about something interesting, which is in this case, this is jQuery plugin, although I think this really did not need to be a jQuery plugin.

But the purpose of this is to try to anticipate, to predict what is the element that the user is going to hover or click.

So basically, it's probably to make the user interface more responsive. I mean, not responsive in the sense of adapting to different screens but make it more usable by anticipating what actions the user is going to perform and probably load things faster even before the user needs them.

Basically, that's what I could gather from this class. I'm not sure how it works internally. I mean this plugin, it seems to try to analyze the events that usually happen right before a certain hover or a click event.

Arturs, did you look into this?

Arturs Sosins: Actually, I did not. I would imagine it work with... Let me check the... Yeah, the idea is really interesting for an idea, but for usability, this plugin can be a good addition to UI but also in some versions can make user frustrated.

So I would probably not recommend using something like that. Like the user would be like, "Ah, I wanted to click this but it opened that. Why? What did just happen?"

Manuel Lemos: It follows what you do with the anticipation function. For instance... Let me share this again. Here. Not sure if this is large enough.

Here, you can define an anticipation function. I'm not sure what are these parameters, P and V,  but OK, it register anticipation function. It probably do something useful here.

For instance, maybe you need some library that needs to be loaded. Maybe you can load that library on demand, but right before the user is going to need it.

I think I understand your point, I just think it depends on what you do. I don't know what kind of scenarios you were seeing that could be bad for the user.

Arturs Sosins: Well, you mentioned if you have links to social accounts, they're quite, quite together in the web sites, so you want to click on Twitter, but you hovered over Facebook, and it opened Facebook. And you are like, "What's happening? What did it do?"

So you would need to be really careful on what options you're really at, that should not be the actions that would actually make something open a dropdown is completely OK, probably, like in example.

Manuel Lemos: Yeah, I think you should not guess too much. Probably, making wrong guesses is not going to help you.

Extract Relevant Content with Unfluff.js (17:40)

Manuel Lemos: OK, now moving on to a next topic on which comment another interesting library. In this case, it's for Node.JS.

It is able to extract content from web pages. But this one seems to not be the usual scrape HTML and that's it.

It seems to be able to actually determine what is the relevant content on a page, for instance, ditching headers and footers and sidebars. At least, that's what I got the way this works.  Because scraping content from HTML is not the hard part.

Arturs, did you look into this? What did you think?

Arturs Sosins: Yeah, at first, I thought that maybe it uses, semantic analysis like you can look at the HTML code and see what's... especially in HTML5, see if it's a menu, if it's a navigation, if it's a slide something, if it's a footer, and like take only the sections with content.

But after looking at a bit of code, it also has some top words choice, so it's really does the text analysis, and it's probably searching for larger chunks of text, of paragraphs and then try to analyze it.

So it's not just simply checking HTML, it's much more intelligent. That's why it seems to be providing really great results.

Manuel Lemos: Yeah, well, that's what I thought this would be for. I hope I'm not mistaken and if that's it, I think it can be useful because...

Well, I don't know, it depends. It's not that I have many purposes for scraping applications but I know many sites do that. They probably do not have an API to access.

Arturs Sosins: I could create jsclassescopy.org and scrape contents from JSClasses or something like that.

Manuel Lemos: That would not be a good idea.

[Laughter]

Manuel Lemos: Well, I can see the purpose of people that want to scrape content to obtain things that otherwise could be obtained via an API. But when that API is not available, this could be useful.

In this case, it actually makes the job simpler, as it would avoid the need to have a post-processing task of scraping relevant content.

Arturs Sosins: It's really for all machine learning application because you need really lots of data and you need to process it, and so that is the case where it would be really useful.

Manuel Lemos: Yeah, that's true.

Comparing HTML strings with DOM Comparator 20:38)

Manuel Lemos: OK, now moving on to another topic on which we're going to comment about a DOM Comparator, which is basically a library that compares two HTML strings and returns the difference between those strings.

It's just not a difference between two texts, but I think it's smarter than that, because you can see what are the differences.

And here is an example, they have an input HTML here and then the other input to be compared is here. Then it called this component, and it seems to return an object like this.

In this example, they are passing it to a testing framework, expect that tests if a value is equal to this one.

From what is seems it does not return the difference between two HTML strings. It's not really something that is also HTML, it's rather an object that list the changes. In this case, it says it removed the attribute and then it mentions a path of that attribute.

Well, this is quite advanced. I'm not sure when this would be useful.

Arturs Sosins: I know, I know. Pick me, pick me.

[Laughter]

Manuel Lemos: Yeah, OK, OK. You may answer that question.

Arturs Sosins: OK, basically, while working with lots of different designers, remotely of course, there is usually... OK, it's OK to work with some revision and like that, but one was typical, a pixel vision designer. Basically, he would need to make everything in places by pixels.

So I created a small JavaScript injecting script. It injected in the URL that would allow him to modify it and he would just tell me, "Well, I modify the padding of it two pixels more, so it works OK." So I modified the CSS code.

But this library would actually allow me to take the normal source code and then take the source code after his modification with injected JavaScript, and just send me the summary of what modifications he did, so I can apply them in the real CSS file and deploy.

Manuel Lemos: Yeah, that's true. That could be useful. I'm not sure if this would actually work also at the CSS level. Because if your designer change things in the CSS but not in the HTML itself, probably the change that you want to detect would go unnoticed. I'm not sure.

Arturs Sosins: True, but if you're working with injected JavaScript that is probably applying it so as style attributes, so it should reflect in the DOM.

OK, yeah, it's debatable. It's something that needs to be experimented with.

Manuel Lemos: Well, it saves the DOM, but in reality, pass two strings.

Arturs Sosins: Yeah, that's why it would be perfect for it.

Manuel Lemos: I think it is just called DOM Comparator because it probably builds a small DOM tree to compare things.

OK, well, anybody that has good purpose for this tool... I'm sure there is plenty of people with needs like that... they can take a look at this component.

Loading Single Page Apps Faster with Pegasus (24:30)

Manuel Lemos: So, we are going to move on to the next topic, which is about a library that claims to work faster for loading single page applications.

Usually, those application have part of HTML and JavaScript, often the JavaScript is detached from the HTML page. And then, there are some parameters and data that is used to load the initial state. Well, that's the way I interpret this.

So, what this library proposes is that instead of loading the JavaScript and starting the application and only then loading the necessary data, JSON data for instance, to configure what is the initial state... they suggest that it could be done in parallel, loading the page application JavaScript and the data JavaScript.

I'm not sure what exactly this library does, because it's very, very small. Probably just switch the order of the loading of the things. I did not take a look, so I'm not sure.

Arturs Sosins: It seems to be that... Well, the main idea is that when you're holding the page, when the browser hits JavaScript, it's mandatory, it needs to finish loading the JavaScript and only then continues to load everything else, because DOM can be modified.

So that's why they usually recommend to put all the JavaScript in the end of the page, because all the pages will be already loaded.

But this library seems to do the trick, that you actually load the content of the page through the JavaScript. So, you guarantee it would be loaded one of the first even before the other HTML goes. So it's a way to present the information faster.

I don't know how it works in reality but I think that's the main idea behind this library.

Manuel Lemos: Well, this can be interesting for all those that are trying to optimize the last mile to make it as fast as possible, make your web pages as fast as possible.

So, those that are interested should take a look at these packages library, and eventually take advantage of whatever it proposes to make it faster.

Cheerp: New C++ to JavaScript Compiler (27:02)

Manuel Lemos: Now, we are going to move on to one topic that usually make a bit fun of the topic, not specific because of this library but because everything else has been ported from C++ to JavaScript using Emscripten.

But this time, it's not Emscripten, it's Cheerp. It's a new library, a new C++ compiler that generates JavaScript as output, so you can implement, convert, existing C++ libraries to JavaScript.

Well, it's basically for the same purpose of Emscripten, so I'm not sure if there is much more to mention than this.

Any comments, Arturs?

Arturs Sosins: Yeah, well, when you work on Emscripten, there's always the default dependencies and all the thing that you need to do to make it all happen.

At least for... It's my first look on this web site, I haven't heard about before. So at least from this look, it seems like you download  it, you provide the sources, it does everything that you need yourself. So I really need to check it out, but it's easier to code.

Manuel Lemos: But I could not figure out the difference, if there is anything different. Maybe for those that are really interested, because I think it's not for everybody. It's not just like everybody has some C++ code to convert to JavaScript.

Arturs Sosins: Yeah, it's probably OpenGL to WebGL, similar stuff that the Emscripten does.

Manuel Lemos: Yeah, all those CPU-intensive applications, for instance, games that were done in the past.

Detect if a Function is Native Code with JavaScript (28:50)

Manuel Lemos: So, given that we are going to move on to another topic. We are getting close to the end of the list of topics that we comment.

This one is a library to detect if a function is native code with JavaScript. Native code, it means that certain JavaScript function is implemented natively by the browser that provides the function...

Well, its functionality to using native code of the browser. It's probably not even JavaScript something lower level.

Arturs Sosins: Yeah, C++.

Manuel Lemos: C++, exactly.

So this library allows you to detect if a certain function is native code. The basic test would be to check out the output. When you try to convert the function to string, it would probably output something like native code. But I'm not even sure if this would work equally well in all browsers.

Arturs Sosins: Usually, when there is no documentation about something, I like to do a loop of the object, and alert out all the keys and the values of the key.

And yeah, most of the time, I see OK, there is a function, this name, and it's a native code, something like that. So it seems to be yes, that most browsers just return the message that it's native code and doesn't show the code. So, it could work like that, maybe.

Manuel Lemos: So but anyway, did you figure out how they implemented this? Is this the code to test, if it's native code or not?

Arturs Sosins: Yeah, it's, they say, a better solution. Basically, yeah, but they made it more cross-browser probably, because if you see the comments, there are some like heights and constructors, like for Safari or larger than 4 and then stuff like that. They even export it as a module so you could probably use it in maybe Node.js.

Manuel Lemos: Well, anyway, I think the bigger question is when would it be useful to detect if a function is native or not? Because it doesn't seem to be a problem that every JavaScript developer has every day.

Arturs Sosins: Yeah, my use case that I could suggest could be too far-fetched for really ambitious JavaScript developers, but it would go like, "I check if this function is native.

If yes, well, let's use it because you won't get anything faster than native. But if it's not, then maybe some other library writes it, but I know I can do it, so better use my function than the other libraries'", something like that maybe.

Manuel Lemos: Right, it's really, really far-fetched.

Arturs Sosins: But most probably, yeah. It's something like feature testing for some purpose.

Manuel Lemos: Maybe there is some weird use case that we are not looking into this, but could be just what you said.

Arturs Sosins: There is one mention to not to use it as a sense, form of security. So, like you could see if the function that wants to run the browser or something that could be injected or something like that, but that's a bit also of use case potential.

Manuel Lemos: Right. They say that it's even less useful than you could.

JavaScript Innovation Award Winners of June 2014 (32:41)

Manuel Lemos: OK, well, with this, we covered many topics. We are now going to one final regular section on which we comment the Innovation Award winners, in this case of June.

In June the activity was sort of low. Everybody was paying attention to World Cup soccer, so only two classes were sent.

Arturs Sosins: Football.

Manuel Lemos: Yes. Football, soccer, it depends...

Arturs Sosins: On perspective.

Manuel Lemos: ...who prefers. Maybe there are some Americans that are listening and they say, "Oh, football, that thing that we play with hands." Oh, that's right". It's soccer to make it obvious that you play with your socks.

[Laughter]

Manuel Lemos: Or not.

Arturs Sosins: Or not.

Manuel Lemos: With some boots, of course, on top of your socks.

Arturs Sosins: It's what we call booter.

Manuel Lemos: Yes, that's probably the more accurate name. But here, we're talking about JavaScript, so that is totally a side topic.

Arturs, which of these two components would you like to comment this month?

Arturs Sosins: I'm already trying to share my screen, but it seems a part of the... working, screensharing is not. Let me try it one more time. OK, now, it's opened something. Yup, it works.

The one I would want to comment is a class by Daniele Cruciani from Italy. It will show a context sensitive menu.

I don't know if it can be counted as something really special or not, but I really like his approach, easy approach.

Let me show you the code a little. So, basically, you have some functions, and then you just name the options and parse this functions to the plugin.

What it does, it create the context menu with the options that you provided, and the specific function it presents, so the interface is pretty simple and easy to use.

Of course, as he mentioned, at his code, there are some things needed to be worked out and may not work in all browsers. But yeah, it's a great idea, great accessory. That's why I really like it.

Daniele Cruciani received a book of O'Reilly for it.

Manuel Lemos: Yeah, that's great. Let me switch to the other screen here. I'm not sure if this is looking well, because I zoomed it.

Arturs Sosins: Oh, you mean, it's not responsive?

Manuel Lemos: I mean zoom it in a different ways.

Arturs Sosins: All I see is you. OK, now you're out.

Manuel Lemos: The other object that I'm going to comment, this one was sent by Jason Gerfen from the United States. It's called comm.js. It's a component that seems to do something that seems common, which is to send AJAX request, Websockets request. But it provides a unified solution that also works not only with the Websockets and the AJAX, but also with XDR's XDomainRequest.

Since this is something for Internet Explorer or something, because I have never heard of XDR before until I saw this component.

Arturs Sosins: Yeah. All I know is XHR. Right?

Manuel Lemos: Yes. But it's different. It's XDomain Request. I suppose this is for sending cross domain request because AJAX request do not work across domains, unless you are using, I think, AJAX 2 that with some permissions to enable that from the sender domain. I mean, receiving domain of the AJAX request. It's either that or I'm switching the order of the words.

[Laughter]

Manuel Lemos: Anyway, this is somewhat unusual, so congratulations to Jason for this contribution. For that he picked a prize which is a book of choice that he picked from Packt.

Packt is also a book publisher like O'Reilly. They have many books that are specific to many topics that are not general topics, I would say.

JavaScript Innovation Award Ranking of 2014 (38:02)

Manuel Lemos: As for the Innovation Award ranking of June so far, and also considering the winners of July that were already announced, the positions have not changed so much by author, because only two authors that were not yet very well-ranked scored some points.

So the main leaders of the ranking by author remain practically the same. So far, Andoitz Jordan Marmolejo from Spain leads with 2 packages and 10 points. Jimmy Bo from Canada follows with 3 packages and 7 points, and then several other authors with 1 or 2 packages and less points.

By country, we can see that Spain is leading now, actually sort of increased its lead, thanks to points by Tony L. Requena from Spain in the July already.

Spain, so far has 3 packages and 12 points, followed by Italy with 3 packages and 8 points, then Canada, also, with 3 packages and 7 points.

Then, we see Sweden has already increased its ranking, with 2 packages and 5 points. And then, several other countries follow with 1 package and less points.

Conclusion (39:45)

Manuel Lemos: So with this, we practically end this hangout. I'd like to thank you, Arturs, for coming. I don't know if you had any final remarks. Anything that you wanted to mention?

Arturs Sosins: There are some interesting developments here. It's quite possible I'll be back in JavaScript world pretty soon.

[Laughter]

Arturs Sosins: Yeah, we could probably discuss it more on the next podcast. I could tell about it more when I get more details.

Manuel Lemos: Yeah, it showed that at least both in JSClasses and PHPClasses, there had been lots of good contributions, not only in quality... I'm talking about the nominees of the Innovation Award... but also in quantity.

I have long queue of packages to approve. As you may understand, packages have to be reviewed just to understand what they do, so I can elaborate clear description. And that takes time, that's why I cannot approve them all at once.

So I hope those authors that have package in the queues, please be patient, they will be approved as soon as possible.

So keep sending your package, the sooner, the better. The sooner you send them, the faster I can approve them, because they're entered in the queue.

Well, with this, we end this recording. On my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]