Мультитерминальный унифицированный фреймворк разработки Taro 1.0 официально выпущен

открытый источник React.js React Native
Мультитерминальный унифицированный фреймворк разработки Taro 1.0 официально выпущен

существует2018.6.7Мы с открытым исходным кодом多端统一开发框架——Taro.

Taro — это многотерминальная унифицированная среда разработки, которая поддерживает использование методов разработки React для написания приложений, которые могут работать на нескольких платформах, таких как апплет WeChat, Web, React Native и т. д., помогая разработчикам повысить эффективность разработки, улучшить опыт разработки, и снизить затраты на НИОКР, связанные с несколькими терминалами.

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

1.0.0 действительно выйдет

Taro является открытым исходным кодом уже 3 месяца, и было выпущено более 70 ежедневных версий и более 20 версий Taro 1.0.0.betaверсии, после почти сотни версий итеративной оптимизации мы заметили, что отзывов об ошибках Taro становится все меньше и меньше, а Taro становится все более и более надежным и совершенным, поэтому мы уверены, что выпустим официальную версию 1.0.0.

Официальная версия Taro 1.0.0 продолжает превосходные функции предыдущей версии, добавляя при этом более богатые возможности и функции, а также провела ряд мини-программ/оптимизаций преобразования на стороне H5, а также добавила поддержку преобразования React Native.

Совершенно новая компонентизация апплета

В начале открытого исходного кода по разным причинам апплет Taro WeChat был разделен на компоненты с использованием апплета.<template />Метки реализованы с помощью небольших программ<template />Особенность тега, JS файл компонента компилируется в шаблон JS+WXML, который передается в шаблон родительского компонента (страницы)<template />Тег относится к шаблону WXML подкомпонента для объединения, чтобы достичь цели компонентизации.

Практика доказала, чтоTemplateСхема шаблона — это неудачная схема компонентизации, и ошибки в первые дни открытого исходного кода Taro в основном происходят из-за этого. Поскольку это решение отделяет логику JS от шаблона, необходимо вручную убедиться, что данные в JS и шаблоне непротиворечивы, поэтому в случае циклического рендеринга компонентов и многократного вложения компонентов необходимо убедиться, что компоненты отображаются правильно иpropsПравильная подача очень сложна и дорога в реализации. Более того, ограничивается апплетом<template />Дефекты тегов, некоторые функции (например, пользовательские компоненты, содержащие дочерние элементы и т. д.) не могут быть реализованы.

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

  • Компонентизация на стороне апплета более надежна
  • Сведение к минимуму проблем с производительностью из-за фреймворков
  • Опираясь на официальную компонентизацию, удобно разблокировать больше возможностей в будущем.

Полная поддержка экологии апплета

Чтобы лучше помочь разработчикам использовать Taro для разработки апплета, в1.0.0В этой версии мы усилили поддержку экологии апплета, в основном в следующих аспектах.

Поддержка ссылок на сторонние библиотеки компонентов на стороне апплета

Благодаря компонентному рефакторингу апплета мы поддерживаем прямую ссылку на стороннюю библиотеку компонентов апплета в Taro, чтобы Taro можно было интегрировать в экосистему апплета и предоставить разработчикам больше удобства.

В настоящее время фактическое измерение поддерживает следующие известные сторонние библиотеки компонентов.

  • echarts-for-weixin, версия апплета WeChat для ECharts
  • iview-weapp, версия апплета WeChat iview
  • vant-weapp, легкая и надежная библиотека компонентов пользовательского интерфейса апплета
  • wxParse, пользовательский компонент синтаксического анализа форматированного текста апплета WeChat, поддерживает синтаксический анализ HTML и уценки

Конечно, Taro не только поддерживает вышеуказанные библиотеки компонентов, поскольку библиотеки компонентов, написанные в соответствии со спецификацией родного апплета, могут нормально использоваться в Taro.

Поддерживает смешивание кода Taro с собственным кодом апплета.

В то же время Taro поддерживает смешивание собственного кода апплета с кодом Taro, поэтому вы можете использовать Taro для медленного преобразования старых проектов апплета в проекты Taro.

Поддержка загрузки подпакетов на стороне апплета и ссылки на плагины

Мы также добавили поддержку функции загрузки подпакетов нативного апплета в Taro Метод настройки в основном такой же, как и у нативного апплета.app.jsДобавить в файл записиsubPackageполе.

import Taro, { Component } from '@tarojs/taro'
class App extends Component {
  config = {
    pages: [
      'pages/index',
      'pages/logs'
    ],
    subPackages: [
      {
        root: 'moduleA',
        pages: [
          'pages/rabbit',
          'pages/squirrel'
        ]
      }
    ]
  }
}

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

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/Components'
class PageA extends Component {
  config = {
    usingComponents: {
      'hello-component': 'plugin://myPlugin/hello-component'
    }
  }

