kovchiy

Взаимодействие компонент

Грамотная архитектура веб-приложения важна не только для продакшен-версий, но и для долгоживущих прототипов. Итеративные изменения возможны лишь в условиях, котогда сложность проведения последующей итерации не растет экспоненциально.

Ниже пойдет речь о четырех наиболее рациональных способах организации взаимодействия компонентов интерфейса в Beast.

1. Через отношение блок-элемент

Методолгия БЭМ предлагает самый удобный и простой способ провязывания компонентов — когда одни (элементы) подчиняются другим (блокам). Принято считать, что все связи в ирерахических структурах должны быть направлены от родителя к ребенку, а ребенок не должен ничего знать о контексте своего использования. Однако, основываясь на том, что элементы не могут существовать без своего родительского блока, это правило можно и нужно нарушать, но только при связывании блока и элемента.

Первая версия общего репозиторий дизайнеров Яндекс.Поиска.

Search/
  blocks/
    controls/
    media/
    serp/
      snippet/
 snippet.js

Было:

snippet/
  0.0.1/
  0.0.2/
  0.0.2-exp342/
  ticket-748/
  roma/
  roma2/

	/*
	* Фрагмент описания компонента Suggest гибридного приложения для iOS
	*/

	Beast.decl({
	/*
	* Основной блок
	*/
	Suggest: {

	/*
	* Формат для внешнего пользователя
	*/
	<CardMovies>
	<item href="#">
	<thumb>...</thumb>
	<title>Черный Лебедь</title>
	</item>
	<item href="#">
	<thumb>...</thumb>

	/*
	* Динамическая сетка
	* Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
	*/

	.grid
	box-sizing border-box

	/*
	* Генерирует стили для сетки

	/*
	* Блок тумбнеила
	* Ширина задается числом колонок сетки (добавлением классов grid_col_1, grid_col_2...)
	* Высота вычисляется согласно пропорции (_ratio), в процентах от ширины
	*/
	.thumb
	display inline-block
	background center center no-repeat
	background-size cover

	Beast.decl({
	NavigationItem: {
	mod: {
	state: '', // activated, released
	},
	onMod: {
	state: {
	activated: function (callback) {
	callback && callback()
	},

	---
	title: Видеорезультат
	imports:
	- base.page
	- portal.head
	- serp.organic
	- serp.serp
	- serp.video
	blocks:
	serp.video: test

	function ConvertLinks(linksArray) {
	return {
	elem: 'group',
	content: linksArray.map(function(item) {
	return {
	block: 'menu-item',
	mods: { type: 'link', userSettingsItem: true },
	content: {
	block: 'link',
	url: item.url,