Taro is a multi-terminal development framework developed by Bump Lab that follows the React syntax specification.

Using Taro, we can only write one set of code, and then compile the source code separately into codes that can run on different ends (wechat applet, H5, App, etc.) through Taro’s compilation tool. Implementation of a preparation, multi – terminal operation.

  1. Relationship with JDreact

    Taro is based on nerv.js. Nerv is a Virutal-DOM-based Web framework that was developed in early 2017 without relying on any third party libraries.

  2. Pain points of resolution

    It will mainly solve the problem of how to adapt the same set of Web side code to the growing variety of small programs

  3. Support the client

  • H5, micro letter small program, Baidu intelligent small program, alipay small program ———————— these functions are very good

  • ———————— has limitations. The limitation of Expo is Taro

Examples of online projects:

Modern front-end development processes

Unlike wechat’s own mini program framework, Taro actively embraces the community’s existing modern development process, including but not limited to:

  • NPM package management system
  • ES6 + syntax
  • Free resource references
  • CSS Preprocessor and post-processor (SCSS, Less, PostCSS)

Taro took inspiration from Parcel for the process of compiling wechat applet, and developed a package mechanism to deliver AST continuously, so the speed of code analysis can be greatly improved, and one-click fool-command compilation can be guaranteed without increasing the threshold of entry or learning.

React has the same API and componentized system

Taro is an App Component, a Page Component, and a Component. They are all Component components and have the same lifecycle as React. It’s safe to say that once you’ve mastered React, you’ve almost mastered Taro. There are plenty of resources to learn React, so you don’t have to worry about it.

Taro uses the same declarative JSX syntax as React. JSX is much more comfortable handling sophisticated requirements than the template syntax for strings.

// a typical Taro Component 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: 'home ', 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' The onClick = {this. Add} > add < / Button > < / View > < / View >)}}Copy the code

