1. Етапи розробки VK Offline
2. Що було важливо
3. Технічна частина VK Offline
4. Це ще не кінець (НЕ Просолов свідомості огірок)

В рамках акції для розробників представляємо статтю від автора програми VK Offline.

Додаток VK Offline з'явилося в Chrome Web Store в серпні 2011 року і за минулі півтора року перетворилося з прототипу, представленого на Chrome-хакатон в Пітері, в повноцінне (і тепер уже legacy) додаток для Google Chrome. Сьогодні я випускаю VK Offline 4.7 і віддаю його в співтовариство розробників на github як opensource продукт .

Я хочу скористатися рупором Хром.РФ і в останній раз в якості головного розробника розповісти про те, що було, і про те, що буде з додатком. Половина цієї посади буде про корисний досвід, який стане в нагоді будь-якому розробнику розширень / додатків, а інша половина про технічну частину для тих, кому цікаво буде розвивати сам додаток. Нудно не буде.

Етапи розробки VK Offline

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

[Offtopic] Озираючись назад, я вважаю, що цей вибір був визначально вірним. Вибираючи розробку розширень / додатків для Chrome, ви отримуєте приголомшливе і класне API, найсучасніші веб-технології, а також той самий javascript-експірієнс, який важко отримати при розробці сайтів. Не бійтеся труднощів, які виникнуть у вас на цьому шляху. [/ Offtopic]

Реклама - наше все, і саме тоді ми з друзями вирішили спробувати познімати декілька простих промок до додатка, деякі з яких ви бачили на Хабре і Хром.РФ . Я не дуже задоволений отриманим результатом, але такі змонтовані нами скрінкасти були набагато краще, тому я думаю, що не все так страшно. Плюс спочатку я взяв таку тему, яку було достатчно важко донести до людей.

Після Хакатона і конкурсу я вмонтував функціонал Google Voice Search На додаток. Мені досі здається, що це одне з найцікавіших місць в додатку, хоча з точки зору коду працює він не зовсім тривіально . Потім я вже довго допілівать продуктивність програми, прискорював швидкість першої синхронізації, оптимізуючи код внесення листів в WebDatabase.

Революцією став випуск 4 версії додатка, в якій повністю змінилася структура БД і довелося писати складну систему міграції користувачів 3 версії додатка на 4. налагоджувати це було дуже важко, і при оновленні програми все одно виявилося, що я не врахував якісь моменти, що позначилося на кількості користувачів додатка (скоротилося з 30К до 22К). Головним же в 4 версії стало те, що змінився інтерфейс , І по суті додаток отримало свій нинішній вигляд з папками, real-time діалогами, вкладеннями з підтримкою drag-n-drop і ін. Подальша робота була вже над вилизування дрібниць і виправленням витоків пам'яті.

У версії 4.7 стали показуватися аватарки друзів, які зникли після переїзду статики ВКонтакте на інший домен. Також була виправлена помилка з частим показом вікон нагадування про ДР, і на прохання стали підтримуватися emoji-картинки. Усередині ж був проведений перехід на шаблонизатор Hogan.js, а прототипи DOM-об'єктів перестали активно забруднюватися, що має поліпшити продуктивність програми.

Що було важливо

Метрики. Коли все починалося, була думка тільки про те, що потрібно фігачіть код. Я розглядав кількість користувачів в Chrome Web Store як головну метрику і був задоволений. Але коли додаток стало обростати функціоналом, стало цікаво знати, чи користуються люди їм чи ні. Так в додатку з'явилися кастомниє івенти від Google Analytics і Яндекс.Метрики, про які я розповідав на DevFest . І саме по ним я став орієнтуватися при подальшому впровадженні і зміні функціональності додатку. Для інтересу: в день генерується близько 5М подій, за якими можна судити про роботу додатка.

LocalStorage. Код додатка ріс і доводилося запам'ятовувати дані, що зберігаються в key-value LocalStorage, для чого довелося заводити окрему сторінку . Інакше дані в LocalStorage були б суцільний смітником, в якій було б складно орієнтуватися при розробці.

Розширення функціоналу. Поки додаток росло, збільшувалася і змінювалася структура БД. Доводилося не забувати про поточних користувачів програми та до кожної версії писати свої скрипти міграції. На це витрачалося час, але зате при оновленні поточна база користувачів страждала по мінімуму і отримувала працює додаток з новим функціоналом.

Розширення бази користувачів. Набір бази користувачів в Chrome Web Store - досить важке і непередбачуване справа. Тому рішення впровадити в додаток іконку лайка, клік по якій ставить лайк і репост цього запису , Після чого її бачать всі друзі користувача, стало одним з визначальних. Саме це рішення дозволило додатком постійно набирати базу користувачів весь цей час.

Зворотній зв'язок. Для зворотного зв'язку в 4 версії додатка я зробив окрему форму, яка при відправці питала дозволу користувача до chrome.management. * API. Це дозволило разом з балкою помилок відправляти список встановлених розширень. Незважаючи на обмеження пісочниці, за її межами часто виникали проблеми доступу до OAuth-авторизації.

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

DevFest. До речі в листопаді на DevFest 2012 я розповідав про багато речей, з якими зіткнувся при розробці. Я дуже раджу вам витратити 20 хвилин часу, і не повторювати помилки, які ви повторите, якщо не витратите 20 хвилин часу ... Ну ви зрозуміли :)

