В списке трендов Github раскрывается принцип работы инструмента визуализации процессов iMove!

внешний интерфейс
В списке трендов Github раскрывается принцип работы инструмента визуализации процессов iMove!

Текст / Департамент Али ТаоF(x) Team - бамбук

iMoveЭто логически повторно используемая, функционально-ориентированная библиотека инструментов JavaScript для визуализации процессов.

280+ звезд за один день? !

Наши последние проекты с открытым исходным кодомiMoveОн поднялся на 280+ звезд за один день и поднялся на нее одним махом.githubПервое место в списке трендов, результаты по-прежнему хорошие, что свидетельствует о том, что этот проект точно позиционируется и действительно решил проблему разработчика.


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

Расскажите, почему мы делаем iMove?

Этот раздел кратко

  • почему мы делаемiMove?
  • Как выглядит мой идеальный фронтенд?
  • НапримерiMoveКакую проблему наконец решил этот визуализатор процессов?

Передняя загадка

Я думаю, что во фронтенд-разработке много проблем, особенно следующие 3 пункта.

  • Пользовательский интерфейс устаревает, поэтому разработка должна идти в ногу
  • Логические проблемы, разработка также должна изменить код, внутри много внутренней логики обработки
  • Объединение интерфейсов — это историческая причина, в основном вызванная сотрудничеством с серверной частью. Вообще-то, нетNode BFFСлои, которые создаются компонентами, вызовут много проблем.

Идеальная передняя часть в моих глазах

Проще говоря, на самом деле мой идеальный фронтенд может сделать следующие 4 пункта.

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

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

Так что жеiMove ?


  1. Это инструмент, неинвазивный.
  2. Дважды щелкните, чтобы написать функцию, и поставленный процесс может экспортировать исполняемый код, что удобно для интеграции в конкретные проекты.
  3. Тест удобный, по правому клику выполнять сразу, тут есть новшество.
  4. Позвольте разработке завершить разработку функций, таких как конфигурация операций, повторное использование иLowcode.

Возьми каштан 🌰

Приведенные выше введения могут показаться несущественными и трудными для понимания. Давайте рассмотрим пример~

Если однажды вы получитеКнопка покупки на странице сведенийпотребности:

  • Получить информацию о продукте на странице сведений
  • Информация о продукте включает следующее
    • Получил ли текущий пользователь купон
    • Вам нужно обратить внимание на магазин или присоединиться к участнику, чтобы получить купон на товар?
  • В соответствии с информацией о возвращенном продукте кнопка покупки имеет следующие формы
    • Если купон уже был востребован, на кнопке будет отображаться «Купон коллекции + покупка».
    • Если нет ваучера
    • Если вам нужно подписаться на магазин, чтобы получать купоны, на кнопке будет отображаться «Подписаться на магазин, чтобы получать купоны + купить».
    • Если вам нужно присоединиться к участнику, чтобы получить купон, на кнопке будет отображаться «Присоединиться к участнику, чтобы получить купон + купить».
    • В нештатных ситуациях покажите карманный стиль
  • Примечание. Если пользователь не вошел в систему, вызовите страницу входа.

Мы можем преобразовать приведенную выше сложную бизнес-логику в следующий псевдокод:

// 检查登录
const checkLogin = () => {
  return requestData('/is/login').then((res) => {
    const {isLogin} = res || {};
    return isLogin;
  }).catch(err => {
    return false;
  });
};
// 获取详情页数据
const fetchDetailData = () => {
  return requestData('/get/detail/data').then((res) => {
    const {
      hasApplied,
      needFollowShop,
      needAddVip,
    } = res;
    if(hasApplied) {
      setStatus('hasApplied');
    } else {
      if(needFollowShop) {
        setStatus('needFollowShop');
      } else if(needAddVip) {
        setStatus('needAddVip');
      } else {
        setStatus('exception');
      }
    }
  }).catch(err => {
    setStatus('exception');
  });
};
checkLogin().then(isLogin => {
  if(isLogin) {
    return fetchDetailData();
  } else {
    goLogin();
  }
});

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


Как показано выше, непонятная логика кода проходитiMoveЭто выражено в виде блок-схемы, и теперь бизнес-логика продукта понятна с первого взгляда. Помимо,iMoveКаждый узел в графе поддерживает запись кода, а направление блок-схемы определяет порядок выполнения узлов в графе.Можно сказать, что«Визуализация процесса — это естественные комментарии к коду».

