DOCSEARCHbyAlgolia
Submit Docs

Mpx Framework Documentation

repository·master·Indexed 26 days ago

https://github.com/didi/mpx

An enhanced cross-platform framework providing a Vue-like development experience for building high-performance applications targeting Mini-programs (WeChat, Alipay, Baidu, ByteDance, QQ, JD), Web, and React Native (iOS, Android, Harmony). Features include reactive data, Composition API, Single File Components (SFC), and a Webpack 5-based build system. Includes specialized packages such as @mpxjs/api-proxy for platform API normalization, @mpxjs/fetch for request validation and caching, and @mpxjs/perf for performance monitoring.

Tokens
284.2K
Snippets
557
Records
1.3K
Agent score
85%

What's inside Mpx

  1. Overview of Mpx Composition API

    master

    The Composition API in Mpx is inspired by Vue 3 and is designed to improve logic reuse, code organization, and TypeScript type inference. Unlike React Hooks, the setup function in Mpx executes only once during initialization, which simplifies the mental model for developers.

    Key Advantages:

    • Logic Reuse: Uses functions to wrap reusable logic, avoiding the pitfalls of traditional mixins.
    • Flexible Organization: Allows developers to group functional code together, making complex components more cohesive.
    • Type Safety: Built on local variables and functions, making it inherently friendly to TypeScript without the overhead of this-based type inference.

    Note on Implementation: Mpx does not aim for 100% parity with Vue 3's Composition API. Instead, it adapts Vue 3's design philosophy to fit the specific development patterns of Mpx and mini-programs. Some API implementations may differ from Vue 3.

  2. Overview of Mpx RN Component Support

    master
    Mpx provides component support for React Native (RN) environments. The component library is categorized into several groups, including container components, media components, form components, basic components, and others. When developing for RN, only the components and properties explicitly listed in the documentation are supported. Some features may be specific to the RN platform, and users should enable advanced features only when necessary to maintain performance.

  3. Overview of Frontend Unit Testing Tools and Assertion Libraries

    master

    Frontend unit testing involves verifying the correctness of individual functions, modules, or classes. Common tools and libraries include:

    Testing Frameworks

    • Mocha: A feature-rich JavaScript testing framework that runs in Node.js and browsers. Requires additional configuration for assertions, mocks, and snapshot testing.
    • Jasmine: A BDD-style framework that includes built-in assertion and mock capabilities.
    • Jest: A comprehensive, zero-config framework based on Jasmine. It supports parallel execution, source code change detection, and has built-in support for assertions, snapshots, and coverage reports.

    Assertion Libraries

    Assertion libraries are used to verify method returns and instance states:

    • should: BDD-style ((true).should.be.ok)
    • expect: expect() style (expect(true).toBe(true))
    • assert: Node.js built-in module (assert(true === true))
    • chai: A versatile library supporting expect(), assert(), and should styles.

  4. Overview of MPX Framework

    master
    MPX is an enhanced framework launched by DiDi specifically designed for mini-program development. It aims to address the inconveniences of native mini-program development by providing a more robust developer experience and deep performance optimizations.

  5. Overview of Mpx Features

    master

    Mpx is an enhanced cross-platform mini-program framework optimized for developer experience and performance. Key features include:

    • Reactive Data: Supports assignment reactivity, watch, and computed.
    • Composition API: Modern API patterns for logic reuse.
    • Enhanced Template Syntax: Includes dynamic components, class/style binding, inline event functions, two-way binding, and refs.
    • Performance: Optimized runtime (14KB) and compile-time optimizations.
    • Build System: Based on Webpack 5 with persistent caching and compatibility with the Webpack ecosystem.
    • Single File Components (SFC): Component-based development.
    • Cross-Platform: One codebase targeting WeChat, Alipay, Baidu, ByteDance, QQ, JD, Quick App (web), and Web platforms.
    • State Management: Vuex-compliant with support for multi-instance Stores.
    • Tooling Support: TypeScript (with ThisType for type inference), I18n, Unit Testing, E2E Testing, and SSR.

  6. Introduction to Mpx

    master

    Mpx is an enhanced mini-program framework designed to improve development experience and efficiency. It allows developers to build high-performance mini-program applications and output them to various mini-program platforms, Web, and React Native environments.

    Key Concepts:

    • Enhancement over Native: Mpx is an extension of the native mini-program standard, not a replacement. It relies on native capabilities like routing, custom components, event systems, and slots. Users should have a basic understanding of native mini-program development (e.g., WeChat Mini Programs).
    • Framework, not a Component Library: Mpx is a development framework. It is compatible with existing mini-program component libraries like vant or iview.

  7. Overview of Mini-program Framework Runtime Performance Benchmarks

    master

    This documentation provides a comprehensive runtime performance evaluation of various mini-program frameworks. The benchmarks are designed to help developers make informed technical selections by comparing frameworks across several key dimensions.

    Performance Dimensions Measured:

    • Framework runtime size
    • Page rendering time
    • Page update time
    • Partial update time
    • setData call frequency
    • setData data payload size

    Frameworks Evaluated:

    • mpx @2.5.3
    • uniapp @2.0.0-26120200226001
    • taro next @3.0.0-alpha.5 (using Vue)
    • kbone @0.8.3 (using Vue)
    • wepy2 @2.0.0-alpha.20
    • chameleon @1.0.5
    • mpvue @2.0.6

    For developers interested in verifying or contributing to these benchmarks, the test demos are available at: https://github.com/hiyuki/mp-framework-benchmark.

  8. Overview of Mpx Lifecycle Systems

    master

    Mpx provides a unified lifecycle system to bridge differences between various mini-program platforms. The lifecycle system is categorized into four levels:

    • Component Lifecycle: Creation, mounting, updating, and destruction of component instances.
    • Page Lifecycle: Loading, showing, hiding, and unloading of pages.
    • App Lifecycle: Application startup, showing, hiding, and error handling.
    • SSR Lifecycle: Lifecycle hooks specific to Server-Side Rendering.

  9. Overview of Mpx Framework

    master

    Mpx is an enhanced mini-program framework designed to improve development experience while maintaining high production performance. Unlike 'transpilation-based' frameworks (like mpvue or Taro) that convert Vue/React syntax into mini-program syntax, Mpx is an 'enhancement-based' framework. It uses the native mini-program specification and enhances it with advanced web development features.

    Key Features:

    • Data Reactivity: Supports watch and computed properties.
    • Enhanced Template Syntax: Includes dynamic components, style/class binding, inline event functions, and two-way binding.
    • Performance Optimization: Uses native custom components and a dependency-driven setData mechanism.
    • Webpack Integration: Full support for npm, Babel, ESLint, CSS pre-compilation, and code optimization.
    • Single File Components (SFC): Develop using .mpx files.
    • State Management: Follows Vuex specifications with support for multiple instances and merging.
    • Logic Reuse: Supports mixins.
    • Platform Support: Full support for mini-program specifications, including Alipay mini-programs.

  10. Overview of Mpx-cube-ui

    master

    Mpx-cube-ui is a mobile fundamental component library built on the Mpx mini-program framework. It allows developers to write a single codebase that can be output to all mini-program platforms (such as WeChat, Alipay, Baidu, QQ, ByteDance/Toutiao) as well as Web.

    Key features include:

    • Cross-platform capability: Leverages Mpx's ability to compile from WeChat mini-programs to other target platforms.
    • Theme Customization: Provides fine-grained styling (colors, fonts, border-radius, shadows, etc.) using both pre-compiler capabilities and CSS Variables.
    • Extensibility: Designed with a decoupled structure (behavior, structure, and style) to support diverse business design specifications.

  11. Overview of MPX Framework Philosophy and Target Audience

    master

    MPX is an enhanced cross-platform mini-program framework designed to stay close to native mini-program standards. Unlike frameworks that rely heavily on complex DSL transformations (like Web-based frameworks), MPX focuses on providing minimal transformation to achieve maximum capability enhancement. This approach aims to improve developer experience while minimizing the 'pits' (bugs/issues) typically caused by heavy framework abstractions.

    Target Audience:

    • Developers who require high-quality, high-performance mini-programs.
    • Native mini-program developers looking for enhanced capabilities.
    • Developers frustrated by the limitations or bugs of transformation frameworks based on Web-framework DSLs.

  12. Web Output Strategy: Static Vue Templates

    master

    Mpx supports Web output using a static Vue template route. Unlike the React Native (RN) output which uses functional products (via gen-node-react.js), the Web output avoids a separate rendering backbone to prevent decoupling from Vue static templates. Instead, it leverages serialize to generate a tag tree and integrates with the Vue 2.7 build pipeline.

    Key Characteristics:

    • Template Rendering: Uses serialize to produce a tag tree. Static <template is="name"> is converted to <mpx-tpl-name>, while dynamic <template is="{{name}}"> is converted to <component :is="..." />.
    • Data Access: Templates do not directly access the host's data. Instead, they use mpxData props and the created lifecycle hook to mount reactive properties via defineReactive.
    • Component Registration: All named templates are registered in the Vue components field using the prefix mpx-tpl-<name>.