Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Backbone to Thorax

mulderp
February 20, 2014

From Backbone to Thorax

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

mulderp

February 20, 2014
Tweet

More Decks by mulderp

Other Decks in Programming

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