Всесторонняя оценка мультитерминальной структуры небольшой программы

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

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

Итак, о чем мы говорим, когда говорим о многотерминальных фреймворках:

многотерминальный

Автор считает, что популярные мультитерминальные фреймворки можно условно разделить на три категории:

1. Все включено

Самая большая особенность этого типа фреймворка заключается в том, что базовый механизм рендеринга, механизм компоновки, DSL среднего уровня и фреймворк верхнего уровня разрабатываются сами по себе, представляя собой фреймворки Qt и Flutter. Преимущества этого типа фреймворка очень очевидны: высокая производительность (верхний предел); результаты рендеринга одинаковы на разных платформах. Минусы тоже весьма очевидны: нужно полностью заново учить DSL (QML/Dart), и сложно адаптироваться к китайским особенностям: маленькие программы.

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

2. Веб-технологии

Этот тип фреймворка привносит веб-технологии (JavaScript, CSS) в мобильную разработку.Саморазработанный движок компоновки обрабатывает CSS, использует JavaScript для написания бизнес-логики, использует популярные интерфейсные фреймворки в качестве DSL и использует собственные нативные компоненты для рендеринга на каждый конец. Репрезентативными платформами являются React Native и Weex, преимущества которых:

быстрое развитие
Повторно используйте интерфейсную экологию
Легко учиться и начать работу, независимо от того, какие мобильные терминалы переднего и заднего плана, более или менее будут знать немного JS, CSS.

Недостатки:

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

3. Компилятор JavaScript

Такие фреймворки — главные герои нашей статьи:Taro,WePY,uni-app,mpvue,chameleon, их принципы также схожи: сначала выберите инфраструктуру DSL на основе JavaScript, используйте эту инфраструктуру DSL в качестве стандарта для компиляции разных кодов на каждом конце, и на каждом конце есть среда выполнения или совместимая библиотека компонентов, чтобы гарантировать правильность кода. бегать.

Самым большим преимуществом этого типа фреймворка и самой большой причиной его создания является апплет, потому что первый и второй фреймворки фактически могут быть скомпилированы и запущены в браузере в дополнение к кросс-системным платформам. (У Qt есть Qt для WebAssembly, у Flutter есть Hummingbird, у React Native естьreact-native-web, встроенная поддержка Weex)

Еще одно преимущество заключается в том, что он обычно компилируется в React Native/Weex на мобильной стороне, поэтому они также имеют преимущества фреймворка веб-технологий. Это выглядит великолепно, но на самом деле недостатки скомпилированных фреймворков React Native/Weex неизбежны. Помимо,Абстракция скомпилированных фреймворков тоже не бесплатна: Когда возникает ошибка, основная причина проблемы может заключаться в различных аспектах, таких как время выполнения, время компиляции, библиотека компонентов и библиотеки, от которых зависят все три. В процессе разработки открытого исходного кода Taro мы столкнулись с ошибками Babel, React Native, ошибками движка JavaScript и, конечно же, собственными ошибками Taro. Считается, что другие фреймворки с таким же принципом не могут избежать этой проблемы.

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

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

Если любой DSL приемлем, вы можете перейти к следующей ссылке:

экология

Следующее обсуждение основано на текущей (11 марта 2019 г.) стабильной версии каждой платформы.

Инструменты разработки

По инструментам разработкиuni-appЭто должен быть Yiqijuechen.Его документация самая информативная и богатая.Он также поставляется с графическими инструментами разработки IDE, которые можно скомпилировать, протестировать и выпустить одним щелчком мыши.

Другие фреймворки используют инструменты командной строки CLI, но стоит отметить, чтоchameleonСуществуют независимые инструменты проверки грамматики,TaroПравила и наборы правил ESLint пишутся отдельно.

Что касается поддержки синтаксиса,mpvue,uni-app,Taro,WePYОба поддерживают TypeScript, и все четыре могут пройтиtypingРеализовать автодополнение редактора. Помимо завершения API, Taro также может автоматически завершать компоненты благодаря хорошей поддержке JSX в TypeScript.

