book

Developing Backbone.js Applications

Name: Developing Backbone.js Applications
Author: Addy Osmani
ISBN: 9781449328559

by Addy Osmani

May 2013

Intermediate to advanced

374 pages

8h 53m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Developing Backbone.js Applications
Preface
Target AudienceCreditsReadingConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
1. Introduction
What Is MVC?What Is Backbone.js?When Do I Need a JavaScript MVC Framework?Why Consider Backbone.js?Setting Expectations
2. Fundamentals
MVCSmalltalk-80 MVCMVC Applied to the WebClient-Side MVC and Single-Page AppsClient-Side MVC: Backbone StyleImplementation SpecificsModelsViewsTemplatingHandlebars.jsUnderscore.js microtemplatesControllersWhat Does MVC Give Us?Delving Deeper into MVCSummaryFurther ReadingFast FactsBackbone.jsUsed by
3. Backbone Basics
Getting Set UpModelsInitializationDefault valuesGetters and SettersModel.get()Model.set()Direct accessListening for Changes to Your ModelValidationViewsCreating New ViewsWhat Is el?$el and $()setElementUnderstanding render()The events hashCollectionsAdding and Removing ModelsRetrieving ModelsListening for EventsResetting/Refreshing CollectionsUnderscore Utility FunctionsforEach: Iterate over collectionssortBy(): Sort a collection on a specific attributemap(): Create a new collection by mapping each value in a list through a transformation functionmin()/max(): Retrieve item with the min or max value of an attributepluck(): Extract a specific attributefilter(): Filter a collectionindexOf(): Return the item at a particular index within a collectionany() : Confirm if any of the values in a collection pass an iterator truth testsize(): Return the size of a collectionisEmpty(): Determine whether a collection is emptygroupBy(): Group a collection into groups like itemspick(): Extract a set of attributes from a modelomit(): Extract all attributes from a model except those listedkeys() and values(): Get lists of attribute names and valuespairs(): Get list of attributes as [key, value] pairsinvert(): Create object in which the values are keys and the attributes are valuesChainable APIRESTful PersistenceFetching Models from the ServerSaving Models to the ServerDeleting Models from the ServerOptionsEventson(), off(), and trigger()listenTo() and stopListening()Events and ViewsRoutersBackbone.historyBackbone’s Sync APIOverriding Backbone.syncDependenciesSummary
4. Exercise 1: Todos—Your First Backbone.js App
Static HTMLHeader and ScriptsApplication HTMLTemplatesTodo ModelTodo CollectionApplication ViewIndividual TodoViewStartupIn ActionCompleting and Deleting TodosTodo RoutingSummary
5. Exercise 2: Book Library—Your First RESTful Backbone.js App
Setting UpCreating the Model, Collection, Views, and AppWiring in the InterfaceAdding ModelsRemoving ModelsCreating the BackendInstall Node.js, npm, and MongoDBInstall Node ModulesCreate a Simple Web ServerConnect to the DatabaseTalking to the ServerSummary
6. Backbone Extensions
MarionetteJS (Backbone.Marionette)Boilerplate Rendering CodeReducing Boilerplate with Marionette.ItemViewMemory ManagementRegion ManagementMarionette Todo AppTodoMVC.jsTodoMVC.Layout.jsTodoMVC.TodoList.jsControllersCompositeViewTodoMVC.TodoList.Views.jsTodos.jsIs the Marionette Implementation of the Todo App More Maintainable?Marionette and FlexibilityAnd So Much MoreThoraxHello WorldEmbedding Child ViewsView Helperscollection HelperCustom HTML Data AttributesThorax ResourcesSummary
7. Common Problems and Solutions
Working with Nested ViewsProblemSolution 1Solution 2Solution 3Solution 4Managing Models in Nested ViewsProblemSolutionRendering a Parent View from a Child ViewProblemSolutionDisposing View HierarchiesProblemSolutionRendering View HierarchiesProblemSolutionWorking with Nested Models or CollectionsProblemSolutionBetter Model Property ValidationProblemSolutionBackbone.validateAllBackbone.ValidationForm-Specific Validation ClassesAvoiding Conflicts with Multiple Backbone VersionsProblemSolutionBuilding Model and View HierarchiesProblemSolutionCalling Overridden MethodsBackbone-SuperEvent Aggregators and MediatorsProblemSolutionEvent AggregatorBackbone’s event aggregatorjQuery’s event aggregatorMediatorA mediator for BackboneSimilarities and DifferencesEventsThird-party objectsRelationships: When to Use WhichEvent aggregator useMediator useEvent Aggregator and Mediator TogetherPattern Language: Semantics
8. Modular Development
Organizing Modules with RequireJS and AMDMaintainability Problems with Multiple Script FilesNeed for Better Dependency ManagementAsynchronous Module Definition (AMD)Writing AMD Modules with RequireJSAlternate syntaxGetting Started with RequireJSRequireJS configurationRequireJS ShimsCustom pathsRequire.js and Backbone ExamplesWrapping models, views, and other components with AMDKeeping Your Templates External Using RequireJS and the Text Plug-inOptimizing Backbone Apps for Production with the RequireJS OptimizerSummary

