Как мне увеличить производительность Canvas внутри WebView внутри React Native?

Question

[Валерий Любимов]

Очень нужен ваш совет!

Кейс моего приложения следующий: имеем WebView с канвасом внутри, канвас строим через фреймворк Konva.js, сам канвас рисуем векторами которые приходят нам из жирного json с описанием команд того как рисовать наши кривые и вектора.

Приложение активно общается между React Native и WebView. Есть как команды посылаемые внутрь WebView для перерисовки канваса, так и команды приходящие из WebView для получение различных эвентов типа тапов по канвасу.

Я бы хотел услышать любые советы о том как я могу увеличить производительность всего этого дела?

Пока основная идея у меня в голове это уйти от вектора, генерировать обычные png изображение и выводить их.

Если вдруг у кого нибудь есть мысли по этому поводу или может кто-то делал что-то похожее я был бы рад выслушать)

Comments

[sim3x]

0. Использовать нативный ЯП или даже NDK
1. Убрать из рассмотрения webview и оптимизировать отрисовку для хрома
1.1 ПОтом проверять результат в webview

Как вектор связан с canvas?

[Валерий Любимов]

sim3x, нативный ЯП к сожалению не вариант.

У меня для десктопа написано приложение на React.js с точно такой же кодовой базой и там все летает в том числе и на мобиле. Думаю тормозит именно webview и надо как-то это побороть.

[sim3x]

Валерий Любимов, если проблема в самой либе, то у вас нет вариантов, кроме как 0

Answer 1

[Димка Реактнативный]

Отказаться от web view

Comments

[Валерий Любимов]

Есть альтернативы?

[Димка Реактнативный]

Валерий Любимов, какую задачу нужно решить?

[Валерий Любимов]

Димка Реактнативный, отрисовка в мобильном приложении схем по слоям с возможностью зумить, перетаскивать и скрывать/показывать слои по отдельности. В приоритете единая кодовая база с десктопным приложением на React.js.

Изначально текущая реализация хорошо решает поставленную задачу, но на больших объемах данных появляются проблемы производительности при взаимодействии с канвасом внутри мобильного приложения. Данные представляют из себя некоторый json с командами и координатами для рисования схем в векторе. Данных очень много, могут достигать 30-70 мб текстовых данных в формате json, в среднем около 10-20 мб.

[Димка Реактнативный]

Валерий Любимов, думаю такое приложение лучше делать даже не на React Native, а на Java и Swift

[Валерий Любимов]

Димка Реактнативный, в данном случае решение задачи на RN важный пункт ТЗ.

А как такие вещи рисуются на нативных языках? Может есть какой-то аналог canvas?

[Димка Реактнативный]

WebView скоро все!

ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs . See https://developer.apple.com/documentation/uikit/ui... for more information

[Валерий Любимов]

Димка Реактнативный, вот блин как так то, а я только начал втягиваться)

[Димка Реактнативный]

Валерий Любимов, там его вроде как заменяют, но все же WebView в топку :)

[Валерий Любимов]

Димка Реактнативный, но все же остается открытый вопрос, а какие альтернативы для задач на RN вроде рисования сложной интерактивной графики?

Или вот допустим тоже частый кейс, который мне встречается. Есть некоторое общее АПИ для сайта и приложения. Есть некоторые текстовые страницы которые чаще всего заполняются через визуальный редактор с HTML разметкой. Единственный способ вывести это красиво в приложении на данный момент это WebView. Ну либо заморочиться с регулярками на все случаи жизни)

[Димка Реактнативный]

Писать на Java/Swift/Kotlin/Objective-C и кидать бридж в React-Native. Если делать в JS слое, то все будет лагать.