Вышла Derby 0.6.0-alpha3

в 11:29, , рубрики: derby.js, Derbyjs, fullstack development, javascript, Веб-разработка, метки: ,

Буквально пару дней назад в репозитории 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 — они полностью переработаны под новую версию.

Автор: zag2art

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js