backbone.js - michał taberski (prug 2.0)
TRANSCRIPT
BACKBONE.JSMichał Taberski
piątek, 29 kwietnia 2011
AGENDA
• Classic web-app model
•Modern web-app model
• Intro to Backbone.js
• overview BB
•DEMO
piątek, 29 kwietnia 2011
CLASSIC WEB-APP MODEL
piątek, 29 kwietnia 2011
CLASSIC WEB-APP MODEL
piątek, 29 kwietnia 2011
WHAT IS CAUSING THIS?
• Poor calculation distribution
• Small scalability
• Server is doing more than it should
• Slow answer to user
• Unresponsive apps
• Client often still has unused (free) resources
piątek, 29 kwietnia 2011
MODERN WEB-APP MODEL
GitHub
piątek, 29 kwietnia 2011
piątek, 29 kwietnia 2011
piątek, 29 kwietnia 2011
HOW IT WORKS ?
SERVERbrowser
Server provides templates (eg. mustache like) as an answer for first request, and JSON data to fi# it
When event is tri%ered, browser ask for JSON data (pure RESTful request)
Server gives just JSON data*
* - Because they fi# templates using JS, they can display data in a fancy wayeg. like project navigation in GitHub
piątek, 29 kwietnia 2011
WHAT IS REQUIRED TO DO IT?
• Implement business logic (JS)
• Prepare server JSON API
• organize somehow JS code
piątek, 29 kwietnia 2011
BACKBONE.JS
• simple framework to organize JS-heavy apps
• provide classic MVC - models, (collections), controllers, views
• event driven
• easy to use with Rails
piątek, 29 kwietnia 2011
BACKBONE.JS
• launched by Documentcloud (underscore.js, Jammit)
• lightweight - 3.9kb
• hard dependency - underscore.js
• recommended dependency
• jQuery or Zepto for DOM modifications
• json2.js - few helpers by Douglas Crockford
piątek, 29 kwietnia 2011
BACKBONE.JS - MODELS• easy way to keep your data sync with server
• define custom events (add, remove, change) like below:
•
class Sidebar extends Backbone.Model promptColor: ()-‐> cssColor = prompt("Please enter a CSS color:") @set({color: cssColor})
sidebar = new Sidebar
sidebar.bind('change:color', (model, color)-‐> $('#sidebar').css({background: color}))
sidebar.set({color: 'white'})sidebar.promptColor()
piątek, 29 kwietnia 2011
BACKBONE.JS - MODELS
• extend, constructor / initialize, get, escape, set, unset, clear, id, cid, attributes, defaults, toJSON, fetch, save, destroy, validate, url, parse, clone, isNew, change, hasChanged,
changedAttributes, previous, previousAttributes
piątek, 29 kwietnia 2011
BACKBONE.JS - COLLECTIONS• organize models
• fires events
• REST calls
class CommentsCollection extends Backbone.Collection model: CommentModel url: '/comments'
Comments = new CommentsCollectionComments.fetch()
piątek, 29 kwietnia 2011
BACKBONE.JS - COLLECTIONS
• extend, model, constructor / initialize, models, toJSON, Underscore Methods (25), add, remove, get, getByCid,
at, length, comparator, sort, pluck, url, parse, fetch, refresh, create
piątek, 29 kwietnia 2011
BACKBONE.JS - VIEWS
• responsible for DOM modiffications
• works in el range
• related to collection or model
piątek, 29 kwietnia 2011
BACKBONE.JS - VIEWSclass NewCommentView extends Backbone.View
events: 'submit': 'save'
constructor: -‐> @el = $('#comment_form') super
save: (e)-‐> @model = new CommentModel @model.save({ 'title': @$("input[name='title']").val(), 'author': @$("input[name='author']").val(), 'body': @$("textarea").val() }, { success: => @$("input[name='title']").val('') @$("input[name='author']").val('') @$("textarea").val('') @render() }) e.preventDefault() e.stopPropagation() render: -‐> $.tmpl($("#commentTemplate"), @model.toJSON()).appendTo('#commentsContener')
piątek, 29 kwietnia 2011
BACKBONE.JS - CONTROLLER• routing control
• transferable linksWorkspace extends Backbone.Controller routes: "help": "help" "search/:query": "search" "search/:query/p:page": "search"
help: ()-‐> new HelpView()
search: (query, page)-‐> new QueryView(query, page)
piątek, 29 kwietnia 2011
DEMO
piątek, 29 kwietnia 2011
RESOURCES
• Project page:http://documentcloud.github.com/backbone/
• Source code:https://github.com/documentcloud/backbone/
•Another presentation about BBhttp://ngauthier-backbone.heroku.com/
• Nice tutorial BB + Railshttp://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
piątek, 29 kwietnia 2011