Multi-terminal unified development framework-Taro

Multi-terminal unified development framework-Taro

Taro-Multi-terminal development framework

What is Taro?

Taro is a multi-terminal unified development framework created by JD-Bump Labs that follows the React syntax specification.

Nowadays, there are various types of end-ends on the market. Various end-ends such as Web, App (React Native), WeChat applets, etc. are popular. When business requirements are required to perform on different ends at the same time, write for different ends. The cost of multiple sets of codes is obviously very high. At this time, the ability to adapt to multiple ends with only one set of codes is extremely needed.

With Taro, we can write only one set of code, and then use Taro's compilation tool to compile the source code into code that can be run on different ends (WeChat applet, H5, App, etc.). At the same time, Taro also provides out-of-the-box syntax detection and automatic completion functions, which effectively improves the development experience and development efficiency.

What can Taro provide?

Write once, run on multiple terminals

Since it is a multi-terminal solution, Taro's most important ability is of course to write a set of codes that can be run by multiple terminals. At present, Taro already supports a set of codes to generate H5 and small programs at the same time, and the App side (React Native) side will also be supported soon. At the same time, terminals such as fast apps will also be supported.

At the same time, Taro has also been put into use in the production environment. At present, it has supported the development of a 30,000-line code applet and some JD shopping applets. In the future, it will also support more JD core business applets.

Modern front-end development process

Unlike the small program framework that comes with WeChat, Taro actively embraces the existing modern development process of the community, including but not limited to:

  • NPM package management system
  • ES6+ syntax
  • Free resource citation
  • CSS pre-processors and post-processors (SCSS, Less, PostCSS)

For the compilation process of WeChat applets, we got inspiration from Parcel and developed a set of packaging mechanism to continuously deliver the AST. Therefore, the speed of code analysis has been greatly improved. A 2015 15-inch RMBP only takes about 15 seconds to compile hundreds of components.

API and componentized system exactly the same as React

In Taro, you do not like a small program like distinguish between what is a Appcomponent, what is Pagethe component, what is the Componentassembly, all TaroComponent components, and the life cycle and React exactly the same. It can be said that once you master React, you almost master Taro. And the resources for learning React are almost full of resources, so there is no need to worry about learning.

Taro, like React, also uses declarative JSX syntax. Compared with the template syntax of strings, JSX is more handy when dealing with delicate and complex requirements.

//  Taro  
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
export default class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      title: ' ',
      list: [1, 2, 3]
    }
  }
  
  componentWillMount () {}
  
  componentDidMount () {}
  
  componentWillUpdate (nextProps, nextState) {}
  
  componentDidUpdate (prevProps, prevState) {}
 
  shouldComponentUpdate (nextProps, nextState) {
    return true
  }
  add = (e) => {
   //dosth
  }
  render () {
    const { list, title } = this.state
    return (
      <View className='index'>
        <View className='title'>{title}</View>
        <View className='content'>
          {list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}> </Button>
        </View>
      </View>
    )
  }
} 

Good development efficiency and experience

Since the syntax of Taro is exactly the same as React, the editor/IDE can support Taro almost the same as React. Modern editors support JSX by default. If not, finding a plug-in is very easy. But after all, we do Taro to improve development efficiency and development experience, and the people who really use Taro are ourselves or colleagues sitting next to us. Therefore, on this basis, we have further enhanced the Taro development experience.

Custom ESLint rules

We mentioned before that when you learn React, you will almost know Taro. One of the most important reasons is that we have separately written ESLint rules for syntaxs and features that Taro does not support: developers just write the code, and the editor will report errors when they write to the syntax/features that are not supported, and give an error message and a document address. description.

Type safety and runtime detection

JSX is the essence of JavaScript syntax enhancements, for example, so there is no importgrammatical errors and other components can be found at compile time. Developers can also use TypeScriptor Flowto further enhance the reliability of the code, or use PropsTypeto further protect the robustness of the code at runtime.

Efficient auto-completion and ES6+ syntax

All Taro APIs (including end-capability interfaces such as WeChat applets) have intelligent reminders and automatic completion, including interface parameters and return values.

Taro's design ideas

Our original intention is to make a solution that can adapt to multiple terminals. Combining business scenarios, technology selection and front-end historical development process, our solution must meet the following requirements:

  • The code is reused at multiple ends, which can not only run on the most popular H5, WeChat applets, and React Native, but also leave room and possibility for other popular terminals.
  • Perfect and powerful componentization mechanism, which is the cornerstone of the development of complex applications.
  • Combine organically with the current team technology stack to effectively improve efficiency.
  • Learning costs are low enough
  • The ecology behind it is powerful

It is not easy to meet these requirements at the same time. After thorough investigation and thinking, we found that only the React system can meet our needs. For WeChat applets, there is no way to develop them using React - until we get inspiration from the codemod :

Under an excellent and strict specification, from a higher abstract perspective (syntax tree), everyone writes the same code.

In other words, for the side that is not open or open source, such as WeChat applet, we can first analyze the React code into an abstract syntax tree, generate template code supported by the applet based on this tree, and then make a runtime framework for the applet. The event and life cycle are compatible with the applet framework, and then the business code is run in the runtime framework to complete the adaptation of the applet.

For the end that React already supports, such as Web, React Native and even the future React VR, we only need to pack a layer of component library and do some style support. In view of the popularity of small programs and the degree of business focus of our team, the API of the component library is based on the small program, and the APIs of other component libraries will be consistent with the components of the small program.

Technology selection and trade-offs

In our previous community, there have been many excellent frameworks that have explored multi-terminal adaptation with small programs as the core. We have compared the main features and characteristics of each development framework and made a chart. You can select and weigh based on the team's technology stack, technical requirements, and framework characteristics and characteristics.

Concluding remarks

After several months of development, Taro went from the first commit to a large-scale project involving 16 packages and more than ten students. At the same time, Taro has also supported the development of several complex business online projects in the production environment, and will support more JD businesses in the future.

Taro's technical solutions and implementation are also rooted in the community, and we also hope to contribute our own strength to the development and growth of the technical community. Adhering to the fine tradition of open source, openness, and sharing of JD O2 Lab, today we open source all Taro code to provide a complete set of technical solutions for developers to quickly develop multi-terminal projects. In the future, we will continue to expand Taro's existing capabilities, support more end capabilities, continue to improve the developer experience, improve developer efficiency, help more developers, and at the same time draw nutrients from the community to make Taro stronger.

Official website: taro.aotu.io/

GitHub: github.com/nervjs/taro

If you haven t heard of Nerv, you can check it out here: nerv.aotu.io/

Thank you for reading this article from the bump laboratory All rights reserved. If reprinted, please indicate the source: Aotu Lab ( aotu.io/notes/2018/ )