  render () {
    return (
      <View>
        <hello-component></hello-component>
      </View>
    )
  }
}

Оптимизация производительности мини-программы setState

В начальной версии с открытым исходным кодом апплетsetStateтолько для апплетаsetDataСделал асинхронную инкапсуляцию и, наконец, вызвалsetDataПри обновлении полные данные по-прежнему передаются.

Но, как мы все знаем, уровень представления апплета в настоящее время использует WebView в качестве носителя рендеринга, в то время как уровень логики использует независимый JavascriptCore в качестве рабочей среды.С точки зрения архитектуры, как WebView, так и JavascriptCore являются независимыми модулями и не имеют канал для прямого обмена данными. вызовsetDataПосле этого данные будут использоватьсяJSON.stringifyСериализировать его, склеив в скрипт, а затем передать на уровень представления для рендеринга.В этом случае, когда объем данных будет очень большим, апплет будет аварийно зависать и производительность будет низкой.

Taro помогает разработчикам оптимизировать на уровне фреймворка.setDataделал это однаждыРазница данных, найдите минимальный путь обновления данных, а затем используйте этот путь для обновления. Например

// 初始 state
this.state = {
  a: [0],
  b: {
    x: {
      y: 1
    }
  }
}

// 调用 this.setState

this.setState({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})

Перед оптимизацией,this.setStateданные дляsetData,Сейчас

this.$scope.setData({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})

И обновление данных после оптимизации становится

this.$scope.setData({
  'a[0]': 1,
  'a[1]': 2,
  'b.x.y': 10
})

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

Расширенная поддержка синтаксиса JSX

Как упоминалось ранее, Taro использует спецификацию синтаксиса React для разработки многотерминальных приложений, поэтому он должен использовать JSX в качестве шаблона, поэтому Taro необходимо скомпилировать JSX в шаблоны, поддерживаемые каждым терминалом, среди которых небольшая программа является наиболее сложной, а Таро необходимо скомпилировать JSX. Шаблон апплета WXML.

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

  • Поддерживает Ref, который обеспечивает более удобный способ позиционирования компонентов и элементов.
  • Поддержка метода записи this.props.children, который удобен для передачи пользовательских компонентов в дочерние элементы.
  • Выполнение функций и выражений в теле цикла
  • Определение JSX как переменной для использования
  • Поддержка сложных операторов if-else
  • Используйте сложные выражения в свойствах JSX
  • Использование объекта в свойстве стиля
  • Только используемые переменные будут добавлены к данным апплета в качестве состояния, чтобы упростить данные апплета.

В настоящее время в дополнение к официальному плагину Taro ESLinteslint-plugin-taroВ дополнение к ограниченному синтаксису в ESLint в основном поддерживаются другие синтаксисы JSX, и с помощью нативной компонентизации ограничения на ESLint будут сняты одно за другим в будущем.

Поддержка преобразования React Native на стороне

В Taro 1.0.0 мы официально запустим поддержку конвертации на стороне React Native, которая может конвертировать существующий проект Taro в версию RN, но вам нужно обратить внимание на обработку стилей, потому что стили, поддерживаемые RN, являются очень ограничено, и это дочерний элемент CSS. установите, пожалуйста, перейдите кСоображения по преобразованию стороны RN.

Сторона Таро RN основана наExpoДля компиляции и сборки программ RN метод разработки и команды компиляции аналогичны другим терминалам, а структура каталогов кода в основном такая же, как и в существующем проекте Taro.

Режим предварительного просмотра компиляции RN

# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx用户也可以使用
$ npx taro build --type rn --watch

После выполнения команды Taro начнет компилировать файл и, наконец, получит инструкции по компиляции на стороне RN и запустит ваше приложение.

Пожалуйста, перейдите к полному процессу разработки React NativeВведение в процесс разработки React Native.

Более надежная поддержка TypeScript

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

  • @tarojs/cliПроекты TypeScript можно создавать напрямую
  • @tarojs/componentsСодержит определения типов для всех компонентов
  • @tarojs/taroВсе API также содержат определения типов.
  • @tarojs/reduxиtaro-uiВсе имеют встроенные определения типов
  • Компилятор системы сборки был переключен с Babel на собственный компилятор TypeScript, поддерживающий весь синтаксис TypeScript.

Оптимизация конверсии на стороне H5

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

Наконец, прикрепите полный ТароИтерационный процесс.

