From Backbone to Thorax

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. MV*
   

   View Slide

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

   View Slide

6. View
   Collections/Models
   Subscribe
   UI Events
   Server
   RESTful
   DOM
   Templates
   Publish
   Backbone MV*�
   

   View Slide

7. Demo 1�
   MV* basics
   

   View Slide

8. View Slide

9. Why Thorax ?
   

   View Slide

10. Handlebars�
    

    View Slide

11. Backbone + handlebars
    

    View Slide

12. Demo 2�
    Handlebars MVC editor
    

    View Slide

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

    View Slide

14. itemFilter: function (model) {
    if (active) {
    return model.get('genre') === active;
    }
    else {
    return true;
    }
    }
    Supports filtering�
    

    View Slide

15. Thorax.Layout�
    layout.setView( ... )
    
    {{layout-element}}
    
    

    View Slide

16. subviews�
    
    {{view header}}
    
    

    View Slide

17. events�
    var listView = new Thorax.View({
    el: "#movies",
    events: {
    collection: {
    'all': function(ev) { console.log(ev) },
    filter: function(ev) { }
    }
    }
    }
    

    View Slide

18. model binding�
    $(event.target).model();
    

    View Slide

19. Demo 3�
    Thorax fiddles
    

    View Slide

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

    View Slide

21. The Thorax Generator
    

    View Slide

22. View Slide

23. |-js!
    |!
    |---libs!
    |-----backbone!
    |-----impress!
    |-----masonry!
    |-----jquery!
    |-----jquery-fileupload!
    |-----jquery-ui!
    |-----require!
    |-----underscore!
    |!
    |---modules!
    |!
    |!
    |-templates!
    |---dashboard!
    |---directory!
    |---shared!
    development
    production
    HTTP
    Loading JS Modules�
    

    View Slide

24. RequireJS�
    

    View Slide

25. Bower
    Yeoman
    

    View Slide

26. View Slide

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

    View Slide

28. „Chef‘s choice“�
    

    View Slide

29. Development API server�
    

    View Slide

30. BUILD
    PROCESS
    

    View Slide

31. Demo 3�
    workflow automation�
    

    View Slide

32. Root View
    Thanks !
    

    View Slide

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

    View Slide