Full Stack Web Development with Backbone.js (2014)

Preface

Web users demand intuitive and responsive interfaces for tracking their finances and browsing catalogs. Unlike desktop or system applications, where interfaces are mostly built with flavors of C, C++, or Java, today’s web browsers only run JavaScript natively. But the same patterns that make graphical user interfaces successful on different platforms apply to JavaScript as well.

Many communities have formed around experimenting and developing ideas for the model-view-controller (MVC) pattern with JavaScript. It seems like every day there is a new idea about how MVC in web browsers should look and why other ideas won’t work for you.

In these turbulent times, the Backbone.js library stands out like a lighthouse. Unlike other approaches to JavaScript MVC, Backbone.js is very small and flexible. However, the main difference of Backbone.js compared to its peers is the Backbone “ecosystem.” Backbone’s philosophy of staying small gave birth to many plug-ins and a multitude of different, and some unique, use cases.

This rich ecosystem makes learning and understanding Backbone hard. If you are new to JavaScript, or if you have only built server-side web applications, you are faced with a number of problems. How do you combine views and the data layer with JavaScript? How do you abstract away JavaScript dependencies, such as Backbone plug-ins? How do you best serve and deploy JavaScript assets? But also, where is the “controller” in Backbone, or when are they used?

Answering these questions is one goal of this book. But Backbone.js really starts to shine when you learn to explore and engage with its rich ecosystem. First, there are many plug-ins for Backbone.js that can help you solve advanced UI problems. Second, build tools can help you to be more productive and also enable you to reuse ideas on both the client and server. This is my second goal: I want to show how a full-stack JavaScript application with Backbone.js can be built with the help of JavaScript modules, workflow automation, and the use Backbone plug-ins. For the backend, you will learn about basic API design ideas as well as perspectives on authentication.

Maybe you will be intimated by the variety of tools that you can use to develop Backbone.js web applications. The Backbone.js ecosystem is quite large, so not all choices of tools will work for you. However, I hope this book will help you to decide which tools will work best for the particular app you are working on.

If your JavaScript programming skills are a bit rusty, entering client-side application development can be a daunting adventure. I hope to provide a sort of basecamp from where you can explore different directions to build interactions within browsers and help you to understand the benefits of separating interface from application state.

In summary, we’ll cover:

§ How to quickly get started with a Backbone.js sandbox

§ How to manage data and state with Backbone.js models and collections

§ How to work with advanced view templates and Handlebars

§ How to use Backbone.js to browse data sources from an API

§ How to authenticate and authorize client-side interactions

§ How to improve productivity of a team with workflow automation and Backbone frameworks

Who This Book Is For

This book is written for readers coming from one of these backgrounds:

§ You are a backend developer with some experience in rendering web pages on the server. You are maybe impressed by the fast feedback from browser applications, or you want to build advanced browser interfaces for navigating and editing data in the browser.

§ You are a frontend developer with interests in single-page web applications or interactive widgets in web browsers. You maybe found jQuery not meeting your goals anymore and are looking to learn what Backbone.js is about.

§ You are a product manager or team lead that is responsible for making technology choices. If you want to understand where Backbone.js and JavaScript fit in your technolgoy stack, this book is for you.

Building single-page web applications involves more than just questions around interfaces, so this book also discusses basics of JavaScript modules, build approaches, and API backends. When scanning the table of contents this book, you might discover that JavaScript offers a number of interesting options.

Hopefully this book can show paths to structure web applications in a new way, toward friendlier and more scalable web applications. This book will be especially interesting to developers who want to learn approaches for using a user interfaces as a service, where frontend and backend services can be maintained and deployed independently.

Who This Book Is Not For

With Backbone.js, you have a lot of freedom to control interactions with documents based on JavaScript. The scope of the book is not avoiding JavaScript in the first place.

Other frameworks to build interactive documents such as Angular.js or Ember provide more abstractions and a high amount of “sugar” to build interfaces. However, the philosophy of this book is to pull in abstractions and dependencies when needed, and not start with those in the first place. This book should provide Backbone’s viewpoint on when and why certain abstractions are useful.

Related to maintainable and scalable application design is testing. Testing JavaScript applications with, for example, Jasmine or command-line tools is discussed in other specialized books and will be mentioned where appropriate.

Although the ideas from Backbone.js have quickly diffused into very interesting realms, such as highly interactive maps, system applications, browser extension, and hybrid applications for mobile phones, it is not possible to discuss all of these.

You will work mainly with the browser, a text editor, and the command line. If you prefer integrated development environments (IDEs), any one with support for JavaScript will do, such as Webstorms from Jetbrains or a version of Visual Studio with Node plug-ins. Also, Netbeans and Eclipse should support basic web development with JavaScript and HTML.

If you are on a Windows machine that does not support a Unix command line, you might want to install Cygwin or a virtual machine (VM) running Unix so that you can better follow along with the examples.

What This Book Will Do for You

The first goal of this book is to help you understand the different use cases of Backbone.js. Since its first release in 2010, Backbone.js has built up a good reputation for improving the development of client-side web applications. There are a number of interesting projects and companies that use Backbone.js. For example, Walmart uses Backbone.js as the core library of its mobile shopping cart. Airbnb uses Backbone.js to let users and search engines browse available travel accomodations. DocumentCloud has built a document screening service with Backbone.js. There are many more examples, and you can find an interesting overview in the Examples section of the Backbone.js documentation.

