Вышла Derby 0.6.0-alpha3

Разработка веб-сайтовJavaScriptDerby.js

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 — они полностью переработаны под новую версию.
Теги:derbyjsfullstack development
Хабы: Разработка веб-сайтов JavaScript Derby.js
+16
7,6k 43
Комментарии 17

Похожие публикации

Лучшие публикации за сутки