Javascript framework and backbone

9,456 views

Published on

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

No Downloads
Views
Total views
9,456
On SlideShare
0
From Embeds
0
Number of Embeds
4,094
Actions
Shares
0
Downloads
159
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Javascript framework and backbone

  1. 1. JavaScript framework and Backbone Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  2. 2. JavaScript is Important Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  3. 3. Start from jQuery Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  4. 4. jQuery is Great • It does give us easy access to DOM manipulation, ajax, animation, events etc. • It doesnʼt provide all the tools needed to build serious JavaScript web application • But how do we fill in the gaps for everything else? Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  5. 5. Building a web application with jQuery Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  6. 6. JQuery can give us this: Browser Dom Manipulation Ajax Server Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  7. 7. But ...what we need? • Easy to modify / maintain... • Separate application concerns & keep the code decoupled • Could be a single-page application (SPA) with multiple views of the data, but require no hard page refresh? • Good performances / experiences Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  8. 8. Itʼs all easy to create JavaScript applications that end up as tangle piles of jQuery selectors and callbacks. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  9. 9. And weʼre missing something • Client-side Template • Modular / Structure organization • Browser State Management (location.hash) • Manageable routing to your application • Dependency management • Remote / Local Persistent layer • Architecture patterns (like MVC, Delegation) • Support Testing Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  10. 10. How to fill in the gaps? Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  11. 11. Extended the JavaScript language itself Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  12. 12. Dynamic run-time & OO • Prototype • Narcissus • Super-Class • JS2Lang • CoffeeScript • Hacking construct method and Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  13. 13. Provide rich library and toolkits Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  14. 14. • jQuery and jQueryUI • YUI • ExtJS • Underscore.js • MooToos • Dojokits • To many third part library and plugins ... Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  15. 15. Spend more time on project, less on architecture! Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  16. 16. Application Framework Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  17. 17. Think about is Rails in front-end Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  18. 18. YES! A MVC Pattern Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  19. 19. The MVC Pattern • Separates objects into three main concerns • Traditionally heavily used on the server side • Excellent for code-organization in general • Implementations can vary quite significantly Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  20. 20. Models, Views & Controllers • Models represent status and behaviors, Interact with data... • Views can be considered the UI. link events to methods and generate dynamic HTML. • Controller sits between Models and Views. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  21. 21. MVC Frameworks • JavaScriptMVC • Backbone.js & Underscore.js • Spine.js • SproutCore • Sammy.js • etc... Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  22. 22. Backbone.js • Provides the ʻbackboneʼ you need to organize your code using the MVC pattern • Excellent for a lightweight solution where you select the additional components you feel work best for your project. • Works best for SPAs (single-page apps) Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  23. 23. Who use it? Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  24. 24. Basecamp Mobile Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  25. 25. Flow Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  26. 26. CloudApp Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  27. 27. Jeremy Ashkenas • DocumentCloud • Coffee-Script • Underscore • Docco • Github • Twitter Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  28. 28. Spine.js • A lightweight MVC framework with a focus on providing an inheritance model through classes and extension. • Based on Backboneʼs API so developers may find getting started a little easier than expected • Spine doesnʼt require underscore.js Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  29. 29. Alex MaxCaw • London, United Kingdom • Author of <<JavaScript Web Applications>> • http://alexmaccaw.co.uk • https://github.com/maccman • https://twitter.com/maccman Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  30. 30. Backbone? Spine? Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  31. 31. Dive into Backbone A demo about Backbone scaffolding application with Rails back-end Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  32. 32. Backboneʼs MVC • Models: represent data that can be created/ validated, destroyed & listened to for changes. Collections are sets of models. • Views: display the modelʼs data / provide the user interface layer • Controller: methods for routing client-side URL fragments Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  33. 33. Backboneʼs MVC Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  34. 34. Backboneʼs Model Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  35. 35. Backboneʼs Collection Collections are ordered sets of models. Collections may also listen for changes to specific attributes in their models Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  36. 36. Backboneʼs Controller Controller provides methods for routing client- side URL fragments, and connecting them to actions and events. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  37. 37. Backboneʼs View Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  38. 38. More about Backbone • Backboneʼs Event • Backboneʼs History • Backboneʼs Sync • More ... Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011
  39. 39. Resources • Backbone.js Document - http://documentcloud.github.com/backbone/ • Backbone Tutorials • Building a single page app with Backbone.js, underscore.js and jQuery • What are some good resources for Backbone.js • Backbone.js with Node.js and Socket.is to build real-time apps • Creating LocalTodos.com -- A Short Story. • Backbone.js and Sinatra on Heroku • Cinco - 37Single framework based on Backbone.js, open source soon. Copyright 2010, Intridea Inc. All Rights Reserved.Tuesday, June 28, 2011

×