Second, this book should help you climb the learning curve for getting things done on the client side. Many books target JavaScript frontend developers and leave out those having built server-side web applications. Other books stop the discussion when Backbone.js can be put to practical use in real applications.

Hopefully this book can provide a bridge from client-side to server-side concepts and help you understand the advantages of the Backbone ecosystem. You can then adopt a mind-set for JavaScript applications in general, on the client or in combination with server-side JavaScript.

Why I Wrote This Book

Working as a Ruby on Rails developer, I observed the JavaScript and NodeJS developments with some skepticism. After all, Ruby land created a lot of innovations that contribute to the happiness and productivity of developers and businesses.

But as with any other framework or maturing application, code bases become harder to maintain, and it is difficult to redesign applications toward mobile clients and maintain smooth interactions with data. It is here where the JavaScript community is heavily experimenting and solutions for building scalable architectures for mobile web applications emerge.

However, the user interface is just a layer in a larger application stack, and the design of interactions takes more than just patching existing web applications. JavaScript is a good choice to drive an application stack for web interactions, but it also brings new demands on concepts and data schemas. The goal of this book is to show how client-side applications can evolve from basic interaction ideas, and how more modular and maintainable web applications can be built.

Other Resources

To understand the perspectives in this book, you need a sound knowledge of JavaScript, browsers, and DOM manipulation, as well as a basic knowledge of web applications. Also, there are a number of resources available to go deeper into single-page application development.

The JavaScript Language

To learn JavaScript, there are a number of good resources available:

JavaScript Garden

This is an open source resource on programming in JavaScript. This online guide is a good place to turn to for improving your understanding of quirky aspects of the language without consulting a book.

JavaScript: The Good Parts by Douglas Crockford (O’Reilly/Yahoo! Press, 2008)

This book is a gentle introduction to the grammar and semantics of the JavaScript language. It can be read quite quickly and is referenced from many other sources too. So, if you are new to JavaScript, this book might be good to have.

JavaScript: The Definitive Guide, 6th Edition, by David Flanagan (O’Reilly, 2011)

Considered a bible for JavaScript development, this book discusses in detail the roles JavaScript plays in browsers and for server-side applications.

Speaking JavaScript: An In-Depth Guide for Programmers by Axel Rauschmayer (O’Reilly, 2014)

This book provides a complete introduction to JavaScript, as well as a good overview on its evolution and best practices for using it.

For readers who want to look further into JavaScript, there are a number of other interesting books. For example, JavaScript Patterns by Stoyan Stefanov (O’Reilly, 2010), Learning JavaScript Design Patterns by Addy Osmani (O’Reilly, 2012), and JavaScript Cookbook by Shelley Powers (O’Reilly, 2010) contain a lot of helpful patterns that can help you to be a better JavaScript developer.

jQuery and the DOM

For readers who need to grasp the basics for working with jQuery and the DOM, JavaScript and jQuery: The Missing Manual by David Sawyer McFarland (O’Reilly, 2011) will be helpful.

For readers who want to explore further advanced effects with DOM nodes, Supercharged JavaScript Graphics by Raffaele Cecco (O’Reilly, 2011) will be a very interesting read. This book discusses a lot of nice details on rendering and animation of DOM nodes in the browser.

Other Backbone.js Resources

If you want to consult additional resources that discuss Backbone.js specifically, the following list should get you started:

Developing Backbone.js Applications (O’Reilly, 2013)

With this book (also sometimes listed as Backbone Fundamentals), Addy Osmani has written one of the first books on Backbone.js. His book starts with an in-depth discussion of the MVC pattern and continues with a number of different Backbone examples, such as an editor of Todo lists and a small library editor. Addy’s book might be a good companion to this book, because it serves as more of a reference book, unlike this book’s more specialized approach that focuses on one particular application. Addy concentrates more on frontend development, while this book also includes ideas and concepts for backend development.

Thoughtbot’s Backbone.js on Rails

This self-published book is great from a Ruby on Rails perspective, because it includes a lot of Ruby code examples that are necessary to drive a Backbone.js frontend in Rails. It also does a nice job in discussing Jasmine and Capybara for frontend testing.

Building Backbone Plugins

Consult this book written by Derick Bailey and Jerome Gravel-Niquet if you want to delve more into writing Backbone plug-ins and reusable code in general. Also, with the Pragmatic Bookshelf’s Hands-on Backbone.js, Derick has published a number of screencasts that might help more audio-visual inclined learners.

BackboneRails.com

Brian Mann’s screencasts provide a great discussion of concepts and examples for developing client-side applications together with Ruby on Rails.

Last but not least, the source code of Backbone itself and of many Backbone plug-ins are good places to improve your understanding of Backbone details. The Backbone annotated source code is at http://backbonejs.org/docs/backbone.html, and Backbone plug-ins can be found viahttp://backplug.io/ and http://backboneindex.com/.

API References

Additionally, the documentation of JavaScript and the APIs will be helpful:

§ JavaScript general documentation

§ Documentation of jQuery

§ Underscore

§ Backbone

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

TIP

This element signifies a tip or suggestion.

NOTE

This element signifies a general note.

WARNING

This element indicates a warning or caution.