К любой компании, которая занимается инструментами для разработчиков, рано или поздно приходит делегация клиентов. Со словами «программистов нет, задачи простые, нужен визуальный редактор». Автоматикой телефонных и видеозвонков мы занимаемся уже много лет, кому и зачем звонит робот хорошо себе представляем, VueJS любим, голова не болит. Почему бы не сделать? Под катом — закулисье и техническая сторона того, что маркетинг красиво назвал «Smartcalls».
Признаки хорошего редактора блок-схем
Как выглядит визуальный редактор с точки зрения пользователя? Это палитра элементов, возможность их перетащить на холст и соединить стрелочками. В целом ничего сложного и в мире фронтенда есть десятки библиотек, которые решают подобную задачу. Сложности возникают, когда на холсте скапливается несколько элементов, и пользователь начинает их двигать, освобождая место. Ключевой момент — что при этом происходит со стрелками. Самый простой сценарий из реальной жизни, «позвонить клиенту, предложить скидку, выслушать что скажет» как бы намекает нам, что квадратиков и стрелочек будет много:
И мы хотим, чтобы когда пользователь начал эти квадратики двигать, результат был как минимум читаемым, а не «взрыв стрелок на макаронной фабрике». Вот так, например:
Первые эксперименты
Во фронтенде сейчас много готовых и бесплатных библиотек для рисования блок-схем. Внимательно осмотрев кто что использует, мы остановились на проекте с красивым названием "Storm" и его части "React Diagrams". Штука популярная, развивается динамично, все красиво выглядит «из коробки» и шустро работает. React, опять же, неплохо дружит с VueJS.
Все было хорошо до тех пор, пока мы не собрали первое демо и не стали перетаскивать связанные стрелочками квадратики. Оказалось, что автоматически и красиво огибать стрелочками квадратики Storm не может. Не то чтобы совсем не может — можно вручную задавать «точки изгиба» и обсчитывать все самим. А если не обсчитывать, то линии будут идти через квадраты «насквозь» и схема будет похожа на каракули двухлетнего ребенка. Не лучшее интерфейсное решение для штуки, с помощью которой люди из бизнеса будут собирать роботов для подтверждения заказов, доставки, опросов и приглашения на интервью.
Выбор JointJS
Поняв что нам нужно, мы еще раз пересмотрели список кандидатов и выбрали следующую жертву бесчеловечных экспериментов: библиотеку JointJS, которую использует Amazon и другие крупные компании. Почему мы ее сразу не выбрали? jQuery, Backbone и SVG. Не самый современный стек технологий с рядом врожденных недостатков.
А вот с автоматическим раутингом связей у них все хорошо. Конечно, если набросать на холст много элементов и начать креативно их расставлять, то иногда автоматика не справляется (можете попробовать на smartcalls.io), но для большинства практических ситуаций линии адекватно перестраиваются, огибают элементы и получившуюся схему можно без труда окинуть взглядом и понять, что за автоматика произойдет при нажатии на кнопку «позвонить».
Сильные и слабые стороны библиотеки
Начнем с jQuery. Как и большинство решений на базе этой штуки, JointJS любит глобальную область видимости и ожидает в ней ряд объектов. Чтобы собрать современное VueJS-приложение с JointJS, нам пришлось покопаться в Webpack и правильно организовать сборку. Если кто-нибудь в вашей команде хорошо умеет в Webpack (или аналоги), то это не составит вам проблем. А вот готовой инструкции чтобы «работало из коробки» мы не нашли — возможно, напишем на Хабре небольшой тюториал, если будет интерес.
В JointJS нелегко добавить новые блоки — это плата за простоту и широкие возможности по настройке внешнего вида уже существующих блоков. Но мы-то со своим пятилетним опытом телефонной автоматики точно знали, с какими сущностями привыкли работать наши клиенты. Они обращаются за консультациями, показывают нам сделанные в различных редакторах схемы, иногда мы помогаем им создавать сценарии. И в этих схемах есть много общего, что мы хотели отразить в нашем визуальном редакторе: работа с условиями, переменными, внешними сервисами, голосовыми меню. Чтобы сделать элементы именно такими, какими мы их хотели видеть, пришлось довольно глубоко залезть в кишки JointJS.Ну и в целом, библиотека не отличается простотой. Чтобы разобраться как все работает, какие настройки и как менять, что за что отвечает — потребуется время. С другой стороны, визуальный редактор — это не самая простая штука, и инвестировать время в библиотеку, которая решит за нас сложные задачи, это хорошая идея.
Настроенная JointJS очень хорошо выполняет свою работу: быстрый движок SVG, автоматический раутинг связей, совместимость с большим количеством браузеров. При этом трудности добавления собственных элементов с лихвой компенсируются широчайшими возможностями по настройке существующих. Настроить можно все: цвет, форму, поведение в разных ситуациях. В результате получаются интерфейсы, с которыми удобно и приятно работать.
