Youku Desktop Client Migration to Electron: Window Fusion and Native Integration Practice

This article discusses Youku's migration from native desktop applications (QT on Windows, Native UI on Mac) to the Electron framework for cross-platform development.

Background and Motivation: Due to the need for cross-platform compatibility and lower maintenance costs, Youku adopted Electron as their new client development framework. Electron uses Chromium for rendering, enabling code reuse across Mac, Windows, and Web platforms. The key motivation was that browsers cannot natively play HEVC (H.265) encoded 4K/8K videos, which are widely used by Youku for bandwidth optimization.

Window Fusion Technology: The core challenge was integrating native video decoders with Electron windows. The solution uses Electron's BrowserWindow class with getNativeWindowHandle() to obtain native window handles (Buffer), which are converted to Long type and passed to C++ SDK to set parent-child window relationships for embedding the native video renderer into the Electron window.

JS and C++ SDK Interaction: The implementation uses Node-Addon-Api, which supports cross-platform compilation and can generate Xcode/Visual Studio projects. Since NodeJS uses Libuv event queue for async operations, C++ async callbacks to JS must go through the event queue. ThreadSafeFunction is used for efficient async interface callbacks.

Performance Comparison: Testing on Intel Core i5-6200U with 8GB RAM showed Electron consumes slightly more resources than native clients but remains acceptable. The main optimization focus is video startup speed, which is affected by window creation, browser engine loading, and web page loading.

Pros and Cons: Advantages include easy npm package management, built-in packaging/auto-upgrade systems, seamless C++ integration via Node Addon, and comprehensive desktop API. Disadvantages include high CPU/memory usage due to Chromium's multi-process architecture, window creation delays, and higher hardware requirements.