В 2020 году как выбрать небольшой программный фреймворк

внешний интерфейс Апплет WeChat

напишите в начале, это не реклама.

Прошло 4 года с момента появления апплета WeChat. С самого начала можно было выбрать только нативную грамматику, и сейчас процветает фреймворк апплета Rax/Taro/uni-app. За этим стоит экологическая фрагментация, вызванная нативной грамматикой апплета, а также сильный спрос бизнеса на «один код и несколько концов», и в настоящее время процветает внешняя экосистема.

Рождение мини-программ

WeChat запущен

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

Когда родился апплет WeChat, он сам определил набор «стандартов», которые были несовместимы с существующей экосистемой во внешнем интерфейсе.Первоначальный фреймворк не имел даже компонентов, не имел npm и был серьезно оторван от реальности. веб-экосистема. Разработчики несчастны из-за особой двухпоточной модели и четырех разных синтаксисов. апплетоткрытымОн открыт только для стороннего бизнеса.

Стая имитировать

Другие поставщики увидели открытие малого программного бизнеса и пытаются создать приложение платформенного типа. Небольшая программа Alipay, небольшая программа Baidu, небольшие процедуры Taobao, 360 небольших процедур, быстрые приложения ... большинство из них выбрали одну и ту же архитектуру, фреймворк, фреймворк, и это больше не от технологии Решение делать, но хочется курить благополучие апплетов WeChat, чтобы разработчики могли быстрее размещать их на своей платформе. Конечно, два из них немного отличаются. Один из них — ранний апплет Taobao, но он не только поддерживает написание AXML, но также поддерживает SFC — для разработки с помощью Vue.Эта архитектура дает разработчикам право выбора и может лучше соединить существующую среду внешнего интерфейса. Другое — это быстрое приложение, но также использующее синтаксис, похожий на Vue, оно слегка деформировано, что сделало его стандартом, больше похоже на волшебное изменение Vue, и стоимость разработки разработчиков не была эффективно улучшена.

выбор кадра апплета

Собственный синтаксис мини-программы и расширенная структура

Мини-программа Родная грамматика

Не следует ли отвергнуть туземную грамматику? Стоя в этот момент времени в 2020 году,не так. Что касается мини-программ WeChat или мини-программ Alipay, то текущей экосистемы мини-программ вполне достаточно, чтобы разработчики могли использовать некоторые из существующих клиентских экосистем для разработки приложений, отвечающих ожиданиям.

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

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

Система прогрессивного улучшения

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

Открытый исходный код TencentomixВзяв фреймворк в качестве примера, давайте кратко рассмотрим его использование:

логический уровень

create.Page(store, {
  // 声明依赖
  use: ['logs'],
  computed: {
    logsLength() {
      return this.logs.length
    }
  },
  onLoad: function () {
    //响应式，自动更新视图
    this.store.data.logs = (wx.getStorageSync('logs') || []).map(log => {
      return util.formatTime(new Date(log))
    })
    setTimeout(() => {
      //响应式，自动更新视图
      this.store.data.logs[0] = 'Changed!'
    }, 1000)
  }
})

слой просмотра

<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

Не будем говорить о том, является ли его синтаксис интуитивно понятным или простым в использовании. Проще говоря, это целоеСохранить существующий синтаксис апплета. Но на этой основе он был расширен и улучшен, например, за счет введения более репрезентативного Vue.computed, например, можно напрямую передатьthis.store.data.logs[0] = 'Changed'Изменить статус. Можно сказать, что это нативный синтаксис апплета наполовину Vue, наполовину React (здесьПоловинаПросто квантификатор), решение полностью для Vue.

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

Структура класса преобразования

Миссия фреймворка класса преобразования полностью отличается от фреймворка прогрессивного улучшения. Миссия фреймворка класса трансформации — позволить разработчикампочти не чувствуюСобственный синтаксис апплета может в большей степени подключаться к существующей экологии внешнего интерфейса и может достигать «один код, несколько терминалов».требования бизнеса, только последниеПродукт сборки** — это код апплета. С развитием за последние несколько лет основные аспекты структуры класса преобразования делятся на два типа — время компиляции/время выполнения. Два сценария будут проанализированы отдельно ниже.

Время компиляции Ракса/Таро 2.0

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

img

В качестве примера возьмем простой фрагмент кода:

Ракс:
import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';

