Fiber что это за программа

Виртуальный DOM и детали его реализации в React¶

Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.

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

Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с React-элементами, поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React.

#1 — React Fiber

Теневой DOM похож на виртуальный DOM?¶

Нет, они совсем разные. Теневой DOM (Shadow DOM) — это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM – это концепция, реализованная библиотеками в JavaScript поверх API браузера.

Что такое «React Fiber»?¶

Fiber – новый механизм согласования в React 16, основная цель которого сделать рендеринг виртуального DOM инкрементным. Узнать больше об этом.

Источник: reactdev.ru

Вступление в архитектуру React Fiber

Привет, Хабр! Предлагаю вашему вниманию перевод статьи «React Fiber Architecture» автора Andrew Clark.

Вступление

React Fiber — прогрессивная реализация ключевого алгоритма React. Это кульминационное достижение двухгодичных исследований команды разработчиков React.

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

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

Перед прочтением данной статьи рекомендуется ознакомиться с основными принципами React:

• React Components, Elements, and Instances
• Reconciliation
• React — Basic Theoretical Concepts
• Design Principles

Обзор

Что такое сверка (reconciliation)?

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

React Fiber Все только начинается

Апдейт — это изменение в данных, которые используются для отрисовки React приложения. Обычно это результат вызова метода setState; конечный результат отрисовки компонента.

Ключевая идея React API — мыслить об апдейтах так, если бы они могли привести к полной отрисовке приложения. Это позволяет разработчику действовать декларативно, а не переживать о том насколько рациональным будет переход приложения из одного состояния в другое (от А до B, B до С, С до A и тд.).

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

Сверка — это алгоритм, за которым стоит то, что мы привыкли называть «Virtual DOM». Определение звучит как-то так: когда вы рендерите React приложение, дерево елементов, которое описывает приложение генерируется в зарезервированной памяти. Это дерево потом включается в рендеринг окружение — на примере браузерного приложения, оно переводится в набор DOM операций. Когда состояние приложения обновляется (обычно вызовом setState), новое дерево генерируется. Новое дерево сравнивается с предыдущим, чтоб просчитать и включить именно те операции, которые нужны для перерисовки обновленного приложения.

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

Ключевые понятия:

• Разные типы компонентов предполагают генерацию существенно разных деревьев. React не будет пытаться сравнить их, а просто заменит старое дерево полностью .
• Различие списков производиться с использованием ключей (keys). Ключи должны быть «постоянными, предсказуемыми и уникальными».

Сверка против рендеринга

DOM дерево это одно из окружений, которые React может отрисовать, к остальным можно отнести нативные iOS и Android Views с помощью React Native (Вот почему Virtual Dom — название немного неподходящее).

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

Это разделение означает, что React DOM и React Native могут использовать свои собственные механизмы рендеринга при использовании одного и того же cверщика, который находится в React Core.

Fiber – переделанная реализация алгоритма reconciliation. Она имеет непрямое отношение к рендерингу, в то время как механизмы рендеринга (отрисовщики) могут быть изменены чтоб поддерживать все приемущества новой архитектуры.

Планирование — это процесс, который определяет когда работа должна быть выполнена.

Работа — любые вычисления, которые должны быть выполнены. Работа – это обычно результат апдейта (например вызов setState).

Принципы архитектуры React настолько хороши, что могут быть описаны лишь этой цитатой:

В текущей реализации React проходит дерево рекурсивно и вызвает функции рендеринга на всем обновленном дереве в ходе одного тика (16 мс). Однако в будующем он сможет уметь отменять некоторые апдейты чтобы предотвратить скачки фреймов.
Это частообсуждаемая тема касательно React дизайна. Некоторые популярные библиотеки реализуют проталкивающий («push») подход, где вычисления производятся тогда, когда новые данные доступны. Однако, React придерживается подхода протягивания («pull»), где вычисления могут быть отменены когда это необходимо.
Реакт это библиотека не для обработки обобщенных данных. Это библиотека для построения пользовательских интерфейсов. Мы думаем что у него должна быть уникальная позиция в приложении, чтоб определять какие вычисления являются подходящими, а какие нет в данный момент.
Если что-либо за кулисами, значит мы можем отменить всю логику связанную с этим. Если данные приходят быстрее чем норма отрисовки кадров, мы можем обьеденить обновления. Мы можем увеличить приоритет работы, приходящей вследствие взаимодействия с пользователем (такую как появление анимации при нажатии на кнопку) против менее важной работы на бэкграунде (отрисовка нового контента подгруженного с сервера), чтобы предотвратить скачки фреймов.

