Возможность использовать БЭМ-стек в песочницах

ilyar commented 8 years ago

Проверил возможность использовать БЭМ-стек в песочницах. Учитывая наличие dist-поставки bem-core-dist и bem-components-dist препятствий для этого быть не должно.

Мотивация

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

Эксперимент

Для эксперимента взял блок hello из статьи Собираем статическую страницу на БЭМ. Вот что получилось:

JSFiddle - http://jsfiddle.net/ilyar/e4ovosht/
Plunker - http://plnkr.co/jM93Sd
CodePen - http://codepen.io/ilyar/details/NxzVEa/
Особенности реализации

Шаблоны заворачиваем в модуль:

bemhtml

modules.define('BEMHTML', [], function (provide, BEMHTML) {
  BEMHTML.compile(function() {
    block('hello')(
      js()(true),
      tag()('form')
    );
  });
  provide(BEMHTML);
} );

bh

modules.define('BH', [], function (provide, bh) {
  bh.match('hello', function (ctx) {
    ctx.js(true);
    ctx.tag('form');
  } );
  provide(bh);
} );

Для возможности использовать bemjson реализовал блок:

/**
 * @module bemjson
 */
modules.define(
  'bemjson', ['i-bem__dom', 'BEMHTML'],
  function(provide, BEMDOM, BEMHTML) {

    /**
     * @exports
     * @class bemjson
     * @bem
     */
    provide(BEMDOM.decl(this.name, /** @lends bemjson.prototype */ {
      onSetMod: {
        js: {
          inited: function() {
            BEMDOM.replace(this.domElem, BEMHTML.apply(JSON.parse(this.domElem.text())));
          }
        }
      }
    }));
  }
);

Пример использования:

<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": ""
}
</script>

Результаты

В проверенных песочницах все отлично работает. Plunker и CodePen дают больше свободы и поэтому больше подходят для экспериментов с БЭМ-стеком, а Pluker больше всего, потому что позволяет все разложить по отдельным файлам.

К сожалению в IE8 не работает хотя все необходимые ресурсы (shim, ie.css) для этого подключены в Plunker и CodePen кроме JSFiddle, ошибка:

'modules' is undefined

Вопросы

Какие есть варианты оформить bemjson отдельным файлом в Plunker?
Может быть кто-то знает более подходящею песочницу для экспериментов с БЭМ-стеком?
Тестирование, приветствуется.

UPD: v2

~~Каким образом можно оформить bemhtml в песочнице?~~

apsavin commented 8 years ago

Я когда-то создавал в порядке эксперимента вот такую штуку - но поддерживать времени нет. Как видно, там до сих пор bem-tools для сборки используется, страшный и непонятный GUI и так далее.

ilyar commented 8 years ago

@apsavin припоминаю, игрался, интересно посмотреть как эта штука устроена исходники публичные?

Несмотря на наличие этого проекта и песочниц для BEMHTML и BH, считаю будет более перспективно использовать привычные для сообщества песочницы.

Кроме того (try-bem-online.net)(http://try-bem-online.net/) это другой класс инструмента, это скорее облачная IDE, предположу что текущие доступные решения сбавятся с БЭМ-стеком в браузере. Будет круто если try-bem-online будет развиваться в сторону «BEM IDE»:

@belyanskii Саша, пожалуйста скажи пару слов о текущий перспективах и планах «BEM IDE».

apsavin commented 8 years ago

@ilyar https://github.com/apsavin/try-bem-online__front https://github.com/apsavin/try-bem-online__back Это не облачная IDE, это эксперимент на поиграться) Навряд ли у меня найдётся время к нему достаточно основательно вернуться в ближайший год.

JiLiZART commented 8 years ago

На самом деле нехватает красивого развесистого лендинга, аля как у бабеля, чтобы там была песочница для всего стека :)

apsavin commented 8 years ago

@JiLiZART всякие babel, requirejs, react, webpack, %web_technology% обычно делают +- что-то одно. Бэм стек заставляет поменять очень многое. Шаблонизатор, подход к шаблонам, модульную систему, js-фреймворк, сборщик, способ хранения исходников на файловой системе, методологию разработки, способ указания зависимостей между блоками... Поэтому какой бы лэндинг с какой бы песочницей не создали, на мой взгляд, это не изменит ничего с точки зрения новичка.