As can be seen from the code, Taro is based on Nerv and combines the advantages of wechat mini program and React Native, as well as the coding advantages of React h5, so that we can transition to Taro without changing our writing habits. React Native doesn’t have the freaky, bloated way of writing code (not completely fixed, not completely fixed, not completely fixed!! >

Taro’s H5 side benefits over React.js

Taro’s advantages over H5 include not only the natural development advantages of having one set of code that can be compiled into other systems, but also NervJS’s advantages:

Performance comparison:

More information: nerv.aotu.io

Causes of Nerv:

In daily development, we prefer React mode to Vue as our development standard, because React is inherently componentized and functionally programmed, which is more flexible and easy to maintain. However, React still doesn’t meet our needs:

  • IE8 compatibility: Under current circumstances, we will support IE8, even if we are reluctant to do so.
  • Size: React is about 130kb in size. Loading speed and parsing speed on low network speed/low version browser/low configuration device were not satisfactory.
  • Performance: The React Virtual Dom algorithm (which calls itself Reconciler) doesn’t do much to optimize it.

Our new wheel, Nerv, offers all of the advantages of React, and it meets our own needs: better compatibility, smaller size, and higher performance.

npm install nervjs --save
Copy the code
Migrate from React to Nerv

Nerv offers better browser compatibility and performance than React without giving up on the React ecosystem. Compatibility with the React ecosystem is one of the key goals of Nerv development.

Nervjs and React and react-dom are all associated in the Webpack alias:

{
  resolve: {
    alias: {
      'react': 'nervjs'.'react-dom': 'nervjs'}}}Copy the code

For other tools, please refer to the official website

Taro’s design idea

To make a multi-end solution, our solution must meet the following requirements based on business scenarios, technology selection and front-end history development process:

  • Multi-terminal reuse of code can not only run in the most popular H5, wechat small program, React Native, but also leave room and possibility for other popular terminals.
  • Complete and powerful componentization mechanism, which is the cornerstone of developing complex applications.
  • Organic combination with the current team technology stack, effectively improve efficiency.
  • Learning costs are low enough
  • The ecology behind it is strong

It was not easy to meet these requirements at the same time. After thorough investigation and reflection, we found that only the React system could meet our requirements. For wechat applets, there was no way to develop them using React — until we got inspired by Codemod:

In other words, we can analyze the React code into an abstract syntax tree, generate the template code supported by the small program according to the tree, and then make a small program runtime framework to handle events and life cycle compatible with the small program framework. Then run the business code in the runtime framework to complete the adaptation of the small program side.

For applications already supported by React, such as Web, React Native, and even the future React VR, we just need a layer of component libraries and some style support. Due to the popularity of small programs and our team’s own business focus, the API of the component library is based on small programs as the standard, and the API of the other component libraries will be consistent with the components of the small program side.

The explanation is as follows:

Users use the same syntax as React, and integrate Taro’s own set of components to develop them as normal web programming. Finally, users input commands, which are converted into components for corresponding platforms through the Taro converter. The syntax still follows the React syntax.

The Taro component has the following [completely found in node_modules @tarojs/components] :

React Native provides 27 components that are familiar and commonly used on the Web

Turn the APP

Taro’s transformation into APP is mainly based on React Native, and combined with Expo, it can be transformed into a project that can run normally in APP

What is Expo??

Expo is a set of tools, libraries, and services that allow you to build native ios and Android applications by writing JavaScript.

Expo Apps is the React Native Apps that include the Expo SDK, a native and JS library that provides access to device systems such as cameras, contacts, local storage, and other hardware. This means you don’t need to use Xcode or The Android environment, or write any code also makes your pure-JS project very portable, as it can run in any natural environment including the Expo SDK.

Expo also provides UI components to handle a variety of applications, almost all of which will be covered, but it won’t break through the Core code of React Native Core, such as ICONS, blurred views, and so on.

Finally, the Expo SDK provides access services that, while difficult to manage, are required by almost every application. Among the most popular: Expo manages your assets for you, it handles push notifications for you, and it builds native binaries ready for deployment to the application store.

Said so much, what meaning ah??

Even though we have written a set of code in our normal development, the environment still needs to be configured separately. That is to say, even if you develop the APP with Mac and React Native, the Xcode and Android environment still need to be configured. After all, such environment is required for the running and packaging of the APP. It has its own SDK. Developers don’t have to worry about what version of React Native they use, but the only requirement is that you install the Expo SDK for each version of React Native.

Taro: An Taro project is an Taro project. Taro: An Taro project is an Taro project.

Taro Build project – Run the command Taro Build — Type RN — Watch — display the image above — make sure to scan the image above with the Expo APP on your Android or iOS phone in the same domain as your computer

However, I have tried, and there are other methods, that is, directly open the simulator, install the APP of Expo in the simulator, and then directly run the command. The whole process is smooth, but there are still some barriers to open Expo, that is, you have to register an account and log in first. But the purpose is to serve you better. Transfer – >

Post a picture of the webpage and APP:

Taro is an APP 【React Native】, and he is an android emulator. It is not an android emulator. It is not an android emulator, but it is an android emulator. React Native styles can’t be nested, just like React Native styles. In this way, SASS or LESS has no advantage.

ENV_TYPE. Appellate P appellate environment of wechat

ENV_TYPE.SWAN Baidu applet environment

ENV_TYPE.ALIPAY small program environment

ENV_TYPE.TT Bytedance applet environment

ENV_TYPE. WEB WEB (H5) environment

ENV_TYPE. RN ReactNative environment

conclusion

On the whole, IT is relatively easy to get started. Based on the inspiration of Codemod, I also integrated some excellent third-party libraries to achieve the goal of a set of code, which can be compiled and run multi-side. However, I also encountered some drawbacks, such as the lack of Webpack-Runner. And need to go to node_modules @taro folder manually installed one by one, but still can be slowly solved, it is a better solution to solve the three-terminal problem.