1. Архитектура
ITOP.FM
Артём Полюхович
CTO ITOP.FM

2. Agenda
● Обзор архитектуры
● Frontend
○ AJAX навигация
○ Событийная модель
○ Деление кода на зоны
● Backend
○ Yii Boilerplate
○ Конвертация данных
○ Процессинг графики
● Вопросы

3. Обзор архитектуры
nginx
php-fpm
APC
MySQL
python
Статика
nginx

4. Backend
● Yii Boilerplate - https://github.
com/clevertech/YiiBoilerplate
○ Административный интерфейс
○ Консольные скрипты
○ Пользовательский интерфейс
● EAuth - https://github.com/Nodge/yii-eauth
● EClientScript - http://www.yiiframework.
com/extension/eclientscript/

5. Frontend
● jQuery - http://jquery.com/
● Underscore - http://underscorejs.org/
● Masonry - http://masonry.desandro.com/
● jQuery pjax - http://pjax.heroku.com/
● Sound Manager 2 - http://www.schillmania.
com/projects/soundmanager2/

6. Frontend
Ключевые моменты кода:
● Деление на события и состояния
● Обработка ссылок через pjax
● Использование $.fn.on(action, selector,
callback)
● Трансляция ссылок в события
● Слоистая архитектура плеера

7. Frontend
/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
* http://benalman.com/
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function($) {
var o = $({});
$.subscribe = function() {
o.on.apply(o, arguments);
};
$.unsubscribe = function() {
o.off.apply(o, arguments);
};
$.publish = function() {
o.trigger.apply(o, arguments);
};
}(jQuery));

8. Frontend
<a rel="track" data-action="play" data-id="123123"></a>
$.publish('track.play', 123123);

9. Frontend
Трансляция
событий
Подготовка данных
для плеера
Утилиты
Плеер
Обновление интерфейса
Инициализация

10. Backend
Постановка проблемы:
● 2.8М треков
● Сомнительное качество базы
● Отсутствие части информации

11. Backend
Постановка проблемы:
● 2.8М треков
● Сомнительное качество базы
● Отсутствие части информации
Решение проблемы:
● Создание списка файлов в SQLite
● Парсинг ID-тегов
● Дополнение из Last.fm

12. Backend
● Отдача статики с псевдо-CDN
○ Cookieless под-домены
○ Expires + ETag
○ Параллельная загрузка графики
● Проксирование графики альбомов
○ nginx + flup + bottle + PyLast
○ Возврат картинки по исполнителю и альбому
○ Кэширование в промежуточном источнике
○ Все преимущества псевдо-CDN

13. The end.