1. The era of mobile Internet with Chinese characteristics
With the opening of the QQ applet to users, this giant with 700 million monthly mobile phone users has officially entered the market. Small programs have finally become the standard configuration of super apps.
Inventory of super apps that already support applets:
WeChat, Enterprise WeChat, QQ, Alipay, AutoNavi Maps, Mobile Taobao, Baidu, Baidu Tieba, Baidu Maps, Toutiao, Douyin...
Behind these bright and dazzling names are huge traffic.
With the support of this group of super apps, China's mobile Internet landscape has been completely changed.
This era of mobile Internet with Chinese characteristics is called the "small program era".
This is the second representative thing that China's mobile Internet leads the world after mobile payment.
For the first time, China's technical standards and developer ecology have been widely used on a large scale, and it is obvious that Mini Programs surpass HTML5 in terms of functionality and experience.
Can the Chinese build a developer ecosystem? This proposition was once doubtful.
The small program has completed this breakthrough, which is a praiseworthy history of the development of China's technological ecology.
Let us review how this technological ecological revolution started, and where it will go.
2. Rome was not built in a day, and applets were not invented in a day
HTML5 was approved by W3C in 2007, the same year as the iPhone was released.
Jobs had expected HTML5 to help the iPhone build an application ecosystem.
However, the development speed of HTML5 is not as expected. Although it has successfully achieved the goal of breaking the monopoly of IE+Flash, it has not reached the point where it can carry an excellent mobile Internet experience.
So after the iPhone gained a firm foothold, it released its own App Store, opening the era of native applications for the mobile Internet.
The subsequent Android was originally a Linux-based OS. At the same time, competitors such as MeeGo adopted the dual-mode application ecological strategy of C + HTML5. However, the development of C is too difficult, and the HTML5 experience is not good. Android relies on the Java technology ecosystem to stand out from the competition.
So in the early days of the mobile Internet, the application ecology was set the tone - native development.
At that time, the hardware was not good, and there was no other way. Only native development could bring commercial experience on low-end hardware.
But everyone is missing HTML, the feature of instant access to secondary pages without installation and updates, has always been fascinated.
There are a group of domestic browser manufacturers trying to improve HTML5, and they put forward the concept of light application .
By extending the native capabilities of WebView and supplementing the JS API, HTML5 applications can achieve more functions.
However, this kind of business has not been successful. The problem of HTML5 is not only the lack of functions, but also the more serious problem of performance experience, and the problem of experience cannot be solved simply by extending JS capabilities.
The pinnacle of this type of business development is WeChat's JS SDK.
As the largest mobile browser in China, WeChat has expanded its browser kernel with a large number of JS APIs, allowing developers to use JS to call WeChat payment, code scanning and many other functions that HTML5 cannot do.
However, the WeChat team is still dissatisfied with the experience of this solution. Although many applications such as taxis and financial management in the WeChat wallet column are embedded with JS SDK, each click has to wait for a long time for a white screen, which makes it very painful to use. They started in the industry. Find new solutions.
Professional teams in the industry have seen the same problem for a long time.
Unlike browsers, Hybrid apps are another segment. They provide developers with tools to write cross-platform applications using JS. In order to make JS applications closer to the functional experience of native applications, practitioners in this industry have made many attempts.
DCloud, where the author works, is one of them. We have proposed a solution to improve HTML5's "performance" barriers—through tools, engine optimization, and development mode adjustments, developers can write JS experiences that are closer to native Apps. Applications.
Multi-WebView mode, native takeover of transition animation, pull-down refresh, Tab paging, pre-loading WebView... Various optimization technologies are constantly iterated, and finally the Hybrid application has achieved a breakthrough in performance experience.
Compared with ordinary light applications, Hybrid applications have another huge difference: one is Client/Server, and the other is Browser/Server. To put it simply, Hybrid applications are apps written in JS that need to be installed, while light applications are online web pages.
The C/S application only needs to obtain JSON data from the Internet every time the page is loaded; while the B/S application needs to load the page DOM, style, and logic code from the server every time in addition to the JSON data, so the B/S application The page loads slowly and the experience is poor.
However, although such a C/S application has a good experience, it loses the dynamism of HTML5, and still needs to be installed and updated, and cannot be clicked and used directly to reach the secondary page.
So can the dynamics of C/S applications be resolved? In this regard, we proposed the concept of streaming application, which packaged and published the JS code running on the client side in the previous Hybrid application to the server, formulated a streaming loading protocol, and the mobile phone engine dynamically downloaded these JS codes to the local, and for the first The loading speed is faster, and the application can be downloaded and run at the same time.
Just like streaming media broadcast while downloading, applications can also be downloaded while using.
Under the protection of this solution, various previous problems have finally been solved: the JS application function experience can be native, and it can be used immediately and directly to the secondary page.
Now it seems that this has become common sense. But in those years, the pioneers made countless arduous explorations.
This set of technologies requires the client engine to be preset on mobile phones in advance, just like the popularization of streaming media, based on the huge installed capacity of Flash, it is very important to popularize this client engine.
In 2015, 360 cooperated with DCloud to embed this client engine in the 360 mobile assistant, and launched the industry's first commercial small program, which 360 called 360 micro-app.
The micro-app is implemented on the app download page of the 360 mobile assistant, and a "second open" button appears at the same time, which can be used directly after clicking.
And in the scanning code of the 360 mobile assistant, in the sharing of the application, it is realized to scan the code to get an application, and click to share the message to get an application.
In order to expand the ecology, DCloud donated this set of technical standards to the HTML5 China Industry Alliance. Afterwards, the alliance began to promote more super App and mobile phone manufacturers to join in and jointly promote the development of the dynamic App industry.
However, things are not going well, and the giants have their own interests. Although a group of manufacturers agreed to join the alliance to build an ecosystem, the most critical role, the real national application "WeChat", finally decided to establish its own standards and self-developed engines. Of course, the technical principles are basically the same as streaming applications.
On January 11, 2016, in the WeChat public class, Zhang Xiaolong made a rare appearance and announced the plan of the WeChat application account, and personally stood up for this big event.
On September 21, 2016, WeChat announced that the application number was changed to a small program, which was open to the first batch of developers for internal testing. Since then, the word has been officially settled, and "small program" has become synonymous with the following era. However, "streaming applications" and "micro-applications" are submerged in the long river of history and become an embarrassing story.
On January 9, 2017, WeChat public classes and mini programs were officially launched for users.
Since then, Alibaba, Mobile Phone Manufacturers Alliance, Baidu, and Toutiao have launched their own mini-program platforms one after another. There are also many twists and turns and stories. In the process of chance and necessity, today's situation has been formed.
The wave of small programs involved more people and formed a bigger wave, finally ushering in the irreversible era of small programs.
3. The ecology is difficult, and it is difficult to reach the blue sky
Inventing a technical solution that can solve functional experience and dynamics is difficult, but it is not the most difficult thing.
The most difficult thing is the construction of the developer ecosystem.
The initial strategy of the HTML5 China Industry Alliance was to expand and strengthen HTML5 and reuse the existing HTML5 ecology.
When WeChat's standards were completely rebuilt on their own, people in the industry were worried.
Globally, the web-based technology ecosystem is very mature, and various development tools, frameworks, components, templates... improve the efficiency of developers.
The applet discards the DOM and Window standards of the International Standards Organization W3C, and only uses basic JavaScript. This means that the various wheels of the HTML5 ecosystem cannot be reused, and a new applet development ecosystem must be completely rebuilt.
When WeChat promoted the JS SDK, it was so natural that developers began to use it one after another, because for developers, they just added some APIs to their H5 version.
In the early days of small programs, there were many doubts from developers : My business has been iterating for so long, let me make a new version, can your ecology support my investment?
WeChat's continuous and rapid version upgrades and the platform of executives told everyone WeChat's determination to make a small program, and finally detonated the small program through the jump at the end of 2017.
From then on, everyone's question is no longer whether I should make a small program, but turned to: If I want to do it, how can I improve the development efficiency of the small program and reduce the development cost?
The evolution of any technology or development model follows a similar law of maturity in the process of continuous maturity:
Technical Standards -> Basic Platform -> Development Tools -> Training Market -> The Framework Is Born -> The Surrounding Ecology Is Gradually Improved -> Wheels on Wheels
In the HTML5 ecosystem, it has developed to the ultimate form. For example, Vue is an important framework, and various rich UI libraries and testing frameworks based on Vue are wheels on wheels.
Multi-layer wheels represent the prosperity of the ecology, and also mean that the development efficiency of developers is higher.
But when WeChat’s new standard appeared, it pushed developers back to the primitive society, and everything had to be done again.
At the time, it seemed that this was not something that was bound to succeed (in fact, until now, such as chart wheels, applets are still inferior to HTML5).
Today, it is meaningless to discuss whether the choice of this standard is right or wrong. When Alipay, Baidu, and Toutiao all began to refer to this standard to make small programs, the times were unstoppable.
Fortunately, the final result is that the Chinese made it. In addition to international standards, China has finally established its own technological ecology.
And this ecology has brought a better experience to users, and brought more traffic and improved monetization efficiency to developers. This is a better ecology than HTML5.
4. The barbaric technological ecological growth rate
In two years, how did China's small program developers advance from primitive society to modern civilization? It's also an interesting history.
Let's take a look at how the small program technology ecosystem grows rapidly, and complete the above-mentioned set of technological maturity routes, that is, from technical standards to wheels on wheels.
In the web world, it has matured to the era when native JS is rarely used. Developers use a lot of frameworks such as Vue, and on the basis of Vue, there are more wheels.
When Chinese developers are facing a new start, they feel the gap in efficiency comparison, since the times are unstoppable, then embrace it. Hardworking Chinese technicians began to vigorously build various peripheral technology ecology of small programs.
The more important thing is the iteration of the development framework . Let's see why each small program development framework is born, popular and declining.
The original WeChat applet was barren, a document + a difficult-to-use IDE, and many efficiency tools such as npm and preprocessors were not supported, and these are already inseparable tools for large-scale projects.
Thus, the first iconic framework appeared - WePY.
WePY was released in 2017 following the WeChat applet, and was originally the work of a personal engineer from other departments of Tencent. At that time, WePY effectively solved the pain point that small programs did not support npm and preprocessors. After being detonated, Tencent officially incorporated this framework into the official GitHub.
However, WePY also faces many problems. It uses a private grammar, which makes it very difficult in ecological construction. IDE coloring, grammar prompts, grammar verification, formatting, personnel recruitment and training, etc. restrict its popularity. and popularity.
Faced with these problems, people began to think, is there a better way to quickly improve the mini program ecology by reusing the existing technology ecology?
At this time, the next important framework was born, and the front-end of Meituan opened up MPVue in early 2018 .
MPVue uses Vue syntax to develop small programs, and through the underlying transformation of Vue.js, it realizes compiling to WeChat small programs.
MPVue has made good use of Vue's technical ecology. Peripheral tools such as IDE, validator, formatting, etc. support direct reuse, personnel recruitment and training, etc. The ecological construction pressure has been greatly reduced, and has been welcomed by a large number of developers.
Seeing that developers who are familiar with Vue finally have a handy wheel, how can developers who are familiar with React remain indifferent?
The Jingdong team is a heavy user of React and has also developed JDreact by itself, so they developed the Taro framework, a framework for writing small programs based on React syntax.
But Taro does not want to simply make a replica of MPVue in the React world. Compared with MPVue, Taro wants to solve more important problems.
Taro came out late. At this time, WeChat, Alipay, Baidu, and Toutiao have all released or promoted their own mini programs. Developers are faced with a problem of multi-terminal development and adaptation.
So Taro took the lead in supporting multi-terminal development, and it can even publish to H5 and App.
Source: Jingdong Ao-Convex Laboratory
At that time, there was another important change in the field of small programs. WeChat began to support custom components for small programs.
Components are an indispensable thing for a mature framework. Both Vue and React have a rich component ecology.
In the past, in the MPVue era, Vue components were also compiled into page templates, which brought a big performance problem. When using components in complex pages (such as long lists), updating the component status will cause all the data of the entire page to be transferred from JS The logic layer communicates with the view layer once, and a large amount of data communication will be very stuck.
Note: The logic layer of the applet runs under V8 or JSCore, which is separated from the view layer. Communication blocking can easily cause performance problems.
So Taro compiled the React component into a new WeChat applet custom component. When the data is updated, this component only updates the data inside the component instead of updating the data on the entire page, thus greatly reducing the amount of data communication.
This round of back waves pushed the front waves fiercely, and Taro surpassed MPVue in terms of performance and multi-terminal support.
Seeing that the React camp has achieved such results, the Vue camp will naturally continue to pursue.
We developed uni-app based on Vue, which implements the custom component compilation mode and has made a lot of optimizations in the algorithm. In addition, MPVue's syntax support for Vue was not perfect before, such as filters, etc. We did not support it in uni-app.
Similarly, uni-app has also seen other problems of Qianlang: Although Taro has taken the first step in multi-terminal, the multi-terminal support ability is relatively weak, and each platform still develops a large amount of code independently. The core reason is that Taro is not a complete small program technical architecture on the H5 side and the App side, and cannot maintain the greatest degree of unity.
So uni-app uses a small program engine with the same technical architecture on the App side, which can directly run the small program application itself. This engine is packaged as an App with the small program code. The developer does not need to change a line of code, and can publish the small program at the same time. and App.
Of course, its App engine started as a Hybrid application, and it provides many more APIs than applets, because the needs of apps are more abundant than applets, and it also supports replacing the WebView rendering engine with the Weex rendering engine.
Later, uni-app released the H5 version of the mini-program engine. The principle is the same as that of the PC simulator of the mini-program, and it has achieved a good release across the H5 version. So uni-app was developed perfectly once and released on 7 platforms.
In this way, the first layer of wheels developed rapidly, and the most mature Vue and React technology ecology in the web world were introduced into the small program development ecology. Then the wheels on wheels began construction in full swing.
Take the UI library as an example. The previous UI libraries include Vue library, React library, PC library, H5 library and small program library. There are many types, even confusing.
For example, in the Vue camp, the two UI libraries, Vant and iView, both maintain two versions at the same time. They have the H5 version and the applet version.
Not only is the framework author in trouble, but when developers want to use these UI libraries on multiple terminals, they will find that different UI libraries need to be introduced on different terminals, and the writing methods are different, which makes developers very frustrated.
Now that applications can be developed on multiple terminals, wheels on wheels and multi-terminal UI libraries have begun to appear in the field of multi-terminal development .
First of all, Taro launched Taro UI, which realized the unification of H5 and applet UI libraries, but unfortunately Taro UI does not support the App side.
Then uni-app launched uni UI, which supports multiple small programs, H5, and Apps at the same time.
Since uni-app and MPVue belong to the Vue camp, their components are interoperable. So the two jointly organized a plug-in contest and established a plug-in market.
In the field of front-end developers in China, there are many differences from foreign countries: one is that there are small programs in China, and the second is that the number of domestic Vue developers far exceeds React and Angular. The big reason for this is that You Yuxi, the author of Vue.js, is Chinese.
Vue and React Baidu Index Comparison
With the support of the huge Vue user base, the peripheral ecology of uni-app and MPVue has developed rapidly, and the ecology of development tools, peripheral wheels, education and training has been rapidly improved. At present, under the Vue camp, the wheels that developers need in the Web ecosystem are basically available under multi-terminal development.
In just two years, there have been several iterations in the small program development ecosystem, and wheels on wheels have continued to emerge, quickly entering a mature stage.
About the author: Wang An, founder of DCloud, secretary-general of HTML5 China Industry Alliance. Started working on mobile Internet in 2003, more than ten years of programming and business experience, serial entrepreneur.
Transferred from Mini Program Technology Evolution History