preface

Recently, the company launched Chameleon, a relatively new cross-end framework in the community. At that time, the demand was to realize fast application first, and then support H5, wechat applets, byte applets, etc. As the technology stack used by the company is based on vue.js, after making some technology selection, Chameleon was finally selected (start crazy pit 😳).

At this point, some people may ask: why not choose UniApp? Say, uniapp -> quick application is not a pit, is a bomb 💣. Later, I’ll explain why you don’t choose uniapp 😲

However, by rational evaluation, Chameleon is indeed an excellent cross-end framework. As for excellence? (Read more at 😶)

This article will be divided into the following three parts, through the introduction and comparison of the existing front-end cross-end framework, to describe the excellence of Chameleon point by point 😍 :

  • Why do we need cross-ends?
  • Explosively developed front end span frame
  • Future cross-end solutions for Chameleon

1. 😷 Why do we need cross-ends?

Of course, those of you who understand this can skip this section

This problem can be explained in two dimensions:

Variability of demand

There are so many small programs these days… And, for the needs of daily changes, today may and you say is wechat small program, after a period of time, may and you say the same product, you write a fast application version of 😲. For the demand side, they don’t care how you implement the different ends, and they might feel like, well, isn’t it fast if you do the same thing on a different platform?

Maintainability of technology

From the perspective of technical maintenance, this is for us to better maintain the code, try to maintain a set of code to achieve different end products, such as wechat applets, byte applets, fast applications, H5 and so on. Therefore, choosing the cross-end framework development approach brings us the following benefits:

  • Ensure the stability of new functions
  • Quick touble shot when something goes wrong
  • Reduce writing repetitive code
  • and so on…

2. 💥 Explodes the front end span frame

Today, there are many cross-end frameworks available for the front end, Taro, UniApp, KBone, MPvue, Chameleon, and many more. Of course, some of them still have technical limitations. For example, Tencent’s Kbone can only support the isometry of web and wechat mini programs; JD.com’s Taro supports DSL like React, and Uniapp supports DSL like Vue. So, although the framework is much, but still that plain words, suitable for their technical team is the best 🤓️.

Next, let’s take a brief look at the four cross-end frameworks that support Vue DSL: MP-Vue, Uniapp, Kbone and Chameleon:

2.1 mpvue

Mpvue is fork from [email protected], which retains some of the things of Vue2. X, such as using flow for static type detection, some of the default syntax, etc. The design idea of MPVue is to modify the part of Vue2. X runtime and template compilation, and convert the syntax of the compiled AST (abstract syntax tree) to the grammar of the specified end for different platforms, so as to complete the code generation for different ends.

The last commit was 17 months ago

2.2 uniapp

Uniapp I think many students are familiar with it, and it is estimated that some of the front-end students are in contact with it, because of this, after all, DCloud is also known as “famous”. As mentioned above, mpvue’s last commit was 17 months ago, and Uniapp can support converting mpvue projects into UniApp projects (it is estimated that many more users 😏).

Uniapp is indeed excellent in cross-terminal aspect, and introduces the conditional compilation mechanism to support the performance of different terminals. For example, we want to display the user profile picture in H5 and wechat mini program. The former can display the user profile picture through the data provided by wechat, and the latter can be directly obtained by open-data component. So, with conditional compilation we can write:

<! -- #ifdef MP-WEIXIN --><open-data class="img-avatar" type="userAvatarUrl"></open-data><! -- #endif --> <! -- #ifdef H5 --><img :src="avatar" class="avatar" /><! -- #endif -->Copy the code

Conditional compilation will only write code from the platform that meets this condition into the project code for that platform

In addition, UniApp can cross the type of terminal is very complete, also supports fast application. However, unlike other applets, quickapps are self-painted rendering engines, not WebViews. Therefore, uniApp only supports vivo, Oppo and Huawei for fast applications at present.

Therefore, this is also the reason why I gave up UNIAPP in the selection of technology at the beginning. But uniApp also supports the webview version of the fast application, but the Webview version of the fast application and not all manufacturers support…

2.3 kbone

Kbone is a cross-end framework launched by Tencent team that supports isomorphism between Web end and wechat small program end. However, it is obvious that kBone has fewer usage scenarios than the previous two, because it is limited to supporting only the Web side and wechat applet side. However, if the demand is only H5 and wechat small program, obviously KBone is a good choice, after all, the original version (Tencent) technical support.

Then, it’s Chameleon’s turn. The main character is about to appear 😎 ~

3. 🐲 Chameleon’s future cross-end solution

Chameleon, an emerging force in cross-end frameworks, also has its own DSL (feature Domain Language), also known as CML. However, unlike the cross-terminal framework we introduced above, Chameleon extends multi-terminal by using a polymorphic protocol. Here we quote the official introduction:

By defining a unified language framework and a unified polymorphic protocol, Chamleon separates the multi-end (corresponding to multiple independent services) services from the self-developed, continuous, and maintainable front-end mid-platform services.

3.1 Polymorphic protocol

There is a term polymorphic protocol that you may not have seen in the official introduction. So, what is Chameleon’s polymorphic protocol?

First, let’s take a theoretical look at what polymorphic protocols are. Chameleon’s polymorphic protocol design idea 💡 comes from Apache Thrift – a scalable cross-language service development framework. So, what is Apache Thrift?

Apache Thrift is a framework for defining and creating services in an interface description language (API) that supports extensible cross-language service development. In plain English, Apache Thrift enables services created in different languages (Java, C, PHP) to be called to each other.

