Михаил Трошев "AJAX в поиске по вебу"

Я.Субботник, Минск, 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

Разработчик интерфейсов

mishanga@yandex-team.ru

github.com/mishanga

twitter.com/@ya_mishanga

Михаил Трошев