1. Я.Субботник, Киев, 5 мая 2012 года
Разработчик интерфейсов
Александр Титула-Бойченко
Приложения для соцсетей.
Универсальные приложения на БЭМ

2. Зачем?
2

3. Зачем?
2
— Аудитория свыше 25 млн. пользователей

4. Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг

5. Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг
— Способ заработка денег

6. Зачем?
2
— Аудитория свыше 25 млн. пользователей
— Реклама товаров и услуг
— Способ заработка денег
— Способ взаимодействия с пользователями

7. Как?
3

8. Как?
3
— iFrame

9. Как?
3
— iFrame
— Любые технологии, поддерживаемые браузером

10. Как?
3
— iFrame
— Любые технологии, поддерживаемые браузером
— JavaScript API для взаимодействия с соцсетью

11. Яндекс.Фотки
4

12. Яндекс.Фотки
4
— Хостинг фотографий от Яндекса

13. Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии

14. Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий

15. Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий
— Альбомы, метки, геотеги, комментарии, EXIF и тд.

16. Яндекс.Фотки
4
— Хостинг фотографий от Яндекса
— Без ограничений на размер фотографии
— Без ограничений на количество фотографий
— Альбомы, метки, геотеги, комментарии, EXIF и тд.
— Бесплатно

17. Фото дня
5

18. Фото дня на Яндекс.Фотках
6
clck.ru/1-r_X

19. Задача
7

20. Задача
7
— Показывать Фото дня на Яндекс.Фотках

21. Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть

22. Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть
— дизайном

23. Задача
7
— Показывать Фото дня на Яндекс.Фотках
— Подстраивание под текущую социальную сеть
— дизайном
— функциональностью

24. Пожелания разработчиков
8

25. Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована
базовая функциональность

26. Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована
базовая функциональность
— Быстро создавать новые приложения для других
социальных сетей

27. Пожелания разработчиков
8
— Наличие ядра проекта, в котором реализована
базовая функциональность
— Быстро создавать новые приложения для других
социальных сетей
— Легко модифицировать все приложение или его
отдельные модули

28. Реализация
9

29. БЭМ
10
clck.ru/Pb65

30. Уровни переопределения
11
Уровень переопределения — это набор реализаций
блоков, сгруппированных в одну директорию

31. Уровни переопределения
12
На проекте может быть несколько

32. Уровни переопределения
13
Подключив код с разных уровней переопределения
получаем готовый продукт

33. BEM-tools
14
clck.ru/Pb65
Инструменты для работы с файлами,
написанными по БЭМ методу

34. Фоторама
15
Симпатичная javascript-галерея
fotoramajs.com

35. BEM-bl
16
Библиотека блоков, написанная по БЭМ методу
clck.ru/Kuu4

36. Технологии
17

37. Технологии
17
— bemjson

38. Технологии
17
— bemjson
— bemhtml

39. Технологии
17
— bemjson
— bemhtml
— i-bem.js

40. bemjson
18
{
block: 'b-gallery',
content: {
block: 'b-fotorama',
elem: 'preloader',
content: 'Загрузка данных...'
}
Like JSON формат описания БЭМ дерева документа

41. bemhtml
19
block b-gallery {
attrs: { id: 'fotorama'},
}
JavaScript шаблонизатор для преобразования
bemjson в HTML

42. bemjson+bemhtml=HTML
20
<div class="b-gallery" id="fotorama">
<div class="b-fotorama__preloader">
Загрузка данных...
</div>
</div>
Наложением bemhtml на bemjson получаем HTML

43. i-bem.js
21
Это JavaScript библиотека умеющая работать с
документом в БЭМ-терминах.

44. Более подробно в клубе БЭМ
22
clubs.ya.ru/bem/

45. Ядро
23

46. Ядро
23
Уровни переопределения:

47. Ядро
23
Уровни переопределения:
— bem-bl

48. Ядро
23
Уровни переопределения:
— bem-bl
— blocks

49. Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js

50. Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js
— получение и обработка данных

51. Ядро
23
Уровни переопределения:
— bem-bl
— blocks
— fotorama.js
— получение и обработка данных
— основной макет приложения

52. Fotorama.js
24
blocks/
b-fotorama/
b-fotorama.css
b-fotorama.js

53. Получение и обработка данных
25
rss/
rss.xml
blocks/
b-gallery/
b-gallery.bemhtml
b-gallery.css
b-gallery.js

54. Основной макет приложения
26
({
block: 'b-page',
title: 'Фото дня на Яндекс.Фотках',
head: [
{ elem: 'css', url: '_index.css'},
{ block: 'i-jquery', elem: 'core' },
{ elem: 'js', url: '_index.js' }
],
content: [{
block: 'b-gallery',
content: {
block: 'b-fotorama',
elem: 'preloader',
content: 'Загрузка данных...'
}
},{
block: 'b-social'
}]
})
index.bemjson.js

55. Основной макет приложения
27

56. Facebook
28

57. Facebook
28
— blocks-fb

58. Facebook
28
— blocks-fb
— изменение размера вьюпорта

59. Facebook
28
— blocks-fb
— изменение размера вьюпорта
— изменение дизайна fotorama.js

60. Facebook
28
— blocks-fb
— изменение размера вьюпорта
— изменение дизайна fotorama.js
— кнопка Share

61. Изменение размера вьюпорта
29
blocks-fb/
b-gallery/
b-gallery.bemhtml
block b-gallery {
js: {
width: '760',
height: '520'
}
}

62. Изменение дизайна fotorama.js
30
blocks-fb/
b-fotorama/
b-fotorama.css
.fotorama__wrap {
background: #fff;
}
...

63. Кнопка Share
31
blocks-fb/
b-social/
__like/
b-social__like.css
b-social.bemhtml
block b-social {
content: [{
elem: 'like'
}]
}
.b-social__like {
position: absolute;
top: 3px;
right: 3px;
}

64. Facebook
32
clck.ru/1-wuz

65. Вконтакте
33
clck.ru/1-wxx

66. Мой Мир@mail.ru
34

67. Выводы
35

68. Выводы
35
— Гибкость за счет уровней переопределения

69. Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения

70. Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура

71. Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех
приложениях

72. Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех
приложениях
— Командная работа

73. Выводы
35
— Гибкость за счет уровней переопределения
— Легкая модификация приложения
— Понятная файловая структура
— Новые возможности раскатываются сразу на всех
приложениях
— Командная работа
— Подобный принцип можно применять для многих
программных продуктов в вебе

74. Фото дня на Яндекс.Фотках
36
clck.ru/1-r_X

75. Александр Титула-Бойченко
Разработчик интерфейсов
banzalik@yandex-team.ru
@banzalik