O'Reilly logo

Full Stack Web Development with Backbone.js by Patrick Mulder

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Preface

Web users demand intuitive and responsive interfaces for browsing catalogs or tracking their finances. 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 can views be updated?

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 different 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 make you 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 design 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.

Since building single-page application involves more than just questions around interfaces, 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, towards friendlier and more scalable web applications. Especially, this book might be 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 maintenable and scalable application design is testing. However, testing JavaScript applications with e.g. 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, an editor and the command-line. If you prefer IDE’s, any IDE 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 VM running Unix to be able to better follow 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. Over the last years, 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 core library of their 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 online.

Second, you should get help with the climbing 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 feel the advantages of the Backbone ecosystem. It might help you adopting a mindset 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 scepticism. After all, in Ruby land, a lot of innovations were made, that contribute to the happiness and productivity of developers and businesses.

But as with any other framework and maturing applications, code bases become harder to maintain, and it is hard to redesign applications towards mobile clients and 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 brings new demands on concepts and data schemas to. 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 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 (public) resources available:

The JavaScript Garden
This is an open-source documentation on programming in JavaScript. This online resource might be a good help, if you want to answer or improve your understanding of e.g. closures, without consulting a book.
JavaScript: The Good parts
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
With this book, David Flanagan has composed some kind of bible for JavaScript development. He discusses the roles and many details of JavaScript for in browsers, and for server-side applications.
Speaking JS
This book by Dr. Axel Rauschmayr provides a complete introduction as well as a good overview on the evolution and a number of best practices around using JavaScript.

For readers that want to look further into JavaScript, there are a number of other interesting books. For example, JavaScript Patterns by Stoyan Stefanov, JavaScript Design Patterns by Addy Osmani, and JavaScript Cookbook by Shelley Powers contain a lot of helpful patterns to get you 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 will be helpful.

For readers who want to explore further advanced effects with DOM nodes, the book Supercharged JavaScript Graphics 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

  • With Developing Backbone.js Applications (or Backbone Fundamentals as it sometimes listed) 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 to 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 completion to this book if you want to have more of a reference book, and less of a full-story that stays with one application, as this book does. Addy’s audience is also more frontend developers, while this book includes also ideas and concepts for backend development.
  • Thoughtbot’s Backbone-JS-on-Rails, which is self-published. This book is great from Ruby-and-Rails perspective, since it shows 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.
  • Derrick Bailey is a well-known open-source contributor to different JavaScript projects, and has written Building Backbone plug-ins. Consult his book, if you want to delve more into writing Backbone plug-ins and re-usable code in general. Also, with Hands-on Backbone.js at The Pragmatic Programmers, Derrick has published a number of screencasts that might help more audio-visual inclined learners.
  • Also, Brian Mann’s screencasts on Marionette 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 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:

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 http://github.com/mulderp/pipefishbook, or send an email to .

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.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/oreillymedia/title_title.

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 .

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 product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers 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 dozens 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://oreil.ly/dwa-backbone.

To comment or ask technical questions about this book, send email to .

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. Béla 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 better accessible and more 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 Rauschmayr, 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.

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 enjoyed your company.

If the essence of writing is re-writing, I want to thank my reviewers and editors to keep me re-writing 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 book outcome.

Special thanks to my editor Brian MacDonald at O’Reilly. It was great to see your patience and have your feedback during the writing process.

Also, I want to thank Simon St. Laurent and Meg Blanchette for the initial supporting work for this book at O’Reilly.

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required