Snakeskin

[tenshi]

Тогда ок. Поделись инфой как такие вотчеры писать.

[kobezzza]

Тогда ок. Поделись инфой как такие вотчеры писать.

Да особо никакой инфы то и нет, т.к. я юзаю встроенный механизм WebStorm, а ему для работы просто нужно указать ссылочку на bash скриптик (или cmd для винды) и задать нужные параметры. Я легко освоил по примеру встроенных вотчеров.

***

Скоро закончу работу над очередным мажорным обновлением - Snakeskin 3.4. Добавил оч много вкусностей, планирую на след недели закончить.

Сейчас реализую альтернативный синтаксис декларации шаблонов, очень близкий к Jade / HAML для более удобной генерации XML-подобной структуры.

/// Новый синтаксис активизируется путём простой декларации 
/// без каких либо специальных флагов и работает совместно со старым

- template hello(name)
  h1.bar hello {name}!

{template child() extends hello}
  ...
{/}

Благодаря раздельной модульной архитектуре парсера / транслятора добавить новый синтаксис очень просто и он будет поддерживать 100% оригинальных возможностей Snakeskin, т.е. супер мощная система наследования и фильтров, богатый набор итераторов, включая интеграцию с Collection на уровне синтаксиса.

Ещё заметным обновлением является интеграция на уровне синтаксиса с фреймворком Async и нативной реализацией Promise, а также общий асинхронный интерфейс для написания асинхронных шаблонов.

В остальном множество улучшений парсера, которые расширяют синтаксические возможности и улучшают обработку ошибок (в новой версии я планирую полностью перейти на статическую проверку валидности кода, т.е. без использования eval конструкций без явной необходимости).

[melky]

и исчо layouts

[kobezzza]

и исчо layouts

Само собой

[kobezzza]

Для нового синтаксиса будет добавлена поддержка ссылки на родительский класс а ля Stylus.

.b-foo.&_checked_true
    span.&__master hello world!

=>

<div class="b-foo b-foo_checked_true">
    <span class="b-foo__master">hello world!</span>
</div>

Т.е. & будет ссылаться на последний класс без использования &.

***

Новый синтаксис будет прекрасно сосуществовать и со старым, т.е. если будет нужно, то например

- template foo()
    div fooo bar {call bar()} bla bla bla

[DjDiablo]

Вопросик по движку есть.

1)
Правильно ли я понимаю что при изменении класса будет перегенерирован весь html ?

<div {attr 'class', a}></div>

2)
Правильно ли я понимаю что невозможно обратится к одному из свойств style к примеру opacity, а только ко всему style,
и опять же после изменения style весь html перегенерируется?

3)

<div>{test}</div>

А это тоже приведет к перегенерации html при изменении test?


Извини если вопросы глупые, мало знаком с твоим шаблонизатором.
Оцениваем возможность использования на клиенте.

Работа шаблонизатора состоит в 90% случаев только в обновлении style и атрибутов, процентах в 7% в изменени текстовых нод, и только в 3% случаев добавление удаление html тегов. Проценты на глазок конечно, просто чтобы обьяснить проблематику.

Буду благодарен за ответ

[kobezzza]

DjDiablo, мне кажется ты не понял концепцию моей шаблонки

Шаблон Snakeskin - это функция JavaScript, т.е. когда ты напишешь

{template foo(name)}
    Hello {name}!
{end}

То после трансляции будет

var foo = function foo(name) {
    var __SNAKESKIN_RESULT__ = '',
        $_;

    var TPL_NAME = 'foo';
    var PARENT_TPL_NAME;

    __SNAKESKIN_RESULT__ += ' Hello ';
    __SNAKESKIN_RESULT__ += Snakeskin.Filters.html(Snakeskin.Filters.undef(name));
    __SNAKESKIN_RESULT__ += '! ';

    return __SNAKESKIN_RESULT__;
};

Т.е. это простая функция, которая принимает параметры и плюётся текстом. Никакого data-binding нет и не спроста, т.к. это задача отдельного инструмента. Snakeskin поддерживает сахарный синтаксис для "пометок" для либы, которая будет делать data-binding.

{template foo(name)}
    <input value="{{value}}" />
{end}

А уже с полученным можно юзать любую либу биндинга, например Ractive. Так что Snakeskin - это именно шаблоны, которые сделаны очень качественно (чего не скажешь о блендерах вроде Angular) с охренительной поддержкой для code-reuse.

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

{template Select.prototype.render(name) extends Input.prototype.render}
    {block dropdown}
        ...
    {end}
{end}

В проекте над которым я сейчас работаю больше 300 клиентских шаблонов, которые работают именно по такому принципу и рендеринг всего добра занимает примерно 1 сек, т.е. Snakeskin проектировался быть быстрым.

Коротко суть.

***

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

[DjDiablo]

Понял, то бишь он выплевывает только текст.
Выходит для клиента непригоден.

Генерация и умная перегенерация сразу дум в разы быстрее чем генерация текста с последующей его вставкой.

Связывания поверх твоего шаблонизатора это плохая идея. Сам посуди: хороший движок связывая должен поддерживать установку атрибутов, классов, условия, циклы. Все это есть у тебя, при таком дублировании вообще становится непонятно зачем нужен твой шаблонизатор.

Как я понял snakeskin катит только для сборки статических страничек в стиле "справочник садовода любителя".
Стебусь конечно
Иными словами шаблонизатор формирует предельно статичный html, ибо полная замена новым html(в виде текста который выплюнет шаблонизатор) это безумно дорогая операция. Вся трибуха с фильтрами,условиями, циклами и даже сама шаблонизация получается бесполезной.Ну может за исключением случаев когда этим пользуются только однажды или очень очень редко. Единственное что на клиенте может быть полезно это наследование. Все вышесказанное касается только клиента, на сервере все окей.

Тем не менее спасибо за ответ.
P.S. плюсануть сорри не выходит.

[kobezzza]

Как я понял snakeskin катит только для сборки статических страничек в стиле "справочник садовода любителя".

Если рассматривать голый Snakeskin, то да. Он проектировался быть нейтральным к мере своего применения (клиент, сервер и т.д.) и стеке используемых технологий, но в тоже время у него реализован механизм фильтров, который позволяет писать расширения под любую новую функциональность, в том числе тот же data-binding.

Ну а вообще, я возможно прикручу такую фичу из коробки, раз всем её так хочется

[nerv_]

Ну а вообще, я возможно прикручу такую фичу из коробки, раз всем её так хочется

Если все-таки надумаешь, сделай, плиз, чтобы можно было выбирать с дата-биндингом или без.

Генерация и умная перегенерация сразу дум в разы быстрее чем генерация текста с последующей его вставкой

Вставка текста и парсинг его браузером быстрее, чем создание DOM элементов через конструкторы.
Другое дело дата-биндинг и обработчики событий. Разумеется, нет смысла менять весь html, если требуется изменить значение атрибута style. Но, это уже дата-биндинг.

но в тоже время у него реализован механизм фильтров, который позволяет писать расширения под любую новую функциональность, в том числе тот же data-binding

Дай линки на примеры