Full Stack Web Development with Backbone.js

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 of 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 via http://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.

Feedback and Code Examples

As Backbone.js has its roots in open source software development, feedback and discussion about the presented material is highly appreciated.

The book website will collect all libraries that are mentioned in this book. Also, there will be references to interesting blog posts about the topics from the book.

As the book examples will be hosted on GitHub, you can either leave an issue on GitHub under https://github.com/pipefishbook/pipefishbook.github.io, or send an email to [e-mail].

Using Code Examples

As just noted, supplemental material (code examples, exercises, etc.) is available for download at https://github.com/pipefishbook.

This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Developing Web Applications with Backbone.js by Patrick Mulder (O’Reilly). Copyright 2014 Patrick Mulder, 978-1-449-37098-5.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of plans and pricing for enterprise, government, education, and individuals.

Members have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/dwa-backbone.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

This book wouldn’t have been possible without the help of many hands. First, there were the JavaScript pair programming sessions I did with Béla Varga, who is involved in a number of communities for JavaScript development (MunichJS, Coding Dojo), and helped me a lot changing my Ruby-developer biased view on JavaScript.

I want to thank Andrea Notari, Daniele Bertella, and Aurélie Mercier for investing time in a side project that led to experimenting with Backbone.js in the first place. We are trying to make digital work more accessible and transparent.

Thanks for valuable feedback and discussion from Lucas Dohmen, Michael Hackstein, Mathias Lafeldt, Radoslav Stankov, Colin Megill, Eric Trom, Ryan Eastridge, Mike Dvorkin, Martin Gausby, Jeremy Morrell, Jean Carlos Menino, Axel Rauschmayer, Philip Fehre, Roman Sladeczek, Laust Rud Jacobson, Yi Cao, Dave Cadwallader, Nikhilesh Katakam, Patrick Dubroy, Ted Han, Jeremy Ashkenas, Jason Crawford, Peter de Croos, Adam Krebs, Tim Griesser, Sara Robinson, Kevin Sweeney, Petka Antonov, Gorgi Kosev, Marco Ricardo Castañeda, and Stephen McGrath.

Thanks to Dominik Oslizlo for sharing helpful feedback on interface design.

I want to thank my colleagues at Fidor and the people I met at meetups and user groups for supporting me during the project, asking questions or providing helpful directions.

I want to thank my friends and family, who let me write and experiment with JavaScript while I could have been enjoying their company.

If the essence of writing is rewriting, I want to thank my reviewers and editors for helping me during that process of improving the manuscript. A special thanks to my technical reviewers Manuela Mitterdorfer, Garrett Allen, Josh Habdas, Will Mruzek, Sam Saccone, and Jake Buob of MojoTech. Your feedback raised many interesting questions, and I hope that you like the final outcome.

Special thanks to my editor Brian MacDonald at O’Reilly. Your patience and feedback during the writing process were greatly appreciated.

Also, I want to thank Simon St. Laurent and Meg Blanchette for the initial supporting work for this book at O’Reilly. For providing great support in the last stages, I want to thank Jasmine Kwityn and Kara Ebrahim.

Last, I want to thank Béatrice for her love and sense for aesthetics outside of the digital world.