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

Product Background

Strong operational capabilities are required.

Interface data comes from CP integration, needing tolerance for variability.

Fast updates and iterations are essential.

Android and H5 Integration Options

Meizu chose a Hybrid App approach. Two main ways to provide front‑end resources to the client are described.

Static Resource Localization

The app bundles a copy of static assets. On launch or when certain conditions are met, it queries the backend for updates; if an update exists, the newest assets are downloaded and used locally, otherwise the bundled or previously cached assets are served.

HTML5 Application Cache

Uses the HTML5 Cache Manifest (MIME type text/cache-manifest) for short‑lived activity or special‑topic pages where rapid deployment and frequent UI changes are needed.

Both methods provide offline access, faster loading, and lower server load.

Page Loading

After a page finishes loading, the client calls the front‑end’s initParams method to pass parameters and initialise the page.

Resource Build

Resources are processed with fis3: compression, concatenation, MD5 hashing, and Babel transpilation for ES6. Custom fis3 plugins enable a single‑command build that produces the final package.

Development Environment Setup

A local web server is run with nodejs + express.

Development Process

The visual design, front‑end, client, and backend teams work in parallel.

Decoupling is achieved through separate interface specifications for backend and Android. Mock data is generated from these specs, allowing independent development.

Three‑Stage Integration

Mock Data Integration: Local mock JSON files are served via AJAX; Android interfaces are simulated to verify front‑end logic.

Real Backend Integration: Remote APIs are called; cross‑origin requests are handled via browser settings or reverse‑proxy (nginx/Apache).

Third‑Party Integration: Final testing with real resources and APIs; the app no longer uses mock code.

Switching among these stages is frequent during debugging. A custom fis3 plugin removes mock code blocks and activates real code during the parser phase, controlled by fis3’s media API.

detail.getUrl = 'json/filmDetail.json';

detail.filmShopsUrl = 'json/filmShops.json';

android.initParams({
    cityName: '珠海',
    lat: '1.23232',
    lng: '2.32324',
    id: 111,
    fromFilmDetail: true
});

android.stopLoading = function(json){
    android.doAndroidAction('stopLoading', '');
};

// detail.reloadShopList('{"cityName": "珠海", "movieId":111,"countyCode": "132ddd"}');

Performance Optimization and Pitfalls

Images

Serve via CDN to reduce latency and cookie overhead.

Combine sprites to lower request count.

Use WebP to shrink file size.

Encode small icons as base64 URLs.

If technical optimisation is impossible, adjust UI/UX to minimise impact.

Viewport

Fixed width – simple, no media queries, works for all devices but may waste space.

Device width – better performance and compatibility; widely adopted by large companies.

When using a fixed width, rendering may show a left‑to‑right scaling effect; applying opacity transitions can smooth the visual.

Animations

Scaling seat‑selection UI in a cinema‑booking page caused blurriness when using transform: scale. Investigation revealed that the older zoom property renders sharper because it scales before rendering, while scale scales after rendering.

Solutions:

Use zoom for crisp scaling.

Use a larger initial scale (e.g., 3×) then quickly reset to 1× via setTimeout.

Conclusion

Front‑end technologies evolve rapidly; the team continuously experiments with React, ES6, and other innovations, iterating on details and performance. Future posts will expand on these topics.