Native Apps vs H5: Benefits, Drawbacks, and Design Pitfalls

1. Differences Between Native Apps and H5

Native apps are platform‑specific programs that run directly on the operating system, offering strong interactivity, extensibility, and requiring installation.

Advantages of Native Apps:

Stable performance and fast operation.

Direct access to local resources such as contacts.

Ability to implement sophisticated animations.

System‑level notifications provide a good user experience.

Disadvantages of Native Apps:

High development cost due to different languages and UI adaptations for iOS, Android, etc.

High maintenance cost when multiple versions need support.

Slower update cycles because each platform requires separate review and release processes.

H5 (HTML5) pages, also called Web Apps, run in browsers without installation, but are limited by network speed and hardware. As bandwidth and devices improve, H5 performance approaches native experience.

Advantages of H5:

Low development cost; cross‑platform and rapid iteration.

Low maintenance cost; updates are immediate without user action.

Fast update speed; no complex release procedures.

Disadvantages of H5:

Performance constrained by network and hardware; many animations perform poorly, especially on Android.

Cannot access system‑level notifications or advanced effects.

Design restrictions lead to poorer user experience.

2. Current H5‑Based Apps: Pure H5 and H5 Embedded in Native Apps

Pure H5 apps are rare due to limitations, but the railway ticketing app 12306 is a notable example built entirely with H5.

More commonly, apps embed specific H5 features inside a native container, such as JD’s account and security pages, JD White Bar, QQ Interest Tribe, WeChat Mini‑Programs, and the Duoduo business service within DingTalk.

These embedded H5 modules can be updated independently of the native version, providing a consistent experience across platforms.

3. Limitations When Designing H5 Pages

1) Keyboard Integration

Native apps can combine the keyboard and floating layers into a seamless component, while H5 pages rely on the browser’s keyboard, which is separate and limited. Custom keyboards can be built but require significant effort.

2) Accident‑Prone Close Buttons

When many H5 pages are loaded, close buttons appear in the top‑left corner (e.g., Duoduo Business Service, VIP Finance, JD real‑name verification), leading to accidental taps. Removing them requires native support, which may not be available if the native framework lacks an API.

3) Overlay Cannot Cover Native Bar

Standard modal overlays block interaction with underlying content, but in H5 the overlay often fails to cover the native bar, leaving it active and distracting the user.

4) Native Bar Lacks Extensibility

Native bars often host multiple functional extensions, enriching the page. In H5, the native bar at the top cannot adapt to the page’s context, forcing developers to add extra UI elements elsewhere.

4. Summary

The above points reflect common issues encountered when building H5 pages. While H5 offers clear advantages such as low cost and rapid updates, its inherent limitations—network dependence, restricted animations, and UI constraints—remain. By applying thoughtful interaction and UI design techniques, these drawbacks can be mitigated to deliver a better user experience.