Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Backbone Tutorial: Learn Backbonejs from Scratch

Name: Backbone Tutorial: Learn Backbonejs from Scratch
Rating: 4.6 (2057 reviews)

A collection of hands-on, step-by-step, bite-sized Backbone tutorials covering fundamentals of Backbone.

Created byMosh Hamedani

Last updated 4/2018

English

English [Auto],

What you'll learn

Write clean, perfectly-structured, maintainable and testable Javascript code
Build rich client applications with Backbone.js
Build Single Page Applications with Backbone.js
Test Javascript code with Jasmine.js
Moduarlize Javascript code with Require.js

Course content

12 sections • 60 lectures • 4h 50m total length

Introduction1:20
Start with a novice-friendly backbone.js introduction and progress through a step-by-step journey that builds real-world skills with JavaScript, jQuery, unit testing, and modularization.
Who is Your Instructor?1:51
Meet an experienced Backbone.js instructor sharing two and a half years of hands-on practice building a social network’s news feed and messaging system.
How is This Course Structured1:31
Learn Backbone fundamentals through baby-step lessons, with section intros, progressive lectures, cheat sheets, and hands-on mini projects, building a real-world Backbone app from scratch while covering best practices and refactoring.
Asking Questions0:33

What is Backbone.js?3:11
We cover what Backbone is and what you can do with it. We also touch on MVC and Single Page Applications architectural styles.
The Big Picture1:00
We cover the basic building blocks of Backbone.js applications and what they are used for: Events, Models, Collections, View and Routers.
A Real-World Example1:57
We see a real-world example of an application built with Backbone.js along with a quick technical analysis of its underlying architecture. You'll learn how various building blocks of Backbone can be used in a real-world scenario.
Getting Backbone.js1:44
Explore Backbone.js's lightweight framework, its hard dependency underscore.js, and access development, production, and edge builds; download a boilerplate template with dependencies including jQuery and Json to JS for older IE.
Source Codes0:07

Introduction2:32
Learn how backbone models manage application data with change tracking, attributes, and validation, and sync with servers via ajax, avoiding spaghetti calls by using model methods.
Creating Models2:50
We cover the basics of Backbone Models and how they are different from Javascript objects. You'll learn how to create and instantiate a Backbone Model.
Working with Attributes4:51
We cover how to get, set and remove attributes on Backbone Models.
Validation2:27
We cover how to add validation to a Backbone Model and how to return error messages when a model is invalid.
Inheritance2:43
We cover how you can extend existing models to create an inheritance hierarchy. We also cover how to override methods in the child model types as well as how to call into the methods in the base class
Connecting to the Server5:13
We cover how to synchronise Backbone Models with the server via RESTful API. You'll learn about the fetch, save and destroy methods in detail.
Models Cheat Sheet2:00
Models Project2:00

Introduction0:57
Explore backbone collections, a list of models like tweets, and learn to retrieve them from a restful API. Practice adding, removing, searching, and iterating collections in real-world applications.
Creating Collections4:18
Extend Backbone collection to manage an ordered group of models, add models when instantiating or via add, access with get, and remove with remove, using underscore utilities.
Working with Collections7:05
Connecting to the Server1:32
Learn how backbone models and collections interact with a server via a restful API. Specify the url, call fetch to perform an http get, and handle success and error callbacks.
Collections Cheat Sheet2:00
Collections Project2:00

Introduction1:55
Explore backbone views and learn how a view renders content and responds to model changes and dom events, using a Pinterest-like pin model and pins collection with templating.
Creating Views7:50
Create and render backbone views that respond to events, by extending the backbone view and implementing render within a dom element, using jQuery for insertion and chaining.
Passing Data to Views6:40
Pass a song model to a Backbone view to render its title, and render a collection of songs with a semantic ul/li list in the DOM.
Handling DOM Events5:25
Register dom event handlers in Backbone views using the events hash, adding listen and bookmark buttons, and use stop propagation to keep handlers specific and maintainable.
Handling Model Events4:15
Handling Collection Events9:37
Learn how Backbone collections trigger add and remove events and how to update views automatically by listening to these events, appending or removing items in the DOM.
Templating5:55
Learn to render complex markup with underscore templating in backbone views by compiling templates in a script tag and passing the model as json.
Views Cheat Sheet4:00
Views Project2:00

Introduction0:34
Explore backbone routers and how they power single page applications by managing the browser address and displaying different views on one page.
Creating Routers16:40
Create a Backbone router to manage client-side routes, render views like albums, artists, and genres, and update the browser address without full page reloads.
Single Page Applications Pros and Cons2:34
Single-page applications offer fast, smooth user experiences, like Gmail. They incur complexity and SEO challenges, and may require hybrid architectures; backbone can create structured rich client apps without routers.
Routers Cheat Sheet3:00
Routers Project2:00

Introduction0:37
Learn how to modularize backbone applications instead of placing all code in a single Main.js file. The lecture highlights the maintenance challenges of one-file code in real-world applications.
Require.JS13:12
Learn to modularize a Backbone application using RequireJS and AMD, organizing models, views, and app logic into separate modules loaded asynchronously for a clean, maintainable codebase.

Introduction1:10
Introduction to Jasmine15:44
Explore Jasmine, a self-contained behavior driven development framework for testing JavaScript, and learn to create suites and specs, use spies, and organize source and test code with describe and it.
Jasmine Cheat Sheet2:00
Testing Backbone Models6:01
Test backbone models with minimal dependencies, focusing on default values, validation, and state-changing methods. Write specs for a song model’s url root, defaults, and a play method that increments plays.
Testing Backbone Collections5:18
Testing Backbone Views18:52

Introduction0:54
Basics15:41
Explore the basics of Backbone by building a model, a collection, and views to render todo items, with baby steps and defensive checks to prevent runtime errors.
Adding a New Todo Item16:39
Toggling an Item12:18
Toggle a todo item in Backbone by adding a checkbox, updating item's completed state with a toggle method, and rendering a line-through by a view that responds to model changes.
Deleting an Item9:06
Connecting to the Server11:35
Templating6:10
Improving the Look and Feel19:45

Requirements

Only basic understanding of Javascript and jQuery

Description

Want to learn how to write clean, maintainable, testable Javascript code?

There are many libraries and frameworks to help you structure your Javascript code. BackboneJS is one of them.

In this course, I'll take you on a step-by-step journey to learn Backbone from novice to ninja. You'll learn everything you need to know to build structured and maintainable real-world applications with Backbone.

You don't need any prior knowledge of Backbone. Only basic understanding of Javascript and jQuery is enough to take this course.

We start with the big picture

You'll learn the basic building blocks of Backbone and what they are used for. Then, I'll show you a real-world example of an application built with Backbone and explain how those building blocks work together in action.

Then we start learning Backbone.js from scratch

Once you get the big picture, we start learning Backbone in a practical, hands-on way from scratch. Lectures are short, concise and up to the point, without wasting your time. I hate courses that waste students' time (with too much rambling) and I've done my best to make sure I won't waste your time in this course!

Each section includes:

An introduction that tells you what you're gonna learn
A few lectures, each teaching you new concepts, in a step-by-step fashion
A cheat sheet for you to quickly review what you've learned
A mini project or assignment for you to apply what you've learned

Next we get into the real-world challenges

Once we cover the fundamentals of Backbone, then we'll cover unit testing and modularising the code. You'll learn the basics of RequireJS and Jasmine.

And finally build an application from scratch

In the last section, we'll build an application with Backbone in an iterative way. With every iteration we enhance our app in a baby-step fashion. The before and after source code for each lecture is available for you to download to review or to complete on your own.

I'll share with you other tips to make you a better web developer

I've been a web developer since 2000. In the last section, I'll share with you lots of other tips on usability, productivity, clean coding, object-oriented programming, HTML, CSS, a little bit of security and many other things. These supplementary materials help you become a better web developer.

I'll show you many real-world examples

Throughout the course I touch on some popular web sites such as Facebook, Twitter, Pinterest, Four Square and Bitly and explain how you can make something like them with Backbone. So, by the end of this course, you'll have a good and in-depth understanding of Backbone and how to use it in building real-world applications.

What else will you get?

Lifetime access to course materials
New lectures, tips and tricks, absolutely free
Ask me any questions and I'll help you throughout your learning

What my students say:

"Mosh's course stands out as one of the best online courses I've ever taken, whether for Backbone or any other technology. Mosh's teaching style is unique. He leads the student logically through a progression of understanding in a manner akin to good unit testing." - David Handel

"This is one of the best courses I took o Udemy so far. Mosh is one of the best instructor as it is clear and it's evident that lessons are well prepared and not improvised. Thanks a lot!" -Andrea Salvatore

"Very good course, with crystal clear examples. Mosh is a very professional trainer and a magic developer. Thanks for your good job." Antonio Marqués Taltavull

What's the risk for you?

Absolutely nothing! This course comes with Udemy's 30-day money-back guarantee. Just take the course, watch the lectures, practice the assignments and if you're not happy, ask for a refund. You'll get all your money back, no questions asked.

So do you want to learn Backbone from scratch and write clean, structured, maintainable and testable Javascript code?

Take this course now and let's get started.

Who this course is for:

Any front-end developer who wants to write clean, structured, maintainable and testable Javascript code
Any front-end developer who wants to develop rich client applications

Backbone Tutorial: Learn Backbonejs from Scratch

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 5min

Getting Started5 lectures • 8min

Models8 lectures • 25min

Collections6 lectures • 18min

Views9 lectures • 48min

Events5 lectures • 21min

Routers5 lectures • 25min

Modularizing Backbone Applications2 lectures • 14min

Testing Backbone Applications6 lectures • 49min

Developing an App with Backbone8 lectures • 1hr 32min