Следовательно, из«Легко читать»а также"ремонтопригодность"Погляди:iMoveФормы визуализации процессов > Менеджер по продуктуPRDФорма текстового описания > Форма программного кода.

Сценарии применения iMove

внешний интерфейсReactКомпоненты обычно вComponentDidMountИнициируйте запрос в , и завершите рендеринг или другую бизнес-логику на основе успешных данных запроса. Это совершенно не нужно.UI изAjaxОбработка запроса. Помимо цикла объявления компонентов, есть только различные события взаимодействия, которые обычноUI а такжеAjaxсмешанная сцена.


  1. Внешние процессы, такие как события кликов, обратные вызовы жизненного цикла компонентов и т. д.
  2. внутренние процессы, такие какNode.js илиServerlessполе.
  3. Интерфейс + серверная часть, такие как события кликов во внешнем интерфейсе,Ajaxзапрос и бэкендAPI.

Преимущество iMove

Вышеупомянутый контент является толькоiMoveВерхушка айсберга, давайте посмотримiMoveКаковы преимущества:

1) Логику можно использовать повторноСтолкнувшись с часто повторяющимися ежедневными бизнес-требованиями, мы неизбежно столкнемся со многими похожими и повторяющимися задачами разработки. Отраженный в коде, он может быть универсальнымutilsИнструментальный метод также может быть частью кода общей бизнес-логики (например, совместное использование), но по сути этосегмент кода. Чтобы улучшить повторное использование кода, мы часто инкапсулируем его в некоторые общие классы или функции, а затем копируем и вставляем в каждый проект (если вы хорошо справляетесь, вы можете инкапсулировать его какnpmpackage, но процесс модификации релиза будет немного громоздким).

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

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

2) Функционально-ориентированныйЧто касается конструкции узла,iMoveОн более сдержанный, каждый узел фактически экспортирует функцию, поэтому запуск процесса кодирования почти не требует затрат, если у вас есть основа JavaScript, вы можете ее использовать. ты можешь делать как обычноimportразноеnpmpackage, и не рассматривайте проблему загрязнения имен глобальных переменных между узлами, относитесь к ней как к общемуjsфайл.

3) Визуализация процессаМы называем этот метод разработки визуализацией процесса как«Логическая оркестровка»., его преимущества (логичное выражение более интуитивно понятно и легко для понимания) были представлены ранее, поэтому я не буду повторять их здесь.

4) Разделение логики и пользовательского интерфейсаМы часто сталкиваемся в нашем ежедневном развитии бизнеса:Стиль пользовательского интерфейса часто меняется, а бизнес-логика относительно стабильна, и даже существуют требования ABTest для проверки влияния изменений..

Однако многие разработчики не предусматривают этот шаг в будущем в начале разработки компонента, поэтому бизнес-компонент часто объединяет «бизнес-логику» и «стиль пользовательского интерфейса». Однако, когда дело доходит до ревизии, непросто отделить и повторно использовать бизнес-логику, и стоимость обслуживания также значительно возрастает. Но когда вы используетеiMoveПосле разработки вы обнаружите, что код компонента естественным образом разделен на «бизнес-логику» + «стиль пользовательского интерфейса». Более того, разные версии пользовательского интерфейса могут поддерживать несколько наборов, но часть бизнес-логики нужно передать толькоiMoveПросто поддерживайте один набор. Такой метод разработки не только максимизирует повторное использование кода бизнес-логики, но и повышает ремонтопригодность проекта.

5) Более простое тестирование кодачтобы улучшитьiMoveопыт, мы достигли"Запустите код узла онлайн на стороне браузера"функция. Это означает, что при выполнении функции узла вы всегда можетеmockРазличные входные данные, чтобы проверить, соответствуют ли результаты работы узла вашим ожиданиям.

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

6) Нет ограничений по языку/сцененесмотря на то чтоiMoveсам по себе являетсяJavaScriptбиблиотека инструментов, но в нашем дизайнеiMoveОграничений по используемому языку и сценариям нет. То есть можно не только использоватьiMoveОркестровка в front-end проектахjsкод, вы также можете использоватьiMoveОркестрация в бэкенд-проектеjavaкод или даже другие языки для других сценариев. И все это, в конце концов, зависит только отiMoveНа каком языке компилировать блок-схему?

Принцип технологии iMove

