Приложение VK Offline появилось в Chrome Web Store в августе 2. Chrome- хакатоне в Питере, в полноценное (и теперь уже legacy) приложение для Google Chrome. Сегодня я выпускаю VK Offline 4. Я хочу воспользоваться рупором Хром. РФ и в последний раз в качестве главного разработчика рассказать о том, что было, и о том, что будет с приложением.

Полезные ссылки.

Некоторые расширения позволяют изменить функциональность браузера Chrome. С их помощью можно придать нужный вид странице быстрого доступа либо добавить дополнительные команды в контекстное меню или адресную строку браузера. Расширение Google Keep для Chrome. FriGate UA для Украины - Расширение для разблокировки сайтов в Украине, шифрует трафик, ускоряет доступ к Ikariam - На маленьком острове где-то в Средиземноморье возникает древняя цивилизация.

Половина этого поста будет о полезном опыте, который пригодится любому разработчику расширений/приложений, а другая половина о технической части для тех, кому интересно будет развивать само приложение. Скучно не будет. Этапы разработки VK Offline. Начиналось все в конце лета 2.

Я активно изучал javascript и написание расширений/приложений для Google Chrome показалось мне крайне интересным. Хакатон, организованный питерской командой GTUG пришелся как нельзя кстати, а приглашенный эксперт Mike West из Google только укрепил веру в свои возможности. Две недели после хакатона я активно пилил приложение, попутно обсуждая главные его части с друзьями.

Выбирая разработку расширений/приложений для Chrome, вы получаете потрясающее и классное API, самые современные веб- технологии, а также тот самый javascript- экспириенс, который трудно получить при разработке сайтов. Не бойтесь трудностей, которые возникнут у вас на этом пути. Я не очень доволен получившимся результатом, но следующие смонтированные нами скринкасты были гораздо лучше, поэтому я думаю, что не все так страшно. Плюс изначально я взял такую тему, которую было достатчно трудно донести до людей.

После хакатона и конкурса я встроил функционал Google Voice Search в приложение. Мне до сих пор кажется, что это одно из самых интересных мест в приложении, хотя с точки зрения кода работает он не совсем тривиально. Затем я уже долго допиливал производительность приложения, ускорял скорость первой синхронизации, оптимизируя код внесения писем в Web.

Database. Революцией стал выпуск 4 версии приложения, в которой полностью поменялась структура БД и пришлось писать сложную систему миграции пользователей 3 версии приложения на 4. Отлаживать это было очень тяжело, и при обновлении приложения все равно обнаружилось, что я не учел какие- то моменты, что сказалось на количестве пользователей приложения (сократилось с 3. К до 2. 2К). Главным же в 4 версии стало то, что изменился интерфейс, и по сути приложение получило свой нынешний вид с папками, real- time диалогами, вложениями с поддержкой drag- n- drop и др.

• Я активно изучал javascript и написание расширений /приложений для Google Chrome показалось мне крайне интересным.
• И на боковой панельке с твоим расширением у меня появилась еще одна папочка - с именем.
• Лучшие расширения для Chrome 2017. By admin on Январь 26, 2017 in Обзоры . В официальном магазине расширений Chrome больше 65000 плагинов. Это очень много и иногда трудно определить что нужно именно вам.
• У меня красным икариам изи и под ресами постоянно рамка с какими-то цифрами странного содержания.

Дальнейшая работа была уже над вылизыванием мелочей и исправлением утечек памяти. В версии 4. 7 стали показываться аватарки друзей, которые исчезли после переезда статики ВКонтакте на другой домен. Также была исправлена ошибка с частым показом окон напоминания о ДР, и по просьбам стали поддерживаться emoji- картинки. Внутри же был произведен переход на шаблонизатор Hogan. DOM- объектов перестали активно загрязняться, что должно улучшить производительность приложения. Что было важно. Метрики.

Когда все начиналось, была мысль только о том, что нужно фигачить код. Я рассматривал количество пользователей в Chrome Web Store как главную метрику и был доволен.

Но когда приложение стало обрастать функционалом, стало интересно знать, пользуются ли люди им или нет. Так в приложении появились кастомные ивенты от Google Analytics и Яндекс. Метрики, о которых я рассказывал на Dev. Fest. И именно по ним я стал ориентироваться при дальнейшем внедрении и изменении функциональности приложения. Для интереса: в день генерируется порядка 5. М событий, по которым можно судить о работе приложения. Local. Storage. Код приложения рос и приходилось запоминать данные, хранимые в key- value Local.

