MIDIX

MIDIX это программа для улучшения навыков игры на MIDI контроллере.

Этот проект делается полностью мной, начиная от дизайна, заканчивая деплоем.

Архитектура состоит из клиентской части в виде desktop приложения (Win, Mac, Linux) и серверной части для хранения проектов, загружаемых пользователем. Пользовательский проект представляет из себя tar архив с manifest.json файлом, MIDI файлом с набором событий и файлами звуков в wav формате. Файлы проектов хранятся на сервере в PostgreSQL в виде bytea типа, также в таблице проектов присутствует уникальный идентификатор проекта и sha256 хэш от файла. На стороне клиента реализован алгоритм синхронизации проектов с сервером. Проекты подгружаются асинхронно без блокировки пользовательского интерфейса, есть возможность отследить прогресс выполнения синхронизации. Синхронизация проектов построена на сравнении хэшэй файлов.

Самое интересное находится на стороне клиента, по сути программа парсит MIDI файл и отрисовывает события на шкале времени в пользовательском интерфейсе. Пришлось написать свой MIDI парсер и свой MIDI плеер на dart-е.

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

Интерфейс реализован с применением фреймворка Flutter.

Для идентификации пользователя используется Ory Kratos.

Вот несколько изображений с макетами:

MIDIX Preplay Page

MIDIX Play Page

MIDIX Explore Page

MIDIX Signin Page

InfiMonitor

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

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

InfiMonotor v1 Топологическая карта сети

InfiMonotor v1 Географическая карта сети

InfiMonotor v1 Детали карты сети

В дальнейшем было принято решение переписывать бэкэнд на Golang с микросервисной архитектурой, и переписать фронтенд на более современную технологию, в том числе улучшить UX/UI и дополнить новым функционалом, а также повысить безопасность, производительность и стабильность системы.

Новая версия фронтенда разрабатывалась в основном моими силами. Было долго, трудно, но интересно и круто. Я определял стек технологий и все технические решения на стороне фронтенда. Разработка велась примерно 4 года, но периодами меня переключали на другие проекты. В дальнейшем стали подключаться и другие фронтенд разработчики.

InfiMonotorNext Страница устройств

InfiMonotorNext Карточка устройства

В основном приложение состояло из различных таблиц с множеством динамических фильтров. Фильтрация могла осуществляться как на стороне клиента, так и сервера. Для серверной фильтрации использовался Google Common Expression Language, для клиентской использовался набор предикатов. Т.к. таблиц у нас было много, я принял решение написать движок для фильтрации, он был основан на идее, что фильтр можно представить в виде дерева операндов и логических условий. В результате это дерево можно было преобразовать, как в CEL выражение для отправки его на сервер, так и для клиентской фильтрации в виде предиката. Мне настолько понравилось найденное мной решение, что я его повторил, убрав все лишнее, с основной концепцией можно ознакомиться по ссылкеFilter Builder А так же этот подход позволяет строить динамические фильтры прямо в интерфейсе, объединяя набор условий с помощью логических операторов и групп.

InfiMonotorNext Пользователи

InfiMonotorNext Инциденты

Еще технически сложная задача, которая мне понравилась - это карта сети. На ней было необходимо отображать 10000 устройств в режиме реального времени, в качестве картографического движка был выбран Leaflet.js (хотя смотря через призму опыта, в следующий раз я бы взял Deckgl). Самое интересное в этой задаче - это требуемое количество объектов и то, что устройства должны были разъединяться и объединяться в кластеры при изменении масштабирования карты. И самое классное, нужно все это анимировать для улучшения UX. Я справился с этой задачей за 2 месяца, это было во времена ковида, когда все сидели по домам. Я написал свой алгоритм кластеризации c нуля, где использовалась структура данных kdtree для быстрого поиска объектов в радиусе и разобрался с WebGL (использовался слой pixijs), для того чтобы это работало на 10000 устройств.

Так же в этом кейсе был с нуля разработан UI Kit, порядка 40 компонентов. Был использован Storybook для каталогизации, разработки, документации и визуального тестирования.

Еще интересной задачей в этом кейсе было написание своего плагина для protoc, потому что на то время стандартный кодогенератор был неудобен в использовании и не подходил под наши задачи. Сейчас многое поменялось, и я бы предпочел скорее использовать что-то готовое (buf).

Quanta 5

Quanta 5 - это устройства производимые компанией InfiNet, я разрабатывал Web интерфейс устройства.

Из интересного, там был REST API в виде дерева параметров, над которыми можно было выполнять различные стандартные операции, для этого был разработан API слой с различными типами параметров и набором операций над этими параметрами, API содержал все данные, необходимые для отображения, данные хранились в MobX сторе и периодически обновлялись с помощью поллинга. Для каждого типа параметра был реализован UI компонент для отображения этого типа параметра, весь интерфейс состоял из набора компонентов, куда передавалась модель данных из API слоя. Каждый компонент мог отобразить текущее состояние параметра.

Еще было разработано несколько визуализаций данных.

• Dashboard - основная страница с графиками и метриками
• Specrum Analizer - для отображения помех в диапазоне частот
• Alignment Tool - интерфейс с помощью которого можно было откалибровать устройство для лучшей передачи данных

Quanta 5 Dashboard

Quanta 5 Graphs

Quanta 5 Spectrum Analizer

Quanta 5 Alignment Tool

3cx RPS/RED system

В этом кейсе я переписывал систему RED/RPS

RPS/RED является системой с высокой нагрузкой, порядка 1000 запросов в секунду, основные цели, которые я преследовал при переписывании - это увеличение производительности, улучшение UX/UI и новые фичи, такие как определение пересечения IP адресов.

Мне удалось оптимизировать запросы к базе данных, что позволило ускорить загрузку страницы до 5 секунд вместо 5 минут, были продуманы UX/UI механики, которые повысили удобство использования и сократили время на административные задачи

3CX Web Client

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

3CX Phone System

Занимался переносом функционала из старого приложения в новое, создание контроллеров с использованием OData и OpenAPI, а также написанием тестов.

ngx-mf

Я разработал Open Source библиотеку для типизации angular форм, подробнее можно ознакомиться по ссылке ngx-mf