Я.Субботник, Минск, 2 июня 2012 года
Разработчик интерфейсовМихаил Трошев
AJAX в поиске по вебу
2
Серп
SERP — Search Engine Result Page
3
Серп
AJAX
4
5
AJAX
6
AJAX
Задачи
7
грузить каждый раз (plain/gzip):
html — 80 / 20 КБ
css — 65 / 15 КБ
js — 140 / 45 КБ
+ jQuery
+ картинки
8
Мы не хотим
— заменить пейджер на динамическую выдачу
9
Мы хотим
— менять URL, писать историю
10
Мы хотим
— сложный интерактив
11
Мы хотим
— вебдваноль, хтмл5, пыщ-пыщ
12
Мы хотим
История / History
13
HTML5 History API
?text=котики → ?text=зайчики
A → pushState() → B
B → replaceState() → B'
pushState, replaceState → onpopstate
14
HTML5 History API
Десктоп:
IE 10
Firefox 4
Opera 11.50
Safari 5
Chrome 5
15
Мобильные:
iOS Safari 5
Android 2.2*
HTML4 деградация
#?text=котики → #?text=зайчики
onhashchange — FF 3.6, Opera 10.6, IE 8
setTimeout — остальные
16
HTML5/HTML4 конфликт
17
/?text=котики /#?text=котики
Проблема: /?text=котики#?text=хомячки
History API? History API?
OK
Решение — редиректы:
да
да
нет
нет
History.js
github / balupton / history.js
pushState(), replaceState() → onstatechange
18
i-location — БЭМ-обертка
— инкапсуляция + BEM API
get() — получение синглтона
change() — изменение состояния
change — событие
19
i-location — БЭМ-обертка
— инкапсуляция + BEM API
— зависимости
20
i-location — БЭМ-обертка
— инкапсуляция + BEM API
— зависимости
— синглтон
21
i-location — БЭМ-обертка
— инкапсуляция + BEM API
— зависимости
— синглтон
— крос-сервис
22
— заменить пейджер на бесконечную выдачу
— обновлять блоки по необходимости
— менять URL: History API / History.js / i-location
— сложный интерактив
— вебдваноль, хтмл5, пыщ-пыщ
23
Мы хотим
Данные
24
AJAX
25
AJAX
Транспорт: Comet? XHR? JSONP!
26
AJAX
Транспорт: Comet? XHR? JSONP!
Данные: XML? JSON!
27
AJAX
Транспорт: Comet? XHR? JSONP!
Данные: XML? JSON!
Шаблонизация: клиент? Сервер!
28
AJAX
реализация — JSONP / $.ajax / i-request
данные — JSON (html + params)
шаблонизация на сервере — priv.js / bemhtml
29
i-serp-request — транспорт
30
b1 b2 b3
сервер
b1 b2 b3
сервер
i-serp-request
i-serp-request — транспорт
31
клиент, js сервер, priv.js
i-serp-request — транспорт
32
b-serp — диспетчер
— знает про свои блоки
— дает команду обновляться
33
b-serp — диспетчер BEM.create('i-serp-request'); // инициализируем блок-транспорт
blocks.forEach(function(block, i) {
block.location = BEM.blocks['i-location'].get()
.on('change', function(e, data) {
this.channel('i-serp-request')
.trigger('request', {
key: block.__self.getName(),
success: block.changeThis(function(data) {
this.update(data)
})})})});
34
Порядок событий
35
i-location
?text=котики
b-serp
onstatechange
b-adv
i-serp-request
b-pager
b-search
сервер
котики Найти
Результаты
36
— заменить пейджер на динамическую выдачу
37
Мы смогли
— заменить пейджер на динамическую выдачу
— обновлять блоки по необходимости
38
Мы смогли
— заменить пейджер на динамическую выдачу
— обновлять блоки по необходимости
— менять URL, писать историю
39
Мы смогли
— заменить пейджер на динамическую выдачу
— обновлять блоки по необходимости
— менять URL, писать историю
— сложный интерактив
40
Мы смогли
— заменить пейджер на динамическую выдачу
— обновлять блоки по необходимости
— менять URL, писать историю
— сложный интерактив
— вебдваноль, хтмл5, пыщ-пыщ
41
Мы смогли
Планы
42
Планы
— предзагрузка порций выдачи
43
Планы
— предзагрузка порций выдачи
— кеширование состояний
44
Планы
— предзагрузка порций выдачи
— кеширование состояний
— шаблонизация на клиенте?
45
Планы
— предзагрузка порций выдачи
— кеширование состояний
— шаблонизация на клиенте?
— релиз
46
Планы
— предзагрузка порций выдачи
— кеширование состояний
— шаблонизация на клиенте?
— релиз
— open source
47
48
Разработчик интерфейсов
github.com/mishanga
twitter.com/@ya_mishanga
Михаил Трошев