Почему мы используем React для написания небольших программ — родился Taro

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

Мини-программы WeChat, которые люди любят и ненавидят

поскольку2017-1-9С момента рождения мини-программ WeChat (далее — мини-программы) они сопровождались постоянными похвалами и спорами. С того момента, как он был выпущен и запущен, большинство людей не одобряли его, и теперь он становится все более и более популярным. В то же время для разработчиков экология мини-программ постоянно улучшается, и наступило много ям.Хотя некоторые критикуемые проблемы все же есть, это уже показывает искренность WeChat. В это время, если вы еще не играли с апплетом, это будет очень НЕДОСТАТОЧНО.

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

Организация кода и синтаксис

В апплете, страницаpageможно иметьpage.js,page.wxss,page.wxml,page.jsonчетыре файла

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

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

Соглашения об именах

Повсюду в апплете можно увидеть несогласованные спецификации.

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

<button />Имена свойств компонентов состоят из нескольких слов, разделенных тире.session-form, также бывают случаи, когда несколько слов пишутся последовательноbindgetphonenumber. Конечно это не самое серьезное, можно сказать что спецификация привязки событийbind + 事件名, а спецификация других атрибутов состоит в том, чтобы отделять слова символами подчеркивания.Я когда-то думал, что апплет это стандарт, пока не увидел его.<progress />компоненты

Это не то же самое, что было сказано!

Такая же ситуация возникает и в页面а также组件Подход жизненного цикла,页面Методы жизненного цикла имеютonLoad,onReady,onUnloadподожди, но вот组件вcreated,attached,readyПодождите, этот стандарт снова не является единым, почему?页面Метод жизненного циклаon+Xxxформат, но приходит组件Это не то же самое, это немного озадачивает.

метод разработки

Апплет официально предоставлен微信开发工具Как инструмент компиляции разработки, так и для самого кода он не обеспечивает аналогичногоwebpackЧтобы решить некоторые проблемы в разработке, собственный метод разработки небольших программ не настолько современен, что также является проблемой, которую решают многие фреймворки для разработки небольших программ. Например, при разработке апплета.

нельзя использоватьnpmУправление зависимостями, в апплете нужно вручную скачать файл стороннего кода на локальный, а потомreuqireиспользовать, не так элегантно
Не могу использовать препроцессоры CSS, такие как Sass, поскольку отсутствует понятие прекомпиляции, популярные препроцессоры CSS на рынке нельзя использовать при разработке небольших программ, что затруднит управление кодом стилей
Неполная поддержка синтаксиса ES Next, апплет по умолчанию может поддерживать только очень небольшую часть синтаксиса спецификации ES6, а ES постоянно развивается, и некоторые очень отличные новые синтаксические функции не могут быть использованы.
ручная работа с файлами, некоторые файловые операции, такие как сжатие изображений, сжатие кода и т. д., должны выполняться вручную, что немного громоздко.

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

По прихоти: могу ли я использовать React для написания небольших программ

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

И наша команда смело отказалась от исторической ноши в прошлом году, и для нас большая честь представитьReactМетод разработки позволил нашей команде выбросить керосиновую лампу и начать включать электричество. А так же разработал отличный классReactРамкаNerv, давайте иReactМышление развития более глубоко интегрировано.

По сравнению с методом разработки небольших программ,Reactзначительно более современным, стандартизированным иReactЕстественная компонентизация больше подходит для развития нашего бизнеса,JSXТакже более выразительны, чем строковые шаблоны. Итак, в настоящее время мы думаем, можем ли мы использоватьReactНаписать небольшую программу?

исследовать рационально

аналогия

Сравнивая опыт и апплетыReact, мы все еще можем найти сходство между двумя

Жизненный цикл

жизненный цикл апплета иReactЖизненные циклы во многом схожи, и мы даже можем найти соответствие между ними.

Жизненный цикл приложений и страниц

Апплеты	React
onLaunch	componentWillMount
onLoad	componentWillMount
onReady	componentDidMount
onShow	Не поддерживается, требуется особая обработка
onHide	Не поддерживается, требуется особая обработка
onUnload	componentWillUnmount

Видно, что дляappа также页面В дополнение кonShowа такжеonHideДва метода, другие методы могут быть использованы вReactнашел соответствующий.

Метод обновления данных

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

Оба обновляются в представлении, управляемом данными, иapiблагочестивый.

привязка события

Событие привязки в апплете используетbind + 事件名образом, например событие щелчка, в апплетеbindtap

<view bindtap="handlClick">1</view>

пока вReactВ случае, этоon + 事件名таким образом, как событие клика,ReactсетьonClick

<View onClick={this.handlClick}>1</View>

Хоть и выглядит по-другому, но на самом деле аналог, нужно только скомпилироватьon + 事件名составлен в видеbind + 事件名в виде .

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

большая разница

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

JSX

render () {
  return (
    <View className='index'>
      {this.state.list.map((item, idx) => (
        <View key={idx}>{item}</View>
      ))}
      <Button onClick={this.goto}>走你</Button>
    </View>
  )
}

