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

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

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

Что такое SPASingle Page Application

Классический сайт

СерверКлик по ссылке

PAjax

СерверКлик по ссылке XMLHttpRequest

HTML

Single Page Application

СерверКлик по ссылке XMLHttpRequest

JSON

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

apple.com orange.com garnet.com

apple.com

orange.com

garnet.com

multisite

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

добавить один функционал на множество сайтов

● Одна база и серверсайд, нет проблем обмена данными между сайтами

Бизнес задачиМножество возможностей для маркетинга● для разных регионов

○ региональные новостные сайты с одной базой● для разных групп товаров

○ отдельный сайт как магазин игрушек● для разных социальных групп

○ отдельный сайт с дешевыми и не очень качественными товарами

Config сайтов

garnet.comtheme: theme1.theme2

country: Spaine

color: red

juice: true

orange.comtheme: theme1.theme3

country: USA

color: orange

juice: true

apple.comtheme: theme1

country: Ukraine

color: green

juice: true

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

Структура

● theme1○ _default○ _mobSite○ _webSite○ theme2

■ _default■ _mobSite■ _webSite

○ theme3■ _default■ _mobSite■ theme4

● _mobSite● _webSite1

2

35

m.site.com

Тема:theme1.theme3.theme4

Подключаем test.js4

Компонентыtheme1/_mobSite/components

● component1○ views○ models○ templates○ styles

● component2● component3

Подгрузка ресурсов- 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();

....

});

Gruntless, jade, sprites, po-переводы

Сборка less● Если стили компонента перекрыты, то

они снова компилятся, иначе будут взяты из верхней темы

● Повторная компиляция в окружении темы при использовании сторонних миксинов или переменных

Сборка спрайтов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'

}];

}))

});

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

Длительностью деплояПолный деплой занимает около 30 минут.

● Компиляция Jade и Less только для одной темы

● Компиляция ресурсов для одной темы иерархически

● Less компилируются только там, где это нужно

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

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

Git● Избегать конфигов, которые могут

конфликтить● Группировать функционал в отдельные

модули и репозитории● Автоматическая чистка старых веток

Вопросы