Дорога к возрождению

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

от6.7К моменту написания Таро пережил в общей сложности1800Более одного представления, в среднем почти20раз, до суток30Второсортный. Каждая фиксация — это прогресс, и каждая фиксация делает Таро сильнее. После стольких итераций Taro возродился, особенно после завершения компонентизации и рефакторинга небольших программ, Taro выпрыгнул из болота старой архитектуры и стал более надежной средой разработки.

В то время как мы продолжаем размышлять и оптимизировать себя, мы также активно интегрируемся в сообщество открытого исходного кода и полагаемся на силу сообщества для создания Taro.

GitHub ISSUES — один из критериев проверки надежности проекта с открытым исходным кодом.500Остальные ВЫПУСКИ, закрытые почти400, скорость закрытия80%Слева и справа большая часть незакрытых — это повторяющиеся требования некоторых функций. В команде разработчиков Taro время ответа на каждую ПРОБЛЕМУ не должно превышать24Час. Именно из-за этих ПРОБЛЕМ мы постоянно знаем о недостатках Таро и сообщаем нам, как итерировать.

В то же время мы всегда поощряли разработчиков в сообществе активно отправлять PR.Отличный проект с открытым исходным кодом должен полагаться на силу всего сообщества для улучшения.На данный момент мы получили в общей сложности120Остальные PR почти все были включены. Эти PR влили много свежей крови в Taro и сделали Taro более надежным. Мы также надеемся, что больше разработчиков смогут присоединиться, чтобы сделать Taro лучше.

Помимо общения на GitHub, мы также открываемОфициальная группа WeChatДля того, чтобы обсудить Таро и технологии, существует более1700Несколько разработчиков следят за Taro и используют его, ожидая, что к ним присоединятся другие разработчики.

Идеальная экосистема разработчиков

В начале открытого исходного кода Taro находится в закрытом состоянии, нет подходящей UI-библиотеки, и нельзя использовать сторонние библиотеки компонентов.Эти ограничения на эффективность разработки очень серьезны, и в сообщество.

Итак, в1.0.0-betaВо время разработки версии команда Taro разработала функцию упаковки мультитерминальной библиотеки пользовательского интерфейса, обеспечивающуюtaro build --uiкоманда для упаковки кода, организованного в соответствии с определенными правилами, в многотерминальную библиотеку пользовательского интерфейса, которую можно использовать в Taro.

И на основе этой функции мы запустили первую мультитерминальную библиотеку пользовательского интерфейса, которую можно использовать на нескольких терминалах.Taro UI, апплет Wechat и сторона H5 в настоящее время поддерживаются, и скоро будет завершена адаптация стороны React Native, которая может быть синхронно предоставлена ​​стороне React Native.

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

будущий план

Taro продолжит итерацию, и запланированы следующие важные функции:

Удобный тест

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

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

Отладка многотерминальной синхронизации

В настоящее время Taro может одновременно отлаживать только один терминал, что немного неэффективно для разработки мультитерминальных приложений, поэтому планируется обеспечить функцию одновременной отладки апплета WeChat/H5/React Native, которая может запускать несколько терминалов. -терминальная одновременная компиляция с одним ключом, чтобы получить многотерминальную синхронизацию Preview.

Апплет WeChat / код H5 в код Таро

В настоящее время поддерживается преобразование кода Taro в код апплета и код H5.В будущем будет предоставлена ​​функция обратного преобразования, чтобы помочь разработчикам напрямую преобразовывать существующие проекты апплета/H5 в проекты Taro, чтобы они могли работать только в Проекты на одном конце получают возможность выполняться на нескольких концах, что снижает затраты разработчиков на рефакторинг.

Следите за новыми функциями React

Taro следует спецификации синтаксиса React, но React постоянно меняется.Как последователь React, Taro также будет идти в ногу с новыми функциями React, делая Taro максимально приближенным к опыту разработки React.

Быстрая поддержка приложений

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

Поддержка апплета Alipay и интеллектуального апплета Baidu

Возможность преобразования мини-программ Alipay и смарт-мини-программ Baidu была предварительно исследована и скоро будет разработана.

Многотерминальная визуальная конструкция перетаскивания

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

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

Случаи применения

В период с открытым исходным кодом, с постепенным улучшением Taro, все больше и больше разработчиков присоединялись к использованию и развитию Taro, что приводило к увеличению количества и улучшению вариантов использования.

qrcode.png

Специальная благодарность

Разработка Taro неотделима от помощи огромного числа энтузиастов с открытым исходным кодом, за что отдельное спасибо огромному количеству пользователей Taro и основным участникам Taro (в произвольном порядке).

Категории