справаiMoveПосле определенного понимания предыстории проекта эта статья поможет вам раскрыть технические принципы, лежащие в его основе~

Как легко создать приложение для создания блок-схемы?

отложить в сторонуiMoveНе говоря уже о разработанных функциях, вы можете использовать его как инструмент для рисования блок-схем (вы также можете экспортировать картинку и сохранять ее локально после рисования). ТакiMoveКак нарисовать блок-схему? Я думаю, что всем должно быть более любопытно, здесь должно быть сделано для команды муравьевX6Нравится движок 👍, он действительно полезен~

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


"Схема конфигурации доставки" нажмите "Изменить"


В будущем мы опубликуем специальную статьюiMoveкак использоватьX6Быстро создайте приложение для создания блок-схемы.


iMoveЯдро основано наX6реализован протокол.

  • Есть узлы: используйтеX6Визуальный интерфейс легко повторно использовать и упорядочивать.
  • Есть указывающая грань: то есть процесс визуализирован, прост и интуитивно понятен, а к кромке можно привязать параметры.
  • имеютfunction а такжеschema2form, который поддерживает определения функций, предназначенные для разработчиков. служба поддержкиform, так что каждая функция может быть настроена с входными параметрами, эта часть основана на открытом исходном коде Alibaba.form-renderосуществленный.

Весь проект не сложный, на основеX6 а такжеform-renderДальнейшая интеграция, стандартизация метода письма и создание инструмента аранжировки, такой сдержанный дизайн делаетiMoveОн имеет характеристики маленького и красивого, который легко разрабатывать и использовать.

Как скомпилировать блок-схему в исполняемый код?

По сравнению с рисованием блок-схем,iMoveЧто еще более привлекательно, так это то, что он может компилировать блок-схемы в код, который действительно можно запускать в бизнес-проектах.

Онлайн-компиляция против локальной компиляции

первый,iMoveОба поддерживают онлайн-компиляцию на стороне браузера.zipЗагрузка пакета, также поддерживает локальную командную строкуwatchСкомпилируйте код в режиме реального времени.

1) Онлайн компиляция


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

Как этого добиться? После исследования мы обнаружили, чтоjszipэто набор для чтения/записи/измененияzipфайл в одномJavaScriptбиблиотека, но также поддерживает работу на стороне браузера. Таким образом, мы можем полностью сгенерировать файл в соответствии с каталогом файла кода.jsonбросать вjszipупаковка для конечного использованияfile-saverДоступно для скачивания.

// key 是"文件/目录名"，value 是对应的"文件内容"
{
  "nodeFns": {
    "node1.js": "...",
    "node2.js": "...",
    "index.js": "..."
  },
  "context.js": "...",
  "dsl.json": "...",
  "index.js": "...",
  "logic.js": "..."
}

2) Локальная компиляцияСпособ онлайн компиляции прост, но в развитии проекта возникнет проблема:Каждый раз, когда вы изменяете код, вам нужно загрузить его сноваzippackage и разархивируйте его в указанную директорию, особенно при отладке, очень неудобно часто модифицировать код. Для решения этой проблемы,iMoveПредоставляет способ локальной компиляции черезwatchОперация сохранения блок-схемы компилируется и выводится в бизнес-проект в режиме реального времени.


Как этого добиться? Суть вышеуказанного вопроса заключается в следующем:Как локально контролировать операцию сохранения блок-схемы на стороне браузера. Но наоборот, почему нельзяОтправляет ли блок-схема сообщение, чтобы уведомить локальное устройство, когда оно сохранено?Таким образом, мы оба можем использоватьsocket.ioи другие библиотеки классов устанавливаются между браузером и локальнымwebsocketтакже можно использовать общениеkoa / expressПодождите, пока библиотека классов запустит локальныйhttpСервер, если он инициирует компиляцию и вывод кода, когда он получает сигнал сохранения блок-схемы.

Основные принципы работы кода iMove

решеноiMoveКак скомпилировать код, давайте посмотримiMoveКак работает скомпилированный код.

Чтобы запустить код,iMoveНеобходимо решить две основные проблемы:

  1. Как выполнять узлы один за другим в порядке блок-схемы?
  2. Как обрабатывать поток данных (например, возвращаемое значение предыдущего узла является входом следующего узла)?

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

1) Для первой задачи последовательного выполненияiMoveНедорогой способ решения:

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

