Dummies       ne.js      forBackb o               backbon e wi t h        uction to useI ntrod           s 3.1.x          ...
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 Clie...
The Rails Way• Have you ever felt limited by Rail’s way to  structure your App around resources and  the RESTful actions. ...
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.    ...
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, sa...
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 sen...
jquery / zepto and           Backbone.js•   JQuery / Zepty: mark-up oriented•   Backbone.js:    •   Data Oriented        M...
Templates• .jst Templates (ejs) - http://embeddedjs.com• The templates are rendered and then  enriched with data by JQuery...
Example App: Shopping      List App
Application Structure• Details are free to chose - here a proposal  is given - some people organise differently• All Front...
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 ofJav...
App Specs
App Implementation
ModelsBasic data structure used to capture behaviorof single instances. Instance methods,abstraction sever interaction: sa...
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 Mode...
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 a...
Backbone Forms
Router• Used to structure the various pages of  your application.• Translates URLs into the rendering of the  correct view...
Router
Test
Kind of Tests?•   Rails                     •   Backbone.js    •   Acceptance Tests:         •   App Specs        Capybara...
Sync Adaptations•   csrf:    You need a    BackboneRailsAuthTokenAdapter.    I use the one of Thoughtbot.•   Pusher    You...
Putting in Place Pusher• Push State via Controler Adaptations• Use BackPusher
Pusher - Rails Initializers
Pusher - Rails Controller
Pusher In App
Thank You
Backbonification for dummies - Arrrrug 10/1/2012
Upcoming SlideShare
Loading in …5
×

Backbonification for dummies - Arrrrug 10/1/2012

2,025 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,025
On SlideShare
0
From Embeds
0
Number of Embeds
228
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. Dummies ne.js forBackb o backbon e wi t h uction to useI ntrod s 3.1.x Rail
    2. 2. Everybodyneeds an introcourse, Right?
    3. 3. 3 Reasons to Use aFront End Framework?
    4. 4. 1. It Makes Your Front- End Code Testable
    5. 5. 2. It Makes Your Front- End Code Testable
    6. 6. 3. It Makes Your Front- End Code Testable
    7. 7. Jasmine.js
    8. 8. 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
    9. 9. 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?
    10. 10. Example App
    11. 11. Demo:Have a look at the App
    12. 12. http://documentcloud.github.com/backbone/
    13. 13. 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
    14. 14. Cookbook• Rails 3.1.3• Backbone.js• JQuery• Pusher• EJS Templates• Backbone Forms
    15. 15. 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
    16. 16. Use
    17. 17. www.coffeescript.org
    18. 18. Use a Push Technology• Faye - http://faye.jcoglan.com/• Event Machine - http:// rubyeventmachine.com/• Pusher
    19. 19. www.pusher.com
    20. 20. 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
    21. 21. 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!
    22. 22. 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
    23. 23. Example App: Shopping List App
    24. 24. 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
    25. 25. Application Structure Collections Models Routers App Views
    26. 26. RSpec - Jasmine Structure
    27. 27. AppNot part of Backbone as such...Used to have a namespace in JavaScript andto avoid the information hiding problems ofJavaScript
    28. 28. App Specs
    29. 29. App Implementation
    30. 30. ModelsBasic data structure used to capture behaviorof single instances. Instance methods,abstraction sever interaction: save, destroy.
    31. 31. Model Spec
    32. 32. Models
    33. 33. Usage of Models
    34. 34. CollectionsData stucture to manage sets of instances.Methods for filtering, sorting, abstraction ofserver interaction: fetch.
    35. 35. Fixtures
    36. 36. Collection Specs
    37. 37. Collection
    38. 38. 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.
    39. 39. Views, subviews ShoppingItemItem ShoppingItemsIndex
    40. 40. Templates
    41. 41. Templates
    42. 42. Combined Approach
    43. 43. View Specs
    44. 44. View
    45. 45. 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.
    46. 46. Backbone Forms
    47. 47. 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.
    48. 48. Router
    49. 49. Test
    50. 50. 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
    51. 51. 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.
    52. 52. Putting in Place Pusher• Push State via Controler Adaptations• Use BackPusher
    53. 53. Pusher - Rails Initializers
    54. 54. Pusher - Rails Controller
    55. 55. Pusher In App
    56. 56. Thank You

    ×