Ключевые понятия:

• В пользовательских интерфейсах не важно чтоб каждое обновление было применено сразу; фактически такое поведение будет лишним, оно будет способствовать падению фреймов и ухудшению UX.
• Разные типы апдейтов имеют разные приоритеты – обновления анимации должны заканчиваться быстрее чем, скажем, обновление данных хранилища.
• Проталкивающий (push-based) подход трубует от приложения (вас, разработчика) решать как планировать работу. Протягивающий (pull-based) подход позволяет фреймворку принимать решения за вас.

Реакт на данный момент не имеет приемущества планирования в значитильной мере; результаты обновлений всего поддерева будут отрисовываться незамедлительно. Тщательный отбор елементов в алгоритме ядра React, чтобы применить планирование – ключевая идея Fiber.

Что же такое Fiber?

Мы будем обсуждать сердце архитектуры React Fiber. Fiber — это более низкоуровневая абстракция над приложением чем разработчики привыкли считать. Если вы считаете свои попытки понять ее безнадежными, не чувствуйте себе обескураженными (вы не одни). Продолжайте искать и это в конце-концов даст свои плоды.

Мы достигли той главной цели архитектуры Fiber — позволить React воспользоваться планированием. Конкретно, нам нужно иметь возможность:

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

Чтобы все это сделать нам сначала потребуется разделить работу на единицы (units). В некотором смысле это и есть fiber (волокно). Волокно представляет единицу работы.

Чтобы продвинуться далее давайте вернемся к основной концепции React «компоненты как данные функций», часто выражаемые как:

v = f(d)

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

Способ по которому компьютеры в основном проверяют порядок выполнения программы называется стек вызова (call stack). Когда функция выполненена, новый стек-сонтейнер добавляется в стек. Этот стек-контейнер представляет собой работу проделанную функцией.

При работе с пользовательскими интерфейсами, слишком много работы выполняется сразу и это проблема, это может привести к скачкам анимации и будет выглядеть прерывисто. Более того, некоторая из этой работы может быть необязательна если она заменена наиболее новым обновлением. В этом месте сравнение между пользовательским интерфейсом и функцией расходится, потому что у компонентов более специфичная ответственность чем у функций вообще.
Новейшие браузеры и React Native реализует APIs, которые помогают решить эту проблему:
requestIdleCallback распределяет задачи так, чтоб низкоприоритезированные функции вызывались в простой период, а requestAnimationFrame распределяет задачи, чтоб высокоприоритезированные функции были вызваны в следующем кадре. Проблема в том, чтоб использовать эти APIs вам нужно разделить работу отрисовки на инкрементируемые единицы. Если вы полагаетесь только на стек вызовов, работа продолжится пока стек не будет пуст.

Не было бы прекрасно если бы мы могли настроить поведение стека вызовов чтоб оптимизировать отображение частей пользовательского интерфейса? Было бы здорово если бы мы могли прервать стек вызова, чтобы манипулировать контейнерами вручную?

Это и есть призвание React Fiber. Fiber — это новая реализация стека, подстроенная под React компоненты. Вы можете думать об одном волокне как о виртульном стек-контейнере.

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

Кроме планировния, мануальные действия со стеком раскрывают потенциал таких понятий как согласованность (concurrency ) и обработка ошибок (error boundaries).

В следующей секции мы рассмотрим структуру волокон.

Структура «волокна»

Если говорить конкретно, то «волокно» это JavaScript обьект, который содержит информацию о компоненте, его вводе и выводе.

Волокно согласовано со стек-контейнером, но также оно согласовано с сущностью компонета.

Вот несколько важных свойств присущих «волокну» (Этот список не исчерпывающий):

Тип и ключ

Тип и ключ служат волокну так же как и React элементы. Фактически, когда волокно создается, эти два поля копируются ему напрямую.

