Система учета Posiflora: какие задачи решаем с помощью Angular

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

Система заточена под цветочный бизнес. Ее используют интернет‑магазины с доставкой, цветочные супермаркеты и маленькие цветочные магазины. На июнь 2021 года Posiflora пользуются 1200 клиентов.

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

Posiflora — платформа для нескольких приложений, и каждый работает над своей задачей. Среди приложений:

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

Есть три известные библиотеки для разработки SPA (single-page application): React, Angular и Vue.js. Мы работаем со всеми инструментами, но для Posiflora остановились на Angular.

Работа с API. Backend-часть Posiflora — API, которое реализовано по стандарту JSON: API. Он позволяет сокращать количество запросов к backend, что повышает скорость отклика приложения.

У стандарта нетривиальный формат ответов, который требует усилий со стороны front-end'а для преобразования данных в объекты и дальнейшей работы с ними. Для решения этой проблемы мы разработали библиотеку — orbitsoft/json-api-store.

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

Гарантии более быстрого обновления благодаря полноценному фреймворку.

Angular по умолчанию предлагает больше возможностей и инструментов, например:

Чтобы получить такие же ресурсы от React и Vue. js, пришлось бы подключать десятки сторонних библиотек. При этом авторы дополнительных инструментов не всегда успевают за развитием основной библиотеки, и приходится откладывать переход на новую версию до полного обновления. А это время, которое не хочется терять.

Библиотека Angular Material поддерживается и развивается силами той же команды, что работает над самим Angular. Это гарантирует отсутствие проблем и задержек с обновлением при выходе новых версий Angular.

Возможность быстрее разработать из-за готовых компонентов. В Angular Material — богатый выбор инструментов, которые сокращают сроки разработки. Кроме того, есть еще и CDK — прекрасная основа для разработки кастомных UI компонентов. Она тоже помогает быстрее реализовать задачи.

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

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

Еще одно преимущество Angular CLI — встроенная утилита для обновления проекта при переходе на новую версию Angular. Она сокращает объем ручных операций и позволяет сэкономить время при обновлении проекта.

Стандарты разработки. У Angular — четкие стандарты и рекомендации по структурированию и архитектуре приложений, которые прекрасно поддерживаются Angular CLI.

Для нас преимущество в том, что изначальная структура приложения, заложенная авторами Angular, подходит для разработки больших приложений. Поэтому мы без проблем используем фреймворк для Posiflora.

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

Получили инструмент для управления приложением. Для этой задачи в Angular есть несколько подходов:

Для Posiflora выбрали библиотеку NgRx, которая реализует паттерн Redux используя RxJs. Вот несколько причин:

Ускорили разработку функций. За время работы над проектом мы разработали собственную библиотеку переиспользуемых UI компонентов. Они позволяют быстрее разрабатывать новые функции в приложениях Posiflora.

Ускорили разработку разделов. У большинства разделов в панели управления Posiflora — схожая структура. Чтобы быстрее их запускать, мы подготовили дополнительные schematics для Angular CLI. Теперь с помощью простых команд разработчик генерит заготовку и приступает к бизнес-логики. При этом он не тратит время на написание boilerplate-кода.

Posiflora пользуются клиенты из разных стран, поэтому все приложения платформы поддерживают работу с несколькими языками и локалями.

Когда мы начинали разработку проекта, у механизмов локализации и интернализация, встроенных в Angular, были ограничения. Из-за это для поддержки нескольких языков мы используем библиотеку ngx-translate.

В Angular 10 уже встроены эти механизмы. Поэтому мы думаем о переходе на использование встроенных механизмов и сборке отдельных версий приложений для каждой локали.

Благодаря Angular и квалификации нашей команды, мы смогли разработать MVP и выпустить систему за 9 месяцев. Сразу после запуска начались продажи. Скорость реализации новых возможностей увеличилась на 20% за счет уже созданных компонентов.