The polymorphic protocol, one of the core mechanisms of Chameleon framework, draws on this design and provides the way of polymorphic interfaces and components to extend the third party (wechat applet, fast application, byte applet, etc.). For example, we could implement specific apis on different ends by defining polymorphic interfaces, and then use the defined polymorphic interfaces directly at the business code level to implement a method call specific apis on different ends, which would look something like this:

In addition, for the cross-platform currently supported by Default by Chameleon, the compiled code only supports the basic components and APIS officially provided by Chameleon, such as the components list and text commonly used in wechat and fast applications. API setStorage and getStorage etc.

So how do these different ends extend their implementations based on the underlying components and apis specified by Chameleon? Next, I’ll take Chameleon’s implementation of an extended fast application as an example to explain why 😲 ~

3.2 How do I Extend a New terminal

First of all, Chameleon is perfect for cross-app development, but the process is a bit bumpy, so just step on it

So, here’s what you need to do to extend a quick application based on Chameleon. This process is mainly accomplished by six packages:

| - CML quickapp - API # # realize CML provide API | - CML quickapp - plugin # # compile related processing, For example generated. Ux documents, the manifest. Json file | - CML quickapp - runtime # # App, Page and Component Component instance | - CML quickapp - store # # CML State management | - CML quickapp - UI # # realize CML common component | - CML - quickapp - UI - builtin # # realize CML Native componentsCopy the code

There are actually 7 packages and a CML-Quickapp-mixins that do compatibility processing for instructions and events (such as C-model and TouchStart).

As you can see, to extend one end, we need at least 6 packages, and these 6 packages accomplish these 4 points:

And the details of each point need to be implemented, the official documentation has been explained in great detail, not repeated here. This section provides a brief overview of the responsibilities of each package to give students an idea of the debugger source code. Interested students can learn about the code details.

Next, we’ll talk about how to extend a particular API on one side of the business, called a polymorphic interface.

3.3 How can I Extend the API of a Terminal (Polymorphic Interface)?

Suppose we are in a fast-application development scenario and need to add a desktop for the application. The API for adding desktops to quick applications is not included in the official Chameleon document. Therefore, the polymorphic interface needs to be implemented. That is, we need to customize the API for adding desktops to quick applications.

First, create a shortcut.interface file where you define the type of API:

<script cml-type="interface">
  type successCallBack = (res: boolean) = > void
  type failCallBack = (res: boolean) = > void
  type obj = {
    success: successCallBack,
    fail: failCallBack
  }

  interface UtilsInterface {
    installShortCut(obj): void;
    hasInstalled(obj): void;
  }
</script>
Copy the code

As you can see, interface type definitions are pretty much the same as TypeScript type definitions.

Then, in the shortcut.interface file, define a class to add the desktop, which contains two methods: installShortCut() and hasInstalled(), within which the native API of the fast application can be used directly:

<script cml-type="quickapp">
class Method implements UtilsInterface {
  installShortCut(obj) {
    quickapp.shortcut.install(obj)
  }
  hasInstalled(obj) {
    quickapp.shortcut.hasInstalled(obj)
  }
}

export default new Method()
</script>
<script cml-type="web">
class Method implements UtilsInterface {
  installShortCut(obj){}hasInstalled(obj){}}export default new Method();
</script>.Copy the code

Also, attention should be paid to ⚠️ 2:

  • In order to keep the other ends running properly, the shortcut.interface file also needs to declare the corresponding methods of the other ends, so we can use an empty function here
  • You cannot use the Shortcut API directly inside a method. Since shortcut is tied to system in a fast application, and system is injected into the code as QuickApp at compile time, we have to passquickapp.shortcutIs called by

Finally, we can use the add desktop API in our business code, and it will only work for fast applications:

<template>
  <page title="index">
    <text @click="addShortCut"></text>
  </page>
</template>
<script>
import shortCut from ".. /.. /components/utils/shortcut.interface";
  
class Index {
    methods = {
      addShortCut() {
        shortCut.installShortCut({
          success: (res) = > {
            console.log(res)
          },
          fail: (err) = > {
            console.log(err)
          }
        })
      }
    }
}
</script>
Copy the code

Components that extend one side (polymorphic components) are much the same as extension apis. Chameleon-tool also provides the CML init Component command to initialize a polymorphic component template.

3.4 summary

Both polymorphic components and polymorphic interfaces are part of the polymorphic protocol, which also supports polymorphic templates, similar to uniApp’s conditional compilation, that specify which side (root Element only) the component shown in the Template belongs to. Also, I want to know how to use polymorphic components, polymorphic interfaces, polymorphic templates, so that Chameleon development can be said to be arbitrary.

The most convenient is when we have to change a little source haha 😄

conclusion

Chameleon this frame to my feelings, is indeed love and malicious 😷. Because, at that time in the project development process, the fast application team to write the extension has several problems, I in order to ensure the normal online project, so can only be forced to change the source code against the project to go forward 😳, the final project is also successful online. Then, over the weekend, I also put together some understanding of the Chameleon framework and fixed a few quick app extensions (PR incidentally).

Finally, welcome 👏 students who plan to try Chameleon in business to exchange their experience together (add my wechat or public account), if there is a problem in the implementation of fast application, I think I can help one or two, and if there is any improper expression or mistake in the article, you are welcome to Issue ~

reference

A few small programs in the mainstream cross – end framework principle

Chameleon unified language framework + polymorphic protocol

Apache Thrift – A scalable cross-language service development framework

Chameleon extends the new end standard

❤️ Love triple punch

Writing is not easy, please give a thumbs-up if you can, it will become my motivation to keep writing!!

I am Wu Liu, like innovation, tamping source Code, focus on Vue3 source Code, Vite source Code, front-end engineering and other technology sharing, welcome to pay attention to my wechat public number: Code Center.