2) Для второй задачи потока данныхiMoveУчитывая различные сценарии операций с данными узлами в практических приложениях, всего разработано четыре метода чтения и записи данных:

  • config:Доступ только для чтения, конфигурация доставки каждого узла и узлы не мешают друг другу.
  • payload:только чтение,logic.invokeПри запуске логики вы можете передатьpayloadзначение, которое может прочитать каждый узел.
  • pipe:Доступно только для чтения, вывод предыдущего узла является вводом следующего узла.
  • context:Чтение-запись общедоступных данных в логическом потоке, если узел-предок проходитsetContextУстановите данные, затем узлы-потомки могут проходить через узлыgetContextдоступ к этим данным.

Слишком далеко,iMoveИсправлена ​​проблема с запуском кода блок-схемы. если вы обратите вниманиеiMoveВ скомпилированном коде вы можете увидеть следующую структуру:


Понимание потока

Основная концепция Flow очень проста, это направленный ациклический граф (DAG), и потоки данных между узлами.



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

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




Один узел в потоке задается конечным узлом (End Node), через отношение соединения между узлами, начиная с конечного узла, через соединение просматриваются все зависимости (поиск по дереву) и получается стек операций узла . Например, на приведенном выше рисунке мы можем получить стек вида [узел1, узел2, узел3]. Выполнение функции каждого узла по порядку извлекает стек для запуска всего потока. (Обратите внимание, что это реализация простой версии Flow, все еще пакетная, а не потоковая)

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

Вышеизложенное представляет собой концепцию потока в программировании на основе потока (FBP). По сути, это та же концепция, что и iMove. imove основан на x6, x6 решает проблемы реализации и визуализации DAG в сочетании с методом записи функции расширения узла, а затем реализует ориентированный на разработчиков инструмент логической организации. Это так просто.

Как запустить код узла онлайн?

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


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


Откройте панель запуска и заполните соответствующие параметры для выполнения определенного кода.


запустить онлайнiMoveКод узла должен решать некоторые из следующих проблем:

  • Как напрямую запустить узел в браузереimport/exportЖдатьesmканонический код
  • в узлеimportВойдитеnpmПакет также может бытьcjsспецификация, как работает браузер?
  • Как запустить код, когда одновременно выбрано несколько узлов

iMoveПринцип реализации в основном основан наhttp-import, мы напишем статью, чтобы представить принцип его реализации позже, так что следите за обновлениями~

Как автоматически разрешать зависимости пакета npm для узла?

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

Принцип на самом деле относительно прост, поймитеnpm viewкоманда сделает. просто возьмиnpm view lodash.getНапример, просмотр вывода командной строки показывает:

$ npm view lodash.get
lodash.get@4.4.2 | MIT | deps: none | versions: 13
The lodash method `_.get` exported as a module.
https://lodash.com/
dist
.tarball: https://r.cnpmjs.org/lodash.get/download/lodash.get-4.4.2.tgz
.shasum: 2d177f652fa31e939b4438d5341499dfa3825e99
maintainers:
- phated <blaine.bublitz@gmail.com>
dist-tags:
latest: 4.4.2
published over a year ago by jdalton <john.david.dalton@gmail.com>

Как упоминалось выше, команда успешно получаетlodash.getПоследняя версия этого пакета. Конечно,npm viewКоманда не подходит для выполнения на стороне браузера, но по сути она будет проходить через сетевой запрос query. мы повторно используемnpm view lodash.get --verboseВы можете видеть, что запрос фактически инициируется в процессе выполнения:r.cnpmjs.org/lodash.get.

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


Суммировать

Что касается пользовательского интерфейса, есть инструменты для преобразования черновиков дизайна, такие как imgcook, которых достаточно для работы с изменениями. А вот в области логики очень мало разработчиков, которые действительно могут решить задачу, iMove — исследование в этом направлении. Я считаю, что благодаря приведенному выше объяснению каждый может почувствовать его очарование.

Слоган iMoveMove your mouse, generate code from flow chart, то есть переместите мышь, напишите функцию узла, экспортируйте код и поместите его в конкретный проект, чтобы использовать его напрямую. Разработать как оперативную конфигурацию уже не желание, а реальность. Если вы заинтересованы в iMove, вы также можете вместе участвовать в проекте с открытым исходным кодом.


Помимо статей, вас ждет разблокировка еще командного контента 🔓

Категории