Рассказывается, как с помощью БЭМ-методологии и инструментов создать приложение, которое легко встраивается в разные социальные сети, такие как Facebook, ВКонтакте и Мой Мир.

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

2. Зачем?
2

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

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

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

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

7. Как?
3

8. Как?
— iFrame
3

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

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

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

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

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

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

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

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

17. Фото дня
5

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

19. Задача
7

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

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

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

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

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

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

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

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

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

29. БЭМ
clck.ru/Pb65
10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45. Ядро
23

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

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

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

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

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

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

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

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

54. Основной макет приложения
index.bemjson.js
({
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'
}]
})
26

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

56. Facebook
28

57. Facebook
— blocks-fb
28

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

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

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

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

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

63. Кнопка Share
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;
}
31

64. Facebook
clck.ru/1-wuz
32

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

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

67. Выводы
35

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

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

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

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

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

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

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

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