Для CSS все фреймворки поддерживаютSASS,LESS,Stylus, у Таро есть еще одинCSS Modulesслужба поддержки.

Так что этот раунд конкурса должен быть:

uni-app > Taro > chameleon > WePY,mpvue

Поддержка нескольких терминалов

Только с точки зрения количества опор,Taroа такжеuni-appНемного впереди с шестью терминалами (мобильный терминал, H5, апплет WeChat, апплет Baidu, апплет Alipay, апплет Toutiao),chameleonМеньше апплета Toutiao внимательно следил за ним.

Но стоит упомянуть, чтоchameleonЕсть набор для самообученияполиморфный протокол, опыт написания мультитерминального кода будет намного лучше.Можно сказать, что это функция, которая может проникнуть в болевые точки мультитерминальной разработки.uni-appсуществует независимый наборСинтаксис условной компиляции, этот синтаксис может работать как наjs, стили и файлы шаблонов.TaroВы можете использовать условную компиляцию в бизнес-логике на основе переменных среды, или вы можете использовать его напрямуюфайл условной компиляции(Аналогично способу React Native).

С мобильной стороны,uni-appна основеweexУстановить набор наборовnvueМакияж программыweexнедостатки API;Taroвременно базируется наexpoдобиться такого же эффекта;chameleonНа мобильной стороне есть набор SDK для общения на родных языках с многотерминальными протоколами.

С точки зрения H5,chameleonТакже поддерживается реализациями полиморфных протоколов,uni-appа такжеTaroВсе они реализуют набор совместимых библиотек компонентов и API в H5.

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

Таким образом, результат последнего раунда сравнения:

chameleon > Taro,uni-app > mpvue,WePY

Библиотека компонентов/библиотека инструментов/демо

Как самый длинный фреймворк с открытым исходным кодом,WePYНезависимо от демоверсии, количества библиотек компонентов и библиотеки инструментов, все они имеют определенные преимущества.

uni-appУ него есть свой рынок плагинов и UI-библиотека.Если считать платный фреймворк и плагинWePyТоже совершенно ничем не примечательный.

TaroСуществует также официально поддерживаемая кросс-энд библиотека пользовательского интерфейса.taro-ui, а также очень богатый выбор инструментов управления состоянием (Redux, MobX, dva), но количество демок не так хорошо, как у первых двух. ноTaroСуществует инструмент для преобразования кода апплета WeChat в код Taro, который может решить эту проблему.

а такжеmpvueОфициально поддерживаемой библиотеки пользовательского интерфейса нет.chameleonСторонних демонстраций и библиотек инструментов практически нет.

Таким образом, порядок для этого раунда:

WePY > uni-app,taro > mpvue > chameleon

стоимость доступа

Есть два аспекта: затраты на доступ:

Во-первых, фреймворк обращается к исходной экосистеме апплетов WeChat. Поскольку мини-программы WeChat стали доминирующим игроком, компоненты и библиотеки с открытым исходным кодом (такие какwxparse,echart,zan-uiи т. д.) в основном написаны на основе собственного синтаксиса апплета WeChat. слишком далекоuni-app,Taro,mpvueСуществуют документы или демонстрации для использования собственных компонентов/библиотек апплета непосредственно во фреймворке,WePYИз-за проблем с запуском механизма во многих ситуациях требуется небольшое изменение исходного кода целевой библиотеки.chameleonОн предоставляет метод миграции для пошагового изменения исходного кода целевой библиотеки.

Второй — реконструкция части фреймворка доступа исходного проекта апплета WeChat. В связи с этим Таро провел смелую практику в апплете для покупок Jingdong.Подробности см. в статье«Практика Таро по мини-программе покупок Jingdong». В других фреймворках соответствующий контент не упоминается.

Для обоих методов доступа Таро предоставляетtaro convertФункция, вы можете преобразовать исходный апплет WeChat в многоконечный код TARO или преобразовать экологический компонент апплета WeChat в компоненты TARO.

Таким образом, порядок для этого раунда:

Taro > mpvue,uni-app > WePY > chameleon

