BestHub
Sign in
Tagged articles
45 articles
Page 1 of 1
Architect
Architect
May 19, 2024 · Mobile Development

Implementing Offline‑Capable H5 in Mobile Apps Using WebView and JSBridge

This article explores the architecture and implementation of hybrid mobile applications that run H5 pages with offline package support, detailing communication schemes between JavaScript and native code, JSBridge SDK design, offline package construction, management, version control, and related stability and security considerations.

Hybrid AppJSBridgeMobile Development
0 likes · 33 min read
Implementing Offline‑Capable H5 in Mobile Apps Using WebView and JSBridge
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 8, 2024 · Frontend Development

How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor

This article details the migration of the Cloud Music desktop client from a legacy NEJ‑CEF hybrid to a React‑based architecture, outlines four major performance challenges, and explains the step‑by‑step optimizations—including API preloading, render memoization, virtual‑list replacement, and resource‑usage reductions—that cut startup latency by 48%, eliminated interaction stutter, and dramatically lowered CPU, GPU, and memory consumption.

CPUGPUHybrid App
0 likes · 30 min read
How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor
HelloTech
HelloTech
Apr 18, 2024 · Mobile Development

Understanding JSBridge in Hybrid Mobile App Development

JSBridge is a bidirectional communication layer that lets hybrid mobile apps combine native performance with web flexibility by allowing JavaScript to invoke native functions and native code to call back into the WebView, using techniques such as URL schemes, injected APIs, and platform‑specific evaluateJavascript methods.

AndroidHybrid AppJSBridge
0 likes · 13 min read
Understanding JSBridge in Hybrid Mobile App Development
Tencent Cloud Developer
Tencent Cloud Developer
Apr 11, 2024 · Mobile Development

WebView-Based Offline H5 Implementation and JSBridge Design for Mobile Apps

This article details a hybrid WebView architecture for mobile apps that enables offline‑packaged H5 pages, describes bidirectional JSBridge communication methods, outlines a platform‑agnostic JavaScript SDK, explains package structure and version management, and covers development tools, UI integration, and security measures for stable cross‑platform deployment.

Hybrid AppJSBridgeMobile Development
0 likes · 34 min read
WebView-Based Offline H5 Implementation and JSBridge Design for Mobile Apps
OPPO Amber Lab
OPPO Amber Lab
Oct 20, 2023 · Mobile Development

How Hybrid Apps Communicate: Mechanisms, Risks, and Secure Practices

This article explains the core principles of Hybrid app communication between WebView and native code, outlines common implementations such as Google’s JavaScriptInterface and JSBridge, identifies critical security risks, presents a real‑world vulnerability example, and offers practical mitigation and reverse‑engineering guidance.

Hybrid AppJSBridgeJavaScriptInterface
0 likes · 11 min read
How Hybrid Apps Communicate: Mechanisms, Risks, and Secure Practices
HelloTech
HelloTech
Mar 15, 2023 · Mobile Development

Cross‑Platform Mobile Development: Evaluation and Implementation of Flutter and H5 Hybrid Solutions

The team evaluated cross‑platform options, piloted both Flutter and an H5 offline‑Hybrid approach, found Flutter’s self‑rendering engine delivered superior performance and consistency, and consequently adopted Flutter as the primary framework, dramatically improving development efficiency and UI parity across Android and iOS.

FlutterHybrid AppMVVM
0 likes · 14 min read
Cross‑Platform Mobile Development: Evaluation and Implementation of Flutter and H5 Hybrid Solutions
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
Mar 6, 2023 · Mobile Development

How Huawei Cloud’s Digital Travel App Uses Hybrid Development for Fast Customization

This talk explains how Huawei Cloud’s digital travel mobile app evolved from native to hybrid development, evaluates frameworks like React Native, addresses performance and hot‑update challenges, and outlines practical solutions and future roadmaps for efficient, customizable enterprise travel solutions.

Hybrid AppMobile DevelopmentReact Native
0 likes · 9 min read
How Huawei Cloud’s Digital Travel App Uses Hybrid Development for Fast Customization
HelloTech
HelloTech
Feb 13, 2023 · Mobile Development

Hybrid Native Map and H5 Integration via WebView for Overseas Projects

The project replaces costly Google Dynamic Maps with a hybrid solution that overlays a transparent WebView on a native map component, using a JSBridge to route H5 events and native map interactions, dynamically managing hot‑zone data, thereby cutting service fees, boosting performance, and preserving H5 development flexibility.

