Angular: что это, преимущества и недостатки, для каких задач нужен

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

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

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 по умолчанию предлагает больше возможностей и инструментов, например:

• Dependency Injection;
• система модулей с поддержкой lazy loading;
• Routing;
• Typescript;
• RxJS.

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

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

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

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

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

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

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

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

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

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

• Сервисы-состояний на базе RxJs;
• NgRx;
• Akita.

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

• она отлично подходит для управления состоянием больших приложений;
• дает механизмы для изоляции side-эффектов;
• ускоряет разработку за счет дополнительный shematics для Angular CLI.

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

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

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

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

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

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