Storage, для чего пришлось заводить отдельную страницу. Иначе данные в Local.

Storage были бы сплошной помойкой, в которой было бы сложно ориентироваться при разработке. Программа Сумма Прописью В Excel тут. Расширение функционала. Пока приложение росло, увеличивалась и изменялась структура БД.

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

Расширение базы пользователей. Набор базы пользователей в Chrome Web Store - достаточно трудное и непредсказуемое дело. Поэтому решение внедрить в приложение иконку лайка, клик по которой ставит лайк и репост этой записи, после чего ее видят все друзья пользователя, стало одним из определяющих. Именно это решение позволило приложению постоянно набирать базу пользователей все это время. Обратная связь. Для обратной связи в 4 версии приложения я сделал отдельную форму, которая при отправке спрашивала разрешения пользователя к chrome. API. Это позволило вместе с логом ошибок отправлять список установленных расширений. Несмотря на ограничения песочницы, за ее пределами часто возникали проблемы доступа к OAuth- авторизации.

Все это время я старался отвечать на отзывы и вопросы пользователей, даже если они были неадекватными. Была создана группа ВКонтакте, я старался мониторить отзывы на Chrome Web Store, несмотря на то, что отвечать на них нельзя. Вобще это достаточно грустная тема, которая больше подходит для флейма. Главным выводом для меня наверное оказалось то, что полезного фидбэка в отзывах почти нет, а юные пользователи ВКонтакте зачастую обладают чересчур завышенными требованиями.

Dev. Fest. Кстати в ноябре на Dev. Fest 2. 01. 2 я рассказывал о многих вещах, с которыми столкнулся при разработке. Я очень советую вам потратить 2. Ну вы поняли : )Уже в процессе разработки концепция приложения переросла в . Но на момент начала это был скорее бэкап ваших данных в приложении для Chrome. В нем не было поддержки real- time диалогов, вложений, да и многие другие вещи были написаны почти на коленке.

Сейчас все стало сравнительно неплохо, хотя мне все равно стыдно за многие части кода. Но перфекционизм не всегда лучший союзник. И кстати о коде. Техническая часть VK Offlinei. Локализации в приложении изначально не было и пришлось достаточно много повозиться, вставляя ее в код.

В процессе допиливания я пришел к решению, когда вся локализация хранится в одном файле i. Сборка локалей осуществляется командой grunt i. Шаблоны и шаблонизатор. Это достаточно смешно, но до версии 4. UI отрисовывался с помощью document. Element()/element. Child() итд. Теперь VK Offline использует mustache- шаблоны и шаблонизатор hogan.

Twitter. Сборка шаблонов осуществляется командой grunt templates. Шаблоны хранятся в папке templates. DOM Traversing. Я изначально был противником встраивания j. Query в код проекта. Он достаточно большой, да и все проверки на браузер совсем не нужны. Поэтому для DOM Traversing я использую js/dom. DOM5. Общая идея заключается в том, что в в прототип Element подмешивается кастомный объект, позволяющий манипулировать DOM- элементами более удобно и просто.

Grunt. Grunt используется для сборки локализаций, шаблонов и релизов (grunt release). Background page (backend. Это ядро приложения, его фоновая страница и постоянно работающий код. К нему обращаются табы приложения, и он рассылает им информацию о том, что что- то изменилось. Одни из самых важных объектов в нем: mail. Sync (синхронизация сообщений), friends. Sync (синхронизация списка друзей) и long.

Poll. Events. Registrar (real- time диалоги). Работа с БД (database. Manager. js)Огромная череда методов, которые экспортирует Database. Manager. К каждому методу написан подробный js. Doc, так что при использовании проблем возникнуть не должно. Миграция при обновлении (migration.

Manager. js)Скрипты миграции находятся в массиве migrate. Data, который содержит названия версий и таски, которые необходимо выполнить при миграции с более низкой версии приложения на эту и выше.

Таски выполняются поэтапно. Сам Migration. Manager экспортирует только один метод - start, а в callback передает код результата окончания процесса миграции.

Запросы к API ВКонтакте (req. Manager. js)Все запросы к API делаются через Req.

Manager. Он следит за повисшей сетью, неудачными ответами и пр. Экспортируемые методы: api. Method, force. Url. Get, abort и abort.