View
74
Download
0
Category
Preview:
Citation preview
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● Избегать конфигов, которые могут
конфликтить● Группировать функционал в отдельные
модули и репозитории● Автоматическая чистка старых веток
Вопросы
Recommended