Конструкция с открытым исходным кодом

Как далеко может зайти работа с открытым исходным кодом, определяется командой поддержки фреймворка и сторонними разработчиками. Хотя строительство с открытым исходным кодом не может быть определено количественно, это по-прежнему очень важный критерий для измерения жизнеспособности фреймворка/библиотеки.

Судя по количеству сторонних авторов,Taroлидировать в этом отношении иTaroНекоторые из основных пакетов/функций (MobX, CSS-модули, псевдонимы) также предоставлены сторонними разработчиками. Кроме того, открытый исходный код TencentomiЧасть апплета фреймворка также основана на Taro.

WePYБлагодаря плану открытого исходного кода Tencent, он также имеет хорошие показатели в этом отношении;mpvueИз-за стагнации развития в течение длительного времени он относительно отсталый; это может быть причиной стратегии продукта,uni-appНе в восторге от создания открытого исходного кода, и даже некоторые части кода не являются открытым исходным кодом;chameleonНе так давно он был открыт с открытым исходным кодом, но его код и тестовые примеры очень стандартизированы, и в будущем он может хорошо работать.

Тогда результаты этого раунда сравнения таковы:

Taro > WePY > mpvue > chameleon > uni-app

Наконец, добавьте общую экологическую сравнительную диаграмму:

будущее

Судя по объявленным планам по каждому фреймворку:

WePYуже опубликованоv2.0.alphaверсии, хотя общедоступной документации нет2.0Что нового в версии/функциях, но по словам ее авторов привносят,WePY 2.0Он будет увеличиваться, и это версия, «достойная разработчиков». Автор тоже очень ждет официального релиза 2.0WePYПредставление.

mpvueуже опубликовано2.0, в основном для обновления поддержки других конечных апплетов. Но с точки зрения отправки кода и скорости ответа/решения проблемы,mpvueЕсли вы хотите что-то изменить в будущем, вы должны сначала рассеять обеспокоенность сообщества по поводуmpvueВне зависимости от вопроса обновлять или нет.

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

chameleonПлан относительно амбициозен. Хотя это последняя структура, функции, которые были запланированы или реализуются, включают:

Быстрое приложение и протокол расширения терминала
Общая библиотека компонентов и библиотека компонентов вертикального класса
Графические средства разработки для НИОКР
Графический инструмент для построения страниц, не связанный с исследованиями и разработками.

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

TaroБудущее также заслуживает ожидания. Ближайшие релизы Таро1.3Версия будет поддерживать следующие функции:

Быстрая поддержка приложений
Taro Doctor, который автоматически проверяет конфигурацию проекта и законность кода
Дополнительная поддержка грамматики JSX, ограниченная грамматика 1.3 только для ограничения производительности只能用 map 创造循环组件один
Размер упаковки H5 значительно уменьшен

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

Эпилог

Итак, с учетом всего сказанного, какой из них использовать?

Если вы не против попробовать и изучить DSL, вы можете попробоватьWePY2.0 иchameleon, один из них представляет собой новое обновление 2.0, которое давно готовилось, а другой имеет полиморфный протокол, специально разработанный для мультитерминала.

uni-appа такжеTaroДля сравнения, это больше похоже на фреймворк типа «ведро», в нем нет явных недостатков с точки зрения инструментов, библиотек пользовательского интерфейса, опыта разработки и поддержки нескольких терминалов. а такжеmpvueИз-за стагнации разработки на какое-то время кажется, что все аспекты не так хороши, как на их основе, на стороне апплета.uni-app.

Конечно, Talk дешев. Если вас больше интересует эта тема, вы можете перейти на GitHub для дальнейших исследований.Если у вас есть время, чтобы увидеть код, если у вас есть время, чтобы увидеть представление:

chameleon: GitHub.com/Brother/Что за чай...
mpvue: GitHub.com/Mehtuan-DI Ах…
Taro: github.com/NervJS/taro
uni-app: GitHub.com/Открыто много раз/UN…
WePY: GitHub.com/Tencent/WEP…

(в алфавитном порядке)