export default function Home() {
  const [name, setName] = useState('world');
  useEffect(() => {
    console.log('Here is effect.');
  }, [])
  return <View>Hello {name}</View>;
}
Преобразованный код апплета:

логический уровень

import { __create_component__, useEffect, useState } from 'jsx2mp-runtime/dist/ali.esm.js'

function Home() {
  const [name, setName] = useState('world');
  useEffect(() => {
    console.log('Here is effect.');
  }, []);
  
  this._updateData({
    _d0: name
  });
}

Component(__create_component__(Home));

слой просмотра

<block a:if="{{$ready}}">
  <view class="__rax-view">{{_d0}}</view>
</block>

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

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

с простымreturn <View>Hello world</View>Например, если вы хотите извлечь<View>Hello world</View>, вы можете написать этот код синтаксического анализа:

// 省略定义 babel parser 和包装 traverse 的部分
const code = fs.readFileSync(FILE_PATH);
const ast = parser(code);
traverse(ast, {
  ReturnStatement(path) {
    const targetNodePath = path.get('argument');
    if (targetNodePath.isJSXElement()) {
      // 如果 return 的子元素是一个 JSX Element 就收集 or 处理一下
    }
  }
})

targetNodePathто есть<View>Hello world</View>Путь к узлу AST, вы можете самостоятельно искать статьи, связанные с AST.Вспомогательный сайтПорогов в принципе нет.

Однако эта схема имеет очевидные преимущества и недостатки.

Преимущество
  • Низкая потеря производительности во время выполнения
  • Целевой код понятен, что разработчики пишут, то и получают
  • Оптимизация во время выполнения, во время компиляции

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

недостаток
  • высокие грамматические ограничения

Это предъявляет довольно высокие требования к разработчикам фреймворков времени компиляции, поскольку необходимо использовать весь синтаксис, используемый разработчиками в разделе шаблонов. Потому что у большинства фронтенд-разработчиков уже есть определенные зависимости от гибкого синтаксиса, такие как использование высокоуровневых компонентов, например, написание множества условных суждений.returnи т.п. Кроме того, из-за компиляции и преобразования 1:1 разработчики по-прежнему должны следовать спецификациям разработки небольших программ при разработке, например, только один компонент может быть определен в файле.

В настоящее время входит в состав Alibaba Group, решение Rax для времени компиляцииМного бизнеса приземлилось, в том числе апплет "киноспектакль" и т.д. Из практики разработчика, если вы можете овладеть навыками разработки во время компиляции, вы можете гарантировать окончательныйreturnПростота шаблона, синтаксические ограничения по-прежнему находятся в допустимых пределах.

Rax Runtime/Remax/Taro Next

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

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

Хотя используется толькоподдерживатьДва слова, но то, что делает логический слой, на самом деле сложнее. Первое, что нужно сделать, это разобраться с отношениями между узлами, смоделироватьappendChild/ removeChild/updateNodeи другие действия по управлению деревом VDOM. Второй по важности момент — симуляция событий.На логическом уровне каждый класс узлов будет наследоваться отEventTargetБазовый класс, это то же самое, что и W3C, а затем переданоnodeIdВ качестве идентификатора для сбора событий, которые необходимо отслеживать, когда уровень представления инициирует событие узла посредством действия, он передает это событие в собственном событии апплета.event.currentTarget.dataset.nodeIdПолучите идентификатор целевого узла и, наконец, вызовите целевой обратный вызов.

Из-за большого объема статьи более подробное описание каждой части не приводится Заинтересованные студенты могут пройтиRaxисходный код илиnpm init rax demoНачните проект, чтобы изучить весь принцип с конечным продуктом.

На этом этапе даже решение для среды выполнения имеет разные идеи реализации. И Kbone (среда выполнения Rax преобразована из Kbone), и Taro Next полностью соединяют интерфейсную экосистему, имитируя веб-среду, в то время как Remax просто соединяет React и апплеты через средство согласования реакций.

Автор считает, что с точки зрения потребностей бизнеса Rax и Taro Next могут быть более открытыми, чем Remax. Прежде всего необходимо рассмотреть три части.(1) Нет грамматических ограничений.Раз нет грамматических ограничений, то почему нельзя разработать интерфейс более привычным способом, то есть иметь право для работы с DOM; (2) не в сочетании с DSL, хотя признание React выше в Alibaba Group, с точки зрения принципа реализации сильная привязка к определенной структуре не должна быть оптимальным решением; (3) миграция старый веб-бизнес, сегодня у нас есть Многие из разработчиков, с которыми сталкиваются разработчики, должны перенести исходные веб-страницы в апплет из-за давления со стороны бизнеса или других обстоятельств.Таким образом, это лучшее решение для использования моделируемой веб-среды.Согласно нашим тесты, большая часть бизнес-миграции почти без проблем.

