Разработка SPA на мультисайтовом highload-проекте

1. SPA + мультисайтинг
на highload

2. О проекте
● Более 500 сайтов на одном движке и базе
● Более 100 разработчиков
● Более 20 локаций
● Более 3,5 миллионов посетителей
● Более 300 основных устройств

3. Технологии фронтэнда
● Backbone
● {less}
● jade
● grunt
● socket.io

4. Что такое SPA
Single Page Application

5. Классический сайт
Сервер
Клик по ссылке

6. PAjax
Сервер
Клик по ссылке XMLHttpRequest
HTML

7. Single Page Application
Сервер
Клик по ссылке XMLHttpRequest
JSON

8. Мультисайтинг

9. apple.com orange.com garnet.com

10. apple.com
orange.com
garnet.com
multisite

11. Преимущества multisite
● Проще обслуживание инфраструктуры
● Меньше дублирования кода
● Проще поддерживать, если нужно
добавить один функционал на множество
сайтов
● Одна база и серверсайд, нет проблем
обмена данными между сайтами

12. Бизнес задачи
Множество возможностей для маркетинга
● для разных регионов
○ региональные новостные сайты с одной базой
● для разных групп товаров
○ отдельный сайт как магазин игрушек
● для разных социальных групп
○ отдельный сайт с дешевыми и не очень
качественными товарами

13. Config сайтов
garnet.com
theme: theme1.theme2
country: Spaine
color: red
juice: true
orange.com
theme: theme1.theme3
country: USA
color: orange
juice: true
apple.com
theme: theme1
country: Ukraine
color: green
juice: true

14. Темы
● Иерархическое наследование
● Подтемы с мобильной и полной версией
● Override

15. Структура
● theme1
○ _default
○ _mobSite
○ _webSite
○ theme2
■ _default
■ _mobSite
■ _webSite
○ theme3
■ _default
■ _mobSite
■ theme4
● _mobSite
● _webSite
1
2
3
5
m.site.com
Тема:
theme1.theme3.theme4
Подключаем test.js
4

16. Компоненты
theme1/_mobSite/components
● component1
○ views
○ models
○ templates
○ styles
● component2
● component3

17. Подгрузка ресурсов
- k:
environment: mobSite
theme: theme1
v:
package1:
- component1
- component2
package2:
- component3
Resources.load('package1', function() {
var model1 = new Component1Model();
var model2 = new Component2Model();
....
});
Resources.load('package2', function() {
var model3 = new Component3Model();
....
});

18. Grunt
less, jade, sprites, po-переводы

19. Сборка less
● Если стили компонента перекрыты, то
они снова компилятся, иначе будут взяты
из верхней темы
● Повторная компиляция в окружении
темы при использовании сторонних
миксинов или переменных

20. Сборка спрайтов
grunt.initConfig({
...
sprite: _.object(_.map(grunt.lib.Config.get('_themes'), function(theme, themeName) {
return [themeName, {
src: theme.themeDir + '/images/sprite/*.png',
dest: theme.themeDir + '/images/sprite-images.png',
destCss: theme.themeDir + '/styles/sprite.less',
padding: 2,
cssTemplate: 'spritesmith-template.mustache'
}];
}))
});

21. Проблемы
и костыли для их решения

22. Длительностью деплоя
Полный деплой занимает около 30 минут.
● Компиляция Jade и Less только для одной
темы
● Компиляция ресурсов для одной темы
иерархически
● Less компилируются только там, где это

23. Overwrite
● less
● po-переводы
● jade
● js

24. Тестирование
● Автотестирование
● Точечное мануальное тестирование
● Legacy
● Правильна структура шаблонов

25. Git
● Избегать конфигов, которые могут
конфликтить
● Группировать функционал в отдельные
модули и репозитории
● Автоматическая чистка старых веток

26. Вопросы