Skip to content
he110
Back to blog

Cross-Platform Frontend

Comparing the pros and cons of three cross-platform approaches—Web rendering, native rendering, and self-rendering engines—and organizing the layered structure of an app.

Updated

Cross-Platform Overview

Classification

The mainstream classification is by rendering approach: Web rendering, native rendering, and self-rendering engine rendering.

Web Rendering

A webview is embedded in the app, front-end HTML is loaded through the webview, and native capabilities are implemented through solutions such as JS Bridge.

Common tools include Electron; uniapp also renders with webview by default.

Advantages:

  • Good compatibility: any platform that supports webview can be ported and adapted quickly, with few compatibility issues
  • High development efficiency: web code can be quickly migrated to an app, with a low learning curve
  • Good maintainability: the underlying design separates the app layer from the web layer, so there are fewer concerns during development
  • Supports online upgrades: as long as the app side and the JS Bridge remain unchanged, you can upgrade directly by replacing the app pages

Disadvantages:

  • Poor performance: the webview must be initialized first, then you wait for the web first-screen render (white screen)
  • Limited functionality: constrained by the capabilities the JS Bridge provides; some native capabilities cannot be fully provided, such as sensors
  • User experience differences: there is no guarantee that the webview capabilities provided by each platform are consistent, so experience differences may occur

Native Rendering

Native rendering converts front-end code into native components through a Bridge to build native applications, which can solve Web rendering problems such as webview initialization and white screens.

Common tools include uniapp's nvue mode, React Native, Weex, Kotlin, and so on.

Advantages:

  • Better performance: rendering with native components is faster than Web rendering
  • Native capabilities: full native capabilities can be used, including camera, sensors, Bluetooth, and so on

Disadvantages:

  • High development cost: besides web code, you often need to touch native code on each platform, such as Java, Objective-C, and so on
  • Difficult updates: updates can only be delivered through app stores or by downloading installation packages in the background
  • Complex cross-platform support: some native capabilities have different levels of support and implementations across platforms, requiring separate per-platform implementations

Self-Rendering Engine Rendering

Self-rendering engines abandon native rendering and use lower-level OpenGL capabilities to render views, offering better performance and a more consistent cross-platform experience.

Common ones include Flutter, QT, Unity, and so on.

Advantages:

  • Highly customizable: interactions and visual effects can be customized according to business needs
  • High performance ceiling: no extra conversion; the rendering result is controlled directly, the overall pipeline is short, and performance is stronger
  • Technology independence: not dependent on native rendering; self-rendering guarantees a consistent experience across platforms and reduces compatibility problems

Disadvantages:

  • High development difficulty: knowledge of computer graphics and similar topics is needed to control a self-rendering engine well
  • Compatibility: the compatibility of the rendering engine across different platforms needs to be considered
  • High maintenance cost: maintaining and testing a self-rendering engine is expensive

Layering

A common practice is to divide an app into four layers:

  1. UI framework: HTML/CSS, Flutter/QT QML, React, and so on
  2. Runtime support: JS Core/V8, Dart/C++, and so on
  3. Platform abstraction layer: Web IDL, self-built abstractions, and so on
  4. Rendering layer: WebKit/Blink/Gecko, OpenGL/Skia, UIKit / ArkUI, and so on