Тип волокна описывает компонент, которому оно соответствует. Для композиции компонентов, тип это функция или класс компонента. Для служебных компонентов (div, span) тип — это строка.

Концептуально, тип – это функция, выполнение которой прослеживается стек-контейнером.

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

Ребенок и родственник (child and sibling)

Эти поля указывают на другие волокна, описывая рекурсивную структуру волокон.

Ребенок волокна соответсвует значению, которое было возвращено вследствие вызова метода render у компонента. В примере ниже:

function Parent() < return >

Ребенок волокна Parent соответвует Child.

Поле родственник (или сосед) применяется в тех случаях если render возвращает несколько детей (новая особенность в Fiber):

function Parent() < return [, ] >

Дочерние волокна это односвязный список во главе которого первый дочерний элемент. Так что в этом примере, ребенок Parent это Child1, а родственники Child1 это Child2.

Вернемся к нашей аналогии с функциями, вы можете думать о дочернем волокне, как о функции вызываемой в конце (tail-called function).

Пример из Википедии:

function foo(data)

В этом примере tail-called function это b.

Возвращаемое значение (return)

Возвращаемое волокно — это волокно к которому должа вернуться программа после обработки текущего волокна. Это тоже самое что и вернуть адрес стек-сонтейнера.
Это так же можно считать родительским волокном.

Если волокно имеет несколько дочерних волокон, return каждого дочернего волокна возвращает волокно являющееся родителем. В примере выше, возвращаемое волокно у Child1 и Child2 это Parent.

Текущие и кэшированные свойства (pendingProps и memorizedProps)

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

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

Приоритет текущей работы (pendingWorkPriority )

Количество определяющей приоритет работы отображается волокном. Модуль уровня приоритета в React ReactPrioritylevel включает разные уровни приоритетов и что они представляют.

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

function matchesPriority(fiber, priority)

Эта функция только для иллюстрации; она не часть базы React Fiber.

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

Альтернатива (или пара)

Обновление (flush) волокна — это значит отобразить его вывод на экране.

Волокно в разработке (work-in-progress) — волокно которое еще не было построено; другими словами – это стек-контейнер, который еще не был возвращен.

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

Текущему волокну следует волокно разрабатываемое, а за тем, в свою очередь, волокно обновленное.

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

Вам следует думать о поле пара (или альтернатива) как о детали реализации, но она всплывает так часто в документации, что не упомянуть ее было просто невозможно.

Вывод — это служебный елемент (или набор служебных элементов); ноды-листья React приложения. Они специфичны для кажого окружения отображения (например в браузере это ‘div’, ‘span’ и тд.). В JSX они обозначаються как строчные имена тегов.

Итог: Рекомендую попробовать особенности новой архитектуры React v16.0

Источник: habr.com

Подробный обзор React Fiber

React — это JavaScript-библиотека для создания пользовательских интерфейсов. В ее основе лежит механизм, который отслеживает изменения стейта и отображает обновленный стейт на экране. В действительности, мы знаем этот процесс как сверку (reconciliation). Мы вызываем метод setState , и фреймворк проверяет, изменились ли стейт или пропсы, и ререндерит компонент.

Документация React предоставляют хороший обзор механизма сверки на высоком уровне: роль элементов React, методы жизненного цикла и метод render , а также дифференцирующий алгоритм, применяемый к дочерним компонентам. Дерево иммутабельных элементов React, возвращаемое из метода render , обычно называется “виртуальным DOM” (virtual DOM). Этот термин помог объяснить React людям на ранней стадии, но он также вызвал недопонимание и больше не используется в документации React. В этой статье я буду называть его деревом элементов React.

Кроме дерева элементов React, во фреймворке всегда было дерево внутренних элементов (компоненты, DOM ноды и т.д.), используемых для хранения стейта. Начиная с версии 16, React выпустил новую реализацию этого дерева внутренних элементов и алгоритма под названием Fiber, который управляет им. Чтобы узнать о преимуществах архитектуры Fiber, ознакомьтесь со статьей The How and why on React’s use of connected list in Fiber.