HotzoneHybrid AppJSBridge
0 likes · 10 min read
Hybrid Native Map and H5 Integration via WebView for Overseas Projects
Tencent Cloud Developer
Tencent Cloud Developer
Dec 16, 2022 · Frontend Development

Hybird H5 Instant Rendering: Enterprise WeChat's Performance Optimization Practice

Tencent’s Enterprise WeChat team built a hybrid H5 instant‑rendering solution that combines offline packages, global WebView pre‑creation, data pre‑fetching and JavaScript pre‑execution to cut first‑screen time from over a second to about 130 ms, achieving a 97 % pre‑heat container hit rate and dramatically improving interactive performance.

Enterprise WeChatFrontend OptimizationH5 performance
0 likes · 14 min read
Hybird H5 Instant Rendering: Enterprise WeChat's Performance Optimization Practice
Xianyu Technology
Xianyu Technology
Dec 6, 2022 · Mobile Development

iPad Split‑Screen Adaptation and Multi‑Engine Flutter Integration

The article details how Xianyu solved iPad split‑screen challenges by creating a custom UINavigationController subclass to manage dual‑screen price‑comparison and navigation modes, switching to Auto Layout, and implementing a lightweight multi‑engine Flutter architecture that shares isolates and resources while preserving existing navigation logic.

FlutterHybrid AppUI
0 likes · 11 min read
iPad Split‑Screen Adaptation and Multi‑Engine Flutter Integration
Xingsheng Youxuan Technology Community
Xingsheng Youxuan Technology Community
Jun 28, 2022 · Mobile Development

Achieving Near‑Native Web App Experience on Mobile with a Hybrid Stack

This article details a hybrid solution that combines native WebView containers, offline resource packaging, and Flutter Boost integration to deliver web applications with performance and user experience comparable to pure native apps, while enabling instant updates and rich native capabilities on both Android and iOS.

Flutter BoostHybrid AppMobile
0 likes · 15 min read
Achieving Near‑Native Web App Experience on Mobile with a Hybrid Stack
DaTaobao Tech
DaTaobao Tech
Jun 6, 2022 · Mobile Development

Hybrid App Development: Strategies and Framework Comparisons for Mobile and PC

The article reviews hybrid app development strategies by comparing mobile frameworks such as React Native, Weex and Flutter with PC solutions like Chrome‑based H5, Electron and Qt + CEF, and illustrates a staged migration case study of Taobao Live’s client—from pure Qt to Qt + CEF and finally to Electron + Node—to shorten cycles, simplify third‑party integration, and leverage Chromium’s capabilities.

CEFElectronFlutter
0 likes · 12 min read
Hybrid App Development: Strategies and Framework Comparisons for Mobile and PC
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 18, 2022 · Mobile Development

How Ele.me Boosted Holiday Sale Performance with PHA Hybrid App Framework

Ele.me tackled the performance and user‑experience challenges of its major sales events by replacing traditional H5 containers with the Progressive Hybrid App (PHA) framework, enabling native‑rendered TabBar, persistent WebViews, pre‑loading, location‑aware manifests, and comprehensive optimizations that cut first‑screen load times by hundreds of milliseconds.

Ele.meHybrid AppNative integration
0 likes · 14 min read
How Ele.me Boosted Holiday Sale Performance with PHA Hybrid App Framework
Baidu Geek Talk
Baidu Geek Talk
Sep 1, 2021 · Mobile Development

Master Flutter: From Environment Setup to Hybrid App Development

This comprehensive guide walks you through installing the Flutter SDK, configuring environment variables, creating projects and modules, understanding declarative versus imperative programming, exploring Flutter's three-layer architecture, rendering pipeline, platform channel integration, and provides a full counter‑app example with recent version highlights.

DARTEnvironment setupFlutter
0 likes · 17 min read
Master Flutter: From Environment Setup to Hybrid App Development
JD Retail Technology
JD Retail Technology
Dec 3, 2020 · Mobile Development

Technical Overview of JD.com Mobile Checkout: Hybrid H5 and Native Integration

The article details JD.com's mobile checkout architecture, explaining its dual functions of payment selection and post‑payment confirmation, the seven supported payment methods, the hybrid H5‑WebView approach with native interaction, its advantages and drawbacks, and practical implementation guidelines for Android and iOS.

H5Hybrid AppMobile Development
0 likes · 7 min read
Technical Overview of JD.com Mobile Checkout: Hybrid H5 and Native Integration
Xianyu Technology
Xianyu Technology
Mar 19, 2020 · Mobile Development

FlutterBoost 2.0 Architecture Upgrade and iOS Performance Improvements