Шаблон мини-программы

 <view class="index">
   <view wx:key={idx} wx:for="{{list}}" wx:for-item="item" wx:for-index="idx">{{item}}</view>
   <view bindtap="goto">走你</view>
 </view>

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

Сила принципов компиляции

Мы можем тщательно проанализировать наши потребности и рассчитываем использоватьJSXнаписать шаблон апплета, но апплет явно не поддерживает выполнениеJSXКод (если бы он поддерживался, Таро не существовало бы), мы не можем ожидать, что WeChat откроет нам бэкдор для запуска.JSX. В это время мы подумали, сможем ли мыJSXПросто скомпилируйте его в небольшой шаблон программы.

На самом деле, в нашей обычной разработке такого рода операцию компиляции можно увидеть везде,babelнаш наиболее часто используемыйJS 代码编译器, обычные браузеры не могут поддерживать некоторые очень новые синтаксические функции, но мы хотим использовать их снова, в настоящее время мы можем использоватьbabelДавайте скомпилируем наш высокоуровневый ES-код в ES-код, который сможет запустить браузер. И нам нравитсяJSXКомпилированные шаблон апплета - это та же причина. Мы сначала посмотритеBabelрабочий механизм.

Babelкак代码编译器, который может компилировать код ES6/7/8 в код ES5, ядро которого состоит в том, чтобы использовать самые базовые знания принципов компиляции в вычислениях, вводить код языка, выполнять его через компилятор и выводить код целевого языка. Общий процесс принципа компиляции заключается в том, чтобы ввести исходную программу с помощью лексического анализа, синтаксического анализа, построить синтаксическое дерево, а затем с помощью семантического анализа понять, верна ли программа или нет, а затем выполнить необходимые операции и оптимизации. в синтаксическом дереве и, наконец, сгенерировать целевой код.

BabelТо же самое верно и для процесса компиляции, который в основном состоит из трех этапов.

Процесс синтаксического анализа, при котором выполняется лексический, грамматический и семантический анализ для созданияСтандарт ESTreeВиртуальное синтаксическое дерево (AST)
Процесс преобразования, который выполняет определенные операции над AST,babelфайл конфигурации.babelrcопределено вpreset,pluginИменно на этом этапе выполняется и изменяется AST.
Процесс генерации, который генерирует строку целевого кода из AST, преобразованного на предыдущем шаге.

Чтобы лучше понять эти процессы, вы можете использоватьAst ExplorerЭтот сайт подбирает свой собственный код и чувствует структуру AST, соответствующую каждой части кода.

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

{
  type: "Program",
  start: 0,
  end: 78,
  loc: { start, end }
  sourceType: "module",
  body: [
    { type: "VariableDeclaration", ... },
    { type: "VariableDeclaration", ... },
    { type: "FunctionDeclaration", ... },
    { type: "ExpressionStatement", ... }
  ]
  ...
}

в,bodyСодержит структуру синтаксического дерева нашего образца кода, первыйVariableDeclarationсоответствуетconst a = 1,ТретийFunctionDeclarationсоответствующийfunction sum (a, b) { }, которые являются определениями переменных и определениями функций в JS. Каждый узел дерева будет содержать множество дочерних узлов, таким образом образуя древовидную структуру. Дополнительные типы узлов см.babel types.

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

Возвращаясь к нашим потребностям снова, будетJSXСкомпилировал в небольшой шаблон программы, очень к счастьюbabelОсновной компиляторbabylonда поддержкаJSXДля синтаксического анализа грамматики мы можем напрямую использовать его, чтобы помочь нам построить AST, и основное внимание, на котором мы должны сосредоточиться, — это то, как преобразовать AST, чтобы получить новый AST, который нам нужен, а затем рекурсивно пройти новый AST для создания небольшой программы. .

JSXкод

<View className='index'>
  <Button className='add_btn' onClick={this.props.add}>+</Button>
  <Button className='dec_btn' onClick={this.props.dec}>-</Button>
  <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
  <View>{this.props.counter.num}</View>
  <A />
  <Button onClick={this.goto}>走你</Button>
  <Image src={sd} />
</View>

Скомпилируйте и сгенерируйте шаблон апплета

<import src="../../components/A/A.wxml" />
<block>
  <view class="index">
    <button class="add_btn" bindtap="add">+</button>
    <button class="dec_btn" bindtap="dec">-</button>
    <button class="dec_btn" bindtap="asyncAdd">async</button>
    <view>{{counter.num}}</view>
    <template is="A" data="{{...?A}}"></template>
    <button bindtap="goto">走你</button>
    <image src="{{sd}}" />
  </view>
</block>

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

Понимать тройные операторы и логические выражения, такие как тройные операторыabc ? : <View>1</View> : <View>2</View>Должен быть скомпилирован в<view wx:if="{{abc}}">1</view><view wx:else>2</view>
Понимание массиваmapсинтаксис, напримерmapиспользованиеabc.map(item => <View>item</View>)необходимо собрать в<view wx:for="{{abc}}" wx:for-item="item">item</view>
так далее

