📜 ⬆️ ⬇️

Derby 0.6.0-alpha3 released


DerbyJs is a reactive full-stack javascript framework. About him repeatedly wrote on Habré - materials on Derby . Just a couple of days ago, the main branch was changed in the Derby repository. Now version 0.5 receded into the background, 0.6 was the main one.

Not in the tradition of the development team to engage in PR - the changes have occurred quietly and unnoticed. And what has changed?

What is left, what has changed


So, the part that related to models and reactive data (racerjs, sharejs) remained completely unchanged - they were fast and stable. The main problems we struggled with were: slow rendering subsystem, its instability, dirty code.

So, at the moment the part responsible for templating and rendering has been completely rewritten. Significantly improved performance. Esprimajs fork has been added to the project - now you can use any javascript expression in the templates. The code is now clearer - the system is more scalable.
')
A new component system has been created, documentation has been written on it.

Server noodles transferred to a separate module «derby-starter». Now derby applications look beautiful and light. Look at one of the converted examples - directory .

Some code examples


These are just a few examples that I quickly pulled out, I think a lot of things have escaped my attention.

/*   #,   */ {{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 example with components


 <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 


PS
Over the past couple of days, the sixth version in the sprint pace ran from 1 to 3 alpha versions. In the near future, expect beta.

Pps
Anyone interested is advised to see examples from the derby-examples repository - they are completely redesigned for the new version.

Source: https://habr.com/ru/post/213565/


All Articles