Таро - мультитерминальная среда разработки

Что такое Таро?

Taro — это многотерминальная унифицированная среда разработки, созданная Jingdong-Bump Labs и соответствующая спецификации синтаксиса React.

В настоящее время на рынке существуют различные формы терминалов.Очень популярны различные терминалы, такие как Web, App (React Native) и апплет WeChat.Когда бизнес-требования должны быть выражены на разных терминалах одновременно, они написаны для разных терминалов Стоимость нескольких наборов кода, очевидно, очень высока В настоящее время крайне необходима возможность адаптации к нескольким терминалам путем написания только одного набора кода.

Используя Taro, мы можем написать только один набор кода, а затем использовать инструмент компиляции Taro для отдельной компиляции исходного кода в коды, которые можно запускать на разных сторонах (апплет WeChat, H5, сторона приложения и т. д.). В то же время Taro также предоставляет такие функции, как обнаружение синтаксиса и автозаполнение из коробки, что эффективно улучшает опыт и эффективность разработки.

taro流程

Что может предложить Таро?

Напиши один раз, запускай много

Поскольку это многотерминальное решение, самая важная способность Taro, конечно же, состоит в том, чтобы написать набор кода для вывода кода, который может работать на нескольких терминалах. В настоящее время Taro уже поддерживает набор кода для одновременной генерации H5 и апплета, и скоро будет поддерживаться и сторона приложения (React Native), и в то же время, такие как Quick Apps и другие терминалы, также будут поддерживается.

В то же время Taro также используется в производственной среде и в настоящее время поддерживает апплет из 30 000 строк кода.TOPLIFEРазработка JD.com и некоторых торговых мини-программ JD.com также будет поддерживать другие мини-программы основного бизнеса JD.com в будущем.

Современный процесс фронтенд-разработки

В отличие от собственной платформы апплетов WeChat, Taro активно использует существующие современные процессы разработки сообщества, включая, помимо прочего:

Система управления пакетами NPM
Синтаксис ES6+
бесплатное цитирование ресурсов
Пре- и постпроцессоры CSS (SCSS, Less, PostCSS)

Для процесса компиляции апплета WeChat мы начинаем сParcelВдохновленный, я разработал механизм упаковки для непрерывной передачи AST, благодаря чему скорость анализа кода значительно повысилась. 15-дюймовому RMBP 2015 года требуется всего около 15 секунд для компиляции сотен компонентов.

Полностью согласованный API и компонентная система с React

В Таро вам не нужно различать, что естьAppкомпоненты, что такоеPageкомпоненты, что такоеComponentКомпоненты, Таро всеComponentКомпоненты и полностью соответствуют жизненному циклу React. Можно сказать, что как только вы освоите React, вы почти освоите Таро. А ресурсы для изучения React почти исчерпаны, так что можно не переживать, что не научишься совсем.

Taro, как и React, также использует декларативный синтаксис JSX. По сравнению с шаблонным синтаксисом строк, JSX будет более удобен при работе со сложными требованиями.

// 一个典型的 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>
    )
  }
}

Хорошая эффективность разработки и опыт

Поскольку синтаксис Taro точно такой же, как у React, поддержка редактора/IDE для Taro почти такая же, как у React. Современные редакторы по умолчанию поддерживают JSX, а если нет, то очень легко найти плагин. Но ведь мы занимаемся Таро для повышения эффективности разработки и опыта разработки, а люди, которые действительно используют Таро, — это мы сами или сидящие рядом с нами коллеги. Поэтому на этой основе мы еще больше расширили опыт разработки Таро.

Пользовательские правила ESLint

Ранее мы упоминали, что когда вы изучаете React, вы почти можете выучить Таро. Одна из самых важных причин заключается в том, что мы написали правила ESLint отдельно для синтаксиса и функций, которые Taro не поддерживает: разработчики просто пишут код, а редактор сообщит об ошибке при написании неподдерживаемого синтаксиса/функций, выдаст сообщение об ошибке и адрес документа опишите.

Taro eslint

Безопасность типов и обнаружение во время выполнения

