GPU accelerated trading charts

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

Для candlestick-графиков в React Native обычно используют два решения:

• WebView, внутри которого работают web-версии библиотек вроде tradingview, klinecharts или liveline
• Решения на базе Skia, например react-native-livechart

В случае с WebView есть две основные проблемы. Первая TTI: при открытии мы всегда тратим время на парсинг HTML, CSS и JS. А если открываем не локальный bundle, добавляются ещё и сетевые расходы. Вторая это расход ресурсов на параллельном процессе который запускает WebView.

Skia, хотя и является очень оптимизированным 2D-рендеринг-движком общего назначения, в связке с Reanimated может потреблять довольно много CPU и памяти, что приводит к нагреву устройства и повышенному расходу батареи.

В react-native-trading-charts я реализовал архитектуру, в которой все расчёты выполняются в общем C++ engine, а получившийся вектор передаётся в платформенный shader, который отрисовывает графику через Metal или OpenGL ES.

В результате удалось добиться минимальной нагрузки на CPU как на UI, так и на JS thread и сохранить плавный скролл даже при большом количестве свечей.

Если вы строите trading UI на React Native буду рад feedback, особенно по фичам, которых вам сейчас не хватает.

GitHub: react-native-trading-charts

React Native World | Навигация по каналу