FlutterBoost 2.0 redesigns the hybrid architecture by assigning each Flutter page its own controller and view, eliminating screenshot‑based transitions, fixing white/black screen glitches, enhancing iOS surface management and lifecycle callbacks, adding extensive documentation and tests, while acknowledging a ~10 MB per‑page memory cost mitigated through stack limits and reuse.

FlutterFlutterBoostHybrid App
0 likes · 12 min read
FlutterBoost 2.0 Architecture Upgrade and iOS Performance Improvements
Dada Group Technology
Dada Group Technology
Feb 26, 2020 · Mobile Development

Introducing Flutter into an Existing Mobile App: Process, Challenges, and Solutions

This article details how a mobile team adopted Flutter for the majority of its app development, compares it with React Native, outlines training, collaborative and hybrid development strategies, presents iOS and Android integration steps, and shares the performance, debugging, and disaster‑recovery benefits achieved.

DebuggingFlutterHybrid App
0 likes · 16 min read
Introducing Flutter into an Existing Mobile App: Process, Challenges, and Solutions
21CTO
21CTO
Jan 5, 2020 · Mobile Development

How Ele.me Scales Its Mobile App Architecture: From MVC to Hot‑Patch

This article examines Ele.me's evolution from a simple MVC mobile app to a modular, decoupled EMC architecture, incorporating hybrid solutions and React‑Native hot‑patching to achieve high performance, low coupling, and rapid updates for billions of users.

Hybrid AppMVChot-patch
0 likes · 9 min read
How Ele.me Scales Its Mobile App Architecture: From MVC to Hot‑Patch
NetEase Media Technology Team
NetEase Media Technology Team
Dec 20, 2019 · Frontend Development

Optimizing H5 Resources and JsBridge in News Client

The NetEase News client boosts H5 performance by packaging static pages into zip files for native offline storage, intercepting WebView requests, redesigning a symmetric JsBridge with unified message IDs and namespaces, and adding pre‑request and WebView pooling, cutting load time from ~943 ms to ~391 ms and improving first‑load speed by up to 75 %.

Hybrid AppJSBridgefrontend development
0 likes · 22 min read
Optimizing H5 Resources and JsBridge in News Client
360 Quality & Efficiency
360 Quality & Efficiency
Sep 20, 2019 · Mobile Development

Hybrid App Native‑JS Interaction: How Native Calls JavaScript and JavaScript Calls Native on Android

This article explains the three main types of mobile applications, focuses on hybrid apps, and provides step‑by‑step instructions for invoking JavaScript from native Android code and calling native methods from JavaScript, including important pitfalls and configuration tips.

Android WebViewHybrid AppJavaScript Interface
0 likes · 4 min read
Hybrid App Native‑JS Interaction: How Native Calls JavaScript and JavaScript Calls Native on Android
AntTech
AntTech
Aug 19, 2019 · Mobile Development

High‑Availability Performance Challenges and Hybrid Solutions for Alipay App in the Mobile Internet Era

The article explains how Alipay evolved from a single‑purpose app to a super‑app, the resulting high‑availability and performance challenges, and how its two hybrid solutions—an H5 container and a mini‑program platform—combined with the mPaaS mobile development platform address complex business, rapid iteration, and openness requirements.

AlipayH5 ContainerHybrid App
0 likes · 13 min read
High‑Availability Performance Challenges and Hybrid Solutions for Alipay App in the Mobile Internet Era
Youzan Coder
Youzan Coder
Jul 26, 2019 · Mobile Development

Flutter Hybrid Integration Solution for Native Mobile Apps

The article presents YouZan’s hybrid integration strategy that packages each Flutter feature as an independent artifact—AAR files for Android and frameworks for iOS—allowing native teams to embed Flutter modules via simple scripts and Maven uploads without needing a full Flutter development environment.

AARAndroidFlutter
0 likes · 12 min read
Flutter Hybrid Integration Solution for Native Mobile Apps
Alibaba Cloud Developer
Alibaba Cloud Developer
May 16, 2019 · Mobile Development

How Xianyu’s FlutterBoost Enables Seamless Hybrid Mobile Apps

Xianyu’s team presents FlutterBoost, a reusable, non‑intrusive hybrid framework that lets large native Android/iOS apps progressively adopt Flutter by sharing a single engine, mapping native containers to Flutter widgets, supporting complex navigation patterns, and optimizing performance for billions of users.

FlutterFlutterBoostHybrid App
0 likes · 13 min read
How Xianyu’s FlutterBoost Enables Seamless Hybrid Mobile Apps
Baidu App Technology
Baidu App Technology
Apr 22, 2019 · Mobile Development

