Developer Software

Replacing JavaScript: How eBay made a web app 50x faster by switching programming languages

And why JavaScript still has an important role to play.

The best programming languages to learn in 2019: Top coding skills that pay you the most

Online marketplace eBay has revealed how it boosted performance of a demanding web app by 50x using WebAssembly.

The "astonishing" speed-up after switching from a JavaScript-based to a largely WebAssembly-based web app was detailed by the eBay engineering team, who say the performance boost helped make it possible to build a highly-accurate barcode scanner as a web app.

By compiling code to WebAssembly, developers can build apps that deliver consistently high-performance in the web browser, similar to that offered by apps running natively.

eBay was keen to exploit that performance for a web version of its barcode scanner, a feature it offers in its Android and iOS apps to allow sellers to scan items they are auctioning.

"WebAssembly was different. It has tremendous potential, we just did not have the right use case. Well, that changed recently," write the eBay software engineering team.

One of the advantages of WebAssembly (Wasm) is that it offers code portability for a variety of languages, allowing developers to take code they've written for other platforms and compile to WebAssembly so it can run in major web browsers. 

Consequently eBay was able to take the existing version of its barcode scanner written in C++ and compile that to Wasm using Emscripten, adopting the Docker and Node.js-based approach outlined here

After a few minor teething problems, the eBay team were able to run the barcode scanner in the browser, using a Worker thread and JavaScript glue code.

The Wasm-based scanner was able to process images of the barcode at 50 Frames per Second (FPS), compared to about 1FPS in an earlier JavaScript-based scanner eBay had tested, a speed-up the team described as "astonishing".

SEE: Tips for building a successful career as a software engineer (free PDF) (TechRepublic)  

The problem was the Wasm-based scanner was still unable to detect barcodes in 40% of cases.

The team were initially puzzled why the same C++ code that worked in about 100% of cases when compiled to native code for Android and iOS apps was failing when compiled to Wasm to run in the browser. It eventually emerged that these native apps were able to bypass problems with image quality using platform-specific APIs that allowed for autofocus and other features.

eBay's solution was to run multiple barcode scanners alongside each other in the browser: eBay's own Wasm-based scanner, the open-source barcode reader ZBar compiled to Wasm, and the original JavaScript-based scanner code.

The structure of the final web-based barcode scanner.

Image: eBay

Only by running all three side-by-side in separate web worker threads, and having each attempt to read the barcode, was the scanner web app able to handle close to 100% of barcodes.

"To our surprise, with three threads racing against each other, the success rate was indeed close to 100%. This again was totally unexpected," write the team.

"JavaScript did perform very well on certain scenarios, and this factor seemed to close the gap. So yes, 'always bet on JavaScript'."

In tests, ZBar contributed to 53% of successful scans, followed by eBay's custom C++ scanner with 34%, and finally the JavaScript library with 13%.

The final web-based barcode scanner also proved to be a success with customers during an A/B test, leading to a 30% increase in eBay users who completed the process of listing an item for auction on the site.

"Technology evolves at a very rapid pace. Every day we hear new things getting launched. But only a few make a difference to customers, and WebAssembly is one of them," write the team.

Also see

Visit TechRepublic