«Клиентикс» — возможно, лучшая облачная CRM для малого бизнеса

В данный момент владельцы бизнеса в основной массе принадлежат к поколению X (те, кому сегодня 30-50 лет) — это люди, которые не знают страшных слов «интерфейс», «верификация», «логин»… и зачастую им сложно разобраться в структуре и управлении нагруженных приложений, а если речь идет об англоязычных системах, то из-за языкового барьера отторжение практически неизбежно.

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

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

Верстка

В веб-верстке мы придерживаемся методологии graceful degradation, которая предполагает: a) использование новейших технологий с самого первого этапа разработки приложения, b) постепенное отключение функций для поддержки устаревших браузеров. В работе над «Клиентикс» используется максимум возможностей каждого браузера — именно благодаря такому подходу приложение работает на многочисленных мобильных устройствах как нативное.

Проанализировав мировую статистику использования браузеров, мы приняли решение верстать «Клиентикс» с поддержкой самых популярных современных браузеров: Internet Explorer 11, Firefox, Chrome, Safari; а также популярных мобильных платформ Android 4 и iOS 8.

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

• сборщик проектов Gulp, написанный на Node.js;

• методология BEM, разработанная компанией Яндекс;

• шаблонизаторы Slm и Mustache с применением PHP;

• CSS-препроцессор Stylus и CSS-постпроцессор Autoprefixer;

• CoffeeScript, jQuery и др.

При разработке «Клиентикс» мы делаем акцент на производительности приложения для всех устройств — повсеместно применяются CSS Transition и CSS Animation, анимации, генерируемые в браузере автоматически, что позволяет использовать ресурсы устройства по-максимуму. CSS-анимациями управляет JavaScript-библиотека jQuery. Мы знаем, что на современных мобильных устройствах jQuery исполняется в несколько раз медленнее по сравнению с современными компьютерами. Поэтому для решения ряда ресурсоемких задач мы применяем чистый JavaScript. Из соображений сохранения высокой производительности «Клиентикс» мы отказались от применения jQuery для верстки каркаса web-интерфейса в пользу технологии CSS3 Flexbox, которая, как и CSS-анимации, встроена в браузеры. Эта технология позволяет реализовать гибкую адаптивную верстку, практически не имеющую ограничений.

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

Разработка клиентской части

Облачная CRM-система «Клиентикс» по восприятию должна быть максимально приближена к нативному приложению. Ее производительность, плавность и визульная аккуратность обеспечивается новейшими технологиями верстки, а функциональность достигается силами CloudCrafting Framework (развитие которого идет уже более трех лет) с использованием возможностей HTML5.

CloudCrafting Framework представляет собой тесную связку Yii на бэкэнде и Backbone.js, (обеспечивающим одностраничную структуру приложения) на фронтенде с двухсторонним рендерингом на серверной и клиентской части.

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

Чтобы «Клиентикс» оперативно справлялся с этими задачами, мы обратились к инструментарию HTML5 API’s:

• локальным хранилищам данных IndexedDB, WebSQL и Local Storage;

• Application Cache, кешированию файлов в браузере;

• API, позволяющему отлавливать события “offline” и “online” для окна браузера.

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

• реализация первичной синхронизации всех данных с сервера на клиент с поддержанием их консистентности;

• шифрование и безопасное хранение данных;

• создание полнотекстового и параметрического поиска по базе данных клиентов, хранящейся локально, включая вновь добавленных и измененных локально клиентов (WebSQL для Safari и iOS, и IndexedDB для всех остальных браузеров и планшетов на Android). Для этого, в частности, были исследованы предельные возможности хранилищ на десктопе и планшетах на предмет скорости поиска и максимально возможного объема данных для сохранения.

Возможности WebSQL и IndexedDB весьма широки: они позволяют использовать транзакции при запросах, хранить большие объемы информации, создавать индексы, и осуществлять быстрый поиск по проиндексированным полям.

Для перемещения по страницам приложения в офлайн-режиме был использован механизм Application Cache (специальный manifest-файл, определяющий кешируемые файлы и страницы, его создание и управление его обновлением).

Дизайн

В дизайне мы придерживаемся строгого минимализма:  преобладает белый цвет, акценты создаются только средствами типографики, используются плоские SVG-иконки (Google Material). Преимущество SVG в масштабируемости и легкости изменения свойств — во-первых, нет необходимости создавать несколько изображений для разных устройств, а во-вторых — для нас актуальна возможность изменения цвета изображений, так как сервис включает несколько отраслевых версий с фирменными цветовыми палитрами. Из соображений удобства использования приложения на всех устройствах мы делаем кнопки «Клиентикс» максимально крупными.

Все элементы управления CRM-системы детально продуманы для комфортного использования «Клиентикс» как на компьютерах, так и на мобильных устройствах, поддерживаются все стандартные жесты, а пользователю предоставляется привычный, продуманный и удобный веб-интерфейс. Продолжение следует!