Суть JSX заключается в улучшении синтаксиса JavaScript, поэтому, например, нетimportСинтаксические ошибки, такие как компоненты, могут быть обнаружены во время компиляции. Разработчики также могут использоватьTypeScriptилиFlowдля дальнейшего повышения надежности кода или использованияPropsTypeНадежность кода дополнительно гарантируется во время выполнения.

Эффективное автозаполнение и синтаксис ES6+

Все API-интерфейсы Taro (включая интерфейсы конечных возможностей, такие как мини-программы WeChat) имеют интеллектуальные напоминания и автозаполнение, включая параметры интерфейса и возвращаемые значения.

Taro 自动补全

Идеи дизайна Таро

Наше первоначальное намерение состоит в том, чтобы создать решение, которое можно адаптировать к нескольким терминалам.В сочетании с бизнес-сценариями, выбором технологий и предварительным историческим процессом разработки наше решение должно соответствовать следующим требованиям:

Многотерминальное повторное использование кода может работать не только на самых популярных H5, апплетах WeChat и React Native, но также оставляет место и возможности для других терминалов, которые могут стать популярными.
Полный и мощный механизм компонентизации, который является краеугольным камнем разработки сложных приложений.
Он органично сочетается с текущим стеком командных технологий для эффективного повышения эффективности.
Стоимость обучения достаточно низкая
Сильная экология позади

Соответствовать этим требованиям одновременно непросто.После достаточных исследований и размышлений мы обнаружили, что только система React может удовлетворить наши потребности. Для мини-программ WeChat абсолютно невозможно разрабатывать с использованием React — пока мы не начнем сcodemodБыть вдохновленным:

В условиях хорошей и строгой спецификации, с точки зрения более высокой абстракции (синтаксического дерева), все пишут один и тот же код.

То есть для апплета WeChat, который не является открытым или открытым исходным кодом, мы можем сначала проанализировать код React в абстрактное синтаксическое дерево, сгенерировать код шаблона, поддерживаемый апплетом, в соответствии с этим деревом, а затем обработать среду выполнения апплета. События и жизненные циклы совместимы со структурой апплета, а затем запуск бизнес-кода в среде выполнения завершает адаптацию на стороне апплета.

Taro原理

Для конца, который React уже поддерживает, например, Web, React Native и даже будущий React VR, нам нужно только обернуть слой библиотеки компонентов и сделать некоторую поддержку стилей. Принимая во внимание текущую популярность мини-программ и направленность нашей команды на бизнес, API библиотеки компонентов основан на мини-программе, а API-интерфейсы библиотек компонентов на других сторонах будут соответствовать компонентам мини-программы. сторона.

Выбор технологии и компромиссы

В нашем предыдущем сообществе было несколько отличных фреймворков, которые исследовали многотерминальную адаптацию с мини-программами в качестве ядра Мы сравнили и наметили основные функции и характеристики каждого фреймворка разработки. Вы можете делать выбор и компромиссы на основе стека технологий команды, технических требований, а также функций и характеристик платформы.

Taro 对比

Эпилог

После нескольких месяцев разработки Taro превратилась из первого коммита в крупномасштабный проект, в котором участвовало 16 пакетов и более десяти студентов. В то же время Таро также поддержал разработку нескольких сложных бизнес-проектов в Интернете в производственной среде, а также будет поддерживать больше предприятий JD.com в будущем.

Технические решения и реализации Taro также укоренились в сообществе, и мы также надеемся внести свой вклад в развитие и рост технического сообщества. Придерживаясь давних прекрасных традиций JD.com Labs в отношении открытого исходного кода, открытости и совместного использования, сегодня мы открываем исходный код всего кода Taro, чтобы предоставить разработчикам полный набор технических решений для быстрой разработки мультитерминальных проектов. В будущем мы продолжим расширять существующие возможности Taro, поддерживать больше конечных возможностей, продолжать улучшать опыт разработчиков, повышать эффективность разработчиков, помогать большему количеству разработчиков и получать питательные вещества от сообщества, чтобы сделать Taro сильнее.

Официальный сайт:taro.aotu.io/

GitHub: github.com/nervjs/taro

Если вы еще не слышали о Nerv, загляните сюда:nerv.aotu.io/