Автор: bumpman - юче
Taro тестировалось сообществом открытого исходного кода более двух лет с момента выпуска первой версии Taro. Сегодня мы рады выпустить официальную версию Таро 3 (Таро Некст) в день рождения вечеринки, и мы надеемся, что Таро выдержит еще больше испытаний, как коммунистический борец, в течение следующих двух лет. Вот некоторые из новых функций в Taro 3:
Кросс-фреймворк: React, Nerv, Vue 2, Vue 3, jQuery
В старой версии Taro мы использовали подход React/JSX для разработки на основе спецификаций разработки мини-программ WeChat. В Таро 3 мы количественно определили эту идею в модели программирования:
Пусть жизненный цикл апплета WeChat будетinterface, хотя жизненный цикл разных экземпляров фреймворка отличается, мы можем создать новый в соответствии с жизненным циклом фреймворкаclassидти сimplementsжизненный цикл апплетаinterface. Соответственно, спецификация компонента/API/маршрутизации апплета может использовать ту же идею и модель, чтобы позволить коду разных фреймворков работать на разных сторонах:
В Taro 3 у нас есть встроенная поддержка четырех фреймворков: React, Nerv, Vue 2 и Vue 3. Разработчики могут пройтиtaro initКоманда создает соответствующий шаблон и пишет код (идиоматический код), который согласуется с жизненным циклом самого фреймворка и вызывающего метода, при этом нет ограничений на синтаксис.
В дополнение к четырем категориям фреймворков Таро 3 также предоставляетjQuery-like APIПоддержка в качестве дополнения к современным средам разработки и решениям для реализации кросс-фреймворковых компонентов.
Кросс-энд: H5, WeChat, Alipay, Baidu, ByteDance... апплет
Как и старая версия Taro, Taro 3 поддерживает компиляцию на основные платформы небольших программ, такие как WeChat, JD.com, Alipay, Baidu, ByteDance и QQ.
Как и апплет, сторона H5 Taro 3 полностью переписана по сравнению с предыдущей версией Taro: все базовые компоненты теперь создаются с использованием веб-компонентов, а система маршрутизации полностью отделена от интерфейсной инфраструктуры, поэтому Taro также реализовано на стороне H5 поперечная рама. Независимо от того, использует ли разработчик React, Vue или Nerv, он может работать на различных апплетах и H5 одновременно.
Открытая система плагинов
Taro 3 представлен во время компиляции на основеTapableСистема подключаемых модулей позволяет разработчикам расширять дополнительные функции Taro или настраивать персонализированные функции для своего бизнеса путем написания подключаемых модулей. Во время выполнения мы начинаем сReact ReconcilerВдохновленный средой выполнения Taro, также реализован набор API-интерфейсов для изменения логики среды выполнения.
Другими словами, разработчики могут расширять больше терминалов и расширять больше фреймворков с помощью Taro, не изменяя и даже не понимая исходный код и реализацию Taro. В следующем минорном релизе (v3.1.0) Taro завершит разделение времени компиляции/среды выполнения и конца/фреймворка, и разработчики смогут расширить новый конец или фреймворк, написав плагин. В будущем Taro добавит таким образом новые терминалы или фреймворки.
Управление открытым исходным кодом и управление проектами
Чтобы более эффективно общаться с разработчиками, Таро вдохновился Vue.js и Ant Design, чтобы представитьПомощник по проблемам. Чтобы Таро постоянно прогрессировал в основных обновлениях и изменениях функций, мы извлекли уроки из Rust и React и представилиМеханизм процесса RFC. Чтобы сделать итерацию версии более прозрачной и стандартизированной, Taro также будет соответствовать следующим выпускам версий в будущем.Механизм вехи.
Документация — лучший друг разработчика. В Taro 3 мы также пересмотрели и реорганизовали документацию и ввели новыйпрогрессивная документация, прогрессивный документ знакомит с основными концепциями и методами оптимизации Taro в порядке разработки проектов, что подходит для разработчиков, которые любят учиться во время работы или не имеют знаний о разработке апплетов.
Качество и стабильность кода очень важны для проектов с открытым исходным кодом. Taro также строго реализует механизм проверки кода, и код всех без исключения должен быть проверен. Чтобы убедиться, что мы можем более активно внедрять новые функции, мы добавили в общей сложности 30 000 строк тестового кода на протяжении всей разработки Taro 3.
Апплет WeChat для React/Vue
ужеТаро 1.2 выпущенВ настоящее время мы предоставляем функцию апплета WeChat для Taro, и преобразованное приложение апплета WeChat станет мультитерминальным приложением. Теперь эта функция также полностью совместима с новой архитектурой Taro Next, а преобразованный код предлагает варианты React и Vue. Как и прежде, вам нужно только выполнить команду в корневом каталоге проекта апплета WeChat.taro convert:
$ taro convert
Выберите кадр, который вы хотите преобразовать:
визуализировать HTML-строку
Отображение строк HTML в апплете обычно используетwxparseтакие сторонние библиотеки, ноwxparseAPI сложен, слаб в расширении, неточен во внутренней реализации и, что наиболее важно, сейчас прекратил поддержку. по сравнению сwxparse, рендеринг строк HTML в Taro 3 обеспечивает следующие функции:
- API совместим с сетью и может быть напрямую доступен через React.
dangerouslySetInnerHTMLили Vuev-htmlперечислить. - Стили меток можно напрямую контролировать с помощью CSS.
- Привязать события к отображаемым тегам HTML
- Функции-ловушки предоставляются как при синтаксическом анализе HTML, так и при рендеринге, чтобы удовлетворить персонализированные потребности рендеринга.
вы можете получить доступ к документацииотображать HTMLчтобы узнать больше информации.
CSS-In-JS
В сообществе React есть известное решение CSS-in-JS:styled-components. Но, к сожалению,styled-componentsиспользовать<style>теги для динамического управления стилями, на стороне апплета подобной схемы нет. Но в Таро мы можем пройтиlinariaдостичь той же функции,linariaВ основном обеспечивают следующие функции:
- примерно
styled-componentsAPI - Полная поддержка TypeScript
- нулевое время выполнения
Среди них нулевое время выполнения особенно важно для небольших программ, которым требуется размер пакета.
вы можете получить доступ к документацииИспользование CSS-in-JSчтобы узнать больше информации.
Виртуальный список (VirtualList)
Когда мы отображаем список с очень большим объемом данных, фреймворк попытается отобразить представление полностью в соответствии с данными, что может вызвать проблемы с производительностью и привести к тому, что представление не будет реагировать на операции в течение определенного периода времени. Чтобы решить эту проблему, мы можем выбрать другой способ: вместо того, чтобы отображать представление, сгенерированное полным объемом данных, мы можем отображать только представление.Текущее видимое окно просмотраВид невидимой области повторно отображается, когда пользователь прокручивает до видимой области:
| Разница между обычным рендерингом и виртуальным списком |
| Интуитивно понятные эффекты в инструментах разработчика |
Похожая техника в разработке под Android называетсяRecyclerView, вызываемый в React NativeVirtualizedList, мы назвали его Virtual List, этот компонент теперь встроен в Taro и может использоваться в React/Vue или различных апплетах и H5:
import VirtualList from '@tarojs/components/virtual-list'
вы можете получить доступ к документациирендеринг длинного спискачтобы узнать больше информации.
предварительный рендеринг
Производительность инициализации — это проблема оптимизации производительности Taro 3. Исходные данные собственного апплета или скомпилированного фреймворка можно напрямую использовать для рендеринга, но Taro 3 преобразует данные рендеринга фреймворка в данные рендеринга апплета во время инициализации, что добавляет накладные расходы setData.
Чтобы решить эту проблему, Taro вдохновлен рендерингом на стороне сервера, а интерфейс командной строки Taro напрямую отображает состояние инициализации страницы как wxml без сохранения состояния и выполняет процесс рендеринга до запуска фреймворка и бизнес-логики. Мы называем эту технологию Prerender, и начальная скорость рендеринга страницы после Prerender обычно такая же или даже выше, чем у нативного апплета.
вы можете получить доступ к документациипредварительный рендерингчтобы узнать больше информации.
Более высокая скорость сборки и поддержка исходных карт
В качестве скомпилированного фреймворка старые версии Taro выполняли множество операций AST, что значительно замедляло компиляцию Taro CLI. В Taro 3 AST любого кода разработчика не будет подвергаться манипуляциям, поэтому скорость компиляции была значительно улучшена.
Из-за отмены операции АСТ Таро тоже легко осозналsource-mapслужба поддержки. Это огромный толчок к опыту разработки:
Ни пушек, ни пушек, ни колес
Вернёмся на два года назад: на рынке нет фреймворка, поддерживающего использование React для разработки небольших программ, и нет идей или исследований, которые могли бы послужить ориентиром. Ситуация, с которой мы сталкиваемся, похожа на ситуацию «одного бедняка». и два белых» в старом Китае. Сегодня Таро ужеТоп 5 видов деятельности в Китаепроект с открытым исходным кодом.
Решение всегда сложнее, даже в относительно ограниченной среде разработки, такой как небольшая программа. В будущем Taro продолжит улучшать опыт разработки, повышать эффективность разработки и идти по пути развития с китайской спецификой с точки зрения разработчиков.Taro 3 — самый надежный шаг к реализации этого видения, как выразился один мудрый человек:
Лучшее время встать на Таро — в прошлом, а второе — сейчас.
Добро пожаловать в блог Bump Labs:aotu.io
Или обратите внимание на официальный аккаунт AOTULabs и время от времени публикуйте статьи: