From Backbone to Thorax

5d75f8af878f069a3b5939894c2e57ab?s=47 mulderp
February 20, 2014

From Backbone to Thorax

An overview on the MV* pattern, Handlebars and resulting in Thorax.

5d75f8af878f069a3b5939894c2e57ab?s=128

mulderp

February 20, 2014
Tweet

Transcript

  1. From Backbone to Thorax MV* with 100% JavaScript Patrick Mulder

  2. http://www.flickr.com/photos/the_foz/6219860966/

  3. None
  4. MV*

  5. MVC pattern� http://amix.dk/blog/post/19615 user

  6. View Collections/Models Subscribe UI Events Server RESTful DOM Templates Publish

    Backbone MV*�
  7. Demo 1� MV* basics

  8. None
  9. Why Thorax ?

  10. Handlebars�

  11. Backbone + handlebars

  12. Demo 2� Handlebars MVC editor

  13. Thorax.HelperView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}}

  14. itemFilter: function (model) { if (active) { return model.get('genre') ===

    active; } else { return true; } } Supports filtering�
  15. Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>

  16. subviews� <div class="header"> {{view header}} </div>

  17. events� var listView = new Thorax.View({ el: "#movies", events: {

    collection: { 'all': function(ev) { console.log(ev) }, filter: function(ev) { } } } }
  18. model binding� $(event.target).model();

  19. Demo 3� Thorax fiddles

  20. Fiddles� •  Filtering collections: –  http://jsfiddle.net/mulderp/Q4aMh/3/ •  LayoutView: •  http://jsfiddle.net/mulderp/e8RzY/

  21. The Thorax Generator

  22. None
  23. |-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!

    |-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
  24. RequireJS�

  25. Bower Yeoman

  26. None
  27. And more, e.g. for testing�

  28. „Chef‘s choice“�

  29. Development API server�

  30. BUILD PROCESS

  31. Demo 3� workflow automation�

  32. Root View Thanks !

  33. Let‘s discuss ! http://github.com/mulderp/thorax_sandbox! http://thinkingonthinking.com! http://pipefishbook.com! ! ! @mulpat!