tadatuta commented 8 years ago

Добавлю в этот тредик песочницы шаблонизаторов: http://bem.github.io/bem-xjst/ http://bem.github.io/bh/

А еще на примерно эту же тему у @blond давным-давно была идея использовать для быстродемок <script type="bemjson"></script>, чтобы можно было писать BEMJSON прямо внутри plain old school HTML:

<form class="form" action="/" method="post"></div>
    <script type="bemjson">
        {
            block: 'button',
            mods: { type: 'submit' },
            text: 'Нажми меня'
        }
    </script>
</form>

В редакторах из коробки подсветка, все дела. В девелопменте на domReady реплейсить такие вставки на результат BEMHTML.apply() на клиенте, а при сборке в прод делать этот реплейс на серверной стороне.

voischev commented 8 years ago

@tadatuta прикольная идея у @blond :+1:

JiLiZART commented 8 years ago

Думаю PostHTML хорошо с этим справится :)

voischev commented 8 years ago

@JiLiZART правда для работы с браузером его нужно будет подготовить через браузерифай :)

ilyar commented 8 years ago

Пока остановился на таких решениях:

bemjson

<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": ""
}
</script>

bemhtml

modules.define( 'BEMHTML', [], function ( provide, BEMHTML ) {
  BEMHTML.compile(function() {
    block('hello')(
      js()(true),
      tag()('form')
    );
  });
  provide( BEMHTML );
} );

bh

modules.define('BH', [], function (provide, bh) {
  bh.match('hello', function (ctx) {
    ctx.js(true);
    ctx.tag('form');
  } );
  provide(bh);
} );

Обновил песочницы:

JSFiddle - http://jsfiddle.net/ilyar/e4ovosht/
Plunker - http://plnkr.co/jM93Sd
CodePen - http://codepen.io/ilyar/details/NxzVEa/

Тестирование приветствуется.

Известные и не решенные ошибки в IE8:

'modules' is undefined

tadatuta commented 8 years ago

Предположу, что проблему в IE 8 исправит подключение shim (см. https://ru.bem.info/libs/bem-components/v2.4.0/#Поддержка-internet-explorer-8)

ilyar commented 8 years ago

@tadatuta shim изначально подключен на Plunker http://run.plnkr.co/plunks/jM93Sd/ и CodePen http://s.codepen.io/ilyar/debug/NxzVEa

<!DOCTYPE html>
<html class="ua_js_no">

<head>
  <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.2/es5-shim.min.js"></script><![endif]-->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Static page with BEM</title>
  <script>
    (function(e, c) {
      e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
    })(document.documentElement, "className");
    (function(d, n) {
      d.documentElement.className += " ua_svg_" + (d[n] && d[n]("http://www.w3.org/2000/svg", "svg").createSVGRect ? "yes" : "no");
    })(document, "createElementNS");
  </script>
  <!--[if gt IE 8]><!-->
  <link rel="stylesheet" href="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.css" />
  <!--<![endif]-->
  <!--[if lte IE 8]><link rel="stylesheet" href="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.ie.css"/><![endif]-->
  <script src="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.js+bemhtml.js"></script>
  <!-- block hello -->
  <link rel="stylesheet" href="hello.css" />
  <script src="hello.bemhtml.js"></script>
  <script src="hello.js"></script>
  <!-- apply bemjson -->
  <script src="bemjson.js"></script>
</head>

<body class="page page_theme_islands">
<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": [
    {
        "elem": "greeting",
        "content": "Hello, %user%!"
    },
    {
        "block" : "input",
        "mods" : { "theme" : "islands", "size" : "m" },
        "mix" : { "block" : "hello", "elem" : "input" },
        "name" : "name",
        "placeholder" : "User name"
    },
    {
        "block" : "button",
        "mods" : { "theme" : "islands", "size" : "m", "type" : "submit" },
        "text" : "Click"
    }
 ]
}
</script>
</body>

</html>

bem-site / bem-forum-content-ru