Mars – and double 叒 yi a multi-terminal development framework? This time it is Vue drive and it fits perfectly with H5

Introduction of Mars

1. What is Mars?

Mars is a multi-terminal development framework driven by Vue. Its syntax fully follows Vue and supports a set of code to run simultaneously to Baidu applet, wechat applet and H5 Web terminal.

Mars was born in the context of searching vertical products for the same product business requirements for applets and H5 Web. From the beginning of the framework design and development, it is positioned to solve the reuse and isomorphism development ability of small programs and H5 Web end. Mars comes from real business scenarios and pain points. Now we have preliminarily achieved our goals and opened source it. We hope to solve some similar needs and problems of you and also hope to listen to your feedback.

Another wheel?

With the rise of the applets ecosystem, various applets development frameworks emerge in an endless stream on the market, some of which are based on Vue driven frameworks (such as MPVue, Megalo, etc.). So what is the difference between Mars?

A. Mars supports full native custom component capabilities that support more features than applets template-based implementations.

B. Mars development specification is clear. Its development mode follows Vue specification, and basic components and API specifications follow small program specification. Reduces developer learning costs while providing complete specification support for multi-endpoint adaptation.

C. Mars provides a complete H5 Web end adaptation solution, and provides a great degree of adaptation (including App framework, routing, page transition, life cycle, page method and configuration, etc.) for H5 on the framework, basic components and API. Developers only need to make low-cost adaptations of a few components and apis that don’t work due to platform differences to run perfectly on H5 (see the example below).

D. Performance optimization. Mars implements data change detection with a vUe-based responsive system, and only changed data and computed data are synchronized from Vue to applets.

Mars is another small program development framework, but provides strong support for H5 adaptation, mainly to solve the small program H5 end adaptation was born. Mars is well suited for development scenarios that have homogeneous development requirements on the applets and H5 Web sides.

3. Why choose Vue technology stack?

Why Vue technology Stack? The main considerations are as follows:

A. Vue is the technology stack for searching vertical business, and choosing Vue technology stack can reduce some learning costs;

B. The current vUe-based small program framework cannot well solve the H5 terminal isomorphism development requirements, while the React Technology stack has Taro framework to provide H5 terminal solution;

C. Vue runtime provides powerful data-driven capability. Vue’s single-file component development mode and template syntax have good development experience, and it is easy to connect with small programs and other platforms. Its technology stack has a strong ecology and has the ability and space of multi-end adaptation expansion.

4. Is it really a perfect fit for H5?

Mars has made maximum adaptation and experience optimization for H5. You can see two online cases of Baidu mini program and isomorphic H5 version. The experience in this case can be achieved only through low-cost adaptation of a few components and apis that are not suitable due to platform differences. See the multi-endpoint adaptation section for more details on adaptation.

case	Baidu intelligent small program	H5
With xin home
Theory of health preservation

Learn more about Mars

Design ideas

The Mars framework is designed to split applications across multiple ends into a logic layer and a view layer. The logic layer uses the same core runtime for data-driven and life-cycle management, and the view layer uses the same template syntax, which is compiled into a platform-specific view language.

Principle of the framework

Considering the cost of learning, the degree of ecological improvement, the scalability on multiple ends, business scenarios and other reasons, we choose Vue technology stack, adopt Vue single file component and template syntax to write component code, introduce standard base component and API specification and standard life cycle specification.

On the basis of this development specification, the view layer is constructed based on Vue template syntax and basic components, and the logic layer is constructed based on Vue data-driven and standard life cycle specification to realize multi-terminal operation. The general schematic diagram of the framework is as follows:

features

Vue drive

• The syntax specification fully follows Vue
• Vue features are highly supported on the applet side

Perfect H5 experience

• The applets feature is highly restored at the H5 end
• Detailed experience optimization in H5 Web scenarios

Modern development experience

• Single file component development
• CLI support
• Custom build configurations

H5 adaptability

Mars provides a high degree of adaptation to H5 in the framework, basic components and apis, enabling low-cost adaptation and a good experience on the H5 side. Taro is an excellent framework for multi-terminal development of the React stack. We have consulted on the H5 adaptation design and added some features to support it. The configurations and event methods supported by Mars in H5 are compared to the following.

page

configuration

Page event method

Base components and apis

The basic components and apis of the Mars framework follow the definitions and specifications of the components and apis of applets, refer to the applets documentation. Please refer to the “Components” and “API” sections of the documentation for the adaptation support on the applets and Web sides.

Multiterminal adaptation

The Mars framework provides the following adaptation solutions for components and apis that cannot be adapted due to platform differences, or for multiple business logics.

1, JS

Through the environment variable process.env.mars_env

if (process.env.MARS_ENV === 'h5') {
    // The contents of this code block are only rendered to h5
    // todo ...
}
else if (process.env.MARS_ENV === 'swan') {
    // The contents of this code block are only rendered to the swan end
    // todo ...
}
else if (process.env.MARS_ENV === 'wx') {
    // The contents of this code block are only rendered to the WX side
    // todo ...
}
Copy the code

2, the template

Check by template < template-Mars target=”h5/swan/wx”>

<template-mars target="h5" >.</template-mars>

<template-mars target="swan">.</template-mars>
Copy the code

3, style

Through the < style target = “h5 / swan wx” > < / style >

<style target="swan/wx">// The style here is only compiled to swan/wx</style>

<style target="h5">// The style here is compiled to H5 only</style>
Copy the code

How to Run

If you’re ready to give it a try, here’s how to run it:

Mars - cli # installation
npm install -g @marsjs/cli

# create project
mars create [projectName]

# Optional:
# Whether to support H5, if you need to support H5, please select: applets and H5? Select create project type: (Use arrow keys) ❯ applet and H5 applet onlyStart the project (the small program needs to use the development tool to open the corresponding dist directory, H5 directly access to view)Mars serve [-- target, -t swan (default) | wx | h5]Copy the code

For more framework introductions and development guidelines, go to:

• Github: github.com/max-team/Ma…
• Mars official website: max-team.github. IO /Mars/