How to Build a Unified Cross‑Platform Frontend with Adaptive UI Layers

What Is Joint Cross‑Platform Development?

We aim to have a single project that serves PC browsers, mobile sites, apps, and mini‑programs, sharing the business‑logic layer while allowing the UI layer to be chosen per platform. This "joint cross‑platform" method complements existing wireless‑only solutions.

Why Existing Cross‑Platform DSLs Fall Short

Current UI DSLs focus on wireless endpoints, use a reduced version of an existing spec, often produce redundant code, are hard to change once adopted, and are limited to wireless platforms. Maintaining them across many platforms incurs high costs.

Designing a Joint Cross‑Platform Solution

We expose an adaptation layer at key points (UI differences, business‑logic differences, library differences) and let the build system extract platform‑specific resources based on this layer. This removes the need for a fixed UI DSL on PC, remains compatible with existing DSLs, and keeps existing tech stacks untouched.

Key APIs

Two API groups handle platform‑specific code and module imports:

import { useModule, modules } from '@ali/union/src/xframe';
// Object style
useModule({
  alert: (e) => {
    e.preventDefault();
    alert('This is a wireless H5 alert');
  }
}, ['m']);

// Function returning object
useModule(() => {
  return {
    alert: (e) => {
      e.preventDefault();
      alert('This is a PC alert');
    }
  };
}, ['pc']);

modules.alert();

For module imports:

import React from 'react';
import { imports, useImport } from '@ali/union/src/xframe';

useImport({ View: './index/m' }, ['m']);
useImport({ View: './index/pc' }, ['pc']);

export default imports.View;

After compilation, the PC bundle resolves to:

import React from 'react';
import View from './index/pc';
export default View;

and the wireless bundle resolves to:

import React from 'react';
import View from './index/m';
export default View;

Implementation Flow

During build, a platform parameter is passed; the AST processor removes nodes whose API parameters do not match, injects the appropriate import statements, and then bundles the code.

Practical Experience

We applied the approach to an international‑site order‑list page that required PC (React + Fusion) and wireless (Rax + Fusion Mobile) stacks. By exposing the adaptation layer, business logic was shared while UI differences were handled per platform, reducing duplicated effort.

Running npm run dev:pc and npm run dev:m compiles both bundles simultaneously; changes to shared logic affect both platforms instantly. Build commands npm run build:pc and npm run build:m generate /build/pc and /build/m directories ready for CDN deployment.

Conclusion

The joint cross‑platform method does not replace existing DSLs; it augments them by providing a flexible adaptation layer that isolates business logic from UI differences, enabling efficient multi‑platform development and easier maintenance.