Sunday, March 19, 2017

PureJS -> ALight -> Vue.js -> ???

Дорабатывая (наконец то!) приложение для мобильных платформ на базе связки Framework7 + Vue.js, я нахожусь в некотором замешательстве...

Как я пришел к Vue.js? Сначала был чистый Framework7, потом я познакомился с Alight (Angular Light), но меня останавливало использовать его слишком большое количество "магии". Т.е. я не знал, как сделать то или это без помощи автора этой штуки, а автор выдавал такие примеры, которые приводили (и приводят до сих пор) меня в замешательство. Впрочем это не помешало мне сделать несколько рабочих прототипов, которые ждут своего часа для продакшена.

Та же история с магией был и с Vue.js 1.x, к тому же дело осложнялось состыковой Vue.js с Framework7.

И тут выходит Vue.js 2.0. И в Framework7 появляется поддержка Vue.js, точнее обертка над F7.

Ура?! Ура. Но будучи человеком довольно консервативным для начала решил испробовать подход из опыта с Alight т.е. интеграция Vue.js с Pure F7 приложением. И сразу скажу - получилось не очень. Решением было или отказ от Vue.js или использование Vue.js обёртки в полную силу.

Но почему речь пошла про отказ? Ведь Vue.js называют чуть ли Лучшим Фреймворком 2017 года!

Причина банальная и проста - тормоза. На мобильных платформах появляются фризы при работе с интерфейсными элементами. И подозрение падает на Vue.js. Потому что это "черный ящик", что он делает внутри, какие циклы и таймеры гоняет, я не знаю. Но подозреваю, что гоняет метод digest, проверяющий изменения реактивных данных. И если этих данных немного - до сотни полей, то это не заметно, но если их 1000 и больше? Задержки уже могут стать существенными.  А так я уже "споткнулся" с v-for, когда связанная функция установки css вызывается для каждого элемента отображаемого массива, но не для только изменившихся элементов. А если передавать еще и index элемента в эту функцию, то тормоза становятся просто существенными и совершенно не объяснимыми.

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





No comments: