Learn Backbone.js Completely

»jan. 14 Last Year 94

(More Than Just a Complete Backbone.js Tutorial)

Duration: 25 to 30 hours
Prerequisite: JavaScript knowledge of 5/10

Below, I provide you with a comprehensive study guide that I myself have used (indeed, I have refined it for this article) to learn Backbone.js properly. This study guide should take just about 30 hours to complete.

Six Courses Coming Soon (Updated)

Don't learn JavaScript, Meteor, Node, Backbone, or any other web-dev technologies until you see our course offering or at least until you use our Modern Developer Technology Guide to determine which specific set of technologies you need to learn and use to accomplish your goals. Both are coming soon.

Get a Complete Web-Dev Education

Each course is part of a Career Path, a complete web dev education. About 3 to 6 courses make up a Career Path. Note the following Career Paths you can choose from:

  • jQuery Developer/Designer, Junior Front-end Developer, Web Developer, or JavaScript Developer (2 courses)
  • The Modern Front-end Developer (3 courses)
  • Designer to Developer: Designer Building a Startup (3–4 courses)
  • The Front-end-Framework-Equipped Modern Front-end Developer (4 courses)
  • Full-stack Modern Developer (4–6 courses)
  • Startup-Bound Developer (Build complex database-driven startups like Facebook and Twitter) (4–6 courses)
  • HTML5/JavaScript Mobile Developer (Build mobile apps for Android and iOS using your JavaScript skills)
  • iOS Developer (Build native iPhone/iPad apps)

First Ever JavaScriptIsSexy.com Courses