Вредный! Все, что сказал, схема времени выполнениядействительно ароматный, но этоне спаситель, позвольте мне рассказать о его недостатках. **Недостаток 1: **Объем передаваемых данных большой, нужно передать полное дерево компонентов с логического слоя на слой представления; **Недостаток 2:** На странице большое количество слушателей, и каждый компонент должен все время прослушивать их все.событие, в процессе запуска события, черезnodeIdОтфильтруйте события, которые действительно должны быть инициированы ** Недостаток 3: ** Шаблоны рендерятся рекурсивно. Если используется нативный синтаксис, нативный фреймворк может знать общую структуру страницы перед рендерингом, чтобы оптимизировать рендеринг, но если вы просто используете что-то вроде<view a:if="{{node.tagName === 'view'}}"></view>По такой информации сложно судить об истинной структуре страницы.

комбинация

Хотя у вас не может быть и рыбы, и медвежьей лапы, вы можете иметь по половине каждого~ Опять же, эта статьяне реклама. Что, если схемы времени компиляции и времени выполнения сосуществуют? На основе интерфейса AmoyВысокосовременная инженерияНакопление, разработчики привыкли строить проекты через блоки. Благодаря тому, что Rax накопил как решения времени компиляции, так и решения времени выполнения, мы надеемся, что сможем использовать комбинацию решений времени выполнения и решений времени компиляции. Модули со сложными основами или требованиями к производительности реализуются во время компиляции. Затем он вводится в проект среды выполнения в виде пакета npm, что эффективно снижает потери производительности решения среды выполнения и обеспечивает возможность использования большинства бизнес-сценариев.неограниченныйСинтаксис завершен, и разработчики столкнулись с Rax DSL.

Взгляните на демо:

// 这是一个倒计时组件，通过编译时实现，然后发布为 rax-taobao-countdown
import { createElement } from 'rax';
import View from 'rax-view';

function CountDown(props) {
  // 省略各种逻辑...
  return <View>{day}:{hours}:{minutes}:{seconds}</View>
}

export default CountDown;

// 运行时项目
import { createElement } from 'rax';
import CountDown from 'rax-taobao-countdown';

function Home() {
  return <CountDown now={Date.now()} />
}

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

{
  "tagName": "custom-component",
  "type": "element",
  "behavior": "CountDown",
  "children": []
}

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

Интернет — это будущее

Мини-программа Родная грамматикаточно нетАпплет или решение для рендеринга следующего поколения. Благодаря существующим грамматическим спецификациям мини-программ WeChat разработчики могутпохищение, только заставит больше людей хотеть прорвать осаду. Похоже, что апплет WeChat понял это.wxsНа уровне представления вы можете в определенной степени манипулировать DOM и даже получать экземпляры компонентов на логическом уровне и т. д., что может предоставить больше возможностей для существующей структуры классов преобразования. Но что, если бы мини-программы изначально не были так плохо спроектированы, чтобы мы могли остаться без работы (шучу)?

Для бизнес-разработчиков «один код с несколькими концами» — самый эффективный путь. Сегодняшние бизнес-потребности могут быть размещены только в контейнере апплета, завтрашний спрос может быть размещен в Интернете или даже во Flutter в будущем. Интернет ближе всего к интерфейсному разработчику, спецификация Organizational Assurance (W3C). Поэтому на данный момент в 2020 году как поставщики фреймворков, так и бизнес-разработчики должны больше думать с точки зрения стандартов, чтобы у бизнес-кода было больше возможностей.

Суммировать

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

Прием на работу

Если вам интересно то, что я сказал об «одном коде с несколькими концами», или если вы интересуетесь интерфейсной архитектурой. Вы можете рассмотреть возможность присоединиться к нам.На данный момент команда имеет несколько направлений, таких как терминальная архитектура, архитектура Node и бессерверная платформа R&D.

Контактный адрес электронной почты: fushen.jzw#alibaba-inc.com (# => @)

Категории