Shifting the main battleground for the Web —
On January 9, 2017, in the morning WeChat launched a small program, for the mobile end family adds new business form and style, when everybody was on this new platform can do, jingdong first launched “jingdong shopping” small programs, then more electricity industry giants are in small programs, from now on, The main battlefield of carrying e-commerce is gradually shifting from mobile apps that require self-built traffic to small programs.
The emergence of small programs for the development of the e-commerce industry has brought great challenges. More and more traffic head after WeChat Internet companies have targeted small program this cake, have launched their own small application platform, such as jingdong, ali, baidu beat, bytes, 360, etc., in order to make our electricity business can quickly ported to these small application platform, help our rapidly expanding business channels, we started a new attempt.
We started experimenting with using technology to find a new technology that would unify all the platforms.
Breakthrough — Birth of the First Generation Architecture
Writing small programs with React?
As mentioned earlier, WePy[1] and mpvue[2] were first developed by the community in order to solve the pain points of multi-end development caused by various application platforms of various sizes, so why don’t we just adopt them instead of “building wheels”?
At that time, the front-end community and front-end framework could not be left without React[3] and Vue[4], which still maintained the dominant position. Both of them are excellent front-end UI frameworks. Moreover, enthusiastic communication between fans of the two frameworks can often be seen on the Internet, generating some sparks of ideas and making the community extremely active.
In 2017, our team bravely abandoned the historical baggage and was honored to introduce the React technology stack. This allowed our team to get rid of kerosene lamps and start plugging in electricity, away from slash-and-burn front-end development. In order to meet the requirements of the business environment at that time for extreme performance and low version Internet Explorer compatibility, we also developed an excellent React like framework Nerv[5], which gave us a deeper understanding of React development ideas and technology stack.
Unfortunately, the community didn’t have a framework for developing small programs using React.
Compared to small programs, React is obviously more modern and formal. React is inherently componentified for our business development, and JSX is more expressive than string templates. That’s when we started thinking, can we write little programs with React? [6]
Rationally explore
By comparing the experience of small programs with React, we can still find that there are many similarities between them, such as life cycle, data update mode and event binding, which provides a very good foundation for us to use React small programs.
However, we should also see a big difference between small programs and Reacts, which is templates. In React, JSX is used as a template for components, while applets, like Vue, use string templates. These are two completely different things, and they are a huge obstacle to our solution exploration. So, in order to achieve our goal of using React to write small programs, we had to address the big difference between the two.
Resolve differences
Since WeChat does not support JSX, we just need to compile JSX into a small program template that will soon run on WeChat. This step can be done with Babel[7].
As a code compiler, Babel is able to compile ES6/7/8 code into ES5 code. The compilation process consists of three phases:
The parsing process, in which lexical, grammatical, and semantic analysis is performed to generate a virtual grammar tree (AST) that conforms to the ESTree standard [8]
The transformation process, which performs the defined operations on the AST, is where the preset and plugin defined in Babel’s configuration file. Babelrc perform and change the AST
A generation process that converts the AST from the previous step to generate a string of object code
Back to our need to compile JSX into a small program template, luckily Babel’s core compiler, Babylon, supports parsing of JSX syntax, so we can use it directly to help us construct the AST. The remote desktop core we need to focus on is how to transform the AST. Get the new AST that we need, and then recursively traverse the new AST to generate the template of the small program.
The above is just the tip of the iceberg for our conversion rules. JSX is extremely flexible and changeable. We can only support the conversion rules by exhaustive methods which are commonly used and recommended by the React official.
The first generation architecture was born
After a lot of exploration, we have been able to turn the React class code into code that can run in a small program environment. But we calm down and think, can we do something else interesting?
We find that in our normal work, our business often has “multi-terminal” requirements. It’s the same business or page that needs to be adapted to applets, H5, and even React Native. At this point, you will find that you may need to repeat the same interface and logic several times.
Therefore, we hope to solve the problem of using React to develop WeChat applets at the same time, can also be adapted to H5, mobile, and various platforms of applets. Write once, run anywhere is believed to be the dream of all engineers.
However, after careful consideration, we will find that it is far from enough to simply convert the code according to the corresponding syntax rules, because different ends will have their own native components, end-to-side API and so on. After the code is directly converted, it cannot be executed directly, but also needs to be adapted at runtime. Therefore, according to the standard of component library and API of WeChat applet, we have implemented component library and API library in other terminals (H5, RN) respectively.
It took about three months for TARO to have a stable structure from the beginning of the project. From the initial intense discussion of the scheme and the collision of various ideas, to the gradual formation of the scheme and the hot development iteration, to the smooth support of the small program end, H5 end and RN end of multiple platforms, the future of TARO has come.
GitHub is Open Source —
On June 7, 2018, the multi-terminal unified development framework – TARO was officially open source.
Taro was a hit as the first development framework to support writing WeChat applets in the React syntax and adapt it to multiple applications. Less than two months after opening source, there are more than 6,600 stars on GitHub Trending, ranking top in GitHub Trending for several consecutive weeks. At the same time, nearly 300 issues have been processed and more than 100 are waiting for feedback and optimization. More than ten projects using TARO have been actively fed back inside and outside the company.
As of December 18, 2019, Taro has 22,254 Stars and 250 civors. The community voluntarily submitted 150+ development cases: Taro-user-cases [9], which includes many cases.