How eBay Integrated WASM into Their Product: A Deep Dive into the Barcode Scanner
The Challenge: Bringing Native Performance to the Web
eBay's mobile apps have long offered a handy barcode scanning feature, letting sellers use their phone cameras to capture product UPC codes. This made listing items faster and easier by filling in details automatically. But bringing this smooth experience to the mobile web was a whole different ballgame.
JavaScript Limitations: Earlier tries with JavaScript-based barcode scanners were frustratingly unreliable, working only about 20% of the time. The unpredictable nature of JavaScript and its inconsistent performance optimizations led to frequent timeouts and sluggishness.
User Experience: Sellers were understandably annoyed when the scanner couldn't recognize barcodes promptly. For a feature so crucial to a seamless listing process, dependability was a must-have.
These hurdles prompted the team to seek a better solution—one that could deliver the near-instant speed of native apps right in the browser. Enter WebAssembly.
Porting a C++ Barcode Scanner
eBay's engineering team aimed to enhance their mobile web experience by integrating a barcode scanning feature, similar to the one in their native mobile apps. To achieve this, they decided to adapt their existing in-house C++ barcode scanning library, originally developed for native platforms, for use on the web. This approach offered several advantages, including leveraging a proven, high-performance solution and maintaining consistency across platforms.
To facilitate this transition, the team employed Emscripten, a toolchain that compiles C and C++ code into WebAssembly (WASM). By compiling their C++ library into a WASM module, they preserved its performance characteristics and ensured compatibility across major web browsers.
Emscripten also generated JavaScript "glue code" alongside the WASM binary, enabling seamless interaction between the browser environment and the WASM module.
To maintain a responsive user interface, the team implemented a Web Worker to run the WASM module. This setup allowed the main thread to offload intensive computations to the worker thread, which processed continuous snapshots from the device's camera stream. By doing so, the barcode scanning feature operated efficiently without compromising the responsiveness of the web application.
Through this strategic adaptation of their existing C++ barcode scanner using WebAssembly, eBay successfully introduced a high-performance scanning feature to their mobile web platform, enhancing the overall user experience.
Racing Multiple Implementations
After porting their C++ barcode scanning library to WebAssembly (WASM), eBay's engineering team observed that while the new implementation processed camera snapshots at an impressive rate of 50 frames per second (FPS)—a significant improvement over the JavaScript version's 1 FPS—it only achieved a 60% success rate in detecting barcodes. They identified that factors such as image focus, angle, and ambient lighting significantly impacted the scanner's accuracy.
To address these inconsistencies, the team devised an innovative multithreading strategy. They established three concurrent worker threads: one running the original WASM-compiled C++ scanner, a second utilizing an open-source barcode reader (ZBar) compiled to WASM, and a third employing a refined JavaScript-based scanner.
All three workers processed the same image snapshot simultaneously, and the first to successfully decode a valid barcode would send its result to the main thread, after which the remaining threads were terminated to conserve resources.
This "race" approach significantly enhanced the scanner's overall success rate, eventually achieving nearly 100% accuracy under testing conditions. By leveraging the strengths of multiple implementations and allowing them to compete, eBay effectively overcame the challenges posed by varying image qualities and environmental factors, leading to a robust and reliable barcode scanning feature on their mobile web platform.
Balancing Speed and Reliability
Integrating WebAssembly (WASM) into eBay's mobile web barcode scanner brought significant performance improvements, but it also introduced certain trade-offs that required careful consideration. The WASM-based solution achieved a processing rate of 50 frames per second (FPS), a substantial leap from the JavaScript-only implementation's 1 FPS.
However, processing speed alone didn't guarantee optimal performance. In situations where image quality was compromised due to factors like poor focus, awkward angles, or inadequate lighting, the custom C++ library occasionally struggled with quick barcode detection.
To address this, eBay's engineers implemented a multithreaded approach, incorporating both the original WASM-compiled C++ scanner and an open-source barcode reader (ZBar) compiled to WASM. This strategy allowed the system to balance raw speed with reliability, leveraging ZBar's higher detection rate in challenging conditions despite its slightly lower FPS.
Additionally, to prevent long load times from affecting the user experience, all necessary WASM assets, including binaries and accompanying JavaScript glue code, were prefetched and cached following the initial page load. This ensured that the barcode scanner was ready for immediate use whenever the user initiated a scan. These decisions highlight an essential insight: while WASM offers remarkable speed advantages, real-world applications demand a nuanced approach that accounts for input data quality and prioritizes a seamless user experience.
Lessons Learned and Broader Implications
eBay's integration of WebAssembly (WASM) into their mobile web barcode scanner offers several valuable insights:
Continuous Improvement: The initial implementation of the barcode scanner didn't achieve the desired reliability. Through rigorous testing and iteration, the eBay team discovered that combining multiple scanning strategies was essential to enhance performance and accuracy.
Embracing Hybrid Solutions: Instead of relying solely on a single technology, eBay's engineers integrated multiple implementations, including their custom C++ library compiled to WASM and an open-source barcode reader (ZBar). This "best of both worlds" approach allowed them to leverage the strengths of each solution, resulting in superior performance.
Adapting Legacy Code for Modern Web Applications: By compiling their existing C++ barcode scanning library into WASM, eBay effectively repurposed a legacy codebase to meet contemporary performance demands. This strategy demonstrates how traditional applications can be adapted for the evolving web landscape, ensuring longevity and relevance.
These takeaways highlight the importance of iterative development, the effectiveness of hybrid technological approaches, and the potential of WASM in modernizing legacy systems for high-performance web applications.
Conclusion: A Blueprint for Web Performance Innovation
eBay’s journey from a clunky JavaScript barcode scanner to a slick, multithreaded WASM solution isn’t just a tech tale—it’s a real-life lesson in making things work better for users. By reusing tried-and-true code, mixing different approaches, and always keeping the user in mind, eBay boosted performance by up to 50x and made selling on their platform smoother than ever.
As WebAssembly grows and evolves, its power to supercharge web apps is only going to get stronger. For anyone in tech—from engineers to product managers—eBay’s story is a great reminder that sometimes the smartest move is to blend the old with the new to deliver a truly improved experience.
Have you given WebAssembly a try in your projects? What roadblocks did you encounter, and what wins have you celebrated? We’d love to hear your story on pushing the limits of web performance!