backbone dev talk by max mamis
DESCRIPTION
Backbone Dev Talk by Max MamisTRANSCRIPT
![Page 1: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/1.jpg)
A Quick Overview of Backbone
![Page 2: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/2.jpg)
![Page 3: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/3.jpg)
What is it?
● Minimal Javascript library for building Web apps
● Built on top of Underscore.js, a utility library by the same developer
![Page 4: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/4.jpg)
What does it provide?
● Model● View● Router● Events● That’s it!
![Page 5: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/5.jpg)
So, it’s MVC?
![Page 6: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/6.jpg)
What doesn’t it provide?
● Automatic data binding (like Ember, Angular)
● Template rendering● Pretty much anything else
![Page 7: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/7.jpg)
Models
● Sync (CRUD)○ model.fetch(), model.save(), model.destroy()○ override Backbone.sync() to implement custom
syncing functionality for all models● Collections
○ Contain models, models can contain collections○ Lots of useful operations
■ map, reduce, filter, sort, shuffle, etc
![Page 8: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/8.jpg)
Views
“...are almost more convention than they are actual code”
- the source
![Page 9: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/9.jpg)
Views
● Creates an element○ Give your view class some combo of properties tagName,
className, id○ Or pass in a pre-existing DOM element
● Delegates events○ ‘click a.someClass’: ‘goToLink’; calls this.goToLink()
● view.$○ jQuery/Zepto object in the context of the view’s DOM
element (i.e. this.$(‘a.someClass’).hide();)
![Page 10: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/10.jpg)
![Page 11: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/11.jpg)
![Page 12: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/12.jpg)
![Page 13: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/13.jpg)
![Page 14: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/14.jpg)
![Page 15: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/15.jpg)
![Page 16: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/16.jpg)
![Page 17: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/17.jpg)
Why Backbone?
● Small — <20k! (minified)○ Compared to Ember (64k) or Angular (81k)○ Great for mobile!
● No magic● Intuitive
![Page 18: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/18.jpg)
![Page 19: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/19.jpg)
Backbone & Node?
Sure, why not?
![Page 20: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/20.jpg)
Backbone & Node?
● DIY○ Models: just override Backbone.sync()○ Views: render templates and serve them as HTML
instead of injecting into DOM?● AirBNB Rendr
○ Express Middleware○ Handles all that for you
![Page 21: Backbone Dev Talk by Max Mamis](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a4d51a28ab5c798b4653/html5/thumbnails/21.jpg)
Fin