How Baidu App Cut Landing‑Page Load to Sub‑Second with Hybrid Optimizations

This article details Baidu App’s systematic analysis and multi‑layer optimization of its Hybrid landing‑page, covering performance bottlenecks, a CloudHybrid server‑rendered solution, WebView pre‑creation, lazy NA loading, kernel tweaks, intelligent prefetching, and the resulting sub‑second user experience.

AndroidHybrid AppPerformance Optimization
0 likes · 18 min read
How Baidu App Cut Landing‑Page Load to Sub‑Second with Hybrid Optimizations
Xianyu Technology
Xianyu Technology
Mar 7, 2019 · Mobile Development

FlutterBoost: A Hybrid Integration Framework for Mobile Apps

FlutterBoost is a hybrid integration framework that lets large mobile apps progressively embed Flutter using a shared engine and native containers, providing unified page lifecycle, channel‑based messaging, multi‑navigator support, and production‑ready performance, now open‑source after successful deployment in Alibaba’s Xianyu client.

FlutterFlutterBoostHybrid App
0 likes · 14 min read
FlutterBoost: A Hybrid Integration Framework for Mobile Apps
iQIYI Technical Product Team
iQIYI Technical Product Team
Nov 30, 2018 · Mobile Development

Offline Caching System for iQIYI Hybrid App: Architecture, Implementation, and Performance Optimization

The iQIYI offline caching system for its hybrid app provides controllable, selective, compressed and deduplicated resource packages via an automated CLI/GUI workflow, distributes them through CDN, updates in background, and intercepts WebView requests to deliver fast, reliable H5 page loading even on weak or no‑network conditions.

Hybrid AppWebViewoffline caching
0 likes · 8 min read
Offline Caching System for iQIYI Hybrid App: Architecture, Implementation, and Performance Optimization
Meitu Technology
Meitu Technology
Oct 26, 2018 · Mobile Development

Building a Hybrid App Bridge: Architecture, Implementation, and Protocol Design

The article details a production‑ready Hybrid app bridge built with a custom bridge.js that enables bidirectional communication between Native code and H5 pages, outlines its four‑step nativeCall flow, Android compatibility tricks, protocol categories, event hub, proxy requests, and a suite of reusable functional APIs.

Hybrid AppJavaScriptMobile Development
0 likes · 14 min read
Building a Hybrid App Bridge: Architecture, Implementation, and Protocol Design
Meitu Technology
Meitu Technology
Oct 17, 2018 · Mobile Development

Hybrid App Architecture and JSBridge Implementation Overview

The article explains hybrid app architecture, comparing WebView‑based, native‑UI, and mini‑program approaches, and details a custom‑scheme JSBridge that enables bidirectional communication between JavaScript and native code, its injection, callback handling, SDK packaging, and the trade‑offs of online versus embedded H5 integration.

Hybrid AppJSBridgeMobile Development
0 likes · 15 min read
Hybrid App Architecture and JSBridge Implementation Overview
21CTO
21CTO
Jul 15, 2018 · Mobile Development

Mastering WebView Caching: Reduce Network Calls in Hybrid Android Apps

This article explains the principles and practical methods for caching JavaScript and other resources in Android WebView, covering HTTP cache headers, WebView cache modes, storage locations across Android versions, and the use of HTML5 AppCache to minimize network traffic and improve app performance.

AndroidAppCacheCache-Control
0 likes · 16 min read
Mastering WebView Caching: Reduce Network Calls in Hybrid Android Apps
Tencent TDS Service
Tencent TDS Service
May 24, 2018 · Frontend Development

How to Make H5 Pages Load Instantly in Mobile Apps: Proven Optimization Techniques

This article explains why H5 pages often suffer long white‑screen delays in mobile apps and provides a comprehensive set of front‑end, caching, and native integration strategies—including request reduction, preloading, communication methods, and WKWebView tweaks—to achieve near‑native load speeds.

Hybrid AppMobile FrontendWebView performance
0 likes · 10 min read
How to Make H5 Pages Load Instantly in Mobile Apps: Proven Optimization Techniques
Suishouji Tech Team
Suishouji Tech Team
Jan 2, 2018 · Mobile Development

Designing a Secure, Extensible JS Bridge for Android Hybrid Apps

This article explores the challenges of JavaScript‑Native communication in Android WebView, compares Android‑to‑JS and JS‑to‑Android invocation methods, and presents a custom, secure, and extensible JS bridge framework with protocol design, interceptors, annotations, and implementation examples for hybrid app development.