9. Exercise 3: Your First Modular Backbone and RequireJS App
OverviewMarkupConfiguration OptionsModularizing Our Models, Views, and CollectionsRoute-Based Module LoadingJSON-Based Module ConfigurationModule Loader RouterUsing NodeJS to Handle pushStateAn Asset Package Alternative for Dependency Management
10. Paginating Backbone.js Requests and Collections
Backbone.PaginatorLive ExamplesPaginator.requestPagerConvenience MethodsPaginator.clientPagerConvenience MethodsImplementation NotesPlug-insBootstrappingStylingSummary
11. Backbone Boilerplate and Grunt-BBB
Getting StartedCreating a New Projectindex.htmlconfig.jsmain.jsapp.jsCreating Backbone Boilerplate Modulesrouter.jsOther Useful Tools and ProjectsYeomanBackbone DevToolsSummary
12. Backbone and jQuery Mobile
Mobile App Development with jQuery MobileThe Principle of Progressive Widget Enhancement by jQMobileUnderstanding jQuery Mobile NavigationBasic Backbone App Setup for jQuery MobileWorkflow with Backbone and jQueryMobileRouting to a Concrete View Page, Inheriting from BasicViewManagement of Mobile Page TemplatesDOM Management and $.mobile.changePageApplying Advanced jQM Techniques to BackboneDynamic DOM ScriptingIntercepting jQuery Mobile EventsPerformanceClever Multiplatform Support Management
13. Jasmine
Behavior-Driven DevelopmentSuites, Specs, and SpiesbeforeEach() and afterEach()Shared ScopeGetting Set UpTDD with BackboneModelsCollectionsViewsView TestingInitial setupView renderingRendering with a templating systemExerciseFurther ReadingSummary
14. QUnit
Getting Set UpSample HTML with QUnit-Compatible MarkupAssertionsBasic Test Case Using test( name, callback )Comparing the Actual Output of a Function Against the Expected OutputAdding Structure to AssertionsBasic QUnit ModulesUsing setup() and teardown()Using setup() and teardown() for Instantiation and Clean UpAssertion ExamplesFixturesFixtures ExampleAsynchronous Code
15. SinonJS
What Is SinonJS?Basic SpiesSpying on Existing FunctionsInspection InterfaceMatching arguments: Test that a spy was called with a specific set of argumentsStricter argument matching: Test that a spy was called at least once with specific arguments and no othersTesting call order: Test that a spy was called before or after another spyMatch execution counts: Test that a spy was called a specific number of timesStubs and MocksStubsMocksExerciseModelsCollectionsViewsAppFurther Reading and Resources
16. Conclusions
A. Further Learning
A Simple JavaScript MVC ImplementationEvent SystemModelsViewsControllersPractical UsageMVPModels, Views, and PresentersMVP or MVC?MVC, MVP, and Backbone.jsNamespacingWhat Is Namespacing?Single global variablesObject literalsNested namespacingWhat Does DocumentCloud Use?RecommendationBackbone Dependency DetailsDOM ManipulationUtilitiesRESTful PersistenceRoutingBackbone Versus Other Libraries and Frameworks
B. Resources
Books and CoursesExtensions/Libraries
Index
About the Author
Colophon
Copyright

Content preview from Developing Backbone.js Applications

Chapter 4. Exercise 1: Todos—Your First Backbone.js App

Now that we’ve covered fundamentals, let’s write our first Backbone.js application. We’ll build the Backbone Todo List application exhibited on TodoMVC.com. Building a todo list is a great way to learn Backbone’s conventions (see Figure 4-1). It’s a relatively simple application, yet technical challenges surrounding binding, persisting model data, routing, and template rendering provide opportunities to illustrate some core Backbone features.

Let’s consider the application’s architecture at a high level. We’ll need:

A Todo model to describe individual todo items
A TodoList collection to store and persist todos
A way of creating todos
A way to display a listing of todos
A way to edit existing todos
A way to mark a todo as completed
A way to delete todos
A way to filter the items that have been completed or are remaining

Figure 4-1. A todo list—the first Backbone.js application we will be writing

Essentially, these features are classic CRUD (create, read, update, delete) methods. Let’s get started!

Static HTML

We’ll place all of our HTML in a single file named index.html.

Header and Scripts

First, we’ll set up the header and the basic application dependencies: jQuery, Underscore, Backbone.js, and the Backbone localStorage adapter.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449328535Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design