Backbonification for dummies - Arrrrug 10/1/2012
Upcoming SlideShare
Loading in...5
×
 

Backbonification for dummies - Arrrrug 10/1/2012

on

  • 2,077 views

This presentation was given on the Arrrrug meeting as a first introduction to backbone.js in combination with rails after playing a couple of weeks with backbone.js....

This presentation was given on the Arrrrug meeting as a first introduction to backbone.js in combination with rails after playing a couple of weeks with backbone.js.

Note: It is really on introduction level, in the meantime, my level of backbone.js and coffeescript have increased.

Statistics

Views

Total Views
2,077
Views on SlideShare
1,854
Embed Views
223

Actions

Likes
2
Downloads
33
Comments
0

1 Embed 223

http://www.vandeputte.be 223

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Backbonification for dummies - Arrrrug 10/1/2012 Backbonification for dummies - Arrrrug 10/1/2012 Presentation Transcript

  • Dummies ne.js forBackb o backbon e wi t h uction to useI ntrod s 3.1.x Rail
  • Everybodyneeds an introcourse, Right?
  • 3 Reasons to Use aFront End Framework?
  • 1. It Makes Your Front- End Code Testable
  • 2. It Makes Your Front- End Code Testable
  • 3. It Makes Your Front- End Code Testable
  • Jasmine.js
  • Other Benefits• Responsive UI with Event-Driven Communication• Maintainable Client Side Code by Convention• Easy Client-Server Syncing (RESTful)• Easy to integrate Web-Socket Technology• Works very well together with the Rails Asset Pipeline
  • The Rails Way• Have you ever felt limited by Rail’s way to structure your App around resources and the RESTful actions. Do you design your Rails app in such a way (scaffoldish) that its easy and cheap to develop?• Would you like to do what-ever you want on the front-end, but still use a restful, well structured, testable back-end?
  • Example App
  • Demo:Have a look at the App
  • http://documentcloud.github.com/backbone/
  • Learning Backbone.jsThis presentation is not a course, there are manycatches, do some good training, it will help you. • Sources: • Peepcode.com has 3 very good screencasts. http://peepcode.com/products/backbone-js • Thoughtbot has a very good book: https://workshops.thoughtbot.com/ backbone-js-on-rails
  • Cookbook• Rails 3.1.3• Backbone.js• JQuery• Pusher• EJS Templates• Backbone Forms
  • Backbone.js• Model,View, Router• Lightweight (< 700 lines)• No UI Widgets - Write your own html, erb, haml, css, scss, sass• Template Agnostic, bring your own
  • Use
  • www.coffeescript.org
  • Use a Push Technology• Faye - http://faye.jcoglan.com/• Event Machine - http:// rubyeventmachine.com/• Pusher
  • www.pusher.com
  • Pusher• It’s a complete abstraction of Push Technology in a SAAS approach• How does it work? • Backend App send posts to Pusher server (Pusher GEM) • Front-End uses Javascript to receive the events • Channel based • Uses web-sockets and falls back to Flash
  • jquery / zepto and Backbone.js• JQuery / Zepty: mark-up oriented• Backbone.js: • Data Oriented Manipulate data and views are updated automatically. • Single Page Application. Router ensures that the correct data is shown.• You need Both!
  • Templates• .jst Templates (ejs) - http://embeddedjs.com• The templates are rendered and then enriched with data by JQuery or Zepto• Backbone-Forms - https://github.com/ powmedia/backbone-forms
  • Example App: Shopping List App
  • Application Structure• Details are free to chose - here a proposal is given - some people organise differently• All Front End Code goes into • app/assets/javascripts • lib/assets/javascripts • vendor/assets/javascripts
  • Application Structure Collections Models Routers App Views
  • RSpec - Jasmine Structure
  • AppNot part of Backbone as such...Used to have a namespace in JavaScript andto avoid the information hiding problems ofJavaScript
  • App Specs
  • App Implementation
  • ModelsBasic data structure used to capture behaviorof single instances. Instance methods,abstraction sever interaction: save, destroy.
  • Model Spec
  • Models
  • Usage of Models
  • CollectionsData stucture to manage sets of instances.Methods for filtering, sorting, abstraction ofserver interaction: fetch.
  • Fixtures
  • Collection Specs
  • Collection
  • Views• Used to view and interact with data • More comparable with a Rails controller than a Rails view. • Binds to Models and Collections to re- render itself when required.
  • Views, subviews ShoppingItemItem ShoppingItemsIndex
  • Templates
  • Templates
  • Combined Approach
  • View Specs
  • View
  • https://github.com/powmedia/backbone-forms Backbone FormsOne of the many form options.Specify a schema in the model and generate ashema from that model.Use “commit” to save the form changes in yourmodel.Save the model to the server.
  • Backbone Forms
  • Router• Used to structure the various pages of your application.• Translates URLs into the rendering of the correct views.• Updates the browser URL and history.• Option to use “#” or “/” as URL delimiter.
  • Router
  • Test
  • Kind of Tests?• Rails • Backbone.js • Acceptance Tests: • App Specs Capybara, Rspec Request, Cucumber with Selenium & Co. • Helper Specs • Models & • Model Tests (rspec, Collections Specs test Unit, ...) • Router & Views Specs
  • Sync Adaptations• csrf: You need a BackboneRailsAuthTokenAdapter. I use the one of Thoughtbot.• Pusher You need to adapt the sync method to respond on incomming web-socket connections. I use the BackPusher, but there some bugs in it that you need to repair (due to newer backbone version) to pass the web-socket-id as a parameter.
  • Putting in Place Pusher• Push State via Controler Adaptations• Use BackPusher
  • Pusher - Rails Initializers
  • Pusher - Rails Controller
  • Pusher In App
  • Thank You