{"id":269,"date":"2017-03-13T15:46:32","date_gmt":"2017-03-13T15:46:32","guid":{"rendered":"https:\/\/blog.mozilla.org\/webrtc\/?p=269"},"modified":"2018-08-01T19:24:14","modified_gmt":"2018-08-01T19:24:14","slug":"fiddle-of-the-week-await","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webrtc\/fiddle-of-the-week-await\/","title":{"rendered":"Fiddle-of-the-week: await WebRTC in Firefox 52"},"content":{"rendered":"

This isn’t a post about a new WebRTC feature. Rather, we’ll explore the new async<\/code>\/await<\/code> JavaScript syntax<\/a> in the just-released Firefox 52<\/a> and Chrome! Two new keywords let us write asynchronous code the same way we’d write synchronous code<\/a>. WebRTC APIs, as you’re probably aware, are quite asynchronous. Luckily they support promises – a requirement to use this new syntax – and it just works! I’ve always found callbacks and even monadic promise-chains hard to follow, but now we can write short, yet meaningful code that gets stuff done.<\/p>\n

“Big deal”<\/em> you say, “maybe I’ll be able to use this in production in 2027!”<\/em> Well, it turns out you can use Babel to transpile this down to code IE8 will understand<\/a>. But even if you’re not planning on doing that, I find learning how to write this way helps me reason about complicated WebRTC behaviors more easily. The code now matches how we talk about it, a boon to understanding and communication; it\u2019s my new whiteboard go-to. It might not work for you, but let’s try it:<\/p>\n

Below is an iteration of last week’s Fiddle-of-the-week on getStats<\/code><\/a> rewritten to be opened in two adjacent tabs, using async<\/code>\/await<\/code>. Transmitting across tabs is not only more impressive, but also more real-world-like: we only deal with one side and signal the other. The example also uses destructuring, in addition to template strings from last week, two other modern JS features, to keep it interesting.<\/p>\n

There are two parts. The immediately visible part covers connection entirely. Later, scroll down to see the getStats<\/code><\/a> loop.<\/p>\n

To see it in action, first right-click here and open this post in a second window<\/a>. Next, activate the \u201cResult\u201d tab in both windows, and finally come back here and hit the \u201cCall\u201d button!<\/p>\n