Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Snakeskin (https://javascript.ru/forum/project/35057-snakeskin.html)

рони 26.06.2013 18:47

kobezzza,
ие нехочет {template helloWorld(name)}
up - заработало

kobezzza 26.06.2013 18:50

Цитата:

Сообщение от рони (Сообщение 258655)
kobezzza,
ие нехочет {template helloWorld(name)}
up - заработало

Это я случайно не тот файл залил:)

nerv_ 26.06.2013 19:15

Цитата:

Сообщение от kobezzza
поправил

спасибо :)

В целом, на мой взгляд, перспективный шаблонизатор.

upd: кстати, что насчет производительности? http://jsperf.com/javascript-templat...off-extended/2

kobezzza 26.06.2013 19:54

Цитата:

Сообщение от nerv_ (Сообщение 258658)
кстати, что насчет производительности? http://jsperf.com/javascript-templat...off-extended/2

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

Скорее всего всякие микро-темплейтинги делают трансляцию быстрее, т.к. весь их алгоритм - это сплит по разделителю и new Function.

У меня в проекте ~300 шаблонов и их трансляция это примерно 5-10% от общей сборки проекта и на моей машинке делается где то 0.7 секунд, а для сравнения Google Closure Templates делает это секунд за 20 (хз, почему так долго, особенно учитывая, что он написан на яве).

Но это всё лирическое отступление:)

Если у тебя 10-ок шаблонов и ты компилишь их на клиенте, то это в любом случае сделается очень быстро даже в ИЕ6 и даже на телефоне:) А если у тебя целая куча шаблонов и ты компилишь их не на сборке проекта, то стоит задуматься, а всё ли ты делаешь правильно:)

Да и вообще прекомпиляция это даже удобнее:
1) Скомпиленые шаблоны можно пропустить через минификатор вместе с остальным JS и это лишит головной боли с экспортом свойств, если сжатие идёт например через GCC.
2) Скомпилиный шаблон работает "мгновенно", т.к. его не нужно предварительно парсить и т.д.
3) Шаблоны можно и нужно разбивать на разные файлы, а не лепить всё в кучу, и тут всё оч просто с таким подходом.
4) В JS я просто вызываю функцию, а не думаю: "ой, это шаблон, его нужно скомпилить"
5) Не нужно тащить транслятор на клиент: а в моём случае это почти 3к строк.

В общем Snakeskin задумывался как шаблонизатор с прекомпиляцией, но а поддержка live-исполнения сделана исключительно для отладки:)
Оптимизация ради оптимизации - это пустая трата времени.

nerv_ 27.06.2013 00:53

Цитата:

Сообщение от kobezzza
5) Не нужно тащить транслятор на клиент: а в моём случае это почти 3к строк.

если есть сервер на node.js ) А как быть с php?

Цитата:

Сообщение от kobezzza
Скорее всего всякие микро-темплейтинги делают трансляцию быстрее, т.к. весь их алгоритм - это сплит по разделителю и new Function.

в целом так )

Цитата:

Сообщение от kobezzza
В общем Snakeskin задумывался как шаблонизатор с прекомпиляцией

да я так, побурчать :D тоже надо )))

kobezzza 27.06.2013 01:14

Цитата:

Сообщение от nerv_ (Сообщение 258694)
если есть сервер на node.js ) А как быть с php?

Зачем сервер? Я имел ввиду, что ты вовремя разработки написал шаблоны допустим, затем их скомпилил и просто включил на страничку как простой JS файл, где лежат нужные тебе функции, ну и дополнительно для работы нужно ещё подключить live модуль (snakeskin.live.js 800 байт). Если юзаешь вебшторм, то можно настроить фаел вотчер и он будет автоматом компилить шаблоны.

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

Или ты имел ввиду использование в качестве серверного шаблонизатора? То тогда на пыхе не оч удобно будет, а на той же ноде, то ещё проще :)

ЗЫ: http://screencast.com/t/iU7AgM6jvjaj что может быть проще?)

monolithed 28.06.2013 01:03

Цитата:

Сообщение от kobezzza
Если ты хочешь автоматизировать процесс компиляции на PHP

Чем shell не угодил? ;)

monolithed 28.06.2013 01:39

Как тебе такой подход:

// about.tpl
@set about (data, value = 0) {
    &.title: data.title,
    &.text:  value
}

// me.tpl
@set me < about (data) {
    &.title: data.title
}

// index.tpl
@include about, me

@get about {
   title: title 1
}

@get me ({
   title: title 2
}, 1)


Будет транслированно в:

<div class="about">
     <div class="about__title">
           title 1
      </div>
      <div class="about__text"> 0 </div>
</div>

<div class="about me">
     <div class="about__title me__title">
           title 2
      </div>
      <div class="about__text me__text"> 1 </div>
</div>



Как это будет выглядеть в твоем случае? :)

PS:
1. div по-умолчанию, хотя можно определить любой тег, используя селекторную нотацию h1.header
2. & означает конкатенацию (автодополнение для bem)
3. + планирется полная абстракция от тегов (web components), ну и data-binding

kobezzza 28.06.2013 12:04

monolithed,
Похоже на BEMHTML от Яндекса чем-то :) Хорошее решение. У меня будет как то так:

{template about(data, value = 0)}
	<div class="{PARENT_TPL_NAME} {TPL_NAME}">
		<div class="{PARENT_TPL_NAME ? PARENT_TPL_NAME + '__title' : ''} {TPL_NAME}__title">
			{data.title}
		</div>
		
		<div class="{PARENT_TPL_NAME ? PARENT_TPL_NAME + '__text' : ''} {TPL_NAME}__text">
			{value}
		</div>
	</div>
{end}

{template me(data, value = 0) extends about}
{end}


Замечания:
Пример у меня выглядит немного неуклюже, т.к. для нормального BEM подхода у меня написана либа, работающая вместе с шаблонизатором. Т.е. сам шаблонизатор изначально не привязан к конкретной технологии, но его гибкость позволяет легко написать любой над-сахар.

kobezzza 28.06.2013 12:06

Цитата:

Сообщение от monolithed (Сообщение 258910)
Чем shell не угодил? ;)

Почему не угодил?) Вопрос же был про пых, а не про шелл:)


Часовой пояс GMT +3, время: 15:09.