DerbyJs — реактивный фулстек javascript-фреймворк. О нем неоднократно писали на хабре — материалы по Derby. Буквально пару дней назад в репозитории Derby произошла смена основной ветки. Теперь версия 0.5 отошла на задний план, 0.6 — основная.
Не в традициях команды разработчиков заниматься пиаром — изменения произошли тихо и незаметно. А что же поменялось?
Что осталось, что поменялось
Итак, полностью осталась без изменений та часть, которая касалось моделей и реактивных данных (racerjs, sharejs) — они были быстрыми и стабильными. Главными проблемами, с которыми боролись, были: медленная подсистема рендеринга, ее нестабильность, грязный код.
Итак, на данный момент полностью переписана часть отвечающая за шаблонизацию и рендеринг. Значительно улучшена производительность. В проект добавлен форк esprimajs — теперь в шаблонах можно использовать любые выражения javascript. Код теперь понятней — система более масштабируема.
Создана новая система компонент, по ней написана документация.
Серверная лапша перенесена в отдельный модуль «derby-starter». Теперь приложения derby выглядят красиво и легковесно. Посмотрите один из переделанных примеров — directory.
Несколько примеров кода
Это всего-лишь несколько примеров, которые я по-быстрому выдернул, думаю много чего ускользнуло от моего внимания.
/*Алиасы тепер через #, добавлен индекс массивов*/
{{each _page.list as #todo, #index}}
/*Вместо dervy:view - просто view*/
<view name="todo"></view>
{{/}}
/*x-bind заменен 'on-' в качестве обработчика можно вставлять даже код на JS*/
<button on-click="model.set('titleColor', this.name)">Select</button>
{{each _page.people}}
<tr>
/*Вместо . на текущий скоуп указывает this - как-то более привычно и естественно*/
<td><a href="/people/{{this.id}}">{{this.name}}</a></td>
<td>{{this.phone}}</td>
<td><a href="mailto:{{this.email}}">{{this.email}}</a></td>
<td><a href="http://twitter.com/{{this.twitter}}">{{this.twitter}}</a></td>
<td>{{this.gender}}</td>
</tr>
{{/}}
// Вместо app.fn - теперь app.proto, но это конечно декоративный момент
// главное, это то, что у каждой компоненты свой скоуп, и свои обработчики
app.proto.cancel = function() {
app.history.back();
};
Todo-пример с компонентами
<Body:>
<view
name="todos-new"
on-submit="list.add()"
label="Add todo"
autofocus>
</view>
<view
name="todos-list"
as="list"
items="{{_page.items}}">
</view>
<todos-new:>
<form on-submit="submit()">
<input type="text" value="{{value}}" placeholder="{{@placeholder}}" autofocus="{{@autofocus}}">
<button type="submit">{{@label}}</button>
</form>
<todos-list:>
<ul>
{{each @items as #item, #i}}
<li>
<input type="checkbox" checked="{{#item.checked}}">
{{#item.text}}
<button type="button" on-click="remove(#i)">Delete</button>
</li>
{{/each}}
</ul>
app.component 'todos-new', class TodosNew
submit: ->
value = @model.del 'value'
@emit 'submit', value
app.component 'todos-list', class TodosList
add: (text) ->
@model.push 'list', {text}
remove: (index) ->
@model.remove 'list', index
P.S.
За последние пару дней шестая версия в спринтерском темпе перебежала с 1 по 3 альфа-версии. В ближайшее время ожидаем беты.
P.P.S
Всем кому интересно советую посмотреть примеры из репозитория derby-examples — они полностью переработаны под новую версию.
