kovchiy

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

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

kovchiy

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

kovchiy

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

kovchiy

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

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

kovchiy

Было:

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

kovchiy

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

kovchiy

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

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

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

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

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

kovchiy

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,

kovchiy

GridDefine(colNum, col, gap, marginX, marginY = marginX * 1.5)
    .Grid
        gridWidth = colNum * col + (colNum - 1) * gap

        inCols(prop = '', num, extra = 0)
            {prop} num * col + (num - 1) * gap + extra

        for i in 1..colNum
            &_col_{i}
                inCols(width, i)

kovchiy

Beast.decl({
    Button: {
        inherits: 'Control',
        tag: 'button',
        mod: {
            Action: false,
            Size: 'M',
            /* ... */
        },
        param: {