Это первая статья из серии, цель которой — научить вас внутренней архитектуре React. В этой статье я хочу дать подробный обзор важных концепций и структур данных, имеющих отношение к алгоритму. Как только у нас будет достаточно информации, мы исследуем алгоритм и основные функции, используемые для обхода и обработки дерева Fiber. В следующих частях цикла я покажу, как React использует алгоритм для выполнения первого рендеринга и обновления стейта и пропсов. Оттуда мы перейдем к деталям реализации планировщика (scheduler), процесса сверки дочерних компонентов и механизма построения списка эффектов.

Это довольно продвинутый материал. Я рекомендую вам прочитать эту статью, чтобы понять магию, лежащую в основе внутренней работы React. Эта серия статей также послужит вам отличным руководством, если вы планируете начать вносить свой вклад в React. Я часто использую реверс-инжиниринг, поэтому здесь будет много ссылок на источники из последней версии 16.6.0.

Обратите внимание, что вам не нужно знать ничего из этого, чтобы использовать React. Эта статья о том, как работает React внутри.

Настройка

Вот простое приложение, которое я буду использовать в этой серии статей. У нас есть кнопка, которая просто увеличивает отображаемое на экране число:

И вот реализация:

Все fiber ноды соединяются через связанный список, используя следующие свойства: дочерние, child , sibling и return . Для более подробной информации о том, почему это работает таким образом, смотрите мою статью The how and why on React’s use of links list in Fiber, если вы еще не читали ее.

Current и WorkInProgress деревья fiber нод

После первого рендеринга React получает дерево fiber нод, которое отражает состояние приложения, использовавшегося для рендеринга. Это дерево часто называют current . Когда React начинает работать над обновлениями, он строит так называемое дерево WorkInProgress , которое отражает будущее состояние, которое будет выводиться на экран.

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

Одним из ключевых принципов React является последовательность. React всегда обновляет DOM за один проход — он не показывает частичных результатов. Дерево WorkInProgress служит для пользователя “черновиком”, так что сначала React может обрабатывать все компоненты, а затем показывать их изменения на экране.

В исходном коде вы увидите множество функций, которые используют fiber ноды как из current дерева, так и из дерева WorkInProgress . Вот одна из таких функций:

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

Как видите, React действует в порядке от детей и до родителей.

Корневая нода fiber дерева

Каждое React приложение содержит один или несколько DOM элементов, которые действуют как контейнеры. В нашем случае это div элемент с ID container .

Обратите внимание, что прямые вертикальные соединения обозначают соседние элементы, в то время как изогнутые соединения обозначают дочерние элементы, например, b1 не имеет дочерних элементов, а b2 имеет один — c1 .

Вот ссылка на видео, где можно приостановить воспроизведение и просмотреть текущую ноду и состояние функций. Концептуально, вы можете думать, что “begin” — это “шаг в” компонент, а “complete” — это “выйти” из него.

Начнем с первых двух функций performUnitOfWork и beginWork :

Функция performUnitOfWork , получает fiber ноду из дерева workInProgress и запускает работу, вызывая функцию beginWork . Эта функция запустит все действия, которые необходимо выполнить для fiber ноды. Для целей этой демонстрации мы просто записываем название ноды, чтобы указать, что работа была выполнена. Функция beginWork всегда возвращает указатель на следующую fiber ноду или null .

Если есть следующий дочерний элемент, то он будет присвоен переменной nextUnitOfWork в функции workLoop . Однако, если дочернего элемента нет, React знает, что он достиг конца ветки и может завершить работу над текущим элементом. После того, как работа будет завершена, ему нужно будет выполнить работу для соседних элементов и вернуться к родителям после этого. Это делается в полной completeUnitOfWork :

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

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

Как видно из реализации, и performUnitOfWork , и completeUnitOfWork используются в основном для итераций, в то время как основные действия выполняются в функциях beginWork и completeWork . В следующих статьях мы узнаем, что происходит с компонентом ClickCounter и span элементом, когда React начинает выполнять функции beginWork и completeWork .

Commit фаза

Фаза начинается с функции completeRoot. Здесь React обновляет DOM и вызывает методы жизненного цикла до и после мутации.