Hybrid AppJS BridgeJavaScript Interface
0 likes · 13 min read
Designing a Secure, Extensible JS Bridge for Android Hybrid Apps
Tencent Cloud Developer
Tencent Cloud Developer
Jan 22, 2017 · Frontend Development

Dazhong Dianping+ WeChat Mini Program Development Experience and Best Practices

The Dazhong Dianping+ WeChat mini‑program, built by a Meituan‑Dianping engineer using a web‑like hybrid approach, launched on Jan 9 with over two million visits, delivering fast store search and group‑purchase services while adhering to strict limits (1 MB bundle, five pages, no external navigation) through gulp builds, ES6/Promise helpers, manual size optimizations, and Tencent Cloud APIs.

Hybrid AppPerformance OptimizationWeChat Mini Program
0 likes · 13 min read
Dazhong Dianping+ WeChat Mini Program Development Experience and Best Practices
Qunar Tech Salon
Qunar Tech Salon
Jan 17, 2017 · Frontend Development

Evolution of Hybrid Routing Architecture: From Hy 1.0 to Hy 2.0 with React, Webpack Code Splitting, and Performance Optimizations

This article traces the development of Qunar's internal hybrid routing solution from the SPA‑based Hy 1.0 to the React‑driven Hy 2.0, detailing the shift to webpack code‑splitting, async loading with react‑router, and the performance and packaging challenges solved along the way.

Hybrid Appcode-splittingfrontend
0 likes · 11 min read
Evolution of Hybrid Routing Architecture: From Hy 1.0 to Hy 2.0 with React, Webpack Code Splitting, and Performance Optimizations
21CTO
21CTO
Mar 23, 2016 · Mobile Development

How to Build a Scalable Mobile E‑Commerce Architecture from Scratch

Learn a comprehensive framework for rapidly constructing a high‑scalability mobile e‑commerce system, covering hybrid app architecture, SOA backend design, container‑based virtualization, private‑cloud deployment, and practical strategies for handling massive traffic spikes during major sales events.

Hybrid AppSOAcontainerization
0 likes · 18 min read
How to Build a Scalable Mobile E‑Commerce Architecture from Scratch
21CTO
21CTO
Jan 7, 2016 · Mobile Development

How Ele.me Scaled Its Mobile App Architecture: From MVC to Hybrid EMC & Hot Patch

This article traces Ele.me's mobile app evolution, detailing the shift from a simple MVC structure to a decoupled module system, the EMC hybrid architecture, and finally a React‑Native plus Hot‑Patch strategy that balances rapid iteration with high stability for billions of users.

App ArchitectureHybrid AppMVC
0 likes · 10 min read
How Ele.me Scaled Its Mobile App Architecture: From MVC to Hybrid EMC & Hot Patch
ITPUB
ITPUB
Dec 1, 2015 · Mobile Development

Meizu’s Hybrid Mobile App Blueprint: Integration, Build Workflow, and Performance Hacks

This article shares Meizu’s team experience building hybrid Android‑H5 apps, covering product requirements, two resource‑loading strategies, the fis3‑based build pipeline, parallel development workflow, a fis3 plugin for switching mock and real code, and practical performance‑optimization tips.

Hybrid AppMobile DevelopmentPerformance Optimization
0 likes · 13 min read
Meizu’s Hybrid Mobile App Blueprint: Integration, Build Workflow, and Performance Hacks
Baidu Tech Salon
Baidu Tech Salon
Dec 10, 2014 · Mobile Development

HTML5, Native Apps, and the Emergence of Hybrid App Development

HTML5, now supplanting older HTML and Flash, enables lightweight, cross‑platform web apps that integrate into native platforms like WeChat, offering low‑cost development, rapid distribution, and richer user experiences, while native apps retain advantages for complex, high‑performance software.

HTML5Hybrid AppMobile Development
0 likes · 8 min read
HTML5, Native Apps, and the Emergence of Hybrid App Development
Baidu Tech Salon
Baidu Tech Salon
Jul 10, 2014 · Mobile Development

How Baidu’s BlendUI Makes Webview Transitions as Smooth as Native Apps

This article analyzes Baidu's lightweight app platform, presents research on web‑vs‑native performance gaps, introduces the BlendUI concept that treats every element as an independent webview, and details its design principles, core implementation, and suitable use cases for achieving native‑level transition smoothness.

BaiduBlendUIHybrid App
0 likes · 14 min read
How Baidu’s BlendUI Makes Webview Transitions as Smooth as Native Apps