Mastering Backbone.js

Book Image

Mastering Backbone.js

By : Abiee Echamea

Book Image

Mastering Backbone.js

By: Abiee Echamea

Overview of this book

Backbone.js is a popular library to build single page applications used by many start-ups around the world because of its flexibility, robustness and simplicity. It allows you to bring your own tools and libraries to make amazing webapps with your own rules. However, due to its flexibility it is not always easy to create scalable applications with it. By learning the best practices and project organization you will be able to create maintainable and scalable web applications with Backbone.js. With this book you will start right from organizing your Backbone.js application to learn where to put each module and how to wire them. From organizing your code in a logical and physical way, you will go on to delimit view responsibilities and work with complex layouts. Synchronizing models in a two-way binding can be difficult and with sub resources attached it can be even worse. The next chapter will explain strategies for how to deal with these models. The following chapters will help you to manage module dependencies on your projects, explore strategies to upload files to a RESTful API and store information directly in the browser for using it with Backbone.js. After testing your application, you are ready to deploy it to your production environment. The final chapter will cover different flavors of authorization. The Backbone.js library can be difficult to master, but in this book you will get the necessary skill set to create applications with it, and you will be able to use any other library you want in your stack.

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Free Chapter

1. Architecture of a Backbone application

1. Architecture of a Backbone application

Subapplications based architecture

Responsibilities of Backbone objects

Objects not provided by Backbone

Contacts application

2. Managing Views

2. Managing Views

Identifying view types

Putting it all together

Rendering third-party plugins

3. Model Bindings

3. Model Bindings

Two-way binding

Data binding with plugins

Binding embedded data

Validating model data

4. Modular Code

4. Modular Code

CommonJS modules

NPM and package.json

Application dependency

Using Browserify in the app

Modularizing templates

5. Dealing with Files

5. Dealing with Files

Attaching a file into a resource

Uploading the avatar photo to contacts

Uploading images from Backbone

Uploading the avatar image at creation time

Encoding the upload file

6. Store data in the Browser

6. Store data in the Browser

The localStorage

Backbone and localStorage

Store models in localStorage

Store Backbone models in localStorage

IndexedDB in Backbone

7. Build Like a Pro

7. Build Like a Pro

Development workflow

What's a task runner?

Getting started with Gulp

Creating a development workflow

Creating a production workflow

8. Testing Backbone Applications

8. Testing Backbone Applications

Getting started with Jasmine

Karma test runner

What and how to test Backbone applications

Testing models and collections

Testing controllers

Testing the subapplication Façade

9. Deploying to Production

9. Deploying to Production

Production environment

The HTTP Server

Do not run as root

Process Management

10. Authentication

10. Authentication

Stateless API authentication

Implementing HTTP Basic Authentication

Implementing OAuth authentication

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Manual binding

To make it simple, imagine that we have a form with a simple layout: name, phone, and an email address:

<script id="form-template" type="text/template">
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" class="form-control" type="text"
value="<%= name %>" />
</div>
<div class="form-group">
<label for="phone">Name</label>
<input id="phone" class="form-control" type="text"
value="<%= phone %>" />
</div>
<div class="form-group">
<label for="email">Name</label>
<input id="email" class="form-control" type="text"
value="<%= email %>" />
</div>
<button type="submit"class="btn btn-default">Save now</button>
</form>
</script>

<script id="preview-template" type="text/template">
<h3><%= name %></h3>
<ul>
<li><%= phone %></li>
<li><%= email %></li>...