Когда React дойдет до этой фазы, у него будет 2 дерева и список эффектов. Первое дерево представляет состояние, отображаемое на экране в данный момент. Затем есть альтернативное дерево, построенное во время render фазы. Они называется finishedWork или workInProgress в исходниках и представляют состояние, которое должно быть отражено на экране. Это альтернативное дерево также связано с текущим деревом через указатели child и sibling .

Далее, есть список эффектов — подмножество элементов из finishedWork дерева, соединенных указателем nextEffect . Помните, что список эффектов является результатом выполнения render фазы. Весь смысл рендеринга состоял в том, чтобы определить, какие элементы нужно вставить, обновить или удалить, а какие компоненты должны вызвать методы жизненного цикла. И это то, что говорит нам список эффектов. И именно этот список элементов обходится во время commit фазы.

Для целей отладки доступ к current дереву можно получить через current свойство fiber ноды. Доступ к дереву finishedWork можно получить через alternate свойство ноду HostFiber в текущем дереве.

Основной функцией, которая выполняется во время commit фазы, является commitRoot . В основном, она делает следующее:

• Вызывает метод getSnapshotBeforeUpdate на нодах, помеченных эффектом Snapshot
• Вызывает метод componentWillUnmount на нодах, помеченных эффектом Deletion
• Выполняет все обновления DOM дерева
• Устанавливает дерево finishedWork как текущее
• Вызывает метод componentDidMount на нодах, помеченных эффектом Placement
• Вызывает метод componentDidUpdate на нодах, помеченных эффектом Update

После вызова метода getSnapshotBotBeforeUpdate перед мутацией, React коммитит все побочные эффекты в дереве. Он делает это за два прохода. Первый проход выполняет все обновления DOM дерева. Затем React присваивает дерево finishedWork дереву FiberRoot , отмечая дерево WorkInProgress как current дерево.

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

Вот функция, которая выполняет описанные выше действия:

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

Методы жизненного цикла перед мутацией

Вот, например, код, который итерируется по дереву эффектов и проверяет, имеет ли нода эффект Snapshot :

Для классового компонента этот эффект означает вызов метода getSnapshotBeforeUpdate .

Обновления DOM

commitAllHostEffects — это функция, в которой React выполняет обновление DOM. Функция определяет тип операции, которая должна быть выполнена для ноды, и выполняет ее:

Интересно, что React вызывает метод componentWillUnmount как часть процесса удаления в функции commitDeletion .

Методы жизненного цикла после мутации

commitAllLifecycles это функция, в которой React вызывает componentDidUpdate и componentDidMount .

Источник: uncleseneca.medium.com

Fiber

Для успешного ведения бизнеса необходимо вести точный учет запасов и продаж.

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

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

ИНВЕНТАРЬ
С помощью Fiber вы можете добавлять записи о своих запасах, пополнять запасы (увеличивать количество запасов), регистрировать потери товаров (повреждения, продукты с истекшим сроком годности, кражи — уменьшать количество запасов). Вы можете добавлять и продавать свой инвентарь, используя их штрих-коды (просто отсканируйте штрих-код с помощью камеры вашего устройства).

ПРОДАЖИ
Вы можете записывать продажи, платежи в рассрочку, платежи наличными, банковские переводы, долги клиентов, деловые долги, возвраты и многое другое.
Легко просматривайте все платежи на свои банковские счета и быстро обнаруживайте мошеннические переводы, возвраты или возвраты платежей.

Печатайте настраиваемые квитанции с мобильных Bluetooth-принтеров.
Демонстрация Bluetooth-печати Android: https://fiber.ng/links/android-printing

ЛЮДИ
Вы можете создавать учетные записи сотрудников (с отдельными данными для входа), и ваши сотрудники могут входить в систему со своих устройств, записывать продажи и распечатывать квитанции (и, конечно же, каждая продажа будет иметь имя сотрудника).
Легко добавляйте своих клиентов и поставщиков, записывайте для них платежи и просматривайте их историю покупок, общую задолженность, кредиты и многое другое.

Следите за соответствующими уведомлениями (например, уведомлениями о низком уровне запасов, уведомлениями об истечении срока годности и т. д.).

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

У вас больше одного бизнеса? Легко переключайтесь между ними.

Источник: play.google.com