Уже в процесі розробки концепція додатки переросла в "E-mail клієнт і адресна книга на основі ваших даних ВКонтакте". Але на момент початку це був скоріше бекап ваших даних у додатку для Chrome. У ньому не було підтримки real-time діалогів, вкладень, та й багато інших речей були написані майже на коліні. Зараз все стало порівняно непогано, хоча мені все одно соромно за багато частин коду. Але перфекціонізм не завжди кращий союзник. І до речі про коді.

Технічна частина VK Offline

i18n

Локалізації в додатку спочатку не було і довелося досить багато повозитися, вставляючи її в код. В процесі допилювання я прийшов до рішення, коли вся локалізація зберігається в одному файлі i18n / locales.json , А потім при складанні розноситься по файлах локалей _locales /% locale% / messages.json. Збірка локалей здійснюється командою grunt i18n.

Шаблони і шаблонизатор

Це досить смішно, але до версії 4.7 весь UI отрісовиваємих за допомогою document.createElement () / element.appendChild () ітд. Тепер VK Offline використовує mustache-шаблони і шаблонизатор hogan.js від Twitter. Збірка шаблонів здійснюється командою grunt templates. Шаблони зберігаються в папці templates.

DOM Traversing

Я спочатку був противником вбудовування jQuery в код проекту. Він досить великий, та й все перевірки на браузер зовсім не потрібні. Тому для DOM Traversing я використовую js / dom.js , Який написаний на основі бібліотеки DOM5 . Загальна ідея полягає в тому, що в в прототип Element подмешивается кастомний об'єкт, що дозволяє маніпулювати DOM-елементами більш зручно і просто.

Grunt

Grunt використовується для складання локалізацій, шаблонів і релізів (grunt release).

Background page (backend.js)

Це ядро ​​програми, його фонова сторінка і постійно працюючий код. До нього звертаються таби додатки, і він розсилає їм інформацію про те, що щось змінилося. Одні з найбільш важливих об'єктів в ньому: mailSync (Синхронізація повідомлень), friendsSync (Синхронізація списку друзів) і longPollEventsRegistrar (Real-time діалоги).

Робота з БД (databaseManager.js)

Величезна черга методів, які експортує DatabaseManager. До кожного методу написаний детальний jsDoc, так що при використанні проблем виникнути не повинно.

Міграція при оновленні (migrationManager.js)

Скрипти міграції знаходяться в масиві migrateData, який містить назви версій і таски, які необхідно виконати при міграції з більш низькою версії додатка на цю та вище. Таскі виконуються поетапно. Сам MigrationManager експортує тільки один метод - start , А в callback передає код результату закінчення процесу міграції.

Запити до API ВКонтакте (reqManager.js)

Всі запити до API робляться через ReqManager. Він стежить за повислої мережею, невдалими відповідями та ін., Що експортуються методи: apiMethod , forceUrlGet , abort і abortAll .

Налаштування (settingsManager.js)

Налаштування зберігаються в LocalStorage, але для більш простої роботи з ними існує SettingsManager, який дозволяє отримати значення настройки через виклик SettingsManager [key] і записати нове значення настройки з перевіркою за допомогою SettingsManager [key] = value.

Робота зі звуком (soundManager.js)

Звук може працювати через Web Audio API, а якщо він недоступний, то через HTML5 Audio. SoundManager стежить за доступними API і відтворює звук через доступний інтерфейс. Єдиний експортований метод - play .

Робота з LocalStorage (storageManager.js)

Як відомо, LocalStorage це сокирний key-value, який при збереженні даних перетворює їх в рядки. Але оскільки розробка програми починалася тоді, коли chrome.storage ще не існував, доводилося писати свою обгортку над LocalStorage для більш зручної роботи. експортує методи set , get і remove . Метод get крім усього дозволяє виробляти мінапуляціі над даними і отримувати їх рівно в тому вигляді, в якому передбачається їх зберігання.

Отрісовка (ui.js)

На жаль, багато частин ui.js залишилися з часів VK Offline 2/3, тому він досить об'ємний. Може бути варто використовувати backbone.js або щось інше, а не городити свої велосипеди з full / partial views. З іншого боку такий підхід дозволяє досить гнучко перемальовувати частини інтерфейсу, не чіпаючи інші.

Це ще не кінець (НЕ Просолов свідомості огірок)

Для користувачів все це означає, що подальший розвиток програми VK Offline триватиме силами сторонніх розробників. Якщо ви javascript-програміст і хочете продовжити розвиток цього проекту, то список можливих поліпшень і завдань ви можете подивитися тут .

Щоб бути до кінця чесним - я бачу розвиток VK Offline в якості не legacy packaged app, але для цього потрібні або величезна купа часу, або пряме співробітництво з ВКонтакте. На жаль ні того, ні іншого у мене немає. З іншого боку я пам'ятаю про те, що знаннями потрібно ділитися, а не хвалитися, тому якщо комусь стане в нагоді мій досвід, буде круто. Це ще не кінець :)

Автор: + Dmitry Sorin

PS Посилання на додаток у Chrome Web Store .

today 02.04.2013