Вышеизложенное — лишь верхушка айсберга наших правил преобразования.JSXМетод записи чрезвычайно гибкий и изменчивый, мы можем поддерживать только широко используемые и официально рекомендуемые методы написания React как правила преобразования исчерпывающим образом, в то время как некоторые редкие или менее рекомендуемые методы написания не поддерживаются, в свою очередь сeslintСпособ плагина предлагает пользователю внести изменения. В настоящее время мы поддерживаемJSXПравила преобразования могут примерно охватыватьJSX80% операций записи.

Что касается части шаблона JSX для апплета, мы подробно представим его в следующей серии статей по анализу технических принципов.

Можешь ли ты сделать что-нибудь еще?

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

Проанализируйте свои потребности

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

Все еще сила принципов компиляции

А пока давайте вспомним содержание предыдущей статьи и скомпилируем код в мультитерминальный код.Разве не в этом принцип компиляции?Мы можем ввести исходный код,установить соответствующие правила конвертации для разных терминалов и затем повторите Ключ преобразует код соответствующего конца. А так как мы уже следуем синтаксису React, то у нас будет естественное преимущество при переходе на сторону H5 (используя Nerv) и сторону RN (используя React).

Полные идеи дизайна

Но если хорошенько подумать, мы обнаружим, что недостаточно просто преобразовать код в соответствии с соответствующими грамматическими правилами, поскольку разные терминалы будут иметь свои нативные компоненты, API возможностей терминала и т. д. После непосредственного преобразования кода , он не может быть выполнен напрямую. Например, общий компонент контейнера в апплете использует<view />, а в H5 это<div />; Апплет предоставляет богатые API для возможностей терминала, таких как сетевые запросы, загрузка файлов, кэширование данных и т. д., в то время как API для соответствующих функций в H5 противоречивы.

Следовательно, чтобы компенсировать различия между разными концами, нам необходимо настроить единый стандарт библиотеки компонентов и единый стандарт API и полагаться на их синтаксис и возможности для реализации библиотеки компонентов и API на разных концах, а также для разные компоненты.На стороне написан соответствующий runtime framework, который отвечает за инициализацию и другие операции. Благодаря вышеперечисленным операциям мы можем одним щелчком мыши создать требования к нескольким терминалам. В первоначальном дизайне Taro наша библиотека компонентов и стандарты API были получены из небольших программ, потому что мы чувствовали, что, поскольку уже есть определенные библиотеки компонентов и стандарты API, почему бы не использовать их напрямую, что не только экономит время. стандарта, а также избавляет от необходимости разрабатывать библиотеки компонентов и API для апплета — нужно только позволить другим терминалам согласовываться с апплетом.

У некоторых людей могут возникнуть сомнения, поскольку соответствующие библиотеки компонентов и API конечных возможностей реализованы для разных терминалов (кроме апплета, поскольку стандарты библиотеки компонентов и API все производные от апплета), то как мы можем писать только one Достаточно ли одного кода? Поскольку у нас есть операция компиляции, при написании кода нам нужно только импортировать стандартную библиотеку компонентов@tarojs/componentsс средой выполнения@tarojs/taro, после того как код будет скомпилирован, он станет библиотекой, требуемой соответствующим концом.

Поскольку библиотеки компонентов и конечные возможности зависят от разных реализаций на разных концах для сглаживания различий, то аналогичным образом, если мы хотим ввести более функциональную поддержку для Taro, нам иногда нужно следовать этой процедуре. Например, для удобства разработки мы добавили TaroReduxПоддержка, наш подход, на стороне апплета, мы достигли@tarojs/reduxЭта библиотека используется как небольшая программаReduxвспомогательную библиотеку, и используя ее в качестве базовой библиотеки, он имеет иreact-reduxСогласованный API, при написании кода все ссылки@tarojs/redux, после компиляции он будет заменен на стороне H5 наnerv-redux(NervизReduxвспомогательная библиотека), которая будет заменена на стороне RN наreact-redux. Вот и всеReduxМультитерминальная поддержка в Таро.

Вышеизложенное является общей идеей дизайна Таро.Есть еще много деталей, которые не были разработаны.Вы можете чувствовать себя немного незавершенным.В будущем мы выпустим серию статей, чтобы объяснить технические детали Таро, такие как как «Анализ принципов инструментов разработки Taro», «За компиляцией кода Taro», «Введение в JSX для небольших шаблонов программ» и так далее.

последний из последних

Таро существует около трех месяцев с начала проекта, от первоначального интенсивного обсуждения плана, столкновения различных идей, до постепенного формирования плана, в горячую итерацию разработки, а затем и до текущего мини программа и сторона H5 были успешно поддержаны, поэтому было принято решение перейти на открытый исходный код. На этом пути я многому научился, не только увлечению творчеством с моими товарищами по команде, но и бесчисленной тяжелой работе сверхурочной работы днем и ночью. Таро — это искренняя работа Bump Labs, и мы продолжим ее поддерживать.Мы надеемся, что Таро будет становиться все лучше и лучше и поможет большему количеству людей создавать больше ценности.

Официальный сайт проекта:taro.aotu.io/

Гитхаб проекта:github.com/NervJS/taro