Javascript framework and backbone
7 likes6,790 views
The document discusses JavaScript frameworks and introduces Backbone.js as a framework that provides an MVC pattern for building JavaScript applications. It describes how Backbone.js separates an application into models, views, and controllers and provides basic functions for each part. Examples of companies and applications using Backbone.js are given.
Javascript framework and backbone
- 1. JavaScript framework and Backbone Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 2. JavaScript is Important Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 3. Start from jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. Building a web application with jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 6. JQuery can give us this: Browser Dom Manipulation Ajax Server Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. 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. 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. How to fill in the gaps? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 11. Extended the JavaScript language itself Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. Provide rich library and toolkits Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. Spend more time on project, less on architecture! Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 16. Application Framework Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 17. Think about is Rails in front-end Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 18. YES! A MVC Pattern Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. 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. 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. 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. Who use it? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 24. Basecamp Mobile Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 25. Flow Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 26. CloudApp Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 27. Jeremy Ashkenas • DocumentCloud • Coffee-Script • Underscore • Docco • Github • Twitter Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. 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. Backbone? Spine? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. 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. Backboneʼs MVC Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
- 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. 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. 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. 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. 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. 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