Кейс GetPolis: почему выбрали Vue. js для интерфейса сервиса автостраховок

GetPolis — сервис подбора полисов автострахования. Он сравнивает цены на полисы ОСАГО у 15 страховых и предлагает лучший вариант, учитывая акции компаний и индивидуальные скидки клиента, например за безаварийность.

У сервиса два типа пользователей:

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

Сайт GetPolis

Автовладельцы и агенты пользуются разными разделами сайта, мы спроектировали для них разные интерфейсы:

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

Разработаем сайт с помощью Vue

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

Заказать разработку

Серверную часть сервиса GetPolis мы писали на Laravel — фреймворке PHP. Пользовательскую — на JavaScript. Для интерфейсов выбрали фреймворк Vue. js:

• он хорошо совместим с Laravel;
• прост в освоении по сравнению с React и Angular, приблизительно на уровне jQuery. Опытный разработчик сможет разобраться за пару дней;
• понятен для верстальщиков, потому что использует привычный им HTML, не преобразовывает верстку компонентов в JSX, как React;
• использует компонентный подход. Компоненты — это файлы с короткими участками кода, «кирпичики» для построения веб-приложения. Они изолированы друг от друга, поэтому, если в один закралась ошибка, остальные продолжают работать;
• Vue-интерфейсы быстрые и легковесные. Angular в сравнении с Vue более тяжелый: в нем много кода, модулей, функций, не все из которых понадобятся в конкретном проекте. Готовое веб-приложение на Vue весит в 2—3 раза меньше, потому что изначально использует меньше зависимостей. Меньше кода, меньше нагрузки на браузер — выше скорость работы;
• сайты на Vue реактивные — быстрее загружаются в браузере. Самый «тяжелый» процесс при загрузке — это рендеринг, отрисовка HTML-кода. Обычно он происходит каждый раз при перемещении по страницам. Реактивные сайты загружаются только раз, а дальше самостоятельно отслеживают события и вносят изменения. Например, клиент на GetPolis заполняет анкету, которая разбита на 4 части. После заполнения одной части включается заставка-прелоадер. Приложение отслеживает событие — заполнение части анкеты. И само запускает связанный с ним компонент — заставку с полезными подсказками. Перезагрузки страницы при этом не происходит, время ожидания клиента сокращается.

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

Какие библиотеки мы использовали для GetPolis:

• Vuetify — шаблон для построения интерфейсов с набором настраиваемых визуальных элементов: текстовых полей, чекбоксов, календарей;
• Vue-text-mask — маска, которая приводит текст к единому формату. Например, пользователь вводит номер телефона вот так: 89 997 776 655. В нем автоматически расставляются скобки, дефисы и код +7, получается +7(999)777−66−55;
• V-clipboard — позволяет одним кликом скопировать текст без необходимости выделять его вручную. Это удобно, например, для копирования адресов, телефонов, длинных номеров в документах;
• Vue-qrcode — библиотека для создания QR-кодов. В GetPolis через них работает реферальная система для агентов: они приводят сервису новых пользователей и получают за это вознаграждение. Например, страховой агент сгенерировал QR-код со своей реферальной ссылкой, напечатал рекламные листовки с ним и разложил по автомойкам. Автовладельцы видят рекламу, переходят по ссылке на GetPolis, покупают страховку — агент получает комиссию, а сервис — новых клиентов.

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

OrbitSoft начал работать над проектом в 2019 и запустил его через 10 месяцев. Каждый день в GetPolis продается по 500—600 полисов. С помощью Vue мы спроектировали два типа интерфейсов:

• анкеты и личный кабинет для пользователей, их у сервиса уже более 10 тысяч;
• рабочее место для страховых агентов — их более 6 тысяч.

Готовые продукты и индивидуальная разработка

Системы и платформы:

• POS + система учета складских остатков
• Решения для обработки биг‑даты
• Инструменты для управления рекламой и закупки трафика

Программные продукты:

• Мобильные приложения
• Интернет-магазины
• Видеоплатформы
• Онлайн-сервисы

Развитие и поддержка:

• Системное администрирование
• Разработка высоконагруженных систем на заказ

Консалтинг:

• Аудит работающих программных решений
• Консультации: подберем лучшее техническое решение под задачи и расскажем, как его внедрить

Заказать разработку