Tweet
Tweet

Slide 1

Slide 1 text

Backbone and Handlebars Patrick Mulder @mulpat

Slide 2

Slide 2 text

library vs� frameworks�

Slide 3

Slide 3 text

what browsers� do� Coast by opera

Slide 4

Slide 4 text

pixels and� events� http://dribbble.com/shots/1043933-Listacular-UI?list=show&tag=todo_list

Slide 5

Slide 5 text

DOM vs� State�

Slide 6

Slide 6 text

DOM http://www.flickr.com/photos/sifter/245803295/ State http://www.flickr.com/photos/lcisa/4713485911/

Slide 7

Slide 7 text

Where change� happens�

Slide 8

Slide 8 text

MV*

Slide 9

Slide 9 text

basic� idea� http://amix.dk/blog/post/19615 user

Slide 10

Slide 10 text

Views State Updates Server Sync Changes UI Events DOM Templates Backbone MV*� Keys Values

Slide 11

Slide 11 text

Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

Slide 12

Slide 12 text

http://pipefishbook.com/editor/ To be released at github, inspired by Andrei Kashcha

Slide 13

Slide 13 text

Better� rendering �

Slide 14

Slide 14 text

Backbone + handlebars

Slide 15

Slide 15 text

Handlebars� // simple attributes {{title}} // repitition {{#each movies}}
{{title}}
{{/each}} // conditionals {{#if currentUser}}
{{ privateStuff }}
{{/if}} // customHelpers {{#renderStars 5}}

Slide 16

Slide 16 text

Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

Slide 17

Slide 17 text

Thorax�

Slide 18

Slide 18 text

Getting Started� Results in Jquery, Underscore, Backbone, Handlebars Hint:

Slide 19

Slide 19 text

CollectionView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}}
  • {{title}}
    • {{/link}} {{/collection}} Also supports filtering

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

    model lookup� someEvent: function(ev) { var target = $(ev.currentTarget); var model = target.model(); // change model ... }

    Slide 22

    Slide 22 text

    events� var listView = new Thorax.View({ el: "#movies", events: { collection: { reset: function(ev) { // automatic bound } } } }

    Slide 23

    Slide 23 text

    subviews�
    {{view header}}

    Slide 24

    Slide 24 text

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

    Slide 25

    Slide 25 text

    Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

    Slide 26

    Slide 26 text

    Brewing� matters� http://www.flickr.com/photos/visitflanders/6328705484/

    Slide 27

    Slide 27 text

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

    Slide 28

    Slide 28 text

    commonjs� � http://www.flickr.com/photos/0lhe/4450998512/

    Slide 29

    Slide 29 text

    RequireJS�

    Slide 30

    Slide 30 text

    Bower Yeoman

    Slide 31

    Slide 31 text

    No content

    Slide 32

    Slide 32 text

    Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/

    Slide 33

    Slide 33 text

    Data Binding� http://www.flickr.com/photos/johnbostock/3356341586/

    Slide 34

    Slide 34 text

    Backbone.Stickit�

    Slide 35

    Slide 35 text

    Let‘s discuss mulderp@github mulpat@twitter thinkingonthinking.com