In a few weeks, look out for six comprehensive courses, unlike any you can find elsewhere online. Our Career Paths provide the best value—more comprehensive (we teach you everything), more relevant (latest and most apt technologies), and more affordable (~90% less than programming boot camps; ~99% less than college) than other similar courses, online or offline. You will learn more about modern web development (in 4–6 months) in our Career Paths than you would at any 4-year university.
  1. Course 1: Essential JavaScript and Modern Web Application Development

    You can't develop modern applications with just JavaScript.

    What You Will Learn
    In this course, you will learn beginning to intermediate JavaScript along with all the relevant and necessary technologies and tools to develop complete modern web applications on the front end. Note that JavaScript by itself is just about 35% of what you have to learn to develop modern web applications, even simple web applications.

    Who Is this Course For?
    — Anyone with at least some high school education
    — No programming experience necessary

    You will be able to develop complete moderately complex front-end web applications using JavaScript and other tools and technologies.

  2. Course 2: Mastering JavaScript and Modern Web Application Development

    Become a proficient modern JavaScript developer.

    What You Will Learn
    In this course, you will learn intermediate to advanced JavaScript along with all the relevant and necessary (intermediate to advanced) technologies and tools to develop complex modern web applications, though not database-driven apps.

    Who Is this Course For?
    — Completed at least the "essential" course

    What will graduating from this course allow you to do?
    Work as a jQuery Developer/Designer, Junior Front-end Developer, Web Developer, or JavaScript Developer. JavaScript and Web Developers with similar expertise can easily make $70,000 a year. (Salary varies by city and developer's expertise and experience.)

  3. Course 3: The Modern Front-end Developer

    Become a qualified Front-end Developer and make a huge salary or develop your own startup—if you take the "Skip-the-backend" course.

    What You Will Learn
    In this course, you will learn everything (except a specific front-end framework; see the next course) you need to learn to become a highly qualified Front-end Developer. You will learn not just JavaScript, but all the latest technologies and tools that modern front-end developers must know.

    Who is this course for?
    — Completed course 1
    — And graduated from course 2

    What Will Graduating from This Course Allow You to Do?
    Front-end developers are in high demand, perhaps more so than any other programmers, and they make more than $80,000 a year. (Salary varies by city and developer's expertise and experience.)

    We will prepare you for jobs and connect you with agencies and employers, when you graduate from the "Front-end Career Path."

    Of course you will be able to develop your own startup as well, if you take the "Skip the backend" course after this course.

  4. Course 5: Front-end-Framework-Equipped Modern Front-end Developer (Choose either React, Angular, Backbone, OR Ember)

    We will help you choose the best front-end framework for you. Don't waste time learning a front-end framework that's not for you.

    Advanced front-end developers with experience using at least one of the four noted front-end frameworks are undoubtedly the hottest (highly sought after) developers today. They make between $70K and $160K+. (Salary varies by city and developer's expertise and experience.)

  5. Course 6: The Modern Full-stack Developer

    Learn the technologies you need to know to become a qualified and successful full-stack JavaScript developer.

    What You Will Learn
    You will learn all the tools, skills, and technologies necessary to become a full-stack JavaScript developer.

    Who Is this Course For?
    — Completed the first three courses

    What Will Graduating from This Course Allow You to Do?
    You will be in high demand as a full-stack JavaScript developer, making between $70,000 and $160,000+ a year. You will be able to develop any kind of startup comfortably. (Salary varies by city and developer's expertise and experience.)

  6. Other courses are coming later, including a "Skip-the-Backend" course, courses on developing mobile apps for iOS and Android using JavaScript, and a course on developing iOS apps using Swift and other Apple technologies.

What Can You Do Right Now?

  1. First, enter you email in the "Receive Updates" form above.
  2. Then, use the Contact form to (a) request features, (b) make suggestions, or (c) ask questions. We want to make our courses the best courses, the best value, the most rewarding. We need your help to do that.

When Specifically Will the Courses Begin?

We will release the course web site, with more detailed information, in about 3–4 weeks (most likely in January). You can enroll in classes then.

The first set of courses may begin to roll out in February.

How Much Will Each Course Cost?

While we haven't finalized the cost for each course, I do know that we have different prices for the courses. For example, Course 1 will cost less than the Front-end course. Moreover, the cost per course will definitely be affordable to the working class. I will make certain the courses are affordable for most people. I will fight to keep Course 1 under $200, though I can't promise that I will win.

Get Ready! Between now and Christmas, enjoy the down time because, when our courses begin, they will kick your butt into web-dev shape. So get ready to work hard, build cool stuff, change the world (you will), and realize your dreams.

After I learned Backbone.js, the first application I built was an eCommerce web application for a client—a startup. I built the entire app, including the shopping cart, with Backbone.js and Node.js.

  • Receive Updates

Backbone.js Is Friendly
Backbone.js is neither difficult to learn nor difficult to use, and the time you will spend learning to use this serviceable framework will be well worth it, for you will learn how to use one of the most popular front-end frameworks and learn how to build modern web applications on the front end. In addition, you will see your market value as a JavaScript developer rise, since Backbone.js developers are in high demand.

Before we Continue
I should note that Angular.js and Ember.js are robust and feature-rich front-end frameworks that offer more than Backbone.js, and they allow you to develop applications with less code than Backbone.js. Nonetheless, I still think developers should learn Backbone.js first, particularly because it is easier to learn and provides you with a solid understanding of what a JavaScript framework is and how a JavaScript framework functions.

I chose Backbone.js for the aforementioned eCommerce web application because I had only a few days to learn a JS framework and I needed a proven JS framework since I was developing a web application for a client. And at that time (around 2012) Backbone.js had the more thorough documentation and the most active community of all the front-end JavaScript frameworks. In addition, Backbone.js had the most impressive list of real websites and web applications built with the framework.

What is Backbone.js and Why You Should Learn It

If you have never used a JS front-end framework before, you will understand why nearly every modern web application uses a front-end JS framework.

  • Receive Updates

What is Backbone.js?
Backbone.js is a JavaScript front-end framework that provides the structure and organization for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface (the HTML/CSS elements seen on the web page). Simply put, Backbone.js allows us to develop applications, the front-end in particular, much easier and better (more scalable, reusable, and modular code) than using just a bunch of related and unrelated JavaScript functions stacked on top of each other, a concept known as Vanilla JavaScript.

Why Learn Backbone.js
You should learn Backbone.js if:

You do not already use a front-end JavaScript framework and you intend to develop single-page web applications or complex JavaScript web applications.
  • You want to start programming JavaScript in a more organized, structured manner, eschewing the old way of having all of your JavaScript code mixed with HTML and without separation of concerns (that is, the logic, the data, and the presentation aren’t sufficiently decoupled).

Get The Two Backbone.js eBooks (one free one very cheap—$4.99)

  1. First, download a free copy of Addy Osmani’s Developing Backbone.js Applications

    Addy Osmani is a prolific writer who writes book-length blog posts and articles on web technologies and programming, particularly JavaScript. He has written on a myriad of JavaScript topics and just about all of his works are available online for free. However, since his book Developing Backbone.js Applications is only $15.81, I recommend you own a copy and keep it as a reference; you will need it. 

You can order it on Amazon.

  2. Instead of the Addy’s book, you can buy the book “Backbone Tutorials” at the link below:


    Note that most of this article focuses on the Developing Backbone.js Applications book, but you can use Backbone Tutorials; just follow along with the relevant topics, accordingly.

Roadmap to Mastering Backbone.js

All the links below open in a new tab, so that you can read the articles and quickly come back and follow the study guide.

  1. If you already know JavaScript well, and you feel invincible when you sit to code in JavaScript, carry on with step 2 below.

    If you don’t know JavaScript well enough to develop a full, interactive quiz application with just JavaScript (no jQuery), you should learn JavaScript Properly.

    If you know enough JavaScript and want to proceed, but you feel you need a JavaScript refresher, read these 3 articles (in the order they are listed):
    JavaScript Objects in Detail

    JavaScript Variable Scope and Hoisting Explained

    — (Must Read
) Understand JavaScript Closures With Ease

  2. Read the following 4 blog posts for the conceptual understanding of Model, View, Router, and Collections:
    What is a model?
    What is a view?
    What is a router?
    What is a collection?
  3. Read the entire tutorial at the link below (note that it is a bit old, but still valid) and study and understand it carefully, but don’t try to build the app just yet:
    Backbone.js Wine Cellar Tutorial — Part 1: Getting Started
  4. Read Developing Backbone.js Applications from the beginning (Prelude) to the Backbone Basics chapter.
  5. Read these 2 blog posts:
    The Responsibilities Of The Various Pieces Of Backbone.js
    3 Stages Of A Backbone Application’s Startup
  6. You should be able to build the simple Backbone.js application you studied in section 3 above. Return to that tutorial and build the application.
  7. Return to Developing Backbone.js Applications and read the Exercise 1 chapter (and build the application), then read the chapter titled Common Problems & Solutions followed by the chapter Exercise 2 (and build the application in exercise 2).
  8. Read the Modular Development chapter and build whichever application(s) you want to build from this chapter. You needn’t build all of the example applications.
  9. Follow these two tutorials (these are a bit old too, but still accurate):
Backbone.js Wine Cellar Tutorial — Part 2: CRUD
Backbone.js Lessons Learned and Improved Sample App
 (This is a MUST READ)
  10. These are 4 MUST READ articles:
    — (Learn how to communicate among views and subviews)
    References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js
    Revisiting The Backbone Event Aggregator: Lessons Learned
    — (Managing Page Transitions In Backbone Apps)
    Learn How to transition between views and how to properly dispose of views
Zombies! RUN!
    Why Should I Use Backbone.Marionette Instead Of … ?

That’s It! (Almost)

At this juncture, you have learned enough to build any Backbone.js application: you have gone from absolute beginner to attainment in under 30 hours, if you stayed the course.

But to really understand and retain what you have learned, you must build a real, single-page web application.

11. If you are involved with backend as well as front-end development, you should read either my post Learn Node.js Completely and with Confidence or Learn Meteor.js Properly. After you learn either, you will be able to build complete modern web applications.

12. With a complete understanding of Node.js and Backbone.js (or with Meteor.js), you will be ready to build any type of web application. You can also build a startup at this juncture, if you are intrepid.

If on the other hand you only develop on the front end, you should learn Angular.js or Ember.js, if you want a high-paying front-end developer job. Also, consider Facebook’s React.js (a new front-end framework), which some large Silicon Valley firms and other companies are using today.

But before you head off on your adventure, build the NodeApp web application at the link below; this exercise provides a real-world exercise in Node.js/Backbone.js web application development:

Important Extras

  1. Read the following chapters in Developing Backbone.js Applications to further advance your knowledge on the Backbone.js ecosystem:
    — Backbone Extensions
    — Backbone Boilerplate And Grunt-BBB
    — Mobile Applications
    — Unit Testing
  2. Learn Handlebars Templating Engine
    Handlebars templating engine is much more robust and feature rich than the simple template engine bundled with Backbone.js (The template used in Backbone.js by default is from the Underscore.js library, and Underscore.js is Backbone.js’s lone dependency).
    Read my post, Handlebars.js Tutorial: Learn Everything About Handlebars.js JavaScript Templating.

The Backbone.js Documentation is Great; You Will Use it Often

Once you start developing on your own, you will find yourself making frequent stops to the Backbone.js documentation. This will likely be the website you visit most often, when you need help figuring out how to do any myriad of things while developing a Backbone.js application. Here is the link:

Be good. Sleep well. And enjoy coding.

Leave a Reply

Current ye@r *